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
630
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
620
Arduino July Meetup
mulderp
0
100
Other Decks in Programming
See All in Programming
構文解析器入門
ydah
7
2.1k
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
260
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
1.9k
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
230
Portapad紹介プレゼンテーション
gotoumakakeru
1
120
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
200
ゲームの物理
fadis
3
970
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
140
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
210
リッチエディターを安全に開発・運用するために
unachang113
1
380
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
7
2.4k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
710
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
Facilitating Awesome Meetings
lara
54
6.5k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Why Our Code Smells
bkeepers
PRO
337
57k
Embracing the Ebb and Flow
colly
86
4.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
760
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Agile that works and the tools we love
rasmusluckow
329
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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!