Creating JavaScript Modules with Browserify

This course introduces the Browserify module loader for JavaScript. In this course, we will learn how to use Browserify to define code modules when building a web application.
Course info
Rating
(126)
Level
Intermediate
Updated
Apr 9, 2015
Duration
1h 13m
Table of contents
Description
Course info
Rating
(126)
Level
Intermediate
Updated
Apr 9, 2015
Duration
1h 13m
Description

This course introduces the Browserify module loader for JavaScript. In this course, we will learn how to use Browserify to define code modules when building a web application. We will also discuss the structure of CommonJS modules, and how Node.js handles module loading, since these concepts are central to how Browserify works. Unit testing with Browserify will also be demonstrated.

About the author
About the author

Jeff has over 15 years of experience in software development using Java, C#, JavaScript, CoffeeScript, and TypeScript. His belief that clean, well organized code is key to making software maintainable has led him to focus on unit testing and solid programming practices and principles as a cornerstone of everyday coding.

More from the author
Section Introduction Transcripts
Section Introduction Transcripts

Getting Started with Modules and Browserify
Hello. My name is Jeff Valore. Welcome to my course on JavaScript Module Loading with Browserify. Browserify is a JavaScript library for module loading. Browserify has seen a rise in popularity recently as the use of Node. js as iBeacon technology has risen. If you are familiar with Node. js development and how it uses modules, then you will feel right at home with Browserify, but don't worry if you are unfamiliar with JavaScript modules or Node. js. We will go over the fundamentals in the first two modules of this course. So what is Browserify? Well Browserify is a JavaScript module loading framework targeting deployable web applications that run in a web browser. Browserify is typically run in Node. js as a build step of your application, meaning that Browserify usually runs well before your code is deployed. It will take multiple JavaScript files that represent modules and bundle them into a single file for deployment. It also takes care of resolving dependencies between these modules. The result is that our application code becomes much cleaner and easier to maintain. Throughout this course, we will be building a task list sample application that runs in the browser. The functionality is very simple. You can add tasks, edit the descriptions of the tasks, mark them complete, and delete the tasks. These tasks are saved in browser local storage, so there's no server-side backend to worry about. We will be building this task list sample application by organizing our JavaScript code into modules.

Defining and Requiring Modules
In this module, we will start creating CommonJS modules that can be loaded by Browserify. We will set up our sample project and install Browserify, then go over the rules used when Browserify locates modules. By the end of this module, you should be comfortable with the basics of Browserify and CommonJS modules.

Easing the Development Process
In this module, we're going to look at the overall development workflow of a modern JavaScript application that uses Browserify. Let's look at the workflow we have right now for the sample application and see how we can make it easier to work with. So far, I have been doing my file editing here in Sublime Text. If I need to make an edit, I can change a file here. Then I need to rebuild my deployable JavaScript back in the command line by running Browserify. Once that finishes, I need to Refresh the web page in the browser. This is a lot of steps for one simple change every time you edit a file. Let's see how we can make this easier.

Using Transforms and Plugins
In this module, we will see how Browserify allows us to extend its built-in functionality using transforms and plugins. Internally, Browserify has a processing pipeline. Each step in the pipeline has a name and each can be altered or added to. Transforms are used to change the way a loaded module file is processed. By default, Browserify expects a file to contain a CommonJS module written in JavaScript. Transforms can be used to instead load CoffeeScript or TypeScript or even plain text or HTML. Instead of processing these files as plain JavaScript modules, the transform can take a more appropriate action. Any specified transforms are run during the depths phase of processing, which is when Browserify figures out the dependency graph and loads all the files that it will need to build the file bundle. Plugins are used to extend parts of Browserify's processing pipeline. They can do much more than transforms by altering the entire way that Browserify processes files. Plugins are not used frequently, but knowing the difference will be important since they are used in different ways.

Unit Testing Browserify Modules
One of the nice things about breaking your code into smaller manageable chunks with the single responsibility is that it makes your code a lot easier to test. So each of our CommonJS modules should be easy to test, right? Well in this module, we will look at how we can unit test our modules and the difficulties that might arise.