Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember.js In The Wild

Ember.js In The Wild

schmonference

June 29, 2012
Tweet

Other Decks in Technology

Transcript

  1. A little background about myself… • Been doing client-side MVC

    apps for 5+ years • Worked on SproutCore at Apple working on .Mac, MobileMe, and iCloud apps MobileMe, and iCloud apps • Architected MobileMe/iCloud Calendar client using SproutCore 2
  2. A little background about myself… • Left Apple for Strobe,

    a HTML5 startup founded by Charles Jolley, the creator of SproutCore • Ember started at Strobe as SproutCore 2.0, • Ember started at Strobe as SproutCore 2.0, developed by Yehuda Katz, Tom Dale, and Peter Wagenet (@ykatz, @tomdale, @wagenet) • The Ember guys left to found a start up, Tilde, and I moved here to GROUPON 3
  3. "Ember is a JavaScript framework for creating ambitious web applications

    that eliminates boilerplate and provides a standard application architecture.” - emberjs.com 4
  4. What does Ember do to deliver on that promise? •

    Handlebar templates 6 • Handlebar templates • Data binding and property observing • Computed properties • State management
  5. App.person = Em.Object.create({ firstName: ’Peter', lastName: ’Bergström’ }); Basic Handlebars

    Example 8 }); <script type=“text/x-handlebars”> Your name {{firstName}} {{lastName}}. </script> When properties change in your object, they are automatically updated in the view!
  6. Conditionals: {{#if isPresenter}} You are the <strong>presenter.</strong> {{#else}} The presenter

    is {{firstName}} {{lastName}} {{/if}} More Handlebars 9 Looping: <ul> {{#each people}} <li>{{firstName}} {{lastName}}</li> {{/each}} </ul>
  7. Attribute bindings: <img class=“map” {{bindAttr src=“mapURL”}}/> Unbound properties: <a href=“{{unbound

    linkURL}}”>This is my link</a> More Handlebars 10 Actions: <a href=“#” {{action “open” target=“App.statechart”}}>Open</a>
  8. Way #2: using secondary templates Template 1: <script type=“text/x-handlebars”> {{view

    templateName=“mytemplate”}} Handlebars and Custom Views 12 </script> <script type=“text/x-handlebars” data-template-name=“mytemplate”> {{firstName}} {{lastName}} </script>
  9. Way #3: fully custom view App.MyView = Em.View.extend({ templateName: ‘mytemplate’,

    // view properties here Handlebars and Custom Views 13 }); <script type=“text/x-handlebars” data-template-name=“mytemplate”> {{firstName}} {{lastName}} </script>
  10. • Bindings provide the glue between your model, controller, and

    view with minimal manual work Data Bindings and Property Observing 15 • Observers detect changes and trigger change notifications in your application • Handlebar template properties are bindings by default and can be turned off by using unbound unbound unbound unbound
  11. <script type=“text/handlebars”> {{#view fooBinding= fooBinding= fooBinding= fooBinding=“ “ “ “App.path.to.foo

    App.path.to.foo App.path.to.foo App.path.to.foo” ” ” ”}} {{foo}} {{/view}} Bindings in a Handlebars template 16 {{/view}} </script>
  12. App.myView = Em.View.create({ fooBinding: ‘App.path.to.foo’, fooDidChange: function() { Property Observing

    18 fooDidChange: function() { this.set(‘isVisible’, this.get(‘foo’)); }.observes(‘foo’) });
  13. • In order to use bindings and observers, you need

    to use the built-in .get() and .set() method. One note about bindings and observers… 19 • Available on all Ember objects directly or on hashes by doing the following: var bar = Em.get(hash, ‘propertyName’); Em.set(hash, ‘propertyKey’, ‘newValue’);
  14. You can get and set paths: var bar = App.getPath(‘path.to.bar’);

    Other nice things with getters and setters 20 var bar = App.getPath(‘path.to.bar’); App.setPath(‘path.to.bar’, ‘newValue’);
  15. • It’s a function that can be run to do

    more complex logic and it is exposed to the app as a normal property Computed Properties 22 • Invalidates on dependent properties and is cacheable • Only executes when dependent properties change, otherwise it is cached
  16. For example, I want to reverse a string property that

    I have in my app somewhere: myStrPropertyReversed: function() { Computed Properties 23 myStrPropertyReversed: function() { return (this.get('myStrProperty') || '').reverse(); }.property('myStrProperty').cacheable() Note: .cacheable() will go away in future Ember versions since all properties will be cached by default
  17. • Interactive apps contain a lot of state one way

    or another. • State charts makes this state easy to manage and provides a well-defined and centralized Why use state charts? 25 and provides a well-defined and centralized framework to manage your app logic • Responding to specific user events can be contained in a state and only in that state • Easy to modularize and test
  18. A simple example: loading data App.statechart = Ember.StateManager.create({ initialState: ‘loading’,

    loading: Ember.State.create({ enter: function() { App.load(); }, didLoadData: function(manager) { 27 didLoadData: function(manager) { manager.transitionTo(‘loaded’); return true; } }), loaded: Ember.State.create({ loadMore: function() { manager.transitionTo(‘loading’); return true; } }) });
  19. A simple example: loading data App.statechart = Ember.StateManager.create({ initialState: ‘loading’,

    loading loading loading loading: Ember.State.create({ enter: function() { App.load(); }, didLoadData: function(manager) { 28 didLoadData: function(manager) { manager.transitionTo(‘loaded’); return true; } }), loaded loaded loaded loaded: Ember.State.create({ loadMore: function() { manager.transitionTo(‘loading’); return true; } }) });
  20. A simple example: loading data App.statechart = Ember.StateManager.create({ initialState: ‘loading’,

    loading: Ember.State.create({ enter: function() { App.load(); }, didLoadData didLoadData didLoadData didLoadData: function(manager) { 29 didLoadData didLoadData didLoadData didLoadData: function(manager) { manager.transitionTo(‘loaded’); return true; } }), loaded: Ember.State.create({ loadMore loadMore loadMore loadMore: function() { manager.transitionTo(‘loading’); return true; } }) });
  21. Let’s switch gears and check out a real app written

    in Ember… 30 real app written in Ember…
  22. 34

  23. 35

  24. 36

  25. 37

  26. 38

  27. 39

  28. 40

  29. Developer tools that I use • Uses Rake Pipeline from

    Living Social • Combines JavaScript & CSS assets for me • I wrote my custom rake script to detect changes 41 • I wrote my custom rake script to detect changes automatically to invoke rakep for my own sanity • I use Jasmine for testing