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.

10 tips for writing maintainable code in Backbone.js

I gave this talk on July 20th, 2015 at Dancing with Marionette.js meetup in New York, NY.

This talk explains some pitfalls, solutions and good practices for common scenarios in Backbone.js. In this talk the audience will learn about Marionette.js, React, Epoxy.js and Sinon.JS and how do they solve problems about performance, memory, productivity and code organization.

Video

YouTube video link

Slide deck

Prerequisites:

  • Backbone.js
  • Design patterns for large-scale javascript
  • Curiosity
  • Opinion

Resources:

The mind-boggling universe of JavaScript Module strategies

In April, 2015 I published an article on AirPair, about JavaScript Module strategies and how to work with them.

Article The mind-boggling universe of JavaScript Module strategies - AirPair

Abstract

If you feel like “no matter what you do, there is always something funky in your JavaScript code”, I would bet that your Module strategy is not working out so well.

The importance of adopting a proper JavaScript Module strategy is often underestimated as a preference contest, so it is indeed important to really understand your needs. This article exposes the foundations of different JavaScript Module strategies such as ad hoc, CommonJS, AMD and ES6 modules, and how to get started with ES6 modules right now.

Backbone.js tricks or treats for HTML5DevConf

I gave this talk on October 20th, 2014 at HTML5DevConf in San Francisco, CA, and also on October 9th, 2014 at Backbone.js Hackers meetup also in San Francisco, CA.

This talk explains some pitfalls, solutions and good practices for common scenarios in Backbone.js. In this talk the audience will learn about Marionette.js, React, Epoxy.js and Sinon.JS and how do they solve problems about performance, memory, productivity and code organization.

Slide deck

Prerequisites:

  • Backbone.js
  • Design patterns for large-scale javascript
  • Curiosity
  • Opinion

Resources:

Backbone.js best practices & Marionette.js + Backbone.Subviews/Ba­ckbone.Courier

On October 9th, 2014 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Cloudflare.

Thanks Avenue Code for sponsoring the food and drinks and James Kyle from Cloudflare for arranging the venue!

On this meetup we had 2 talks:

1) David Beck - Modularized Backbone Apps Part 1: Subviews and messaging

This talk is about modularization of the front end into encapsulated, reusable packages, via development of tools such as cartero, backbone.subviews, and backbone.courier.

2) Tiago Garcia - Backbone.js tricks or treats

This talk explains some pitfalls, solutions and good practices for common scenarios in Backbone.js. In this talk the audience will learn about Marionette.js, React.js, Epoxy.js and Sinon.JS and how do they solve problems about performance, memory, productivity and code organization. His slide deck is also available.

Check out Backbone.js best practices & Marionette.js + Backbone.Subviews/Ba­ckbone.Courier.

Backbone.js tricks or treats

On March 20th, 2014 I gave this talk at Avenue Code in Belo Horizonte, MG, Brazil. This talk explains some pitfalls, solutions and good practices for common scenarios in Backbone.js. In this talk the audience will learn about Marionette.js, Epoxy.js and Sinon.JS and how do they solve problems about performance, memory, productivity and code organization.

Slide deck

Prerequisites:

  • Backbone.js
  • Design patterns for large-scale javascript
  • Curiosity

Resources:

Design Patterns for Large-Scale JavaScript

On January 27th, 2014 I gave this talk at Avenue Code in Belo Horizonte, MG, Brazil, about the essential design patterns for large-scale JavaScript applications.

Slide deck

Prerequisites:

  • Intermediate JavaScript
  • Advanced OOP
  • Familiarity with Design Patterns

Resources:

Design Patterns, enjoy moderately [pt]

In October, 2011 I published an article (in Portuguese) features as the cover of Java Magazine #98, about principles, discussions and reflections about using designing patterns, in order to help the reader to develop critical sense about them. This way, the reader can extract knowledge from himself in order to apply design patterns moderately.

Article Design Patterns, enjoy moderately - DevMedia

Summary

The article presents reflections about using design patterns, and shows some common causes for their misuse, besides some bad implementation examples. Next, introduces the GRASP principles and its relation with the design patterns, in order to guide the developer to use them adequately. Lastly, raises some questions to evaluate the implementation of a design pattern and considerations for the reader to develop critical sense.

When is the subject useful

The subject is useful for alerting the developer about the proper use of design patterns, which are solutions for certain problems, but could be problems for certain solutions. It is important to the developer know how to judge the usage of a design pattern in a particular context, evaluating its applicability and consequences, aiming for a optimal solution.

Books