What is Browserify?
Browserify brings Node.js's require() function to client-side JavaScript. You can call require(...) to import npm packages, so Browserify solves two problems:- Client-side package management (by using npm)
- Loading modules
Benefits of Using Browserify
Browserify has some 'magic' built-in that allows you to easily re-use most server-side code in your client-side code.
Because npm handles package management for Browserify, you can specify (most) of your client-side dependencies in your package.json along with your server-side dependencies. In my experience, having one place for dependencies really simplifies the process of adding a new dependency. Otherwise, you have to choose which package manager you want to use for packages that are available through multiple managers.
Because npm handles package management for Browserify, you can specify (most) of your client-side dependencies in your package.json along with your server-side dependencies. In my experience, having one place for dependencies really simplifies the process of adding a new dependency. Otherwise, you have to choose which package manager you want to use for packages that are available through multiple managers.
Problems With Alternatives
Like everything in JavaScript development, there are alternatives to Browserify. RequireJS can be used to load modules. For client-side package management, there's Bower. Either solution has problems that would be reduced or eliminated by using Browserify instead.
RequireJS requires using RequireJS modules or shims. Jam provides packages for RequireJS, but I found extremely out-of-date packages for popular libraries like Moment.js and Modernizr. For the most part, using RequireJS with popular client-side libraries means using shims. RequireJS shims can lead to a few minor problems as you either have to copy & paste JS files into your project or split dependencies into multiple specification files. Browserify shares this problem with RequireJS, but it's a smaller problem for reasons described below.
Bower has some problems of its own. I'll explain, but I must warn you ahead of time: friends and family of Bower should skip to 'Problems with Browserify.'
Bower is an incomplete package management solution. Every Bower package that I have ever installed dumps the complete contents of a Git repository into a directory. And there does not seem to be a standard for Bower package structure or documentation or use in client-side applications.
Every time I use a Bower package, I'm left wondering how to actually use the package in my code. I feel that this is a massive issue that prevents Bower from being as useful as it could be. npm and Browserify typically do not suffer from this problem for a few reasons:
Bower is an incomplete package management solution. Every Bower package that I have ever installed dumps the complete contents of a Git repository into a directory. And there does not seem to be a standard for Bower package structure or documentation or use in client-side applications.
Every time I use a Bower package, I'm left wondering how to actually use the package in my code. I feel that this is a massive issue that prevents Bower from being as useful as it could be. npm and Browserify typically do not suffer from this problem for a few reasons:
- npm packages almost always tell you how to start using the package
- You typically don't need to know the structure of npm packages due to how they're used.
- If you need to look in the node_modules folder, packages typically use a standard structure.
Problems With Browserify
Browersify is a full solution, but it comes with problems of its own.
It's unclear what npm package should be used for some client-side libraries. Modernizr has a few npm packages: browsernizr, modernizr, and browsernizr2. The first package is outdated, and the second package installs a tool that generates modernizr.js. I only found out about the third package as I was doing research for this article, and I don't know anything about it except its existence.
If a library doesn't have an easy-to-use npm package, you have to shim it with browserify-shim. This complicates inclusion of client-side vendor scripts in your project, and Browserify shares this issue with with RequireJS. Unlike RequireJS, this problem should be uncommon due to the availability of npm modules for popular client-side libraries.
Addendum: Comparison of Browserify and RequireJS
Browserify and RequireJS solve most of the same problems, so I figured that now would be a good time to give a quick rundown of differences and similarities.
Differences
Browserify loads npm modules.
RequireJS loads RequireJS modules.
Browserify always loads synchronously at compile/bundle time.
RequireJS loads asynchronously in the browser (but can be bundled using an optimizer).
Browserify always bundles scripts.
Bundling RequireJS apps requires a special optimizer.
Browserify uses npm.
RequireJS can be used with Jam, but you may be better off with using shims for third-party code.
Browserify allows you to access many Node.js functions and modules from client-side code.
RequireJS allows you to load non-JavaScript files (such as text files and Ember.js templates).
Browserify uses npm.
RequireJS can be used with Jam, but you may be better off with using shims for third-party code.
Browserify allows you to access many Node.js functions and modules from client-side code.
RequireJS allows you to load non-JavaScript files (such as text files and Ember.js templates).
Similarities
Both load modules for client-side JavaScript.
Both have Grunt and Gulp plugins.
Both have Grunt and Gulp plugins.
No comments:
Post a Comment