Barbarian Meets Coding

WebDev, UX & a Pinch of Fantasy

2 minutes read

System JS Wiki

This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

A Note About Package Managers

  • Bower
    • (+) Good package manager
    • (-) But it doesn’t take care of dependencies when you want to inject scripts in html
      • There are plugins that you can use like wiredep
    • (-) It doesn’t have a concept of module loading (since it was developed before ES6 modules)
  • npm
    • (+) Good package manager
    • (+) Easily require modules inside any program
    • (-) Uses CommonJS instead of ES6 modules
  • jspm
    • (+) Good package manager
    • (+) Easily import modules inside any program
    • (+) Uses ES6 modules


  • ESM: ES module format. It specifies the syntax for defining the contents of a module and importing/exporting stuff from within them. It doesn’t specify how to load modules.
  • ESMLP: ES module polyfill that follows the spec of the original module loader spec that was part of ES6 but which was removed. The ESML is being worked on in a different spec today.
    • the core idea of using ESMLP is that you’re using a system that is not proprietary but that it tries to be as faithful as possible to what will be the final spec that will run in all browsers.
    • You cannot load modules today using a script tag, you must do it via the ESMLP or other propietary loaders.
    • A common practice is to group modules into bigger modules sometimes called packages. Where the whole package exposes a unified API to the rest of the world via one single module name. Generally this will be achieved by importing and exporting from a bunch of modules within an index.js file. (For instance, take a look at @angular/core in Angular 2).
  • Package managers: They help you manage packages by retrieving, installing and organizing them. Examples are npm, bower, jspm, etc

Loader Pipeline

  • System.import: Used to import modules
    • System.import has hooks for the loader pipeline
    • normalize & locate: get a name and locate its module
    • fetch: fetch the module
    • translate: transpilation, etc
    • instantiate: create instance of module

Jaime González García

Written by Jaime González García , dad, husband, software engineer, ux designer, amateur pixel artist, tinkerer and master of the arcane arts. You can also find him on Twitter jabbering about random stuff.Jaime González García