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
From Backbone to Thorax
Search
mulderp
February 20, 2014
Programming
1
620
From Backbone to Thorax
An overview on the MV* pattern, Handlebars and resulting in Thorax.
mulderp
February 20, 2014
Tweet
Share
More Decks by mulderp
See All by mulderp
Node.js for Embedded Systems
mulderp
1
2.8k
Nodebotsday
mulderp
1
130
I2C basics with Arduino
mulderp
0
220
Sharing hardware with JavaScript
mulderp
1
210
Arduino October meetup
mulderp
0
120
Physical JavaScript with Johnny-5, Cylon and Tessel
mulderp
1
1.1k
Blogging and writing about JavaScript
mulderp
2
900
Minimum Viable Interactions
mulderp
3
610
Arduino July Meetup
mulderp
0
100
Other Decks in Programming
See All in Programming
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
140
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
310
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
130
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
280
関数型まつりレポート for JuliaTokai #22
antimon2
0
130
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
41
28k
イベントストーミングから始めるドメイン駆動設計
jgeem
4
870
Datadog RUM 本番導入までの道
shinter61
1
310
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
850
CursorはMCPを使った方が良いぞ
taigakono
0
150
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
GraphQLとの向き合い方2022年版
quramy
46
14k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Adopting Sorbet at Scale
ufuk
77
9.4k
GitHub's CSS Performance
jonrohan
1031
460k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Documentation Writing (for coders)
carmenintech
71
4.9k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Speed Design
sergeychernyshev
31
1k
How GitHub (no longer) Works
holman
314
140k
Transcript
From Backbone to Thorax MV* with 100% JavaScript Patrick Mulder
http://www.flickr.com/photos/the_foz/6219860966/
None
MV*
MVC pattern� http://amix.dk/blog/post/19615 user
View Collections/Models Subscribe UI Events Server RESTful DOM Templates Publish
Backbone MV*�
Demo 1� MV* basics
None
Why Thorax ?
Handlebars�
Backbone + handlebars
Demo 2� Handlebars MVC editor
Thorax.HelperView� {{#collection movies}} {{#link "details/{{_key}}" expand-tokens=true}} <li>{{title}}</li> {{/link}} {{/collection}}
itemFilter: function (model) { if (active) { return model.get('genre') ===
active; } else { return true; } } Supports filtering�
Thorax.Layout� layout.setView( ... ) <div class=“container"> {{layout-element}} </div>
subviews� <div class="header"> {{view header}} </div>
events� var listView = new Thorax.View({ el: "#movies", events: {
collection: { 'all': function(ev) { console.log(ev) }, filter: function(ev) { } } } }
model binding� $(event.target).model();
Demo 3� Thorax fiddles
Fiddles� • Filtering collections: – http://jsfiddle.net/mulderp/Q4aMh/3/ • LayoutView: • http://jsfiddle.net/mulderp/e8RzY/
The Thorax Generator
None
|-js! |! |---libs! |-----backbone! |-----impress! |-----masonry! |-----jquery! |-----jquery-fileupload! |-----jquery-ui! |-----require!
|-----underscore! |! |---modules! |! |! |-templates! |---dashboard! |---directory! |---shared! development production HTTP Loading JS Modules�
RequireJS�
Bower Yeoman
None
And more, e.g. for testing�
„Chef‘s choice“�
Development API server�
BUILD PROCESS
Demo 3� workflow automation�
Root View Thanks !
Let‘s discuss ! http://github.com/mulderp/thorax_sandbox! http://thinkingonthinking.com! http://pipefishbook.com! ! ! @mulpat!