how we scaled front end development - practical lessons on scaling js apps

How We ScaledFront End DevelopmentPractical Lessons on Scaling JS Apps

Praveen Selvam

The Indix Story

2012 2013 2014

$

Everything about Prices Everything about Products Scale & Velocity

$4.5MSeries A

$9MSeries A1

Indix - Today

450M+Product URLs

Data

Team

1500+Stores

42K+Brands

4 TBData in / day

2Countries

60Employees

30Engineers

The Indix JS Story

Year 1 Year 2 Year 3

Rapid prototyping

Build, Scrap, Repeat...

Optimize and Stabilize Scale, Productivity,Real User Monitoring

One app to many

Build

ScrapRepeat

Year 1

Rapid Prototyping

Inventing new stuffEffectiveness of product value

Engineering velocityAdaptability to changeFunctional coveragePresentable software

Why?

Aesthetics / UsabilityStability

PerformanceMetrics / MonitoringAutomated testing

Extreme focus on... Less importance for...

Templating:

Behaviour:

Data Mashup:

Tooling choices - “Simple”

960.gsjQuery + UIPlay / Rails

Year 2

Optimize and Stabilize

Enter the market quickly

Metrics / MonitoringFully automated testing

Dependency managementShared knowledge of code

Being production readyAesthetics / Usability

Stability & PerformanceEarly customer feedbackSome automated testing

Why?

Extreme focus on... Less importance for...

Templating:

Behaviour:

Asset packaging:

Data Mashup:

Caching:

Tooling choices - “Strategic”

Twitter BootstrapBackboneRailsRailsnginx

Benefits

● Bootstrapo Community tested templates & components

● Backboneo Adapters for external librarieso UI Routing - Drives the right abstraction

● Rails o Out of the box solutions

Major Challenge

Doing things in parallel

Customer version vs Development version

Managing dependenciesas the code grows

Customer version vs Development version

Feature flags

Customer version vs Development version

Branching

Frequent pulls from master into new branch

Keeping the branched time short

Managing dependencies as the code grows

Require.js + Rails Packaging

Require.js Rails Packaging

page1[needs]

mod1, mod2

sub_m1.js + sub_m2.js=

mod1_56789.js

Year 3

Scaling up as a team

Scale Productivity Real User Monitoring

One App to many Apps

Managing Scale

Larger / untidy code base=

Slower progress

Managing Scale

Keeping things in place

Using coveragefor cleanupFeature flag maintenanceRefactoring

Keeping things in place

CSS Usage

Keeping things in place

JSCoverage

Developer Productivity

Having more time

=

Scope for newer inventions

Developer Productivity

Core development activities

Developer Productivity

Yeoman

Developer Productivity

Yeoman

Developer Productivity

Grunt

Compilations LintingMinification

DocumentationDeployments and more...

Developer Productivity

Grunt

Source: Addy Osmani’s Presentation

gruntfile.js

Developer Productivity

Simpler Grunt Alternative

Developer Productivity

Bower

Developer Productivity

Bower

bower.json

Developer Productivity

Codekit

Developer Productivity

Alfred Workflows

Developer Productivity

Alfred Workflows

Real User Monitoring

Predictingdowntime

Reproducingcontext

Reaching outto Engineers

Predicting down time

Track client side issues

Predicting down time

NewRelic Dashboard

Predicting down time

Degradation signals

Predicting down time

Pingdom Transaction Checks

Reproducing context

Mixpanel Live Tracking

Reproducing context

Insights from Analytics

Reproducing context

Splunk Stacktraces

Reproducing context

SourceMaps

Reaching out to Engineers

PagerDuty

From One App to Multiple Apps

Standardizing UXDesign guidelines

IX LibraryCommon pieces of functionality

Recap

The Indix JS Story

Year 1 Year 2 Year 3

Rapid prototyping

Build, Scrap, Repeat...Optimize and Stabilize

Scale, Productivity,Real User Monitoring

One app to many

Twitter Bootstrap

Backbone

Rails

nginx

Feature Flags, Branching

Require.js

Coverage / Clean ups

Yeoman, Grunt, Bower

Codekit, Alfred

NewRelic, Pingdom

Mixpanel, Splunk, SourceMaps

PagerDuty

960.gs

jQuery + UI

Play / Rails

Key Learnings

Choose technologies wiselyBalance prototyping vs Being production ready

Stay up to dateBalance Customers vs Refactoring to absorb the best

technologies

Avoid disruptions to shipped products

Stay in control of products that’s shipped

Optimize your time and stay productive

Thank youpraveen@indix.com

www.praveenselvam.com