@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
•BladeRunnerJS
•@BladeRunnerJS
•bladerunnerjs.org