SlideShare a Scribd company logo
Building front-end apps that

Scale
Phil @leggetter
phil@leggetter.co.uk
Caplin Systems
!
!
!

@BladeRunnerJS
Overview
•

What is a Large Scale front-end App?

•

What are the signs of scaling?

•

What are the solutions? (with demos)
What is a large-scale
JavaScript app?
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.
–Addy Osmani, Patterns For Large-Scale JavaScript Application
Architecture
Great. More detail
please!
Large Codebase
More functionality = More code
Caplin Trader
•

SDK:

•

Getting Started App:

•

~1,000 JavaScript files

•

~425 JavaScript files

•

~131,000 LoC

•

~50,000 LoC

~131 lines per file

•

~117 lines per file

~650 test files

•

~200 test files

•

~21,000 test LoC

•
•
•

~95,000 test LoC
Complexity
Building front-end apps that Scale - FOSDEM 2014
Building front-end apps that Scale - FOSDEM 2014
Building front-end apps that Scale - FOSDEM 2014
Gmail & Caplin Trader
•

Large Single Page Apps (SPAs)

•

Complex functionality

•

Complex interactions
•
•

•

User
Technology

Leave open all day
Contributors
The Human Factor
Who contributes to an app?
•

Front-end devs

•

Back-end devs

•

Designers

•

QA

•

Infrastructure and release engineers

•

Technical authors
People who are part of...
•

Large teams

•

Multiple teams

•

Teams spread across an organisation

•

Teams spread across multiple organisations
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
Seven signs of
scaling?
Dev Setup takes forever
•

Lots of infrastructure dependencies
•

Database

•

Auth service

•

Realtime server

•

One or more Web APIs

•

Dev app server
My App won’t load!
•

Run full application

•

All back-end components running

•

Lots of moving parts
My App isn’t working!
•

Other contributors breaking functionality

•

Code accessed and modified from elsewhere

•

Dependency Analysis and bundling out of order
Finding assets
is hard
What does this code do?

•

Inconsistent coding style and structure

•

Side effects
Long App Reloads
Have the tests finished yet?

•

Having to run all the tests

•

UI-based tests

•

Continuous Integration…taking 8 hours!
Scaling Solutions
Goals
•

Streamlined developer workflow

•

Consistency

•

Focus on building a single feature (in isolation)

•

Scalable loosely-coupled application architecture

•

Quality at its core (maintainability)
Developer Workflow
Building front-end apps that Scale - FOSDEM 2014
Building a single
feature in isolation
Blades
Building front-end apps that Scale - FOSDEM 2014
Building front-end apps that Scale - FOSDEM 2014
Blade Demo
Building front-end apps that Scale - FOSDEM 2014
Application
Architecture
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
Blades (again)
MVVM
Services
What is a service?
•

Use services to access resources
•
•

Restful Service

•
•

Persistence Service

Realtime Service

Perform common non-UI tasks e.g.
•

•

LoggingService

Services registered and accessed via a ServiceRegistry
•

Dynamic Service Locator

1

1 http://martinfowler.com/articles/injection.html#ADynamicServiceLocator
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
Services Demo
Building front-end apps that Scale - FOSDEM 2014
Quality
Manually test in the workbench as part of
iterative development cycle
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
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
Building front-end apps that Scale - FOSDEM 2014
Need Proof?
Our full suite Caplin Trader testing time went from

8 Hours
to

10 minutes
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)
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
Phil @leggetter
phil@leggetter.co.uk
Caplin Systems
!
!
!

@BladeRunnerJS
bladerunnerjs.org

More Related Content

What's hot (20)

PPTX
Logic Apps – Deployments
BizTalk360
 
PDF
Tad automation
Prasad Raghuram Vemuri
 
PPTX
ATAGTR2017 Keeping pace with Product Evolution: UI Automation Framework Guide...
Agile Testing Alliance
 
PDF
Best Angular Training Online: Angular tutorial | Learn Angular 2 to 10 |
Shailendra Chauhan
 
PPTX
Building a REST API for Longevity
MuleSoft
 
PPTX
apidays LIVE Australia 2020 - Leveraging DevOps to visualize your digital eco...
apidays
 
PPTX
Introduction to SharePoint Framework
Kirti Prajapati
 
PDF
Introduction to Continuous Integration
Hùng Nguyễn Huy
 
PPTX
Build MSTeams Customizations with SPFx
Kirti Prajapati
 
PPTX
Angular: An Introduction
Alex Hoffman
 
PDF
Creating a Comprehensive Social Media App Using Ionic and Phone Gap
FITC
 
PPTX
Our First ADF Experience
Hans De Bal
 
PPTX
Azure Web Apps
Gaurav Madaan
 
PPTX
.NET? MonoDroid Does
Kevin McMahon
 
PPTX
Building loosely coupled integrations with Logic Apps
BizTalk360
 
PPTX
Developing Infrastructure Code for CI & CD
Ravikanth Chaganti
 
PDF
Asp.NETZERO - A Workshop Presentation by Citytech Software
Ritwik Das
 
PDF
Angular meetup 2 2019-08-29
Nitin Bhojwani
 
PPTX
Reactive Web Development with Spring Boot 2
Mike Melusky
 
PPTX
Operations Validation for Infrastructure As Code - PSConfEU 2016
Ravikanth Chaganti
 
Logic Apps – Deployments
BizTalk360
 
Tad automation
Prasad Raghuram Vemuri
 
ATAGTR2017 Keeping pace with Product Evolution: UI Automation Framework Guide...
Agile Testing Alliance
 
Best Angular Training Online: Angular tutorial | Learn Angular 2 to 10 |
Shailendra Chauhan
 
Building a REST API for Longevity
MuleSoft
 
apidays LIVE Australia 2020 - Leveraging DevOps to visualize your digital eco...
apidays
 
Introduction to SharePoint Framework
Kirti Prajapati
 
Introduction to Continuous Integration
Hùng Nguyễn Huy
 
Build MSTeams Customizations with SPFx
Kirti Prajapati
 
Angular: An Introduction
Alex Hoffman
 
Creating a Comprehensive Social Media App Using Ionic and Phone Gap
FITC
 
Our First ADF Experience
Hans De Bal
 
Azure Web Apps
Gaurav Madaan
 
.NET? MonoDroid Does
Kevin McMahon
 
Building loosely coupled integrations with Logic Apps
BizTalk360
 
Developing Infrastructure Code for CI & CD
Ravikanth Chaganti
 
Asp.NETZERO - A Workshop Presentation by Citytech Software
Ritwik Das
 
Angular meetup 2 2019-08-29
Nitin Bhojwani
 
Reactive Web Development with Spring Boot 2
Mike Melusky
 
Operations Validation for Infrastructure As Code - PSConfEU 2016
Ravikanth Chaganti
 

Viewers also liked (9)

PDF
What Developers Want - Developers Want Realtime - BAPI 2012
Phil Leggetter
 
PPT
M hussain a day in the life
mhussainp1
 
ODP
Slideaula irenildes
irenildes2
 
PDF
Fed London - January 2015
Phil Leggetter
 
PDF
Testing Ginormous JavaScript Apps - ScotlandJS 2014
Phil Leggetter
 
PDF
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Phil Leggetter
 
PPTX
Famous secret’s powerpoint
Paula Lozano Castrillo
 
PDF
The Past, Present and Future of Real-Time Apps and Communications
Phil Leggetter
 
PDF
Real-Time Web Apps in 2015 & Beyond
Phil Leggetter
 
What Developers Want - Developers Want Realtime - BAPI 2012
Phil Leggetter
 
M hussain a day in the life
mhussainp1
 
Slideaula irenildes
irenildes2
 
Fed London - January 2015
Phil Leggetter
 
Testing Ginormous JavaScript Apps - ScotlandJS 2014
Phil Leggetter
 
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Phil Leggetter
 
Famous secret’s powerpoint
Paula Lozano Castrillo
 
The Past, Present and Future of Real-Time Apps and Communications
Phil Leggetter
 
Real-Time Web Apps in 2015 & Beyond
Phil Leggetter
 
Ad

Similar to Building front-end apps that Scale - FOSDEM 2014 (20)

PDF
How to Build Front-End Web Apps that Scale - FutureJS
Phil Leggetter
 
PDF
Patterns and practices for building enterprise-scale HTML5 apps
Phil Leggetter
 
PPTX
DevOps and Microservice
Inho Kang
 
PDF
Optimus XPages: An Explosion of Techniques and Best Practices
Teamstudio
 
PPTX
Disruptive Trends in Application Development
WaveMaker, Inc.
 
PDF
How to Build Single Page HTML5 Apps that Scale
Phil Leggetter
 
PDF
Microservice Architecture
Engin Yoeyen
 
PDF
Transitioning Groupon to Node.js - EmpireJS 2014
Sean McCullough
 
PPTX
Microservices and docker
Alex Ivy
 
PDF
Cabot Technology Solutions Inc
Venkatesh Thyagarajan
 
DOC
Anupam chaturvedi resume latest
Anupam chaturvedi
 
PPTX
spring
Suman Behara
 
DOC
Resume_Venugopal
Venugopal Devarapalli
 
PDF
Eclipse tools for deployment to was liberty profile in Bluemix
Eclipse Day India
 
PPTX
MicroserviceArchitecture in detail over Monolith.
PLovababu
 
PPTX
Udvid din test portefølje med coded ui test og cloud load test
Peter Lindberg
 
PDF
Containers, microservices and serverless for realists
Karthik Gaekwad
 
PPTX
Mobile app-and-microservices-with-ibm-cloud
Srinivasan Nanduri
 
PPTX
MICROSERVICES ARCHITECTURE unit -2.pptx
MohammedShahid562503
 
PPTX
A Day in the Life: Developer Enhancements with Visual Studio 2012
Imaginet
 
How to Build Front-End Web Apps that Scale - FutureJS
Phil Leggetter
 
Patterns and practices for building enterprise-scale HTML5 apps
Phil Leggetter
 
DevOps and Microservice
Inho Kang
 
Optimus XPages: An Explosion of Techniques and Best Practices
Teamstudio
 
Disruptive Trends in Application Development
WaveMaker, Inc.
 
How to Build Single Page HTML5 Apps that Scale
Phil Leggetter
 
Microservice Architecture
Engin Yoeyen
 
Transitioning Groupon to Node.js - EmpireJS 2014
Sean McCullough
 
Microservices and docker
Alex Ivy
 
Cabot Technology Solutions Inc
Venkatesh Thyagarajan
 
Anupam chaturvedi resume latest
Anupam chaturvedi
 
spring
Suman Behara
 
Resume_Venugopal
Venugopal Devarapalli
 
Eclipse tools for deployment to was liberty profile in Bluemix
Eclipse Day India
 
MicroserviceArchitecture in detail over Monolith.
PLovababu
 
Udvid din test portefølje med coded ui test og cloud load test
Peter Lindberg
 
Containers, microservices and serverless for realists
Karthik Gaekwad
 
Mobile app-and-microservices-with-ibm-cloud
Srinivasan Nanduri
 
MICROSERVICES ARCHITECTURE unit -2.pptx
MohammedShahid562503
 
A Day in the Life: Developer Enhancements with Visual Studio 2012
Imaginet
 
Ad

More from Phil Leggetter (16)

PDF
An Introduction to AAARRRP: A framework for Defining Your Developer Relations...
Phil Leggetter
 
PDF
How APIs Enable Contextual Communications
Phil Leggetter
 
PDF
An Introduction to the AAARRRP Developer Relations Strategy Framework and How...
Phil Leggetter
 
PDF
An Introduction to the AAARRRP Developer Relations Strategy Framework and How...
Phil Leggetter
 
PDF
Contextual Communications: What, Why and How? Bristol JS
Phil Leggetter
 
PDF
Real-Time Web Apps & .NET. What Are Your Options? NDC Oslo 2016
Phil Leggetter
 
PDF
Real-Time Web Apps & .NET - What are your options?
Phil Leggetter
 
PDF
The Past, Present and Future of Real-Time Apps and Communications
Phil Leggetter
 
PDF
What's the ROI of Developer Relations?
Phil Leggetter
 
PDF
Real-Time Web Apps & Symfony. What are your options?
Phil Leggetter
 
PDF
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Phil Leggetter
 
PDF
Why you should be using Web Components. And How - DevWeek 2015
Phil Leggetter
 
PDF
Realtime Web Apps in 2014 & Beyond
Phil Leggetter
 
PDF
BladeRunnerJS Show & Tell
Phil Leggetter
 
PDF
How the Realtime Web is influencing the future of communications
Phil Leggetter
 
PDF
Web browsers & the realtime web
Phil Leggetter
 
An Introduction to AAARRRP: A framework for Defining Your Developer Relations...
Phil Leggetter
 
How APIs Enable Contextual Communications
Phil Leggetter
 
An Introduction to the AAARRRP Developer Relations Strategy Framework and How...
Phil Leggetter
 
An Introduction to the AAARRRP Developer Relations Strategy Framework and How...
Phil Leggetter
 
Contextual Communications: What, Why and How? Bristol JS
Phil Leggetter
 
Real-Time Web Apps & .NET. What Are Your Options? NDC Oslo 2016
Phil Leggetter
 
Real-Time Web Apps & .NET - What are your options?
Phil Leggetter
 
The Past, Present and Future of Real-Time Apps and Communications
Phil Leggetter
 
What's the ROI of Developer Relations?
Phil Leggetter
 
Real-Time Web Apps & Symfony. What are your options?
Phil Leggetter
 
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Phil Leggetter
 
Why you should be using Web Components. And How - DevWeek 2015
Phil Leggetter
 
Realtime Web Apps in 2014 & Beyond
Phil Leggetter
 
BladeRunnerJS Show & Tell
Phil Leggetter
 
How the Realtime Web is influencing the future of communications
Phil Leggetter
 
Web browsers & the realtime web
Phil Leggetter
 

Recently uploaded (20)

PDF
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
PDF
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
PDF
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PDF
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
PDF
Advancing WebDriver BiDi support in WebKit
Igalia
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PDF
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
July Patch Tuesday
Ivanti
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PDF
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
PDF
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
CIFDAQ Market Wrap for the week of 4th July 2025
CIFDAQ
 
Smart Trailers 2025 Update with History and Overview
Paul Menig
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
Empower Inclusion Through Accessible Java Applications
Ana-Maria Mihalceanu
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Advancing WebDriver BiDi support in WebKit
Igalia
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
July Patch Tuesday
Ivanti
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
CIFDAQ Token Spotlight for 9th July 2025
CIFDAQ
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
Exolore The Essential AI Tools in 2025.pdf
Srinivasan M
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 

Building front-end apps that Scale - FOSDEM 2014