how to build single page html5 apps that scale
DESCRIPTION
Developing large apps is difficult. Ensuring that code is consistent, well structured, tested, maintainable and has an architecture that encourages enhancement is essential. When it comes to large server-focused apps, solutions to this problem have been tried and tested. But, how do you achieve this when building HTML5 single page apps? In this talk we’ll cover the signs to watch out for as your HTML5 SPA grows and provide examples of some of the tooling types that can contribute-to as well as ease the growing pains. Finally, we’ll demonstrate how tooling can be used to support a set of conventions, practices and principles that enable a productive developer workflow where the first line of code is feature code, features can be developed in isolation, code conflicts are avoided by grouping assets by feature and features are composed into apps. The demonstrations will use BladeRunnerJS, an open source developer toolkit written in Java, but the concepts are widely applicable.TRANSCRIPT
![Page 1: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/1.jpg)
@leggetter#HTML5AtScale
How to Build Single Page HTML5 Apps that Scale
Phil Leggetter @leggetter Caplin Systems
![Page 2: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/2.jpg)
![Page 3: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/3.jpg)
@leggetter#HTML5AtScale
bladerunnerjs.org
Open Source
![Page 4: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/4.jpg)
What is a large-scale Single Page HTML5 App?
![Page 5: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/5.jpg)
@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.
![Page 6: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/6.jpg)
Large CodebaseMore functionality === More code
![Page 7: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/7.jpg)
@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
![Page 8: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/8.jpg)
Complexity
![Page 9: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/9.jpg)
![Page 10: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/10.jpg)
![Page 11: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/11.jpg)
@leggetter#HTML5AtScale
Gmail & Caplin Trader• Large Single Page Apps (SPAs)
• Complex functionality
• Complex interactions
• User
• Technology
• Leave open all day
![Page 12: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/12.jpg)
Features: Change, Come & Go
![Page 13: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/13.jpg)
Feature Progression
![Page 14: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/14.jpg)
ContributorsThe Human Factor
![Page 15: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/15.jpg)
@leggetter#HTML5AtScale
Who contributes to an app?• Front-end devs
• Back-end devs
• Designers
• QA
• Infrastructure and release engineers
• Technical authors
• Multiple teams
![Page 16: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/16.jpg)
@leggetter#HTML5AtScale
Maintainable?1. Massive codebase
2. Architecture
3. Contributor harmony
4. Promote quality
5. Productive developer experience
6. ^All complimentary
![Page 17: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/17.jpg)
The Solutions
1. Components/Widgets/Modules/Features
2. A Services Layer
3. MV*
4. Efficient Testing
5. Tools to Support Workflow
![Page 18: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/18.jpg)
@YourTwitterHandle#DVXFR14{session hashtag} @leggetter#HTML5AtScale
Prov
e it!
![Page 19: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/19.jpg)
Feature ==> Blade
![Page 20: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/20.jpg)
Finding assets is hard
![Page 21: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/21.jpg)
/assets /feature-name
![Page 22: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/22.jpg)
Long App Reloads
![Page 23: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/23.jpg)
Image of app partially workingWho Broke the App?
![Page 24: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/24.jpg)
![Page 25: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/25.jpg)
![Page 26: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/26.jpg)
@leggetter#HTML5AtScale
Features• Can run in isolation
• Unaffected by breaking changes elsewhere
• Fast reload times
• Easy to find & change assets
![Page 27: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/27.jpg)
Compose Components/Modules
into Apps
![Page 28: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/28.jpg)
@leggetter#HTML5AtScale
Adding features to Apps
![Page 29: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/29.jpg)
![Page 30: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/30.jpg)
Services
![Page 31: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/31.jpg)
@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
![Page 32: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/32.jpg)
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
![Page 33: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/33.jpg)
![Page 34: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/34.jpg)
![Page 35: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/35.jpg)
![Page 36: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/36.jpg)
@leggetter#HTML5AtScale
Why use services?
• Features should not directly communicate
• Easily change implementation
• Implementations can be injected for different scenarios:
• Workbench / Test / App
![Page 37: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/37.jpg)
Fake Services
![Page 38: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/38.jpg)
Fake/Stub/Mock Services
![Page 39: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/39.jpg)
Real Services
![Page 40: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/40.jpg)
Efficient Testing (We’ll get to MV*)
![Page 41: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/41.jpg)
@leggetter#HTML5AtScale
~2009 Testing Requirements• Cross-browser IE6+*, Firefox 3.5*+ & Chrome
• Class-level Unit Tests
• Application Acceptance Tests
* Remember this was 2009
![Page 42: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/42.jpg)
@leggetter#HTML5AtScale
![Page 43: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/43.jpg)
@leggetter#HTML5AtScale
Application ATs• Selenium Tests
• Selenium User-Extensions
• Actions, Accessors/Assertions & Locators
• VM infrastructure for CI
![Page 44: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/44.jpg)
@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
![Page 45: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/45.jpg)
@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
![Page 46: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/46.jpg)
@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
![Page 47: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/47.jpg)
![Page 48: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/48.jpg)
Don’t Touch that DOM
![Page 49: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/49.jpg)
MVVM
![Page 50: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/50.jpg)
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
![Page 51: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/51.jpg)
![Page 52: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/52.jpg)
Need Proof?Our full suite Caplin Trader
testing time went from
>8 Hours
< 30 minutes
Much less for a single feature
![Page 53: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/53.jpg)
Tooling & Developer Workflow Focus on Features
![Page 54: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/54.jpg)
![Page 55: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/55.jpg)
What tooling offers?
![Page 56: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/56.jpg)
@leggetter#HTML5AtScale
Automation
• Define workflow & promote consistency
• Scaffolding
• Dev Server
• Builds/Bundling
• Tests
![Page 57: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/57.jpg)
Intelligence
![Page 58: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/58.jpg)
Compliance
![Page 59: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/59.jpg)
@leggetter#HTML5AtScale
Knowledge of Runtime Scenarios
• Workbench (dev-mode)
• Test
• App
![Page 60: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/60.jpg)
@leggetter#HTML5AtScale
Dependency Analysis
![Page 61: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/61.jpg)
![Page 62: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/62.jpg)
@leggetter#HTML5AtScale
Customisation
• Augment workflow
• Identify allowable change to workflow
• Automation commands
• Builds/Bundling
• Test Runner
![Page 63: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/63.jpg)
@YourTwitterHandle#DVXFR14{session hashtag} @leggetter#HTML5AtScale
Prov
en!
![Page 64: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/64.jpg)
@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!
![Page 65: How to Build Single Page HTML5 Apps that Scale](https://reader036.vdocument.in/reader036/viewer/2022062307/554f6cafb4c905c8088b52ba/html5/thumbnails/65.jpg)
@leggetter#HTML5AtScale
Thanks / Questions
•Phil @leggetter
•BladeRunnerJS
•@BladeRunnerJS
•bladerunnerjs.org