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
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
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
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...
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
-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,
-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.
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 :)