Embed Size (px)
DESCRIPTION
Slide deck for January 31, 2013 presentation; overview of v1.0.0.-pre.4 and comparison with other frameworks.
Citation preview
SPAs Redux:Snappy, Performant Apps (with Ember.js)
Anthony BullSr. Web Engineer, CrowdFlowerSFHTML5 Meetup, January 31, 2013
1
Ember.js 1.0.0-pre.4
Latest
2
Ember.js MVC != server-side MVC
3
Ember.js provides the best balance of trade-offs of any (JS) MVC framework when it comes to
building clean, well-factored client-side web apps.
tl;dr
4
2001
JavaScript
2006
Prototype/script.aculo.us
2007
-201
0
YUI
2010
-201
1
Prototype/jQuery
early
201
2To
day
mid 2
012
History of JS MVCs/SPAs/F2E*
* a somewhat-biased account
5
Approach DIYerconvention over
configurationHTML for apps,
not pages
Top Pro flexibilityless code = more
productivecorporate-backing
Top Con re-create the wheel ramp up != trivial verbosity
If I took you on a camping trip... knife/spoon/fork swiss-army knife spork
Framework Comparisons
6
Hello World!
7
<script type="text/x-handlebars" data-template-name="application"> Hello, <strong>{{userName}}</strong>!</script>
A Template
8
var view = Ember.View.create({ templateName: 'application'});
A View
9
App.ApplicationController = Ember.Controller.extend();
A Controller
10
App.ApplicationRoute = Ember.Route.extend({ setupController: function(controller,user) { controller.set(‘content’, App.user); }})
A Route
11
App.user = Ember.Object.create({ name: 'World!'});
An Object
12
App = Ember.Application.create();
App.user = Ember.Object.create({ name: 'World!'});
var view = Ember.View.extend({ templateName: 'application'});
App.ApplicationRoute = Ember.Route.extend({ setupController: function(controller, user){ controller.set('content', App.user); }});
An App
13
sonific8tr
http://github.com/inkredabull/sonific8tr
14
Naming (Very Important!!!)*
Template
View
Controller
Router
Model
stationsApp.StationsController
App.StationViewthis.resource('stations')
App.StationsRoute
App.Station
* convention over configuration
15
• You should do it
• QUnit
• Selenium (Lebowski gem?)
• Capybara
• PhantomJS/poltergeist
Testing
16
• Learn more
• Marakana : Pro Ember.js
• Peepcode : Ember.js
• This week in Ember.js ...
• Tom on Ember Data, Oct. 2012
• Peter on Views, Sep. 2012
• Yehuda on Ember, Sep. 2012
• Which MVC framework?
• Ember.js Project
• Homepage
• GitHub
• Documentation
• http://emberjs.com/guides/
• Community
• Ember.js on StackOverflow
• IRC : freenode.net #emberjs
Ember.js Resources
17
• Pedigree (SproutCore, jQuery, Merb, Rails)
• Community (tremendous growth in last year)
• Stability (state mgt./data sync/conventions/docs)
tl;dr - II
18
My job!
Jobs!!!
19
•We’re hiring! (Ember.js/Rails)
• Ski trip!
20
Thanks!
Kariem Hussein, ExabitAlexander Sorokin
Mars HallCVP & Engr at CrowdFlower
Tatiana Josephy
Contact me at: [email protected]
@inkredabull
Tom Dale @tomdaleYehuda Katz @wycats
Peter Wagenet @wagenetTilde @tildeio
Jakub Arnold @darthdeusTrek Glowacki @trek
Clemens Müller @pangratzAndy Matthews @commadelimited
21
More...
22
Toda
y20
07
SproutCoreSproutcore 2
Amber.js / Ember.js
Dec 2
011
May
201
1
0.9.6
0.9.8
1.0.0-pre.1
2008
Apple (MobileMe & iCloud.com)
* http://www.cerebris.com/blog/2012/01/20/warming-up-to-ember-js/http://en.wikipedia.org/wiki/SproutCore
1.0.0-pre.4
1.0.0-pre.2
1.0.0-pre.3
RC 1.0
Coming
History of Ember.js
23
Who’s using Ember.js?
24
Who’s behind Ember.js?
Tom Dale Yehuda Katz
25
