Barbarian Meets Coding Titlebarbarianmeetscoding

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

Concepts

  • 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, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García