Download as PDF, PPTX
Uploaded byPhil Leggetter
Fed London - January 2015
The document discusses building scalable front-end web applications, focusing on the challenges posed by large codebases and complex interactions among contributors. It introduces solutions such as modular components, services, efficient testing, and tooling to support developer workflows. Key strategies include writing small, focused parts that can be combined into larger applications to promote harmony among developers and ensure quality while adapting to evolving technologies.
More Related Content
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Fed London - January 2015
- 1. Building Front-End Web Appsthat Scale
- 2. Phil @leggetter phil@pusher.com Head ofEvangelism
- 3. Concepts and practicesthat fed into the workflows and application architecture that was core to the BladeRunnerJS toolkit.
- 5. What is alarge-scale Front-End Web App?
- 6. Large Codebase More functionality=== More code
- 7. 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.
- 11. Gmail & CaplinTrader • Large Single Page Apps (SPAs) • Complex functionality • Complex interactions • User • Technology • Leave open all day
- 12.
- 13.
- 14.
- 15. Who contributes toan app? • Front-end devs • Back-end devs • Designers • QA / product owners / business analysts • Infrastructure and release engineers • Technical authors
- 16. Problems 1. Large codebase- Structure? 2. Complex interactions - Architecture? 3. Contributor harmony - Architecture & Developer Workflow? 4. Evolution of Features & Technology - Architecture? 5. Productive developer experience - Developer Workflow? 6. Promote Quality - All of the above
- 17. Slice up theApp https://www.youtube.com/watch?v=vXjVFPosQHw
- 18. The Solution “Write small,focused, modular parts, and progressively combine them into bigger things to make your app” @substack | @briantford
- 19. The Solutions 1. Features/Components 2.A Services Layer 3. MV* 4. Efficient Testing 5. Tools to Support Workflow
- 20. Slice up theApp
- 21. Slice up theApp
- 22.
- 23. What Problems isthis solving?
- 24. Slice up theApp
- 25. Image of apppartially workingWho Broken the App?
- 26.
- 27.
- 28.
- 31. Features • Unaffected bybreaking changes elsewhere • Easy to find & change assets • Can run in isolation • Fast reload times
- 32.
- 34.
- 35. What is aservice? • Use services to access shared resources • In-app inter-component messaging • Persistence Service • RESTful Service • Realtime Service
- 36. Services are aContract/Protocol/Interface https://www.youtube.com/watch?v=JjqKQ8ezwKQ
- 37. Slice up theApp
- 41. Using Services • Usea unique identifier for each service • Register (code or config). Code example: • Get http://martinfowler.com/articles/injection.html#ADynamicServiceLocator var chatService = require( ‘!chat.service’ );
- 42. Why use services? •Modular architecture • Features should not directly communicate • Easily change implementation • Implementations can be injected for different scenarios: • Workbench / Test / App
- 43.
- 46. Efficient Testing (We’ll getto MV*)
- 48.
- 49.
- 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 fullsuite Caplin Trader testing time went from >8 Hours < 30 minutes Much less for a single feature http://j.mp/jsscale
- 53. Tooling & DeveloperWorkflow Focus on Features Support Agile
- 55. Automation • Define workflow& promote consistency • Scaffolding • Development Server • Tests • Builds/Bundling
- 56.
- 57. Intelligence • Code DependencyAnalysis • Enforces rules • Knowledge of runtime scenarios & service configuration e.g. Workbench, Test, App/Aspect
- 58. Customization • Augment workflow •Identify allowable change to workflow • Automation commands • Builds/Bundling • Test Runner
- 59. Proven! 1. Large codebase- By Feature: Component/Service 2. Complex interactions - Components & Services 3. Contributor harmony - Components, Services & Tooling 4. Evolution of Features & Technology - Components (e.g render tech separation) & Services (common abstractions) 5. Productive developer experience - Tooling to support workflow & concepts 6. Promote Quality - MVVM, Services and tooling. Facilitated by all of the above
- 60. Phil @leggetter phil@pusher.com Head ofEvangelism