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
560
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
120
I2C basics with Arduino
mulderp
0
210
Sharing hardware with JavaScript
mulderp
1
190
Arduino October meetup
mulderp
0
110
Physical JavaScript with Johnny-5, Cylon and Tessel
mulderp
1
1.1k
Blogging and writing about JavaScript
mulderp
2
850
Minimum Viable Interactions
mulderp
3
570
Arduino July Meetup
mulderp
0
93
Other Decks in Programming
See All in Programming
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
オートマトン学習しろ / Do automata learning
makenowjust
3
130
From Idea to IDE: Developing Plugins for Android Studio
thisaay
1
220
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Composing an API the *right* way (Droidcon New York 2024)
zsmb
2
140
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Ruby Parser progress report 2024
yui_knk
2
230
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Adopting Sorbet at Scale
ufuk
73
8.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
The Invisible Side of Design
smashingmag
296
50k
Designing the Hi-DPI Web
ddemaree
278
34k
How to Ace a Technical Interview
jacobian
274
23k
Documentation Writing (for coders)
carmenintech
65
4.3k
Building Your Own Lightsaber
phodgson
101
6k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Writing Fast Ruby
sferik
623
60k
Clear Off the Table
cherdarchuk
91
320k
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!