How to manage client-side JavaScript dependencies? [closed]

Answer 1

I use hem with npm, and I wanted to add some additional benefits that I think weren't covered so far.

• Hem has a self-contained web server (strata) so you can develop your code without even needing to recompile. I never use hem build unless I am publishing an app.
• You don't need to use Spine.js to use hem, you can use it to compile arbitrary coffeescript packages if you set up slug.json correctly. Here's one of my packages that is auto-compiled with cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Speaking of the above, hem allows you to link other dependencies on your local system in with npm link and combines them seamlessly even when you are using the strata server. In fact, you needn't even use the cake method above, you can just link directly to coffeescript from dependent projects.
• Hem supports eco (embedded Coffeescript) for views and Stylus for CSS, and compiles all that, along with your Coffeescript, into one JS and one CSS file.

Here's a basic list for getting set up with a Spine, hem, coffeescript app. Feel free to ignore the Spine parts. In fact, sometimes I use spine app to set up a directory structure for a non-Spine app, then edit slug.json to change to a different compilation structure.

1. Install NPM: curl http://npmjs.org/install.sh | sh on a *nix system. I'll assume it's available from the command line.
2. Install hem globally (npm install -g hem). Development has branched as of late so you might want to get it straight out of github (https://github.com/spine/hem), checkout a branch, and npm install -g . in that folder.
3. npm install -g spine.app will make spine available as a global command
4. spine app folder will make a Spine project called app in folder, generating the right directory structure and a bunch of skeleton files to get started.
5. cd to folder and edit dependencies.json for the libraries you need. Add them to slug.json so that hem knows where to find them as well.
6. Optional: npm link any of your local packages in development to node_modules, and you can add them to slug.json for hem (either an index.js to include directly or an index.coffee if you want hem to compile it.)
7. npm install . to download all the dependencies you just entered in.

8. If you take a look at the default spine config, there is a app/lib/setup.coffee where you require all the libraries you need from your dependencies. Examples:

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'
   

9. In index.coffee, you just require lib/setup and load the main controller for your app. In addition, you need to require any other classes in those other controllers. You can use spine controller something or spine model something to generate templates for controllers and models. Typical Spine controller looks like the following, using node's require:

   Spine = require('spine')
   # Require other controllers
   Payment = require('controllers/payment')
   
   class Header extends Spine.Controller
     constructor: ->
       # initialize the class
   
     active: ->
       super
       @render()
   
     render: ->
       # Pull down some eco files
       @html require('views/header')   
   
   # Makes this visible to other controllers    
   module.exports = Header
   

10. The default generated index.html will usually be fine for loading your app, but modify as necessary. Per your requirements, it only pulls in one js and one css file, which you never need to modify.

11. Edit your stylus files as necessary in the css folder. It's a lot more flexible than CSS :)
12. From folder, run hem server to start a hem server, and navigate to localhost:9294 to see your app. (If you installed hem globally.) It has some hidden arguments, for example --host 0.0.0.0 listens on all ports.
13. Build the rest of your app using proper MVC techniques, and use stylus for CSS and eco for views. Or don't use Spine at all, and hem will still work great with Coffeescript and npm. There are many examples of projects using both models.

One more thing: normally, hem server will update automatically as you update your code and save files, which makes it a cinch to debug. Running hem build will compile your app into two files, application.js, which is minified and application.css. If you run hem server after this, it will use those files and no longer update automatically. So don't hem build until you actually need a minified version of your app for deployment.

Additional references: Spine.js & hem getting started