Browserify and modular JavaScript

Front End

Browserify and modular JavaScript

Posted by Ryan Burgess on 11 Mar 2015

Posted by Ryan Burgess on 11 Mar 2015

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

Ryan Burgess is the Lead Front End Engineer for Evernote.com.

@burgessdryan
rburgess@evernote.com

View more stories in 'Front End'

2 Comments RSS

  • Alexey

    As you start using a compiler, why wouldn’t you go with with TypeScript and get type checking to boot?

    • Ryan Burgess

      Things like TypeScript and CoffeeScript can be great options. I’d even suggest moving to an ES6 transpiler to start leveraging future features of ES6. The big advantage for us is being able to leverage CommonJS NPM modules.