@leggetter#HTML5AtScale

How to Build Single Page HTML5 Apps that Scale

Phil Leggetter @leggetter Caplin Systems

@leggetter#HTML5AtScale

bladerunnerjs.org

Open Source

What is a large-scale Single Page HTML5 App?

@leggetter#HTML5AtScale

–Addy Osmani, Patterns For Large-Scale JavaScript Application Architecture

In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data

manipulation and display falls to the browser.

Large CodebaseMore functionality === More code

@leggetter#HTML5AtScale

Caplin Trader• SDK:

• ~1,000 JavaScript files

• ~131,000 LoC

• ~131 lines per file

• ~650 test files

• ~95,000 test LoC

• Typical Apps:

• ~425 JavaScript files

• ~50,000 LoC

• ~117 lines per file

• ~200 test files

• ~21,000 test LoC

Complexity

@leggetter#HTML5AtScale

Gmail & Caplin Trader• Large Single Page Apps (SPAs)

• Complex functionality

• Complex interactions

• User

• Technology

• Leave open all day

Features: Change, Come & Go

Feature Progression

ContributorsThe Human Factor

@leggetter#HTML5AtScale

Who contributes to an app?• Front-end devs

• Back-end devs

• Designers

• QA

• Infrastructure and release engineers

• Technical authors

• Multiple teams

@leggetter#HTML5AtScale

Maintainable?1. Massive codebase

2. Architecture

3. Contributor harmony

4. Promote quality

5. Productive developer experience

6. ^All complimentary

The Solutions

1. Components/Widgets/Modules/Features

2. A Services Layer

3. MV*

4. Efficient Testing

5. Tools to Support Workflow

@YourTwitterHandle#DVXFR14{session hashtag} @leggetter#HTML5AtScale

Prov

e it!

Feature ==> Blade

Finding assets is hard

/assets /feature-name

Long App Reloads

Image of app partially workingWho Broke the App?

@leggetter#HTML5AtScale

Features• Can run in isolation

• Unaffected by breaking changes elsewhere

• Fast reload times

• Easy to find & change assets

Compose Components/Modules

into Apps

@leggetter#HTML5AtScale

Adding features to Apps

Services

@leggetter#HTML5AtScale

What is a service?• Use services to access shared resources

• In-app inter-component messaging

• Persistence Service

• RESTful Service

• Realtime Service

• Services are a Contract/Protocol/Interface

Setting & Getting Services• Use a unique identifier for each service i.e. a simple string

• Register (code or config). Code example:

!

• Get

http://martinfowler.com/articles/injection.html#ADynamicServiceLocator

@leggetter#HTML5AtScale

Why use services?

• Features should not directly communicate

• Easily change implementation

• Implementations can be injected for different scenarios:

• Workbench / Test / App

Fake Services

Fake/Stub/Mock Services

Real Services

Efficient Testing (We’ll get to MV*)

@leggetter#HTML5AtScale

~2009 Testing Requirements• Cross-browser IE6+*, Firefox 3.5*+ & Chrome

• Class-level Unit Tests

• Application Acceptance Tests

* Remember this was 2009

@leggetter#HTML5AtScale

@leggetter#HTML5AtScale

Application ATs• Selenium Tests

• Selenium User-Extensions

• Actions, Accessors/Assertions & Locators

• VM infrastructure for CI

@leggetter#HTML5AtScale

AT Process

3

3. Launch browser + App

1

1. Pair Browser + Backend VM2

2. Reset & restart backend services

5

5. Record results

4

4. Execute ATs6

6. Reset backend services

8. Execute next test…

8

7

7. Restart/refresh browser

@leggetter#HTML5AtScale

Test Results• ~1300 UTs

• ~500 ATs

• 50 VM infrastructure to run tests concurrently

• 8 Hours

• Test results highly unreliable

• We could only run a full suite of tests once per day - at night

@leggetter#HTML5AtScale

Inefficient Testing!• Resetting back end services is too slow

• Lots of moving parts. Things can go wrong.

• Services don’t start = app won’t work. Not code but environment failure.

• We want to avoid IO

• … and querying the DOM

Don’t Touch that DOM

MVVM

End-to-End Module Testing

• Testing features in isolation

• Change view model and assert against mocked Service

• Inject fake service, make calls and assert View Model

Need Proof?Our full suite Caplin Trader

testing time went from

>8 Hours

< 30 minutes

Much less for a single feature

Tooling & Developer Workflow Focus on Features

What tooling offers?

@leggetter#HTML5AtScale

Automation

• Define workflow & promote consistency

• Scaffolding

• Dev Server

• Builds/Bundling

• Tests

Intelligence

Compliance

@leggetter#HTML5AtScale

Knowledge of Runtime Scenarios

• Workbench (dev-mode)

• Test

• App

@leggetter#HTML5AtScale

Dependency Analysis

@leggetter#HTML5AtScale

Customisation

• Augment workflow

• Identify allowable change to workflow

• Automation commands

• Builds/Bundling

• Test Runner

@YourTwitterHandle#DVXFR14{session hashtag} @leggetter#HTML5AtScale

Prov

en!

@leggetter#HTML5AtScale

Proven!1. Massive codebase - features

2. Architecture - features, services & MVVM

3. Contributor harmony - separation of concerns; codebase structure, features & architecture

4. Promote quality - features, services & MVVM

5. Productive developer experience - tooling

6. ^All complimentary - Yep!

@leggetter#HTML5AtScale

Thanks / Questions

•Phil @leggetter

•phil@leggetter.co.uk !

•BladeRunnerJS

•@BladeRunnerJS

•bladerunnerjs.org