Download as PDF, PPTX
Uploaded byPhil Leggetter
How to Build Front-End Web Apps that Scale - FutureJS
The document discusses building scalable front-end web applications, emphasizing the complexity and maintenance challenges of large-scale JavaScript apps. It outlines the essential components for ensuring maintainability, such as a structured codebase, efficient architecture, and collaboration among various contributors. Various solutions such as using services, MV* architecture, and effective testing methodologies are highlighted to enhance development productivity and application quality.
More Related Content
Similar to How to Build Front-End Web Apps that Scale - FutureJS
How to Build Front-End Web Apps that Scale - FutureJS
- 1. How to Build Front-EndWeb Apps that Scale 2014
- 2.
- 3. What is alarge-scale JavaScript app?
- 4. –Addy Osmani, PatternsFor 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.
- 5. Large Codebase More functionality=== More code
- 6. 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
- 7.
- 10. Gmail & CaplinTrader • Large Single Page Apps (SPAs) • Complex functionality • Complex interactions • User • Technology • Leave open all day
- 11.
- 12.
- 13.
- 14. Who contributes toan app? • Front-end devs • Back-end devs • Designers • QA • Infrastructure and release engineers • Technical authors
- 15. So, how doyou ensure an application is maintainable? 1. structure a massive codebase (js, css, html, i18n, images, config etc.) 2. an architecture for complex functionality and interaction (UI and other components) 3. make sure that all contributors can work in harmony 4. promote quality 5. development must be a productive experience 6. ensure all these compliment each other
- 16. The Solutions 1. Components/Widgets/Modules 2.A Services Layer 3. MV* 4. Efficient Testing 5. Tools to Support Workflow
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. Image of apppartially workingWho Broken the App?
- 25. Running in isolation === Fasterreload times
- 26.
- 28.
- 29. What is aservice? • Use services to access shared resources • In-app inter-component messaging • Persistence Service • RESTful Service • Realtime Service • Services are a Contract/Protocol/Interface
- 30. Using Services • Usea unique identifier for each service • Register (code or config). Code example: ! • Get http://martinfowler.com/articles/injection.html#ADynamicServiceLocator
- 34. Why use services? •Features should not directly communicate • Easily change implementation • Implementations can be injected for different scenarios: • Workbench / Test / App
- 35.
- 36.
- 37.
- 38. Efficient Testing (We’ll getto MV*)
- 40.
- 41.
- 42. 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
- 44. Need Proof? Our fullsuite Caplin Trader testing time went from >8 Hours < 30 minutes Much less for a single feature
- 45. Tooling & Developer Workflow Focuson Features
- 47.
- 48. Automation • Define workflow& promote consistency • Scaffolding • Dev Server • Builds/Bundling • Tests
- 49.
- 50.
- 51.
- 52. Knowledge of Runtime Scenarios •Workbench (dev-mode) • Test • App
- 53. Customization • Augment workflow •Identify allowable change to workflow • Automation commands • Builds/Bundling • Test Runner
- 54. Proven! 1. structure amassive codebase - by feature 2. an architecture for complex functionality and interaction - Services & MVVM 3. contributor harmony - separation of concerns; codebase structure, modules/components & architecture 4. promote quality - Services & MVVM === Highly testable 5. productive experience - tooling supports all of this & ensure consistency 6. complimentary - Yes, look at all the cross-over!
- 55.