Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Large Scale JavaScript Application Architecture
Search
Frontend NE
February 04, 2016
Technology
1
740
Large Scale JavaScript Application Architecture
Frontend NE
February 04, 2016
Tweet
Share
More Decks by Frontend NE
See All by Frontend NE
Standardizing 'select': What the future holds for HTML - Stephanie Stimac @ FrontendNE
frontendne
4
350
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
300
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
1.3k
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
240
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
690
Contain yourself - Docker for developers
frontendne
2
240
Design process of a website
frontendne
0
260
What the JAMstack?
frontendne
1
860
Talking the talk
frontendne
0
450
Other Decks in Technology
See All in Technology
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
660
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
Data Engineering Study#30 LT資料
tetsuroito
1
180
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
730
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Being A Developer After 40
akosma
90
590k
Unsuck your backbone
ammeep
671
58k
Why Our Code Smells
bkeepers
PRO
337
57k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Faster Mobile Websites
deanohume
308
31k
Git: the NoSQL Database
bkeepers
PRO
430
65k
BBQ
matthewcrist
89
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Large Scale JavaScript Large Scale JavaScript Application Architecture Application Architecture
ahumphreys87 ahumphreys87 JavaScript Architect at Bede Gaming. JavaScript Game Framework
that powers cross platform Bingo client and Slots games. Node.js Slots Engine, Chat Server. Node.js API facade. Core contributor to Marionette.js Issue triaging, Pull Request reviews. Bug fixing. New features!
Introduction Introduction What is a large JavaScript application? Common Pitfalls.
Useful Patterns. How frameworks apply these principles. Questions???
Over 100,000 LOC? Over Xmb in size? Lots of files?
Hard to maintain What is a Large JavaScript What is a Large JavaScript Application? Application?
"A large JavaScript application is a non-trivial application that requires
significant effort to maintain and where most of the data manipulation takes place in the browser." Addy Osmani
Modularise Modularise Break the large application up. Think of logical
components. Different sections on the screen?
4 Questions 4 Questions 1. Can I reuse my modules?
2. Will my application still function if this breaks? 3. Is it testable? 4. Does it depend on anything else?
Common Pitfalls Common Pitfalls Tight coupling. Event webs. Lack of
tests.
Tight Coupling Tight Coupling Modules depend on each other. What
happens if another module breaks? Can we reuse this module? Can you test it?
Event Webs Event Webs
Often caused by tight coupling. Modules fire events between each
other. Debugging becomes difficult. Untestable.
Loosen up! Loosen up! Loosely coupled modules. They can be
reused. They don't depend on others. They are easy to test. Create a Facade. Create a Mediator.
Facade Facade
Abstracts complexity. Exposes a simple interface. bind/trigger. Modules only communicate
with the facade.
Mediator Mediator
The "brains" of the application. Performs application specific actions based
on the events. Controls what the facade listens for. Controls what the facade sends where.
The Result The Result Modules can break without breaking the
full application. Modules can be tested independently. Modules can be reused.
How do the big guns do it? How do the
big guns do it? Backbone.Radio Services Vanilla Classes Directives Services 2 way data binding Flux Action / Dispatcher Components Components. Actions Routes / Controllers
Questions??? Questions???