This talk was delivered to the Ember.js NYC Meetup on Thursday, March 28th, 2013. Video of this presentation is available here: http://www.youtube.com/watch?v=7O9X5oeAJm4
Mobile Cross-platform mobile, via PhoneGap 5 Dashboard Simple one-pager for desktop/tablet Editor Rich desktop-style app for desktop/tablet Account Settings Form field-heavy one-pager Friday, March 29, 13
■ Develop an understanding of... ■ Application structure ■ Division of responsibilities ■ Some of the fundamental building blocks 6 Goals of the Talk Friday, March 29, 13
■MVC is not created equal ■C is for Controller, but “controller” has many different meanings. ■+R for Router 9 Lay of the Land: MVC Friday, March 29, 13
■ If you’ve never considered yourself a professional UI Engineer, you’re about to become one. ■ Long-lived state ■ UI responsiveness 10 Lay of the Land: This is UI Development Very different from a stateless request/ response cycle that has been popular in web development recently Friday, March 29, 13
View View Template 13 Overall app data flow Router Controller Controller Model Model Model Model Data flows down from models via bindings Friday, March 29, 13
View View Template 13 Overall app data flow Router Controller Controller Model Model Model Model Data flows down from models via bindings Events flow up from view layer to the router Friday, March 29, 13
View View Template 13 Overall app data flow Router Controller Controller Model Model Model Model Data flows down from models via bindings Events flow up from view layer to the router Router updates models & controllers based on events Friday, March 29, 13
15 Router Controller Controller View View Template Model Model Model Model Models: Usually serialized/deserialized to/from API API Client Template Friday, March 29, 13
16 Router Controller Controller View View Template Model Model Model Model Models: Should not depend on controllers, views or other app state Template Friday, March 29, 13
18 Router Controller Controller View View Template Model Model Model Model Identity Map Models: Should use an identity map Template Friday, March 29, 13
■ To work with the router, a model class should: ■ implement find(id) ■ implement then(success, failure) (promise pattern) 19 Models: Working with router Friday, March 29, 13
■ ember-data is an ORM for Ember ■ Store + Adapter + Serializer ■ DS.Store implements an Identity Map ■ RESTAdapter; BasicAdapter ■ Work in progress; API is much less stable than Ember core 21 Models: ember-data Friday, March 29, 13
■ Subclass Ember.Object for your model classes ■ Retrieve and persist data using jQuery 22 Models: $.ajax plus Ember.Object For a great example of this in an open source project, check out Discourse Friday, March 29, 13
24 Router Controller Controller View View Template Model Model Model Model Controllers: Present data for the view layer to render Template Friday, March 29, 13
Controllers: Ember.ObjectController ■ Transparently proxies missing properties and methods to the object set as its content property ■ Destroyer of boilerplate 27 Friday, March 29, 13
Controllers: Lazily instantiated once by the container 30 container.lookup is where the lazy instantiation will occur Also, notice how a controller is generated for you if none is found Friday, March 29, 13
Controllers: May collaborate with other controllers 31 Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13
Controllers: May collaborate with other controllers 31 Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13
Controllers: “needs” 32 Explanation of the shortcuts used here: Em is short for Ember Ember.computed.alias usage here expands to: function(){ return this.get(‘controllers.user.username’); }.property(‘controllers.user.username’) Friday, March 29, 13
Views: One controller per view ■ Should bind to properties of one controller ■ If you need data from elsewhere: ■ bring it into this view’s controller using `needs` ■ or, {{render}} a new template 47 Friday, March 29, 13
View tips I ■ Remember that views are created and destroyed over lifetime of app and at render time 54 Be sure you are not storing state you want to keep around on view instances! Friday, March 29, 13
Data-binding caveat ■ Bound properties, using computed properties or bindings, are very powerful ■ Two-way bindings can lead to unexpected behavior and bugs and are often unnecessary 57 Friday, March 29, 13
Router: Route classes I 61 Actions look for a handler at the current route and then check up the route hierarchy until they nd a handler. Friday, March 29, 13
Router: Route classes II 62 ■Lots of hooks to override conventional behavior when needed ■http://emberjs.com/api/classes/ Ember.Route.html Friday, March 29, 13
Router: Tips ■ Be careful with asynchronicity in the router event handlers. ■ Delegate to separate state managers where helpful. 63 Friday, March 29, 13
65 Overall app data flow, reprise Router Controller Controller View View Template Model Model Model Model Data flows down from models via bindings Friday, March 29, 13
65 Overall app data flow, reprise Router Controller Controller View View Template Model Model Model Model Data flows down from models via bindings Events flow up from view layer to the router Friday, March 29, 13
65 Overall app data flow, reprise Router Controller Controller View View Template Model Model Model Model Data flows down from models via bindings Events flow up from view layer to the router Router updates models & controllers based on events Friday, March 29, 13
Q & A Follow me @lukemelia Some examples appear courtesy of my company, Yapp (which is hiring now or soon). Creative Commons photo credits: flickr.com/photos/fictures/4596895 66 Friday, March 29, 13
lukemelia
abenben
yayoi_dd
iotengineer22
tbaldauf
hirosatogamo
tokyo_metropolitan_gov_smart_tokyo_strat
ybrliiu
you
mamohacy
tgalopin
nenonaninu
seike460
sachag
kneath
iamctodd
tmm1
jakevdp
bkeepers
morganepeng
roundedbygravity
dougneiner
bryan
keavy