Despite it’s comical logo, Browserify is extremely powerful and probably one of the most useful tools in our arsenal. The front end team at Evernote leverages Browserify to help create modular JavaScript for our websites.
What is a JavaScript module?
A JavaScript module is an isolated piece of code that can work independently of other modules and make it easy to add and remove as necessary. The Modules are then referenced and compiled into a single JavaScript file. The module exports objects or functions to the code that requires it. This allows JavaScript projects to be broken up into more simplistic, manageable files.
Concatenating these small JavaScript files into one file, can significantly cut down on HTTP requests. Writing modular JavaScript also helps make the code more maintainable and easier to reuse functions or objects. This significantly cuts down on QA timelines because typically once a module is tested and used in production, it’s less likely to have any bugs the next time it’s leveraged. If there’s a bug in a module it will be fixed and updated throughout a project where it’s referenced as a dependency. Writing unit tests is easier in modules because it keeps the script more focused on a particular function or object and not the entire project.
What is Browserify?
Browserify is a utility built on CommonJS that allows developers to write a modular architecture in JavaScript for the browser. Browserify works as a compiler to bundle all the modules into a single JavaScript file. The CommonJS style in Node.js and Browserify has each file declare its dependencies at the top, and considers global variables an anti-pattern.
One of the biggest benefits to using Browserify is the ability to leverage npm modules that typically run in Node.js. With over 60 thousand open source npm JavaScript modules available this can prevent having to rewrite functions that already exist.
Requiring modules
CommonJS makes it extremely easy to declare a project’s dependancies of a script using a simple require function. Being able to leverage modules from Node.js’ core, or from modules installed through npm is as simple as require(‘module-name’); The require function also allows for leveraging modules that have been created in a project. These require’s are used with the ‘./’ that indicates the module is referenced from the current directory. As these modules are modified so will the scripts that require the modules as dependencies.
How to start using Browserify
Adding Browserify to a project is done through ‘npm install browserify -g’. There’s also Grunt and Gulp tasks available for Browserify to help leverage the functionality in a project build environment.
Check out Browserify’s documentation for more information on ways to leverage it in a project.
Ryan Burgess is the Lead Front End Engineer for Evernote.com.
2 Comments RSS