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
540
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.7k
Nodebotsday
mulderp
1
120
I2C basics with Arduino
mulderp
0
210
Sharing hardware with JavaScript
mulderp
1
190
Arduino October meetup
mulderp
0
94
Physical JavaScript with Johnny-5, Cylon and Tessel
mulderp
1
1.1k
Blogging and writing about JavaScript
mulderp
2
830
Minimum Viable Interactions
mulderp
3
560
Arduino July Meetup
mulderp
0
90
Other Decks in Programming
See All in Programming
Activities at Cairo Library
cairolibrary720
0
1.2k
Advanced App Shrinking Techniques
cbeyls
2
150
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
유연한 Composable 설계
l2hyunwoo
0
380
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
CSC307 Lecture 07
javiergs
PRO
0
220
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
CSC307 Lecture 11
javiergs
PRO
0
240
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Featured
See All Featured
Statistics for Hackers
jakevdp
792
220k
The Cult of Friendly URLs
andyhume
75
5.9k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
A better future with KSS
kneath
231
17k
Web development in the modern age
philhawksworth
203
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
How to Think Like a Performance Engineer
csswizardry
4
590
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
What's in a price? How to price your products and services
michaelherold
239
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
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!