Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Patterns and practices for building
enterprise-scale HTML5 apps
Phil @leggetter
phil@pusher.com
phil@pusher.com
Join the c...
Agenda
• Talk & Demos
• Questions anytime*
• Q&A
• Practical
Phil @leggetter
phil@pusher.com
Chief Devangelist
Patterns and practices that fed into the workflows
and application architecture that was core to the
BladeRunnerJS toolkit.
bladerunnerjs.org
OpenSource
What is a large-scale
JavaScript app?
–Addy Osmani, Patterns For Large-Scale JavaScript Application
Architecture
In my view, large-scale JavaScript apps are
non...
Large Codebase
More functionality === More code
Caplin Trader
• SDK:
• ~1,000 JavaScript files
• ~131,000 LoC
• ~131 lines per file
• ~650 test files
• ~95,000 test LoC
•...
Complexity
Gmail & Caplin Trader
• Large Single Page Apps (SPAs)
• Complex functionality
• Complex interactions
• User
• Technology
•...
Features: Change,
Come & Go
Feature Progression
Contributors
The Human Factor
Who contributes to an app?
• Front-end devs
• Back-end devs
• Designers
• QA
• Infrastructure and release engineers
• Tech...
Maintainable?
1. Massive codebase
2. Architecture
3. Contributor harmony
4. Promote quality
5. Productive developer experi...
The Solution
“Write small, focused, modular
parts, and progressively combine
them into bigger things to make
your app”
@su...
The Solutions
1. Components/Widgets/Modules
2. A Services Layer
3. MV*
4. Efficient Testing
5. Tools to Support Workflow
Prove it!
Feature ==> Blade
What Problems is
this solving?
Slice up the App
Image of app partially
workingWho Broken the
App?
Long App Reloads
Finding assets
is hard
/assets /feature-name
Features
• Unaffected by breaking changes elsewhere
• Easy to find & change assets
• Can run in isolation
• Fast reload ti...
DEMO
Create a Feature
Compose
Components/
Modules into Apps
DEMO
Add a Feature to an Aspect
Services
What is a service?
• Use services to access shared resources
• In-app inter-component messaging
• Persistence Service
• RE...
Services are a Contract/Protocol/Interface
https://www.youtube.com/watch?v=JjqKQ8ezwKQ
Using Services
• Use a unique identifier for each service
• Register (code or config). Code example:
• Get
http://martinfowl...
DEMO
Using Services
Why use services?
• Features should not directly communicate
• Easily change implementation
• Implementations can be injec...
Fake Services
Fake/Stub/Mock Services
Real Services
Efficient Testing
(We’ll get to MV*)
Caplin Dev Practices
• Multiple contributing teams
• SCRUM - 2 week iteration
• Continuous Integration & Delivery
• Build ...
~2009 Testing Requirements
• Cross-browser IE6+*, Firefox 3.5*+ & Chrome
• Class-level Unit Tests
• Application Acceptance...
Application ATs
• Selenium Tests
• Selenium User-Extensions
• Actions, Accessors/Assertions & Locators
• VM infrastructure...
3
3. Launch browser + App
AT Process
1
1. Pair Browser + Backend VM
2
2. Reset & restart backend services
5
5. Record resu...
Test Results
• ~1300 UTs
• ~500 ATs
• 10 pairs - VM infrastructure to parallelise tests
• 8 Hours
• We could only run a fu...
Inefficient Testing!
• Resetting back end services is too slow
• Lots of moving parts. Things can go wrong.
• Services don’...
Don’t Touch that DOM
MVVM
End-to-End Module Testing
• Testing features in
isolation
• Change view model
and assert against
mocked Service
• Inject f...
Need Proof?
Our full suite Caplin Trader
testing time went from
>8 Hours
< 30 minutes
Much less for a single
feature
http://j.mp/jsscale
Tooling & Developer
Workflow
Focus on Features
What tooling offers?
Automation
• Define workflow & promote consistency
• Scaffolding
• Dev Server
• Builds/Bundling
• Tests
Compliance
Embrace
Constraints
https://gettingreal.37signals.com/ch03_Embrace_Constraints.php
Intelligence
Knowledge of Runtime
Scenarios
• Workbench (dev-mode)
• Test
• App
Dependency Analysis
Dependency Analysis
Customization
• Augment workflow
• Identify allowable change to workflow
• Automation commands
• Builds/Bundling
• Test Ru...
DEMO
Tooling
1. Large codebase - By Feature: Component/Service
2. Complex interactions - Components & Services
3. Contributor harmony -...
Thanks & Questions?
Phil @leggetter
phil@pusher.com
Practical
• Get USB sticks from me
• Or… go speak to the BladeRunnerJS...
Patterns and practices for building
enterprise-scale HTML5 apps
Phil @leggetter
phil@pusher.com
phil@pusher.com
Join the c...
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Upcoming SlideShare
Loading in …5
×

Patterns and practices for building enterprise-scale HTML5 apps

773 views

Published on

Developing large apps is difficult. Ensuring that code is consistent, maintainable, testable and has an architecture that enables change is essential. As is ensuring that multiple developers – across multiple teams – can efficiently contribute to the same application. When it comes to large server-focused apps, solutions to some of these challenges have been tried and tested. But, how do you achieve this when building HTML5 single-page apps?

In this session, Phil will cover the experiences his team have had when building HTML5 apps consisting of more than 250k lines of JavaScript (plus HTML templates, CSS, image, config etc) that are contributed to by multiple teams across multiple companies. He will highlight signs to watch out for as your HTML5 SPA grows, and a set of patterns and practices that help you avoid problems. He will also explain the simple yet powerful application architecture that their HTML5 apps have that is core to ensuring they scale.

Finally, Phil will demonstrate how tooling can be used to support these patterns and practices, and enable a productive developer workflow where the first line of code is feature code, features can be developed and tested in isolation, code conflicts are avoided by grouping assets by feature, and features are composed into apps.

Published in: Technology
  • Be the first to comment

Patterns and practices for building enterprise-scale HTML5 apps

  1. 1. Patterns and practices for building enterprise-scale HTML5 apps Phil @leggetter phil@pusher.com phil@pusher.com Join the conversation on Twitter: @DevWeek #DW2015
  2. 2. Agenda • Talk & Demos • Questions anytime* • Q&A • Practical
  3. 3. Phil @leggetter phil@pusher.com Chief Devangelist
  4. 4. Patterns and practices that fed into the workflows and application architecture that was core to the BladeRunnerJS toolkit.
  5. 5. bladerunnerjs.org OpenSource
  6. 6. What is a large-scale JavaScript app?
  7. 7. –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.
  8. 8. Large Codebase More functionality === More code
  9. 9. 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
  10. 10. Complexity
  11. 11. Gmail & Caplin Trader • Large Single Page Apps (SPAs) • Complex functionality • Complex interactions • User • Technology • Leave open all day
  12. 12. Features: Change, Come & Go
  13. 13. Feature Progression
  14. 14. Contributors The Human Factor
  15. 15. Who contributes to an app? • Front-end devs • Back-end devs • Designers • QA • Infrastructure and release engineers • Technical authors
  16. 16. Maintainable? 1. Massive codebase 2. Architecture 3. Contributor harmony 4. Promote quality 5. Productive developer experience 6. ^All complimentary
  17. 17. The Solution “Write small, focused, modular parts, and progressively combine them into bigger things to make your app” @substack | @briantford
  18. 18. The Solutions 1. Components/Widgets/Modules 2. A Services Layer 3. MV* 4. Efficient Testing 5. Tools to Support Workflow
  19. 19. Prove it!
  20. 20. Feature ==> Blade
  21. 21. What Problems is this solving?
  22. 22. Slice up the App
  23. 23. Image of app partially workingWho Broken the App?
  24. 24. Long App Reloads
  25. 25. Finding assets is hard
  26. 26. /assets /feature-name
  27. 27. Features • Unaffected by breaking changes elsewhere • Easy to find & change assets • Can run in isolation • Fast reload times
  28. 28. DEMO Create a Feature
  29. 29. Compose Components/ Modules into Apps
  30. 30. DEMO Add a Feature to an Aspect
  31. 31. Services
  32. 32. 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
  33. 33. Services are a Contract/Protocol/Interface https://www.youtube.com/watch?v=JjqKQ8ezwKQ
  34. 34. Using Services • Use a unique identifier for each service • Register (code or config). Code example: • Get http://martinfowler.com/articles/injection.html#ADynamicServiceLocator var chatService = require( ‘service!chat.service’ );
  35. 35. DEMO Using Services
  36. 36. Why use services? • Features should not directly communicate • Easily change implementation • Implementations can be injected for different scenarios: • Workbench / Test / App
  37. 37. Fake Services
  38. 38. Fake/Stub/Mock Services
  39. 39. Real Services
  40. 40. Efficient Testing (We’ll get to MV*)
  41. 41. Caplin Dev Practices • Multiple contributing teams • SCRUM - 2 week iteration • Continuous Integration & Delivery • Build status displayed on screen • A focus on Quality Software
  42. 42. ~2009 Testing Requirements • Cross-browser IE6+*, Firefox 3.5*+ & Chrome • Class-level Unit Tests • Application Acceptance Tests * Remember this was 2009
  43. 43. Application ATs • Selenium Tests • Selenium User-Extensions • Actions, Accessors/Assertions & Locators • VM infrastructure for CI
  44. 44. 3 3. Launch browser + App AT Process 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. 45. Test Results • ~1300 UTs • ~500 ATs • 10 pairs - VM infrastructure to parallelise tests • 8 Hours • We could only run a full suite of tests once per day - at night • Test results highly unreliable
  46. 46. 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
  47. 47. Don’t Touch that DOM
  48. 48. MVVM
  49. 49. 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
  50. 50. Need Proof? Our full suite Caplin Trader testing time went from >8 Hours < 30 minutes Much less for a single feature
  51. 51. http://j.mp/jsscale
  52. 52. Tooling & Developer Workflow Focus on Features
  53. 53. What tooling offers?
  54. 54. Automation • Define workflow & promote consistency • Scaffolding • Dev Server • Builds/Bundling • Tests
  55. 55. Compliance Embrace Constraints https://gettingreal.37signals.com/ch03_Embrace_Constraints.php
  56. 56. Intelligence
  57. 57. Knowledge of Runtime Scenarios • Workbench (dev-mode) • Test • App
  58. 58. Dependency Analysis
  59. 59. Dependency Analysis
  60. 60. Customization • Augment workflow • Identify allowable change to workflow • Automation commands • Builds/Bundling • Test Runner
  61. 61. DEMO Tooling
  62. 62. 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 Proven!
  63. 63. Thanks & Questions? Phil @leggetter phil@pusher.com Practical • Get USB sticks from me • Or… go speak to the BladeRunnerJS team
  64. 64. Patterns and practices for building enterprise-scale HTML5 apps Phil @leggetter phil@pusher.com phil@pusher.com Join the conversation on Twitter: @DevWeek #DW2015

×