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
570
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
860
Minimum Viable Interactions
mulderp
3
590
Arduino July Meetup
mulderp
0
94
Other Decks in Programming
See All in Programming
イベント駆動で成長して委員会
happymana
1
320
最新TCAキャッチアップ
0si43
0
140
cmp.Or に感動した
otakakot
1
120
CSC509 Lecture 12
javiergs
PRO
0
160
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
290
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
受け取る人から提供する人になるということ
little_rubyist
0
230
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
CSC509 Lecture 09
javiergs
PRO
0
140
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Documentation Writing (for coders)
carmenintech
65
4.4k
Side Projects
sachag
452
42k
Designing for humans not robots
tammielis
250
25k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Bash Introduction
62gerente
608
210k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
GitHub's CSS Performance
jonrohan
1030
460k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
A Philosophy of Restraint
colly
203
16k
The Language of Interfaces
destraynor
154
24k
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!