In an effort to write more articles, I will be writing more about libraries, tools and cool stuff that I have tried out recently. One of those things is Browserify, over the holidays I decided to start a HTML5 game development course, I thought this would be a great opportunity to also try out browserify and I found it to be a great way to modularise my code. This article will cover installation and getting started with writing modular front-end code through browserify.
All code for this article is available at: github.com/petecoop/browserify-article-code
I'll start off by going through the basics of how the node module system works, if you're already familiar with this you might want to skip this section.
To explain the node module system I've created the following:
var maths = require'./mymodule';var User = require'./User';var num = mathsmultiply1 2;var someUser = 'Pete';var welcomeMessage = someUserwelcome;
return a * b;;
moduleexports =thisname = name;;return 'Welcome ' + thisname;;
In this basic example I've demonstrated the use of
require() function is used to load in modules, the
./ indicates that the module is loaded from the current directory, you might also notice that you can leave out the
.js file extension. To load in modules from node's core or from modules installed through npm simply use
require('module-name') and the module system will automatically find and load in the specified module.
require() will return an object of all exported properties of the module and in my example is returned to
var maths before use.
To expose properties from within your module you can add to the
exports object. In my example
mymodule.js uses the exports object to expose it's multiply function.
exports object allows you to build your module one property at a time, however if you would like to export a complete object you can use
module.exports. In my example I've created the User module to demonstrate the use of
module.exports to export a complete object.
That about covers the basics of node modules, if you would like to read up on it check out the documentation.
browserify main.js -o bundle.js
If like me you like your automated build tools, you can try out the grunt-browserify Grunt Task - which I've had some success with.
You can alternatively try watchify which was built specifically for browserify.
Now I've gone through the installation and explanation of how the module system works, I thought it would give a better example of how to build an application with browserify if I actually built one.
I'm going to create a basic weather app that allows the user to enter a location and using an API recieve weather results for that location.
I'll be using the Open Weather Map API
To start with I'll create an
Weather AppEnter a location:
onsubmit event of the form, then get the value from the input, make a request to the weather API and display some results in the output div.
I'll now create my main.js:
var weather = require'./weather';var form = documentgetElementById'locationForm';var location = documentgetElementById'location'value;weathergetlocationvar output = '<h1>' + dataname + ', ' + datasyscountry + '</h1>';output += '<p>Temp(°C): ' + datamaintemp + '</p>';output += '<p>' + dataweather0description + '</p>';var element = documentgetElementById'output';elementinnerHTML = output;;return false;;
As you can see I've already required the weather module, which I will create next. I've hooked into the form's submit event and grabbed the value from the input, I'm then sending this to
weather.get which I plan on taking the location as it's first argument and a callback with the data I need as it's second. I'll then format this data into HTML and put it in my output div.
var jsonp = require'./jsonp';var url = '';jsonpurl + city done;;
I was going to use this as an opportunity to use the core
http module, but as this is a cross domain request I've had to create a jsonp module - this is a good example of a tiny re-usable module.
Once all this is done I bundle it:
browserify main.js -o output.js
And that's it! A nice little app to get weather based on the location you enter.
Okay so you've read the whole article, but still don't get the benefits of using browserify, here's a few points.
Keep your application modular, it will be a lot easier when it comes to testing/debugging especially when creating a large application.
Your modules don't have to be application specific, you can create modules that you re-use in other app's. You can publish them to npm to share them with the world and for easily installing in future projects.
You can also re-use them within your server-side node.js applications, and even write modules that are used on both ends.
There is already loads of npm modules and a lot of them are likely to work within the browser too.
Although large libraries e.g. jQuery have a lot to offer, you often end up using a small amount of the whole thing which means that a large part of the library is loaded onto the client for no reason.
Using browserify and modular code you can use modules that are good at individual things rather than being an all-in-one solution.
If you insist on using something like jQuery see if it's available on npm and if it's compatible with browserify, often people will wrap libraries into browserify-compatible modules. If it's available then require it like any other module and let it benefit from any other modular code.