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
640
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
180
Elm
sporto
1
250
Redux: Flux Reduced
sporto
1
330
Practically Immutable
sporto
0
190
Webpack and React
sporto
4
380
Rails with Webpack
sporto
1
220
Lesson learnt building Single Page Application
sporto
0
120
Grunt
sporto
1
180
Safe Testing in Ruby
sporto
1
130
Other Decks in Programming
See All in Programming
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
690
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
160
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
730
PicoRuby on Rails
makicamel
2
120
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
110
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
100
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
500
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
We Have a Design System, Now What?
morganepeng
53
7.7k
Fireside Chat
paigeccino
37
3.5k
A better future with KSS
kneath
239
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Applications with DynamoDB
mza
95
6.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Producing Creativity
orderedlist
PRO
346
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
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 ˒ ˒ ˒