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 apps using tools in backbone.marion...
Search
Jakob Dam Jensen
November 13, 2013
Programming
2
400
Large scale apps using tools in backbone.marionette
Jakob Dam Jensen
November 13, 2013
Tweet
Share
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
4.9k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
14
9.4k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
650
Team operations that are not burdened by SRE
kazatohiei
1
300
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
740
RailsGirls IZUMO スポンサーLT
16bitidol
0
160
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
610
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
410
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
370
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Designing for Performance
lara
610
69k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
4 Signs Your Business is Dying
shpigford
184
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Navigating Team Friction
lara
187
15k
Transcript
None
None
NOPOINTLESSAPPS
None
• Jakob Dam Jensen • Web since 97 - JS
was frightening • ASP, Servlets, PHP indtil 2007 • Since then a lot of mobile dev • But I’ve played with most client-side libs Who am I?
None
Backbone is great • Is small • Provides structure •
Simple and elegant • I can fix bugs in it if I need to
Backbone can be a bitch • Because large scale apps
are difficult to maintain • Can become a tightly coupled mess • Not Backbones fault • Software-engineering is hard
Large Backbone apps are hard to maintain…
None
None
None
None
None
None
None
Backbone Pain Points • Routing • Internal communication (App events)
• It being small means that we’re on our own • Collection views etc. • View cleanup • No controllers.. really
But Backbone should be seen as the foundation
=)
You can fix all of this
But why should you?
None
Marionette to the rescue • Different view types + regions
• App architecture and infrastructure • Message bus • Controllers
Different view types
• View • CollectionView • ItemView • Layout • CompositeView
Different view types
None
None
None
None
None
Layout
None
None
None
None
None
None
App architecture
App Sup-App Sup-App Sup-App Sup-App
Blink Dashboard Members Calendar Account management List Show New List
Edit Show New List Edit Show New List Edit Show New Edit Index Index Index Index
None
None
None
None
None
Keeping things loose
Blink (App) Dashboard Members Calendar Account management List Show New
List Edit Show New List Edit Show New List Edit Show New Edit Index Index Index Index
Message bus: Commands • Can set command handler • App.commands.setHandler
name, function • Can execute commands • App.execute ‘name’, [function_options]
• edit:calendar_events • index:calendar_events • list:calendar_events • new:calendar_events • show:calendar_events
Calendar New List Edit Show Index Message bus: Commands
None
App.execute(‘index:calendar_events’, {event: event})
None
None
None
Message bus: Req Res • Can set request handlers •
App.reqres.setHandler ‘name’, function • Can request objects • App.request ‘name’, [options]
None
None
Message bus: vent • Can observe vent event • App.vent.on
‘name’, callbackFunction • Can trigger vent event • App.vent.trigger ‘name’, [options]
Blink (App) Dashboard Members Calendar Account management List Show New
List Edit Show New List Edit Show New List Edit Show New Edit Index Index Index Index
• Main app in module acts as facade • Commands
set here • Routing set here Modules encapsulates responsibilities Calendar New List Edit Show Index
None
None
Blink (App) Dashboard Members Calendar Account management List Show New
List Edit Show New List Edit Show New List Edit Show New Edit Index Index Index Index
None
What now?
None
Questions?
Anybody looking for freelance developers? =)
Thanks