Lazy Loading JS modules in the browser (talk)

I gave this talk on Mar 1st, 2017 at Mobile+Web DevCon
in San Francisco, CA and on July 27th, 2017 at ForwardJS
in San Francisco, CA

This talk is an updated version of Lazy Loading ES2015 modules in the browser is about loading code during page load time vs lazy loading, then how to load JS modules both synchronously (during page load) and asynchronously (lazy-load) using System.js over Babel, as well as how to used 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 ES Modules spec and System.js
  • Importing modules synchronously and asynchronously
  • Webpack 2 as a dependency management system

Slide deck

Resources

Sample repos

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

Design Patterns for JavaScript featuring Modules

I gave this talk on July 21st, 2015 at DevCon5 in New York, NY and on October 27th, 2016 at Women Who Code Meetup in San Francisco, CA.

This talk is about the essential design patterns for JavaScript applications such as Constructor, Façade and Module, focusing on the different module strategies as CommonJS, AMD and ES2015 Modules.

Slide deck

Prerequisites:

  • Intermediate JavaScript
  • Advanced OOP
  • Familiarity with Design Patterns

Resources:

Lazy Loading ES2015 modules in the browser (article)

In September, 2016 I published an article on Avenue Code Snippets, about Lazy Loading ES2015 modules in the browser.

Article Lazy Loading ES2015 modules in the browser - Avenue Code Snippets

Abstract

Over the last few years, developers have been relentlessly moving their server-side sites to the client-side on the premise that the page performance would be improved.

However, this may not be enough. Have you ever considered that your site may be downloading more stuff than is being actually used? Meet Lazy-loading, a design pattern about deferring the initialization (loading/fetching/allocation) of a resource (code/data/asset) until the point at which it is needed.

This article demonstrates how to load ES2015 modules synchronously (during the page load) and asynchronously (performing lazy-loading) using System.js.

Mastering ES6 higher order functions for Arrays

In September, 2015 I published another article on AirPair, about the native Higher-order functions for Arrays in JavaScript, and how to develop your own higher-order function for Array.

Article Mastering ES6 higher-order functions for Arrays - AirPair

Abstract

Higher-order functions are beautifully concise yet expressive when dealing with data. Elevate your functional programming skills by learning ES6 higher-order functions for Arrays!