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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
mulderp
February 20, 2014
Programming
1
650
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
140
I2C basics with Arduino
mulderp
0
230
Sharing hardware with JavaScript
mulderp
1
220
Arduino October meetup
mulderp
0
130
Physical JavaScript with Johnny-5, Cylon and Tessel
mulderp
1
1.1k
Blogging and writing about JavaScript
mulderp
2
940
Minimum Viable Interactions
mulderp
3
630
Arduino July Meetup
mulderp
0
110
Other Decks in Programming
See All in Programming
CSC307 Lecture 02
javiergs
PRO
1
780
今から始めるClaude Code超入門
448jp
8
8.9k
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
690
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
2.5k
CSC307 Lecture 01
javiergs
PRO
0
690
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
220
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
200
Basic Architectures
denyspoltorak
0
680
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
200
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
460
ぼくの開発環境2026
yuzneri
0
240
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
830
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
Chasing Engaging Ingredients in Design
codingconduct
0
110
Building Adaptive Systems
keathley
44
2.9k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
The Cost Of JavaScript in 2023
addyosmani
55
9.5k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
86
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Google's AI Overviews - The New Search
badams
0
910
SEO for Brand Visibility & Recognition
aleyda
0
4.2k
Speed Design
sergeychernyshev
33
1.5k
Darren the Foodie - Storyboard
khoart
PRO
2
2.4k
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!