Modern, Modular JavaScript with SystemJS and jspm

Introducing SystemJS
Now that we've seen how the ES6 Module Loader Polyfill works,
we can turn to SystemJS, and we can see how SystemJS extends the hooks provided by the Polyfill.

The really big benefit that SystemJS brings to the table is not only the ability to support ES6 modules,
which is provided by the ES6 Module Loader Polyfill, but also to support a wide variety of other module formats that have been popular over the years for JavaScript development, both on the server side and the client-side.

In a minute we'll take a look at these various formats.
In the process of supporting these module formats, it takes care to preserve circular references and the various different nuances of all these different module formats.
It's quite a feat actually if think about it, and what this provides is the ability to not only write modules in a standard format using ES6 modules that will become prevalent in the future, but to also be able to tap in to a rich history of modules in a variety of ecosystems, and continue to take advantage of these in your application while you get on the path to adopting the future standards.

SystemJS also introduces a new module format via calls to System. register and System. dynamic register, we'll see that later in the course.

This provides a common means to take all the various different module formats, and compile them down into one standard format that could then be loaded in the browser in a vanilla ES5-like environment.

We'll see more about this later, but one of the big benefits of this is that we can bundle together modules from all different formats and different ecosystems into one common format, and load them into a browser without even any of the capabilities of the dynamic-ness of the SystemJS loader to support all these module formats because they're all compiled down to this common format System.register.

We'll even see later in the course there's a special build of SystemJS for running in production that only works with this format, so we don't have the overhead of all the different module formats because obviously once you get to production if you are in a bundling scenario, you probably aren't going to leave modules in other various formats that would slow things down for users.

Now one of the issues with all these various different module formats is that things might not quite work out of the box.
If you've ever used RequireJS, you may be familiar with configuration that can allow you to override a little bit about how modules are handled, and we'll see how this works in the module for this course, but for now I'd like to point out that SystemJS also provides capabilities to map or alias module names, and it also has shimming capabilities much like RequireJS.

And then as I hinted at, SystemJS also provides the capability to bundle up modules.

In the short-term this is a strategy many people will continue to use even though in the long-haul people probably moved toward web server platforms where modules can be delivered individually, and bundling is no longer a need because protocol level enhancements can provide the same performance gains that bundles have been used for in the past.

And then lastly I'd like to point out that SystemJS provides capability for plug-ins, we'll see some of that later on in the course.

In fact we'll create some of our own later on in the plug-ins module of this course. To give a quick overview of this module in the course, first we're going to convert from using the ES6 Module Loader to using SystemJS.

Then another big thing will be exploring the various different module types and seeing them in action thanks to SystemJS.

Finally we'll take the time to get our test updated, our unit tests, to work with SystemJS, and we'll talk about some of the nuances of testing with SystemJS.

I waited until this point to update the testing because I wanted us to be using SystemJS, which is something that we'll solidify into the final example.

I didn't want to set up testing with the ES6 Module Loader, though it wouldn't be drastically different. So the first thing we're going to do is go through the process