I recently completed a new web app called Raffler that lets you take a list of items (usually names) and then “raffle” them (i.e. randomly choose one). It’s an extension of an older web app I made called Just Pick One, but except for some neat animation I added on the front-end design, the back-end logic was largely the same as always: one big honkin’
funcs.js file full of global variables and methods. Bad Mike, I know, I know, but it’s just how I function when I build from scratch.
Big Solution = EGADS
Both Angular and Meteor turn all of your disparate parts into
Due to this technical mountain I’d have to climb, I figured it was not going to be an efficient route for my app, and looked for something simpler.
Medium Solution = Almost There
Pulling back from the Big ones, we get a Medium solution in things like Express. Because Node is so barebones (on purpose, I assume), things like Express help to create some basic web app foundational things like templating, routing, and the like.
Express is not too difficult to understand, so it seemed like a winner. Still, using it would require some considerable rewriting of my setup, so I decided to go even simpler.
Small Solution = Just Right
funcs.js into more manageable pieces, but I couldn’t get it to work. Webpack is used by some of the above mentioned bigger frameworks, so I figured it would be overkill, and didn’t even try it. SystemJS, on the other hand, well…it just worked.
Essentially, I included SystemJS in my app, and then broke out parts like bootstrapping (the initial variables and methods needed to even get things going), main (most other app methods), helper (utility methods that get reused a lot), and effects (I use a few audio files and a neat firework display on a successful raffle).
Old Directory Tree
... |-- js |-- funcs.js |-- jquery.js |-- jquery-ui.js ... ...
New Directory Tree
... |-- js |-- app |-- bootstrap.js |-- fx.js |-- helper.js |-- main.js |-- lib |-- systemjs |-- jquery.js |-- jquery-ui.js ... ...
Much nicer, yeah?
I could break my app out into even more parts if I wanted, which is the appeal to using something like SystemJS, so I dig it and will most likely use it in a future project. To the end user, nothing changed, but for me, it’s a big difference. Maybe someday I’ll actually make something with one of the more complicated solutions, too, but you gotta start somewhere!