Super Simple systemJS Module Loader Tutorial

I’m currently in the process of building a new web application.  I want to use a module loader.  I have used Required as a AMD loader, but with ES2015 (ES6) around the corner and supports module loading, I would like to use something that is somewhat future proof.  So, I’ve decided to investigate SystemJS.

To learn SystemJS , I wanted to create a very simple application with no frills and uses ES5. Once I have this figured out, I will start using ES6 and/or TypeScript.

SystemJS

SystemJS is a universal module loader.  It can load modules synchronously or asynchronously.  In this post I’m going to load a very simple global module dynamically. SystemJS can load these additional modual formats:

  • esm: ECMAScript Module (previously referred to as es6)
  • cjs: CommonJS
  • amd: Asynchronous Module Definition
  • global: Global shim module format
  • register: System.register or System.registerDynamic compatibility module format

Assumption of Reader

I assume the reader has the following knowledge

  • Some knowledge node.js and npm
  • JavaScript
  • Chrome Developer Tools

I assume that since you want to learn about systemJS, which is a more advanced tool, that you understand NPM and how to install
libraries using package.json.  I also assume you know how to create a server to run the examples on.  In this example, I’m using HTTP-Server that I installed using NPM.

Tools and Version I used

Here’s the structure of the application

image

  • package.json: is used to install systemJS
  • .gitmore: can be ignored.  It’s used with Git source code repository.
  • node_modules: where npm installs systemJS
  • main.js: the module to be dynamically loaded and execute by systemjs

All source code can be found here:

Example without using systemJS: https://github.com/BarDev/Learning-SystemJS/tree/b.1.0

Example using systemJS:https://github.com/BarDev/Learning-SystemJS/tree/b.1.1

First run “npm install”. This will look in package.json and find dependencies to install.  The only client dependency that is required is systemjs.

npm install

package.json with systemJS

file structure with systemJS

Let’s now display a very simple HTML page.  Here’s the code:

Let’s do a a sanity check to validate that the server is working. You can use any server. I have decided to use http-server for it’s simplicity and no bloat.  Below in the images, you will notice I install http-server globally, and then ran it by just call “http-server”.  I then load the page using the port that http-server provided.

npm install http-server;

image

confirm htpp-server is run

Everything should be working now.

Let’s create a module. I’m using the term module somewhat loosely here.  Since the code is in a separate file, systemJS will treat it like a module. Here I’m using the Revealing Module Pattern.

Let’s create a new folder called app and add the file main.js. Here’s the code to include in main.js.

global module

We aren’t using systemJS and not doing module loading yet, but we will soon. For the time being, let’s see how main.js is loaded.

Add a reference in index.html to main.js. This can be added in the <head> element.  Then add the script that calls the domUpdater after the last div.  The script must be after the div, because of how the HTML page loads and is executed.
index html without using systemJS

Lets run the web page and see how the modules are loaded.  In the image below you will see that in Chrome Developer Tools, I added a breakpoint in the index.html. This allows me to see what files have been loaded in the network tab. As we can see the main.js file has been loaded. The main.js file is loaded as soon as the page is loaded. Imagine if you had 20 files that need to be loaded. Bundling can take care of this somewhat; but what if you had multiple bundles and not all bundles are needed when the page loads?

debug web page without systemJS

Now let’s do some module loading using systemJS.

In index.html, remove the script in the Head that is referencing main.js.  Also remove the script after the div that is calling domUpdated

Now we need to add the systemJS library and load mainJS using SystemJS.

In index.html, reference the system.js file in the <head>.

index.html with systemJS and module loading

Now, refresh the page and put a breakpoint on the console.debug, and refresh again.  If you look at the Network tab in Chrome Developer Tools, you will see that main.js has not been loaded yet.

debug module loading and systemJS

Continue the application and you will see in the network tab that main.js is loaded dynamically in the process..

debug systemJS and dynamic module loading

Resources

Re-Learning Backbone.js – Require.js (AMD and Shim)

In this post we are going to learn how to use Require.js with Backbone.js and Underscore.js

This post build on the Re-Learning Backbone.js series.

As usual, the examples in this tutorial are extremely simple. We have one goal here and that is to load Underscore.js and Backbone.js using Require.js

We are going to start out with an example that doesn’t function correctly. Don’t worry, I believe it’s important to show you the evolution of creating an application from the very beginning to a working version. We will take very small steps to get where we need to go.

Here are the libraries and their version that we will use in this post:

  • jQuery – version: 1.8.3
  • RequireJS – version: 2.1.2
  • Backbone.js – version: 0.9.9
  • Underscore.js – version 1.4.3

Here’s the source code for the example below: Source

Getting Started

To get started we need a structure for our website such as this:

We also need the following libraries jQuery, Backbone.js, Underscore.js and Require.js. These libraries should be stored in the “libs” directory.

First create two files. The first file will be called Require1.html and this file will be in the root directory. Add the following code to the file.

Here’s the code for Require1.html

All the HTML file does is tell RequireJS to execute the main.js file in the script directory.

The second file will be called main1.js and this file will be in the “scripts” directory. Add the following code to the file.

The main1.js file has two parts, the config method and the require method. The config method is used to setup RequireJs. The config is not mandatory, but it does simplify the code. In the config we included only the “paths” option, but there are many other options available. To see a list of options go to RequireJs Config Options. In the paths option we identify the modules that will be needed. Each module file is in the “scripts/libs” directory. You will notice that each JavaScript file that is referenced does not include the “.js” extension. RequireJS assumes that all files are scripts and the “.js” is not needed. The order of the values in the config paths is not important; the files can be in any order. If we wanted we could have put backbone first.
Continue reading “Re-Learning Backbone.js – Require.js (AMD and Shim)”