SPAs Redux:Snappy, Performant Apps (with Ember.js)Anthony BullSr. Web Engineer, CrowdFlowerSFHTML5 Meetup, January 31, 201...
LatestEmber.js 1.0.0-pre.4                       2
Ember.js MVC != server-side MVC                                  3
tl;dr Ember.js provides the best balance of trade-offs  of any (JS) MVC framework when it comes tobuilding clean, well-fac...
History of JS MVCs/SPAs/F2E*                              YUI                Prototype/    Prototype/              script....
Framework Comparisons                                           convention over       HTML for apps,Approach              ...
Hello World!               7
A Template<script type="text/x-handlebars" data-template-name="application">      Hello, <strong>{{userName}}</strong>!</s...
A Viewvar view = Ember.View.create({  templateName: application});                                 9
A ControllerApp.ApplicationController = Ember.Controller.extend();                                                        ...
A RouteApp.ApplicationRoute = Ember.Route.extend({   setupController: function(controller,user) {      controller.set(‘con...
An ObjectApp.user = Ember.Object.create({  name: World!});                                   12
An AppApp = Ember.Application.create();App.user = Ember.Object.create({  name: World!});var view = Ember.View.extend({  te...
sonific8trhttp://github.com/inkredabull/sonific8tr                                          14
Naming (Very Important!!!)*                   Template      stations                        View     App.StationsControlle...
Testing•   You should do it•   QUnit•   Selenium (Lebowski gem?)•   Capybara    • PhantomJS/poltergeist                   ...
Ember.js Resources• Learn more                       • Ember.js Project  • Marakana : Pro Ember.js          • Homepage  • ...
tl;dr - II• Pedigree (SproutCore, jQuery, Merb, Rails)• Community (tremendous growth in last year)• Stability (state mgt./...
Jobs!!!          My job!                    19
• We’re hiring! (Ember.js/Rails)• Ski trip!                                   20
Thanks!     Kariem Hussein, Exabit        Alexander Sorokin            Mars Hall    CVP & Engr at CrowdFlower         Tati...
More...          22
History of Ember.js               Apple       (MobileMe & iCloud.com)                                                     ...
Who’s using Ember.js?                        24
Who’s behind Ember.js?Tom Dale                   Yehuda Katz                                         25
Upcoming SlideShare
Loading in …5
×

Ember.js for SFHTML5

4,007 views

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,007
On SlideShare
0
From Embeds
0
Number of Embeds
1,544
Actions
Shares
0
Downloads
42
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Ember.js for SFHTML5

  1. 1. SPAs Redux:Snappy, Performant Apps (with Ember.js)Anthony BullSr. Web Engineer, CrowdFlowerSFHTML5 Meetup, January 31, 2013 1
  2. 2. LatestEmber.js 1.0.0-pre.4 2
  3. 3. Ember.js MVC != server-side MVC 3
  4. 4. tl;dr Ember.js provides the best balance of trade-offs of any (JS) MVC framework when it comes tobuilding clean, well-factored client-side web apps. 4
  5. 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. 6. Framework Comparisons convention over HTML for apps,Approach DIYer configuration not pages less code = moreTop Pro flexibility corporate-backing productiveTop Con re-create the wheel ramp up != trivial verbosityIf I took you on a knife/spoon/fork swiss-army knife sporkcamping trip... 6
  7. 7. Hello World! 7
  8. 8. A Template<script type="text/x-handlebars" data-template-name="application"> Hello, <strong>{{userName}}</strong>!</script> 8
  9. 9. A Viewvar view = Ember.View.create({ templateName: application}); 9
  10. 10. A ControllerApp.ApplicationController = Ember.Controller.extend(); 10
  11. 11. A RouteApp.ApplicationRoute = Ember.Route.extend({ setupController: function(controller,user) { controller.set(‘content’, App.user); }}) 11
  12. 12. An ObjectApp.user = Ember.Object.create({ name: World!}); 12
  13. 13. An AppApp = 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. 14. sonific8trhttp://github.com/inkredabull/sonific8tr 14
  15. 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. 16. Testing• You should do it• QUnit• Selenium (Lebowski gem?)• Capybara • PhantomJS/poltergeist 16
  17. 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. 18. tl;dr - II• Pedigree (SproutCore, jQuery, Merb, Rails)• Community (tremendous growth in last year)• Stability (state mgt./data sync/conventions/docs) 18
  19. 19. Jobs!!! My job! 19
  20. 20. • We’re hiring! (Ember.js/Rails)• Ski trip! 20
  21. 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 @trekPeter Wagenet @wagenet Clemens Müller @pangratz Tilde @tildeio Andy Matthews @commadelimited Contact me at: anthony@crowdflower.com @inkredabull 21
  22. 22. More... 22
  23. 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. 24. Who’s using Ember.js? 24
  25. 25. Who’s behind Ember.js?Tom Dale Yehuda Katz 25

×