How to Build Single Page HTML5 Apps that Scale
1 like1,514 views
The document discusses strategies for building large-scale single-page HTML5 applications, highlighting the complexity and significant developer effort required for maintenance. It emphasizes the importance of a structured architecture, effective testing, and the use of services to manage functionality and improve performance. Additionally, it outlines best practices for developer collaboration and maintaining code quality through components, modular design, and automation tools.
How to Build Single Page HTML5 Apps that Scale
- 1. @leggetter#HTML5AtScale How to Build Single Page HTML5 Apps that Scale Phil Leggetter @leggetter Caplin Systems
- 4. What is a large-scale Single Page HTML5 App?
- 5. @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.
- 6. Large Codebase More functionality === More code
- 7. @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
- 8. Complexity
- 11. @leggetter#HTML5AtScale Gmail & Caplin Trader • Large Single Page Apps (SPAs) • Complex functionality • Complex interactions • User • Technology • Leave open all day
- 12. Features: Change, Come & Go
- 15. @leggetter#HTML5AtScale Who contributes to an app? • Front-end devs • Back-end devs • Designers • QA • Infrastructure and release engineers • Technical authors • Multiple teams
- 16. @leggetter#HTML5AtScale Maintainable? 1. Massive codebase 2. Architecture 3. Contributor harmony 4. Promote quality 5. Productive developer experience 6. ^All complimentary
- 17. The Solutions 1. Components/Widgets/Modules/Features 2. A Services Layer 3. MV* 4. Efficient Testing 5. Tools to Support Workflow
- 22. Long App Reloads
- 23. Image of app partially workingWho Broke the App?
- 26. @leggetter#HTML5AtScale Features • Can run in isolation • Unaffected by breaking changes elsewhere • Fast reload times • Easy to find & change assets
- 30. Services
- 31. @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
- 32. 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
- 36. @leggetter#HTML5AtScale Why use services? • Features should not directly communicate • Easily change implementation • Implementations can be injected for different scenarios: • Workbench / Test / App
- 37. Fake Services
- 39. Real Services
- 40. Efficient Testing (We’ll get to MV*)
- 41. @leggetter#HTML5AtScale ~2009 Testing Requirements • Cross-browser IE6+*, Firefox 3.5*+ & Chrome • Class-level Unit Tests • Application Acceptance Tests * Remember this was 2009
- 43. @leggetter#HTML5AtScale Application ATs • Selenium Tests • Selenium User-Extensions • Actions, Accessors/Assertions & Locators • VM infrastructure for CI
- 44. @leggetter#HTML5AtScale AT Process 3 3. Launch browser + App 1 1. Pair Browser + Backend VM 2 2. Reset & restart backend services 5 5. Record results 4 4. Execute ATs 6 6. Reset backend services 8. Execute next test… 8 7 7. Restart/refresh browser
- 45. @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
- 46. @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
- 48. Don’t Touch that DOM
- 49. MVVM
- 50. 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
- 52. Need Proof? Our full suite Caplin Trader testing time went from >8 Hours < 30 minutes Much less for a single feature
- 53. Tooling & Developer Workflow Focus on Features
- 56. @leggetter#HTML5AtScale Automation • Define workflow & promote consistency • Scaffolding • Dev Server • Builds/Bundling • Tests
- 57. Intelligence
- 58. Compliance
- 59. @leggetter#HTML5AtScale Knowledge of Runtime Scenarios • Workbench (dev-mode) • Test • App
- 62. @leggetter#HTML5AtScale Customisation • Augment workflow • Identify allowable change to workflow • Automation commands • Builds/Bundling • Test Runner
- 64. @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!
- 65. @leggetter#HTML5AtScale Thanks / Questions •Phil @leggetter •[email protected] ! •BladeRunnerJS •@BladeRunnerJS •bladerunnerjs.org