Slide deck for January 31, 2013 presentation; overview of v1.0.0.-pre.4 and comparison with other frameworks.

1. SPAs Redux:
Snappy, Performant Apps (with Ember.js)
Anthony Bull
Sr. Web Engineer, CrowdFlower
SFHTML5 Meetup, January 31, 2013
1

2. Latest
Ember.js 1.0.0-pre.4
2

3. Ember.js MVC != server-side MVC
3

4. tl;dr
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.
4

5. History of JS MVCs/SPAs/F2E*
YUI
Prototype/ Prototype/
script.aculo.us jQuery
JavaScript
01
y
10
06
11
12
12
da
20
0
20
0
20
To
20
-2
-2
07
10
id
rly
m
20
20
ea
* a somewhat-biased account
5

6. Framework Comparisons
convention over HTML for apps,
Approach DIYer
configuration not pages
less code = more
Top Pro flexibility corporate-backing
productive
Top Con re-create the wheel ramp up != trivial verbosity
If I took you on a
knife/spoon/fork swiss-army knife spork
camping trip...
6

7. Hello World!
7

8. A Template
<script type="text/x-handlebars" data-template-name="application">
Hello, <strong>{{userName}}</strong>!
</script>
8

9. A View
var view = Ember.View.create({
templateName: 'application'
});
9

10. A Controller
App.ApplicationController = Ember.Controller.extend();
10

11. A Route
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller,user) {
controller.set(‘content’, App.user);
}
})
11

12. An Object
App.user = Ember.Object.create({
name: 'World!'
});
12

13. An App
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);
}
});
13

14. sonific8tr
http://github.com/inkredabull/sonific8tr
14

15. Naming (Very Important!!!)*
Template stations
View App.StationsController
Controller App.StationView
Router this.resource('stations')
App.StationsRoute
Model App.Station
* convention over configuration
15

16. Testing
• You should do it
• QUnit
• Selenium (Lebowski gem?)
• Capybara
• PhantomJS/poltergeist
16

17. Ember.js Resources
• Learn more • Ember.js Project
• Marakana : Pro Ember.js • Homepage
• Peepcode : Ember.js • GitHub
• This week in Ember.js ... • Documentation
• Tom on Ember Data, Oct. 2012 • http://emberjs.com/guides/
• Peter on Views, Sep. 2012 • Community
• Yehuda on Ember, Sep. 2012 • Ember.js on StackOverflow
• Which MVC framework? • IRC : freenode.net #emberjs
17

18. tl;dr - II
• Pedigree (SproutCore, jQuery, Merb, Rails)
• Community (tremendous growth in last year)
• Stability (state mgt./data sync/conventions/docs)
18

19. Jobs!!!
My job!
19

20. • We’re hiring! (Ember.js/Rails)
• Ski trip!
20

21. Thanks!
Kariem Hussein, Exabit
Alexander Sorokin
Mars Hall
CVP & Engr at CrowdFlower
Tatiana Josephy
Tom Dale @tomdale Jakub Arnold @darthdeus
Yehuda Katz @wycats Trek Glowacki @trek
Peter Wagenet @wagenet Clemens Müller @pangratz
Tilde @tildeio Andy Matthews @commadelimited
Contact me at:
anthony@crowdflower.com
@inkredabull
21

22. More...
22

23. History of Ember.js
Apple
(MobileMe & iCloud.com)
Amber.js / Ember.js
SproutCore 1.0.0-pre.4
Sproutcore 2
0.9.6
0.9.8
RC 1.0
1.0.0-pre.1
1.0.0-pre.2
1.0.0-pre.3
08
07
11
11
g
y
in
da
20
20
20
20
m
To
Co
ay
c
De
M
*
http://www.cerebris.com/blog/2012/01/20/warming-up-to-ember-js/
http://en.wikipedia.org/wiki/SproutCore
23

24. Who’s using Ember.js?
24

25. Who’s behind Ember.js?
Tom Dale Yehuda Katz
25