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!

Catching up with JavaScript higher-order functions

In August, 2015 I published an article on AirPair, about the Higher-order functions in JavaScript.

Article Catching up with JavaScript higher-order functions - AirPair

Abstract

They are all around you, your code, your company, your community, your frameworks. You may not be aware of them or perhaps you never properly understood what is going on with them, but trust me: your life will never be the same without them. They are unique and pave the way for Functional programming. With you, Higher-order functions!

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:

Leveling up - Simple steps to optimize the Critical Rendering Path

In May, 2015 I published an article on AirPair, about the Critical Rendering Path and how to optimize it.

Article Leveling up: Simple steps to optimize the Critical Rendering Path - AirPair

Abstract

Web development is tricky. There is a myriad of goals to strive for, which can be very cumbersome for your page performance, and can spike your Speed Index way up.

The Critical Rendering Path (or CRP) is the sequence of steps the browser takes to render the critical content of a webpage. This article explains about simple steps on how to optimize your page’s Critical Rendering Path in order to achieve better performance.

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 using Extensible Database APIs over HTTP + Webpack for the win!

On March 18th, 2015 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Remind.

Thanks Avenue Code for sponsoring the food and drinks and Brenda Campbell from Remind for arranging the venue!

On this meetup we had 2 talks:

1) Jerry Su - Upgrading your JavaScript with Webpack

Webpack is a flexible and extensible module bundler that can boost your productivity when building web applications. If you use or have heard of Browserify and RequireJS, then you know how these module systems improve code organization. webpack goes a step further and bundles not only JavaScript, but also CSS, images, fonts, and all other static resources with little effort. webpack also provides a development server that can improve your workflow by eliminating all or most of your build with an environment that is more fun to work with (linting in the browser, hot code replacement, and more) while minimizing differences between your production environment. I will focus on how you can start using webpack today on an existing codebase so that you can begin to take advantage of these many benefits.

Check out the list of commits showed in upgrading the TodoMVC/RequireJS app to use Webpack.

2) Max Neunhöffer - Extensible database APIs and their role in software architecture

These days, more and more software applications are designed using a micro services architecture, that is, as suites of independently deployable services, talking to each other with well-defined interfaces. This approach is helped by the fact that many NoSQL databases expose their API through HTTP, which makes it particularly easy to define the interfaces.

In this talk I will explain the benefits of this approach to the
software architecture and development process. I will keep the presentation practice oriented by showing concrete examples in ArangoDB and JavaScript, using Backbone.js

Check out Backbone using Extensible Database APIs over HTTP + Webpack for the win!.

You can also watch the videos for slides and speakers.

Revisiting XP - be a thoughtful programmer by exercising more collective ownership

In March, 2015 I published an article on InfoQ, about effectively exercising collective ownership to avoid confrontation and technical debt.

Article Revisiting XP: be a thoughtful programmer by exercising more collective ownership - InfoQ

Abstract

All in all, developers face regular frustration. This is pretty much because we are all artful individuals, so every single developer has his own tenets. Such tenets represent much more than what is taught in college - they actually constitute the developer’s personality! They are your fingerprint, something that can identify you. When a second developer reads your code, he will start making assumptions about you.

When two developers’ personalities run into each other, there is generally confrontation. While this can be extremely educational and uplifting, it can also be disturbing and troublesome if both parties don’t share a positive attitude. A key factor here is exercising what I call “thoughtful programming”.

This article will give a few suggestions about how to program in a more thoughtful way, by revisiting one of the XP (Extreme programming) rules: the concept of collective ownership.