Skip to content

Instantly share code, notes, and snippets.

@justinbmeyer
Created January 12, 2012 17:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justinbmeyer/1601981 to your computer and use it in GitHub Desktop.
Save justinbmeyer/1601981 to your computer and use it in GitHub Desktop.
You need a client-side dependency management and build system.

You need a client-side dependency management and build system. What I mean by this is:

A client-side script loader that does dependency management and can package your scripts for rapid download.

There are only 2 that I'm aware of that qualify are RequireJS and StealJS. There are 3 reason to use these systems:

  • Easy, Parallel, Isolated Development
  • Integrated Build Systems
  • They work on every system

I'll argue that although other systems can enable some of these patterns, none does it as wonderfully as StealJS or RequireJS. The other systems I compare against are:

  • script tags
  • server-side dependency management systems like Jawr or Sprockets
  • script loaders without build systems like yepnope, LabJS

Easy, Parallel, Isolated Development

You want to be able to develop each part of your app independently. For example, if I'm working on a slider, I don't want to fire up the entire app to develop it. Instead, I want to work just with the code for my slider, from the filesystem if possible. Here's an example:

Notice the development folder not only has the slider.js code, it has a demo page, test code, and a test page.

You'll also notice that slider.js has dependencies loaded with steal:

steal(
'jquery/controller', 
'jquery/event/drag/limit', 
'jquery/event/drag/step',
    function( $ ) { ... })

With this, I can load this slider (and its dependencies) into any other application as simply as:

steal('mxui/nav/slider')

Notice how I do not need to repeat my slider's dependencies as I would with a script tag.

Conclusions

  1. Some type of dependency management system is needed.
  2. Script tags are a non starter.
  3. Server side-systems won't work on the filesystem (but that's a minor issue).

Integrated Build Systems

For ideal performance, you need your JS and CSS to be minified into a limited number of scripts that can be downloaded in parallel.

This is where server-side build systems need script loaders and script loaders need server-side build systems. The server-side build system needs a script loader to do parallel and progressive loading while the script loader needs a server-side build system to minifiy and scripts. This can be tricky to wire up.

But, integrated systems like StealJS and RequireJS can wire this up for you. Consider StealJS's multi-build. If you provide it multiple applications, it will discover shared dependencies, and put them into separate packages, maximizing caching. And, it will make these packages download in parallel. It will shortly be able to do similar things with progressive loading.

Conclusion

The integration of script loader and build system makes it easier to get optimal load times.

It Works on Every System

The best reason to use StealJS or RequireJS is that your code will work everywhere. I work in many organizations that use some combination of Ruby, Python, Java, and PHP. Having dependencies encoded in JavaScript makes it easy to use code in multiple systems.

Concluding Conclusion

Blah

@justinbmeyer
Copy link
Author

I need to better describe why it works on every system is so important. It reduces risk that technologies change (of course I guess JS would change, but if that does, you'd probably have to change your build system anyway).

It also 'could' enable a world of better sharing. A 'gems' like system that makes it easy to import other code.

I think it's ability to work everywhere will make it 'better' over the long run. StealJS does things that no other build system does, only because it's used so many places.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment