#systemjs

[questpond]

In this lesson will try to understand what is Module loaders and Module format.

[clye]

[theryusui]

I will concede one thing about that tutorial: it finally taught me how to use Webpack, for the most part. Way more elegant than SystemJS.

[allenhwkim]

Introduction to SystemJS For Angular2 Beginners

As you see a live example from Angular2 Quick Start, You will find that the main page of Angular2, which is index.html, uses SystemJS to start Angular2 application.

index.html

<script src="systemjs.config.js"></script><script> System.import('app').catch(function(err){ console.error(err); }); </script>

System.import('app') is starting the application, which affects <my-app>Loading...</my-app>

So, it is using systemjs to start the application. Then what is systemjs?

systemjs

As mentioned in there README, systemjs is univesal dynamic module loader, it loads the following in the browser

es6 modules

AMD

CommonJS

global scripts,

and much more

As an angular2 user as who is curious how it works in browser, we are going to focus on ES6 modules.

it is build on the top of ES6 module loader. So, let's get into ES6

ES6

The import statement is used to import functions, objects or primitives that have been exported from an external module, another scfript, etc

https://developer.mozilla.org/en/docs/web/javascript/reference/statements/import

import { member } from "module-name"; import { member1 , member2 } from "module-name";

In the above sentence, it said that have been exported. In ES6, you can export functions, objects or primitives from a file. The syntax looks like the following as documented

export { name1, name2, .., nameN }; export let name1, name2,.., nameN; // also var

Summary

Going back to systemjs,system.import function loads the javascript. and the basic usage is like this in browser.

<script src="systemjs.config.js"></script><script> System.import('app').catch(function(err){ console.error(err); }); </script>

So, we see two things, one is config, and the other is System.import('app') 1. config 2. The app package, which is imported by System.import, starts your application

So many questions arise from here.

Q: where is app and how do we fine it? A: It's defined in system.config.js using map and packages

config.map['app'] = 'app'; // tells you where you find app package, config.packages['app'] = { main: 'main.ts', defaultExtension: 'ts' }; // tells you what file to execute

Q. Where is main.ts and what does it do? A. It's located at 'app/main.ts' because config.map['app'] told you find app packages in app directory. and it does bootstrap angular application, which is your app. bootstarp reads AppComponent and find my-app html tag in document then renders your applications between those two tags; <my-app> and </my-app>

import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent);

[insidehtml5]

Modular JavaScript: A Beginners Guide to SystemJS & jspm

Ravi Kiran introduces you to jspm and SystemJS that let you load any module format (ES6, AMD, CommonJS and globals) directly from any registry.

[stolpnik]

[dragoni]

Javascript in 2015

Rather than go on in detail about how this all hangs together, I thought I'd try my hand at a screencast that shows you, in 10-and-a-half minutes, what using JSPM, SystemJS and ES6 is like. We're going to build something that scrapes the top GIFs from /r/perfectloops and displays them.

The resulting source code and live version are up on GitHub, but the interesting bit is the process in getting there, so watch the vid.

...

JSPM + SystemJS - a new in-browser workflow

SystemJS is a "universal dynamic module loader" that works with files using ES6, CommonJS, AMD or those exporting global variables. It's effectively a backwards-compatible version of the ES6 Loader Polyfill, which tracks the JavaScript Loader Spec.

JSPM is a package manager with a CLI intended to replace the need for NPM or Bower for front-end projects, but, because SystemJS works with pretty much anything, happily works with code from NPM or Github. It's pretty much exactly like what the NPM team recommended as a solution to front-end dependency management on their blog.

They're both incredible pieces of open-source work with burgeoning communities, but it's worth mentioning that they owe their existence largely to the tireless efforts of Guy Bedford. Damn fine work, Mr Bedford.