Lazy Loading ES2015 modules in the browser (talk)

I gave this talk on June 17th, 2016 at Front End Design Conference
in St. Petersburgh, FL, on August 2nd, 2016 at DevCon5 in New York, NY, on August 18th, 2016 at Abstractions in Pittsburgh, PA, on September 29th, 2016 at SF Web Performance Meetup in San Francisco, CA, and on December 8th, 2016 at Women Who Code Meetup in San Francisco, CA.

This talk is about loading code during page load time vs lazy loading, then how to load ES2015 modules both synchronously (during page load) and asynchronously (lazy-load) using System.js over Babel, as well as how to use JSPM and Webpack 2 to bundle your app and resolve dependencies.

What will the audience learn

  • The fundamentals on when to load your modules (page load time vs lazy loading) for a most optimized page performance
  • The 3 main module systems in JavaScript: AMD, CommonJS and ES2015 modules
  • The ES2015 Module Loader spec and System.js
  • Importing modules synchronously and asynchronously
  • JSPM as a dependency management system
  • Webpack 2 as a dependency management system

Slide deck

Resources

Sample repos