Ember.js In The Wild

Transcript

1. Ember.js in the Wild Peter Bergström Engineering Lead, GROUPON Scheduler Email: pbergstrom@groupon.com Twitter: @pbergstr 1
2. 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
3. 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
4. "Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.” - emberjs.com 4
5. What does Ember do to deliver on that promise? 5
6. What does Ember do to deliver on that promise? • Handlebar templates 6 • Handlebar templates • Data binding and property observing • Computed properties • State management
7. Handlebars Templates 7
8. 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!
9. 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>
10. 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>
11. Way #1: inline <script type=“text/x-handlebars”> {{#view}} {{firstName}} {{lastName}} Handlebars and Custom Views 11 {{/view}} </script>
12. 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>
13. 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>
14. Data Bindings and 14 and Property Observing
15. • 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
16. <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>
17. App.myView = Em.View.create({ fooBinding: fooBinding: fooBinding: fooBinding: ‘‘‘‘App.path.to.foo App.path.to.foo App.path.to.foo App.path.to.foo’’’’ }); Bindings in Ember objects/views 17
18. 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’) });
19. • 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’);
20. 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’);
21. Computed Properties 21
22. • 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
23. 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
24. State Charts 24
25. • 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
26. A simple example: loading data 26
27. 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; } }) });
28. 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; } }) });
29. 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; } }) });
30. Let’s switch gears and check out a real app written in Ember… 30 real app written in Ember…
31. GROUPON Scheduler’s Mobile Booking Ember App 31
32. Demo 32 Demo
33. Let’s go over the Mobile Booking App’s state chart 33 App’s state chart
41. 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
42. Ember Resources • http://www.emberjs.com • https://github.com/emberjs 42 • https://github.com/livingsocial/rake-pipeline/ • #emberjs on irc.freenode.net
43. Thanks for listening! 43 Questions?