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.

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.

From Backbone to React + Vagrant & Node & Backbone & RequireJS

On February 12th, 2015 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Place.

Thanks Avenue Code for sponsoring the food and drinks and Chengyin Liu from Place for arranging the venue!

On this meetup we had 2 talks:

1) Doron Segal - Vagrant + Node + Backbone + RequireJS showcase

This talk is a showcase about how these technologies play along in a effective way: Vagrant + Node + Backbone + RequireJS.

2) Chengyin Liu - From Backbone to React: Our Experiences

Since June last year, Place (formerly Backplane) has used React to build a platform for online communities. Instead of taking 2 months off to rewrite our system, we incrementally migrated our stack from Backbone to React. We would like to share our experience to help Backbone developers to start with React.

Check out From Backbone to React + Vagrant & Node & Backbone & RequireJS.

You can also watch the videos for slides and speakers.

Enlighten your coding skills as you would play a videogame

We all know that becoming a solid software developer is not something that happens in a day.

However, one should not stop learning when he knows enough coding to land a good job. Coding is an exercise like running, swimming, or playing a musical instrument: if you don’t practice enough, you will get rusty.

So why not combine business with pleasure and taking coding challenges as you play a videogame?

On this post at Medium, originally made for Avenue Code‘s Code Highway blog, I suggest how to game your way to coding success.

Stateless UIs with React + Flux with Backbone & Multiple Inheritance with Mixins

On January 15th, 2015 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Brandcast.

Thanks Avenue Code for sponsoring the food and drinks and Dan Lynch from Brandcast for arranging the venue!

On this meetup we had 2 talks:

1) Hao Liu - Backbone View Multiple Inheritance Through Mixins

Backbone provides a convenient way to subclass your view through single inheritance. However, it does not prescribe a way to extend your view with properties from multiple superclasses, i.e. multiple inheritance. In this presentation we are going to discuss how to achieve multiple inheritance through view mixins, and demonstrate how it can be implemented as a framework.

2) Jordan Garcia - Writing Stateless UIs with React + Flux

Easier testability, quicker development and code that’s easier to reason about are just some of the benefits of writing stateless UIs. This session will deep dive into the core concepts of Flux Architecture and how it partners with ReactJS. Finally we will demonstrate how these concepts can be applied to your Backbone application to achieve a highly decoupled View layer.

Check out Stateless UIs with React + Flux with Backbone & Multiple Inheritance with Mixins.

You can also watch the Video.

Security breach warning - update your git client ASAP!

A critical security breach with Git clients was discovered mid-December. It affects all versions of official Git clients, both command-line and graphical tools such as the GitHub app.

According to GitHub engineers, this breach would allow hackers to hijack your Git tree when cloning/checking out a repository, allowing them to execute any command in the client machine. So, it is strongly suggested that you take 5 minutes of your time to update it ASAP!

On this post at Medium, originally made for Avenue Code‘s Code Highway blog, I provide a quick and short guide on updating your git client.

Jasmine Testing for Models and Views + Directory structure on modularized apps

On November 13th, 2014 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Macy’s.com.

Thanks Avenue Code for sponsoring the food and drinks and Yulia Kukuyuk from Macy’s.com for arranging the venue!

On this meetup we had 2 talks:

1) David Beck - Modularized Backbone Apps Part 2: Directory Structure

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) Brenda Jin - Jasmine Testing for Backbone.js Models and Views

This session will cover a breakdown of how to approach Jasmine testing for Backbone.js Models and Views, how Jasmine testing works with instantiating new Models and Views, and how to trigger and test custom events and their callbacks. Her slide deck is also available.

Check out Jasmine Testing for Models and Views + Directory structure on modularized apps.

You can also watch the Video.

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.

Web Components 101

Over the past few years a lot of people have been trying to rethink the way the web can/should be used. Currently, front-end developers find themselves in the often-frustrating situation of having to build complex websites with HTML–which can often be a fairly blunt tool–on top of the clunky foundations of Jurassic-age web browser limitations.

On this post at Medium, originally made for Avenue Code‘s Code Highway blog, I answer the million-dollar question: is it possible to abstract low-level constructs of HTML to define high-level semantic components? And the answer is yes!

We are back! Learn about Firebase & Backbone + building a better Backbone.View!

On September 11th, 2014 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Pivotal Labs.

Me and Summer Kim volunteered to revamp this meetup after 1 year of hiatus. Thanks Avenue Code for sponsoring the food and drinks and Jonathon Kresner from AirPair for arranging the venue!

On this meetup we had 2 talks:

1) David East - Building realtime web apps with Firebase and Backbone

Realtime data is more than just a buzz word. It’s the new evolution of the way data is being delivered around the web. In this talk we’ll learn how we can use Firebase to give our apps realtime data. We’ll take a look at why realtime data is difficult to implement and what we can do to make it easier. At the end we’ll do a live coding session where we’ll give a Backbone app realtime powers using Firebase’s BackFire library.

2) RJ Zaworksi - Interop! Building a better Backbone.View

Let’s admit it: there are better tools than Backbone for UI development. While projects like Marionette, Thorax, and Stickit help smooth some rough edges, independent libraries like react.js offer a compelling alternative. In this conversation, we’ll explore opportunities for matching Backbone’s strengths as a data layer with the power of modern UI frameworks.

Check out We are back! Learn about Firebase & Backbone + building a better Backbone.View!.