Introduction to Ember.js

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

Transcript

1. Introduction to Ember.js Luke Melia Ember.js NYC Meetup March 28th, 2013 Friday, March 29, 13
2. About this Embereño 2 Friday, March 29, 13
3. Relevant Experience 3 Friday, March 29, 13
4. My Experience Building Ember Apps 4 Friday, March 29, 13
5. 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
6. ▪ Develop an understanding of... ▪ Application structure ▪ Division of responsibilities ▪ Some of the fundamental building blocks 6 Goals of the Talk Friday, March 29, 13
7. The Idea Behind the Talk ▪ 98% of building good apps is understanding your layers and knowing what code should go where 7 Friday, March 29, 13
8. 8 Lay of the Land Friday, March 29, 13
9. ▪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
10. ▪ 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
11. ▪ Ember API has stabilized ▪ Will be at RC2 shortly ▪ Ember 1.0 final is coming Real Soon Now™ 11 Lay of the Land: 1.0 Status Friday, March 29, 13
12. 12 How the layers relate Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13
13. View View Template 13 Overall app data flow Router Controller Controller Model Model Model Model Friday, March 29, 13
14. 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
15. 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
16. 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
17. Models 14 Friday, March 29, 13
18. 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
19. 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
20. 17 Router Controller Controller View View Template Model Model Model Model Models: Often depend on other models Template Friday, March 29, 13
21. 18 Router Controller Controller View View Template Model Model Model Model Identity Map Models: Should use an identity map Template Friday, March 29, 13
22. ▪ 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
23. 20 Model Model Model Model Models: Testable in isolation Test Suite Test Suite Test Suite Test Suite Friday, March 29, 13
24. ▪ 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
25. ▪ 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
26. Controllers 23 Friday, March 29, 13
27. 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
28. Controllers: Expose bindable properties 25 Friday, March 29, 13
29. 26 Router Controller Controller View View Template Model Model Model Model Controllers: Often proxy models Template Friday, March 29, 13
30. 26 Router Controller Controller View View Template Model Model Model Model Controllers: Often proxy models Template Friday, March 29, 13
31. 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
32. Controllers: Ember.ObjectController 28 Friday, March 29, 13
33. Controllers: Ember.ArrayController 29 Friday, March 29, 13
34. 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
35. Controllers: May collaborate with other controllers 31 Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13
36. Controllers: May collaborate with other controllers 31 Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13
37. 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
38. 33 Controller Controller Controllers: Testable in isolation Test Suite Test Suite Friday, March 29, 13
39. The View Layer 34 Friday, March 29, 13
40. View Layer: Contain all DOM interaction 35 Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13
41. View Classes: Responsibilities ▪ Optional (will be generated) ▪ Translate primitive events (DOM events) into semantic events that affect app state 36 Friday, March 29, 13
42. Views: Let Handlebars do the heavy lifting 37 Friday, March 29, 13
43. Templates: Bound Expressions 38 Friday, March 29, 13
44. Templates: Conditionals 39 Friday, March 29, 13
45. Templates: Outlets are placeholders 40 Friday, March 29, 13
46. Templates: Nesting I 41 Friday, March 29, 13
47. Templates: Changing Scope 42 Friday, March 29, 13
48. Templates: Nesting and Changing Scope 43 Friday, March 29, 13
49. Templates: Firing events 44 That will try to call a selectPost method on the controller, or on the current route Friday, March 29, 13
50. View Layer: Understanding keywords ▪ controller ▪ view ▪ context 45 Friday, March 29, 13
51. Templates: Understanding keywords 46 Friday, March 29, 13
52. 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
53. Views: Ways to handle DOM events ▪ Ember-dispatched events ▪ Handlebars action helper ▪ jQuery 48 Friday, March 29, 13
54. Views: Ember-dispatched events 49 Friday, March 29, 13
55. Views: Ember-dispatched events 50 touchStart, touchMove, touchEnd, touchCancel, keyDown, keyUp, keyPress, mouseDown, mouseUp, contextMenu, click, doubleClick, mouseMove, focusIn, focusOut, mouseEnter, mouseLeave, submit, input, change, dragStart, drag, dragEnter, dragLeave, dragOver, drop, dragEnd Friday, March 29, 13
56. Views: Ember-dispatched events 51 Friday, March 29, 13
57. Views: Using jQuery to handle events 52 preRender inDom destroyed Friday, March 29, 13
58. Views: Using jQuery to handle events 52 preRender inDom destroyed didInsertElement (after) inDom Friday, March 29, 13
59. Views: Using jQuery to handle events 52 preRender inDom destroyed didInsertElement (after) willDestroyElement (before) inDom destroyed Friday, March 29, 13
60. Views: Using jQuery to handle events 53 Friday, March 29, 13
61. 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
62. View tips II ▪ It’s a good practice for views to know as little as possible about their parent view hierarchy 55 Friday, March 29, 13
63. Views: ContainerView ▪ When {{#each}} isn’t enough... ▪ To manually manage views, use Ember.ContainerView ▪ http://emberjs.com/guides/views/ manually-managing-view-hierarchy/ 56 Friday, March 29, 13
64. 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
65. Router 58 Friday, March 29, 13
66. Router: Responsibilities ▪Manages application state ▪Keeps the URL up to date as you transition between routes 59 Friday, March 29, 13
67. Router: DSL 60 Friday, March 29, 13
68. 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
69. 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
70. Router: Tips ▪ Be careful with asynchronicity in the router event handlers. ▪ Delegate to separate state managers where helpful. 63 Friday, March 29, 13
71. Router: Naming Conventions 64 Friday, March 29, 13
72. 65 Overall app data flow, reprise Router Controller Controller View View Template Model Model Model Model Friday, March 29, 13
73. 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
74. 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
75. 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
76. 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