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
CanJS
Search
sporto
April 11, 2013
Programming
6
630
CanJS
An overview of CanJS and comparison with Backbone, Angular and Ember
sporto
April 11, 2013
Tweet
Share
More Decks by sporto
See All by sporto
React inside Elm
sporto
2
170
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
320
Practically Immutable
sporto
0
170
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
210
Lesson learnt building Single Page Application
sporto
0
110
Grunt
sporto
1
150
Safe Testing in Ruby
sporto
1
120
Other Decks in Programming
See All in Programming
Ruby Parser progress report 2024
yui_knk
2
230
How to Break into Reading Open Source
kaspth
2
220
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
170
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
330
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
3
830
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
REXML改善のその後
naitoh
0
190
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Designing for Performance
lara
604
68k
How to Ace a Technical Interview
jacobian
274
23k
Fireside Chat
paigeccino
31
2.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Designing Experiences People Love
moore
138
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Transcript
Sebastian Porto @sebasporto
•Intro •Features •Demo •Why?
2008 2012 Part of JMVC 3
CAN.JS MVC View Controller events Model m odify updates via
events
FEATURES
OVERVIEW can.Construct can.Observe can.Model can.Control can.view EJS Mustache can.route
can.Construct var Person = can.Construct({ init: function (name) { this.name
= name; } }); var zack = new Person(”Zack");
OBSERVABLES Construct Observable
can.Observe var state = new can.Observe({ selected: null, showSave: false
});
can.Observe state.bind('selected', function (oldVal, newVal) { … }); state.attr(‘selected’, item);
state.attr(‘selected’);
MODELS Construct Observable Model
can.Model var Library = can.Model({ findAll: ‘GET /libraries’, create: 'POST
/libraries', update: 'PUT /libraries/{id}', destroy: 'DELETE /libraries/{id}' }, {});
can.Model new Library.List([]); Collection Member new Library({name: ‘jQuery’});
VIEWS Model Views live bindings
can.view var template = can.view("#template", { libraries: this.libraries, state: this.state
}); can.$(ele).append(template);
EJS <% libs.forEach(function(el, ix) { %> <li><%= el.name %></li> <%
}) %> <% if (state.isEditing) { %> <button>Save</button> <% } %>
Mustache {{#libraries}} <li>{{name}}</li> {{/libraries}} {{#state.isEditing}} <button>Save</button> {{/state.isEditing}}
CONTROLLERS Controller Model View events m odify
can.Control var Control = can.Control({ init: function (ele, options) {
… } }); var control = new Control('#main’, {});
can.Control '.btn_save click': function (ele, ev) { }, '.name keyup':
function (ele, ev) { }
Other Goodies •Validations •Dirty attributes •Fixtures •Handlebars helpers (Transformations, filters)
DEMO
WHY?
None
LEARNING CURVE A subjective comparison
BACKBONE Confused
EMBER “We frequently receive feedback from new developers about how
frustrating it can be to get started with Ember” Yehuda Katz & Tom Dale http://emberjs.com/blog/2013/03/21/making-ember-easier.html
ANGULAR Wow
None
Convenience / Magic Easier to Learn
They way you already know, is most likely the right
way.
ANGULAR function Ctrl($scope, $element) { $(‘.tree’, $element).dynatree({}); }
That’s not the Angular way! You should use directives!
CAN init: function (element, options) { $(‘.tree’, element).dynatree({}); … }
Yay!
SIZE KB (MIN) Ember Angular CanJS Backbone 18 33 80
141
SIZE KB (MIN) Ember + jQuery + Handlebars Angular CanJS
+ Zepto Backbone + _ + Zepto + Mustache 61 57 80 269
INTEGRATION
Memory leak safe '.btn_save click': function (ele, ev) { …
},
Performance http://jsperf.com/angular-vs-knockout-vs-ember/118
Succinct Source http://paulhammant.com/2013/01/18/client-side-mvc-roundup/
TRY IT OUT!
THANKS... QS?
With #canjs you can do 80% of what you can
possibly need with 20% the learning curve of the others. Sebastian Porto @sebasporto
THE REALLY IMPORTANT STUFF Backbone CanJS Angular Ember Easy to
learn ˒ ˒ Great docs ˒ ˒ ˒ Observable Models ˒ ˒ ˒ ˒ Routing ˒ ˒ ˒ ˒ Views with live bindings ˒ ˒ ˒ Two way bindings ˒ ˒ Avoid unnecessary boilerplate ˒ ˒ ˒