Load ES6 Modules Like a Boss with SystemJS and JSPM

The ES6 JavaScript standard brings modules to the masses, but the process of bundling and delivering those modules in today’s browsers still requires a separate loader. Learn how SystemJS was built from scratch to support this format, and how JSPM will change the way you manage your code.

Transcript

1. SystemJS & JSPM LOAD ES6 MODULES LIKE A BOSS WITH
2. TITANIUM SPONSORS Platinum Sponsors Gold Sponsors
3. UI Engineer, DEG @aladage Aaron Ladage
4. degdigital.com/careers
5. A Little JavaScript History
6. HISTORY OF JAVASCRIPT ▸ Created by Brendan Eich at Netscape ▸ Written in 10 days in May 1995 ▸ Included with Netscape Navigator 2.0 JS isn’t as old as you think it is (or maybe I’m just old)
7. PROBLEMS WITH EARLY JAVASCRIPT JavaScript’s usage outpaced its original implementation ▸ Render blocking ▸ Can lead to excessive HTTP requests ▸ Lacking: ▸ Namespacing (global pollution) ▸ Modularity ▸ Dependency management
8. PROBLEMS WITH EARLY JAVASCRIPT Global namespace pollution
9. PROBLEMS WITH EARLY JAVASCRIPT Namespacing
10. PROBLEMS WITH EARLY JAVASCRIPT Modularity / Dependency Management
11. Early Solutions
12. EARLY SOLUTIONS Global object / IIFE
13. EARLY SOLUTIONS Global object / IIFE ▸ More of an exploit than a standard ▸ Still exposes a global variable ▸ Still easily overwritten ▸ Load order matters ▸ Sharing code between objects is challenging
14. EARLY SOLUTIONS CommonJS
15. EARLY SOLUTIONS CommonJS ▸ Doesn’t work well in async environments ▸ Lazy loading is a challenge ▸ Requires an external loader
16. EARLY SOLUTIONS AMD/Require
17. EARLY SOLUTIONS AMD/Require ▸ Ugly syntax ▸ Async, but can’t be statically analyzed ▸ Still requires an external loader
18. EARLY SOLUTIONS UMD ▸ The bastard child of CommonJS and AMD
19. EARLY SOLUTIONS Third-party bundlers/loaders ▸ RequireJS ▸ Browserify ▸ Webpack
20. ES6. Fuck yeah. ECMAScript 2015 ratified June 2015
21. ES6 Module Syntax
22. ES6 ES6 import and export syntax
23. ES6 ES6 import and export syntax
24. ES6 ES6 import and export syntax
25. ES6 ES6 import and export syntax
26. ES6 ES6 import and export syntax
27. ES6 ES6 import and export syntax
28. ES6 ES6 module syntax main sum add reduce
29. ES6 ES6 module syntax Source
30. ES6 ES6 module syntax Source
31. ES6 ES6 module syntax Source
32. ES6 ES6 module syntax Source
33. ES6 But there’s one big problem… ▸ The ES6 spec defined the module format, but it didn’t define a loader ▸ Not yet implemented in all browsers ▸ Spawned the ES Module Loader project (and polyfill)
34. SystemJS to the Rescue! (and don’t ask me about Webpack)
35. SYSTEMJS Universal module loader ▸ Supports common, AMD, global object and ES6 ▸ Can handle Coffee/TypeScript (and even CSS) with plugins ▸ Built on top of the ES6 module loader polyfill ▸ Can run client or server-side (Node) ▸ Lazy-loads JS bundles
36. SYSTEMJS A relatively uncomplicated API on its own
37. SYSTEMJS A relatively uncomplicated API on its own
38. SYSTEMJS A relatively uncomplicated API on its own ▸ Can do runtime transpiling during development ▸ SystemJS builder can bundle
39. JSPM
40. JSPM The ultimate JavaScript package manager ▸ You’ve heard that before…but this time, it might be true ▸ …if you’re using SystemJS, that is ▸ Companion project to SystemJS
41. JSPM “Why don’t you just use NPM?” JSPM is equal parts package manager, loader and bundler
42. JSPM As a package manager ▸ CLI tool ▸ Install third-party modules from GitHub or NPM via command line
43. JSPM As a package manager ▸ Auto-configs SystemJS loader config file ▸ Registries ▸ Semi-official JSPM registry ▸ Roll your own! (DEGJS)
44. JSPM As a loader (during development) ▸ Uses SystemJS module loader ▸ Transpile and import on the fly during dev ▸ Useful, but can get slow
45. JSPM As a bundler ▸ Uses rollup under the hood (tree shaking)
46. JSPM As a bundler HTTP2 might fuck up everything.
47. Pitfalls
48. PITFALLS SystemJS/JSPM are pretty good, but they aren’t perfect ▸ Tricky configuration ▸ Skeletor ▸ Trial and error with third-party config
49. PITFALLS SystemJS/JSPM are pretty good, but they aren’t perfect ▸ Created and largely maintained
 by one British gentleman ▸ Smaller community ▸ Slower updates (Not actually Guy Bedford)
50. IN CONCLUSION Everyone loves a summary slide! ▸ JavaScript quickly outgrew its original intent and implementation ▸ Developers are clever and found solutions, each with its own shortcomings ▸ ES6 modules standardizes JS modules, but there’s no well-supported native loading (yet) ▸ SystemJS bridges the gap as a universal loader ▸ JSPM serves as equal parts package manager, loader and bundler ▸ SystemJS/JSPM together aren’t perfect…but they’re pretty damn good.
51. Thanks for listening. Slides: http://bit.ly/2v31D5j
52. RESOURCES ▸ "Understanding ES6 Modules Via Their History" ▸ “Brief History of JavaScript Modules” ▸ SystemJS project ▸ JSPM project ▸ Skeletor ▸ DEGJS