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
760
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
380
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
320
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
1.4k
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
270
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
720
Contain yourself - Docker for developers
frontendne
2
250
Design process of a website
frontendne
0
280
What the JAMstack?
frontendne
1
900
Talking the talk
frontendne
0
470
Other Decks in Technology
See All in Technology
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
250
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
320
Observability — Extending Into Incident Response
nari_ex
1
100
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
390
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
140
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
630
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
4.8k
AIエージェントによる業務効率化への飽くなき挑戦-AWS上の実開発事例から学んだ効果、現実そしてギャップ-
nasuvitz
1
320
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
270
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.2k
Building Applications with DynamoDB
mza
96
6.7k
A designer walks into a library…
pauljervisheath
209
24k
Agile that works and the tools we love
rasmusluckow
331
21k
Making Projects Easy
brettharned
120
6.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Speed Design
sergeychernyshev
32
1.2k
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???