JSFoo 2016

Tackling speed and performance for JavaScript

Ankur Sethi

Ankur Sethi

@s3thi

Web performance case study: the making of abof.com

Submitted Aug 15, 2016

A from-the-trenches narrative about how the fastest e-commerce website in India was built. Starring React, Redux, Webpack, and a whole lot of discipline.

Outline

Earlier this year, the folks at Aditya Birla Online Fashion commisioned a rewrite of their web front-end from scratch. The goal of the rewrite was to improve page speed – and hence conversion rates – on mobile devices. The first stage of the rewrite was carried out over a period of three months and, on launch day, the load times for the product listing pages on https://www.abof.com were the lowest among all the major e-commerce websites in India, even on the cheapest white-label Android devices on flaky 3G/2G connections.

My talk is a from-the-trenches narrative about how the Alaris Prime[1] and ActiveSphere[2] teams accomplished this feat, going into detail about our technology choices, build tooling, processes, and testing methodologies.

Along the way, I will touch on the key factors that affect web performance, the state of the front-end ecosystem, ReactJS and its ecosystem, ServiceWorkers and progressive web applications, and the importance of build tooling and automation while building front-end applications.

Building performant web applications isn’t hard, but it requires discipline. My goal is to decompose the philosophy and thought processes that lead to great webapps into a set of guidelines that tech teams can follow to replicate what we did at abof in their own workplaces.

The content and structure of the talk will roughly follow the series of blog posts we at Alaris Prime published on our blog recently. You can read the first part here: https://blog.alarisprime.com/e-commerce-case-study-building-faster-listing-pages-on-abof-com-part-1-cb99231a1e8a. Follow us to read the second and third parts of the case study as they are published!

[1] https://alarisprime.com

[2] https://activesphere.com

Requirements

  • A solid understanding of HTML, JavaScript, and CSS.
  • Experience with building web applications using any one of the popular front-end frameworks (Backbone, Angular, React, Ember, etc.)
  • Experience with debugging web applications using the Chrome Dev Tools.
  • Basic knowledge of how REST APIs, CDNs, and task automation works.

Speaker bio

Ankur takes selfies, listens to way too much hip-hop, and writes JavaScript at Alaris Prime.

He has worked on everything from filesystems to mobile games, but his first love has always been the web platform.

In the past, Ankur has built complex JavaScript applications for Insider.in, Understanding Limited, and Aditya Birla Online Fashion, among others.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more