2015
Pluralsight
Wes Higbee
7:24
English

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.

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

Download File Size:1.18 GB

---