building front-end apps that scale - fosdem 2014
DESCRIPTION
Developing large apps is difficult. Ensuring that the code is consistent, well structured, tested, and that the architecture encourages maintainability is essential. When it comes to building large server-focused apps the solutions to this problem have been tried and tested. But, how do we achieve this when it comes to HTML5 single page apps? BladeRunnerJS is an open source developer toolkit and lightweight front-end framework that has helped the company I work for (Caplin Systems) ensure that a 200k LoC JavaScript codebase hasn’t become a tangled mess of unstable spaghetti code (with bacon bits). This codebase is then delivered to customers, along with around 50k LoC example functionality for them to build upon, and they're expected not to turn that into a tangled ... you get the idea. In this talk you'll learn about the main concepts we have applied, how we have applied them - and how you can too - to achieve what might sound like the impossible.TRANSCRIPT
![Page 1: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/1.jpg)
Building front-end apps that
Scale
![Page 3: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/3.jpg)
Overview
• What is a Large Scale front-end App?
• What are the signs of scaling?
• What are the solutions? (with demos)
![Page 4: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/4.jpg)
What is a large-scale JavaScript app?
![Page 5: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/5.jpg)
–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: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/6.jpg)
Great. More detail please!
![Page 7: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/7.jpg)
Large CodebaseMore functionality = More code
![Page 8: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/8.jpg)
Caplin Trader• SDK:
• ~1,000 JavaScript files
• ~131,000 LoC
• ~131 lines per file
• ~650 test files
• ~95,000 test LoC
• Getting Started App:
• ~425 JavaScript files
• ~50,000 LoC
• ~117 lines per file
• ~200 test files
• ~21,000 test LoC
![Page 9: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/9.jpg)
Complexity
![Page 10: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/10.jpg)
![Page 11: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/11.jpg)
![Page 12: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/12.jpg)
![Page 13: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/13.jpg)
Gmail & Caplin Trader• Large Single Page Apps (SPAs)
• Complex functionality
• Complex interactions
• User
• Technology
• Leave open all day
![Page 14: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/14.jpg)
ContributorsThe Human Factor
![Page 15: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/15.jpg)
Who contributes to an app?• Front-end devs
• Back-end devs
• Designers
• QA
• Infrastructure and release engineers
• Technical authors
![Page 16: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/16.jpg)
People who are part of...
• Large teams
• Multiple teams
• Teams spread across an organisation
• Teams spread across multiple organisations
![Page 17: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/17.jpg)
So, how do you 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 within an application codebase and UI
3. make sure that all contributors can work in harmony
4. development must be a productive experience
5. ensure all these compliment each other
![Page 18: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/18.jpg)
Seven signs of scaling?
![Page 19: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/19.jpg)
Dev Setup takes forever• Lots of infrastructure dependencies
• Database
• Auth service
• Realtime server
• One or more Web APIs
• Dev app server
![Page 20: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/20.jpg)
My App won’t load!
• Run full application
• All back-end components running
• Lots of moving parts
![Page 21: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/21.jpg)
My App isn’t working!
• Other contributors breaking functionality
• Code accessed and modified from elsewhere
• Dependency Analysis and bundling out of order
![Page 22: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/22.jpg)
Finding assets is hard
![Page 23: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/23.jpg)
What does this code do?
• Inconsistent coding style and structure
• Side effects
![Page 24: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/24.jpg)
Long App Reloads
![Page 25: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/25.jpg)
Have the tests finished yet?
• Having to run all the tests
• UI-based tests
• Continuous Integration…taking 8 hours!
![Page 26: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/26.jpg)
Scaling Solutions
![Page 27: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/27.jpg)
• Streamlined developer workflow
• Consistency
• Focus on building a single feature (in isolation)
• Scalable loosely-coupled application architecture
• Quality at its core (maintainability)
Goals
![Page 28: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/28.jpg)
Developer Workflow
![Page 29: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/29.jpg)
![Page 30: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/30.jpg)
Building a single feature in isolation
![Page 31: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/31.jpg)
Blades
![Page 32: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/32.jpg)
![Page 33: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/33.jpg)
![Page 34: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/34.jpg)
Blade Demo
![Page 35: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/35.jpg)
![Page 36: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/36.jpg)
Application Architecture
![Page 37: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/37.jpg)
Requires an Architecture that…
• Allows complex interactions
• Allows components to be changed without side effects
• At launch and during runtime
• Is easily extended
• Is easily tested
• Is easily maintained
![Page 38: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/38.jpg)
Blades (again)
![Page 39: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/39.jpg)
MVVM
![Page 40: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/40.jpg)
Services
![Page 41: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/41.jpg)
What is a service?• Use services to access resources
• Persistence Service
• Restful Service
• Realtime Service
• Perform common non-UI tasks e.g.
• LoggingService
• Services registered and accessed via a ServiceRegistry
• Dynamic Service Locator1
1 http://martinfowler.com/articles/injection.html#ADynamicServiceLocator
![Page 42: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/42.jpg)
Why use services?• Used for cross-cutting concern
• Functionality encapsulated behind an interface
• Loose-coupled communication
• Dependencies can be injected at:
• App/Workbench load time
• During runtime
![Page 43: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/43.jpg)
Services Demo
![Page 44: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/44.jpg)
![Page 45: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/45.jpg)
Quality
![Page 46: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/46.jpg)
Manually test in the workbench as part of iterative development cycle
![Page 47: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/47.jpg)
Simple Wins• Consistency
• Architecture
• Coding style and structure
• Loose coupling (MVVM, Services and beyond)
• Facilitates testing
• Can easily swap out implementations
• Avoid testing the DOM
![Page 48: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/48.jpg)
Biggest Win• Testing features in isolation
• Change view model and assert against mocked Service
• Inject mock service, make calls and assert View Model
• Run small suit of Application End-to-End Business Tests
![Page 49: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/49.jpg)
![Page 50: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/50.jpg)
Need Proof?
Our full suite Caplin Trader testing time went from
8 Hours
to
10 minutes
![Page 51: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/51.jpg)
A note on deployment
• The BladeRunnerJS app replicates previous sole target production environment: J2EE
• You can enable dev mode (discussions ongoing)
• You can build to a .WAR frill
• Flat File deployment coming soon (very soon, I hope)
![Page 52: Building front-end apps that Scale - FOSDEM 2014](https://reader034.vdocuments.site/reader034/viewer/2022052522/554f6cb4b4c905c8088b52bc/html5/thumbnails/52.jpg)
Summary• Streamline developer workflow for productivity
• Build features in isolation (grouping assets together)
• Services e.g. EventHub for loose coupled communication
• Encapsulate using Interfaces
• Test a feature ViewModel < - > Service. Avoid the DOM.
• It all improves Quality and thus maintenance