Download - How to Build Single Page HTML5 Apps that Scale

@leggetter#HTML5AtScale

How to Build Single Page HTML5 Apps that Scale

Phil Leggetter @leggetter Caplin Systems


bladerunnerjs.org

Open Source

What is a large-scale Single Page HTML5 App?


–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


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


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


Who contributes to an app?• Front-end devs

• Back-end devs

• Designers

• QA

• Infrastructure and release engineers

• Technical authors

• Multiple teams


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?


Features• Can run in isolation

• Unaffected by breaking changes elsewhere

• Fast reload times

• Easy to find & change assets

Compose Components/Modules

into Apps


Adding features to Apps

Services


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

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


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*)


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

• Class-level Unit Tests

• Application Acceptance Tests

* Remember this was 2009


Application ATs• Selenium Tests

• Selenium User-Extensions

• Actions, Accessors/Assertions & Locators

• VM infrastructure for CI


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


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


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

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?


Automation

• Define workflow & promote consistency

• Scaffolding

• Dev Server

• Builds/Bundling

• Tests

Intelligence

Compliance


Knowledge of Runtime Scenarios

• Workbench (dev-mode)

• Test

• App


Dependency Analysis


Customisation

• Augment workflow

• Identify allowable change to workflow

• Automation commands

• Builds/Bundling

• Test Runner

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

Prov

en!


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!


Thanks / Questions

•Phil @leggetter

•[email protected] !

•BladeRunnerJS

•@BladeRunnerJS

•bladerunnerjs.org