Modern, Modular JavaScript with SystemJS and jspm

Are you fed up with the lack of explicit relationships in JavaScript development? Are you tired of manually downloading dependencies and linking them meticulously into a script tag in the right order? Are you tired of waiting years for browsers to support new JS language constructs? If you want a modern approach to using the latest JS language constructs, including modularity, then this course is where you can get started.
Course info
Rating
(137)
Level
Intermediate
Updated
Nov 6, 2015
Duration
7h 25m
Table of contents
A Modernized, Modularized Approach to JavaScript
ES6 Module Loader Polyfill
SystemJS
Testing
jspm
Development vs. Production Workflows
SystemJS Plugins
Publishing Packages
Putting It All Together
Description
Course info
Rating
(137)
Level
Intermediate
Updated
Nov 6, 2015
Duration
7h 25m
Description

Would you like to leverage better organization in your JavaScript applications? Would you like to easily break out dependencies into separate modules for design & testing purposes, then easily roll them back up as necessary into a bundled application that runs seamlessly in the browser? Would you like to take advantage of ES2015 and future versions of JavaScript without waiting years for browsers to catch up? Are you frustrated with the hassle required to pull third party dependencies into JavaScript applications, finding where to download them from, how to download them, and making sure they are loaded in the proper order? Have you tried modularizing JavaScript but been frustrated by the varying module formats (ESM, AMD, CJS, globals) and just wish they all worked together? In this course, I'll show you how to reap the benefits of modularization, new language constructs, seamless package management, and a hassle free development process with SystemJS and jspm.

About the author
About the author

Wes Higbee is passionate about helping companies achieve remarkable results with technology and software. He’s had extensive experience developing software and working with teams to improve how software is developed to meet business objectives. Wes launched Full City Tech to leverage his expertise to help companies delight customers.

More from the author
What Is DevOps: Executive Briefing
Beginner
22m
Nov 2, 2018
Implementing a Self-hosted Docker Registry
Intermediate
4h 8m
Jun 5, 2018
Webpack: Transpiling and Bundling JavaScript
Intermediate
4h 55m
Jan 30, 2018
More courses by Wes Higbee
Section Introduction Transcripts
Section Introduction Transcripts

SystemJS Plugins
Plug-ins provide the ability to extend the existing behavior of SystemJS. Back earlier in the course when we were tapping in to the module hooks to get information about what was going on under the hood of SystemJS, when we plugged into that loader pipeline, in a way we were extending SystemJS. Although we weren't using the official plugin constructs of SystemJS, we more or less were creating a plug-in. In this module, we'll take a look at how we can create plugins for SystemJS, and specifically we'll take a look at quite a few plugins that incorporate the SystemJS functionality to load modular pieces of our application to load things besides JavaScript. We'll see plug-ins to load text, JSON, and CSS, and we'll even take a minute and create our own plugin to load markdown content and turn it into HTML. Why would we want to do this? Well, it's possible we could use the same hooks we use to fetch and translate JavaScript to fetch and translate other components of our applications. If we could not only bundle up JavaScript, but also CSS, and perhaps even some view templates, some HTML or markdown or something of a view template, it's possible we could bundle together web components and make those reusable, not just the JavaScript behind them, but the entire web component dependency, perhaps a web control of some sort. And you have to know not only what JavaScript files are involved, but also there's a CSS file, and perhaps there are some templates you have to put somewhere in your application. That's three separate pieces you have to figure out and stitch together in just the right place. What if it were as easy as importing that third-party dependency, that third-party web component, and all the little bits and pieces regardless if they're JavaScript, CSS, HTML, or whatever they are, what if all of them just came in automatically into your application and you didn't have to worry about stitching them together into the right place into your application?

Putting It All Together
I want to start out this module covering the benefits. I want to take a look at our application before we started to work on it in this course, and after. With all the details we've been into, it might be hard to see the bigger picture of what we've done to improve our application, which is what would justify making these investments and using these tools. We'll take a look at language, modularity, package management, and workflow benefits of using SystemJS and jspm to produce a more modern modularized JavaScript application. Then I want to take a minute and talk about a few things with modules, some nuances or some details of this example, that I've had to gloss over or just haven't had a chance to get into in detail in earlier parts of the course when we were converting this application over to use modules. And then to wrap this up, I want to point you at some resources that you can look at to learn a little bit more and to dive further as you start to use these tools in your own applications.