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
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
WebDriver BiDiとは何なのか
yotahada3
1
140
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
最近のVS Codeで気になるニュース 2025/01
74th
1
250
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
AHC041解説
terryu16
0
590
技術を根付かせる / How to make technology take root
kubode
1
240
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Software Architecture
hschwentner
6
2.1k
Honoとフロントエンドの 型安全性について
yodaka
4
250
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Featured
See All Featured
How GitHub (no longer) Works
holman
313
140k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
It's Worth the Effort
3n
184
28k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Invisible Side of Design
smashingmag
299
50k
Code Review Best Practice
trishagee
66
17k
Agile that works and the tools we love
rasmusluckow
328
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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