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.
What you'll learn
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.
Table of contents
- The Need for Modularity 6m
- Frustrations with Manually Downloading JS Dependencies (Demo) 3m
- How Bower Helps and What's Still Missing (Demo) 5m
- The Way Things Should Be - Dependencies in .NET (Demo) 3m
- The Way Things Should Be - Dependencies in Node.js (Demo) 3m
- Why Things Should Be the Way I Say They Should Be 5m
- The Right Way with jspm and SystemJS (Demo) 11m
- Who This Course Is For 1m
- Course Agenda 2m
- What You Should Know Before Taking This Course 1m
- Tools You Need for This Course 2m
- The Example Application We'll Use: Solitaire (Demo) 15m
- The ES6 Module Loader Polyfill 6m
- Term: Module 3m
- Term: Package 2m
- Terms: Module Loader and Package Manager 3m
- The Module Loader Pipeline 6m
- Using the ES6 Module Loader Polyfill (Demo) 4m
- Adding Traceur & the Asynchronous Nature of Module Loading (Demo) 6m
- The First Module in Our App - app.js (Demo) 3m
- Overriding Loader Pipeline Hooks (Demo) 7m
- Gist with Some Code Files for Future Reference 1m
- A Visual Graph of Modules (Demo) 6m
- Converting Scoring, Klondike, Game, and Board to Modules (Demo) 3m
- Rearranging Module Dependencies & Isolating Scoring Logic (Demo) 5m
- Leveraging ES2015 Classes (Demo) 2m
- Benefits of ES6 Module Loader Polyfill 2m
- Introducing SystemJS 4m
- Swap in SystemJS for ESML (Demo) 3m
- baseURL Configuration (Demo) 2m
- SystemJS baseURL Config 2m
- SystemJS Map and Transpiler Config (Demo) 7m
- Using ES2016+ Today (Demo) 3m
- SystemJS's Supported Module Formats: ESM, CJS, AMD, Global 7m
- Using Global Modules (Demo) 7m
- Module Detection in SystemJS (Demo) 8m
- Using CommonJS Modules (Demo) 2m
- Using AMD Modules (Demo) 2m
- Introduction 2m
- Safe Test Conversion 2m
- Karma Plugins (Demo) 5m
- Configuring karma-jspm (Demo) 7m
- First Test Run 7m
- Karma Test Pathing - Base Directory 6m
- Aliasing the Card Module 6m
- Convert Deck Tests 2m
- baseURL Relative vs. parentURL Relative Pathing 7m
- Finish Converting Tests - Ensure All Passing 1m
- Using Tests to Modularize Your App 7m
- Wallaby.js Test Runner 2m
- Testing Considerations with SystemJS 2m
- Introduction 3m
- Installing jspm (Demo) 1m
- jspm init (Demo) 11m
- jspm_packages (Demo) 5m
- jspm install (Demo) 5m
- Reproducible Installs (Demo) 2m
- jspm Registry (Demo) 2m
- Testing Changes with jspm in Place 4m
- Switching to Angular as a Module 5m
- How to Work with Dependencies That Aren't Modularized 14m
- jspm Registry Package Overrides 3m
- Future Proofing for jspm 0.17 3m
- Recap 1m
- Production Workflows 2m
- Leaving the App As Is 2m
- Pre Transpiling the App (Demo) 4m
- jspm Bundle (Demo) 6m
- jspm Bundle --inject (Demo) 4m
- Pros and Cons of Bundling 2m
- jspm Unbundle (Demo) 2m
- jspm Bundle --minify (demo) 2m
- Multiple Bundles (Demo) 8m
- CSP Build of SystemJS (Demo) 4m
- Self Executing Bundle (Demo) 2m
- jspm depcache (Demo) 8m
- jspm setmode Remote (Demo) 5m
- Which Production Workflow Is Best for You? 2m
- The What and How of Plugins 2m
- Text Plugin for Templates (Demo) 6m
- Bundling with Text Files (Demo) 2m
- Config File to Configure Plugins 1m
- Under the Hood - How Plugins Work (Demo) 6m
- Image Pre-loader Plugin (Demo) 2m
- CSS Plugin (Demo) 2m
- Under the Hood of the CSS Plugin 2m
- Creating a Markdown Plugin (Demo) 8m
- Documentation for Creating Plugins 0m
- Recap 2m
- How We'll Extract a Cards Package 4m
- Step 1 - Decouple (Demo) 5m
- Step 2 - SystemJS Packages Config (Demo) 10m
- Step 3 - Extract Cards Files into a New Repository (Demo) 4m
- Step 4 - Get Package Tests Working (Demo) 8m
- Step 5 - Wire in New Package Locally (Demo) 4m
- Step 6 - Patch Problems in Solitaire Game (Demo) 5m
- Packaging Scenarios 4m
- Recap 1m
- Introduction 1m
- Benefits: Language Improvements 5m
- Benefits: Explicit Relationships and Module Agnosticism 5m
- Benefits: A Package Manager That Understands Module Loading 4m
- Benefits: Familiar Development Workflow 2m
- Benefits: Language Level Module Support 3m
- Side Effects from Global Modules 10m
- Learning Resources 4m
- Prediction: Automatic Imports 3m
- Predictions for Module Loading 1m
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. Although his primary focus is on outcomes, implementation often includes technical competency. Wes frequently speaks about impactful aspects of software developm... more