In this first article of my series on marionetteify, I will go through the why I choose Browserify over RequireJS and how using it.

NPM: Node Packaged Modules

A little parenthesis on npm. When you have big project, you have a big vendors folder. And it is painful to keep those libraries up to date. That is why in a lot of environment you have a package manager. JavaScript got none a while ago. But with NodeJS comes npm, then bower for the front-end trying to mimic npm. At this time, npm could not easily be used for front-end development because there was no tools handling CommonJS alike modules, only AMD. Too bad, because I find npm more powerful, acting like a real package manager with a repository while can also consume github and local files. Browserify was the solution. It plays by default very well with node modules, handle by npm. This couple is like an evidence.

Browserify

On the TodoMVC project you have some good examples with module loaders. But there are all with RequireJS. AMD & RequireJS is a good way to keep your application organized, but I am just tired of RequireJS. Like M4nu and so many people, we see too many flows with the AMD way.

And ES6 is coming with module functionality, that is not helping. Like so many I like working with new shiny tools, and ES6 is so promising that I want it now. But even when it will be officially supported by some vendors, there will always be legacy browsers.

So Browserify. I tried once upon a time. I failed. Not because of Browserify, because of packages. Bower & npm was already there but packages played not well together. All the packages.json was incomplete or missing or messed up.

Today, jQuery, Backbone & Underscore releases are AMD / CJS compatible, Backbone.Marionette dependencies play well... and they are all available on npm. How can I resist to move from RequireJS? I just cannot.

So I did:

npm init
npm install backbone backbone.marionette jquery --save-dev

and start writing marionetteify

Build

So how it works? Very briefly, you just write your app.js like a NodeJS module.

// Vendors
var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var Marionette = require('backbone.marionette');

// app bootstrap
var app = new Marionette.Application();
// ...
app.start();
Backbone.history.start();

module.exports = app;

then you just build

browserify app.js > bundle.js

Transform

And there is more! Not only the code is shorter, more readable, without tons of configuration but it comes with one killer feature: transform, quite like RequireJS plugins system but... just more. More plugins, more simpler, more possibilities...

With the --transform or -t option and some great plugins you can load not only JavaScript CommonJS module but anything that have a transform plugin. Handlebars templates, coffeescript modules, AMD modules, ... 

browserify -t hbsfy -t coffeeify app.js > bundle.js

And voilà, you can require template in your application and write modules in coffeescript.

External & require

Browserify differ from RequireJS on that it is not an Asynchronous loader. You have to build your application to play with it. Some says building on each modification is not fast enough so using Browserify is painful. But eh: external & require

First with the --external or -x option you can tell Browserify to not fetch some module and build without those. See what's coming? You can build your application without the vendors. Hooo~~ fast, very fast, and very light.

Ok, but how to provide vendors module now? Yes, you got it, --require or -r option. You can build a bundle from nothing just by telling Browserify you want those modules inside.

To sum up, you build

browserify -t hbsfy -t coffeeify -x backbone -x backbone.marionette -x jquery src/app.js > dist/app.js
browserify -r backbone -r backbone.marionette -r jquery > dist/vendors.js

and you consume

<!doctype html>
<html>
    <body>
        <script src="dist/vendors.js"></script>
        <script src="dist/app.js"></script>
    </body>
</html>

That process will dramatically increased build time will coding.

Conclusion

So why Browserify?

  • quite close of ES6 module syntax
  • same NodeJS syntax
  • npm power! (63 857 packages and growing)
  • very simple but yet very powerful. External and require option are divine!
  • great people that build great plugins. Once we taste the transform option to load Handlebars template, coffeescript, AMD, ... you can not go back!
  • do not worry anymore about the A of AMD.

Just try it if you feel it can fit your needs, but you might not come back :)

browserify