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
910
Minimum Viable Interactions
mulderp
3
620
Arduino July Meetup
mulderp
0
100
Other Decks in Programming
See All in Programming
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
350
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
950
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
CSC509 Lecture 08
javiergs
PRO
0
230
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
870
AI Agent 時代的開發者生存指南
eddie
4
2.1k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
270
What's new in Spring Modulith?
olivergierke
1
170
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
BBQ
matthewcrist
89
9.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Become a Pro
speakerdeck
PRO
29
5.6k
Designing for humans not robots
tammielis
254
26k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
Bash Introduction
62gerente
615
210k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
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!