Introduction to Ember.js

Slide 1

Slide 1 text

Introduction to Ember.js Luke Melia Ember.js NYC Meetup March 28th, 2013 Friday, March 29, 13

Slide 2

Slide 2 text

About this Embereño 2 Friday, March 29, 13

Slide 3

Slide 3 text

Relevant Experience 3 Friday, March 29, 13

Slide 4

Slide 4 text

My Experience Building Ember Apps 4 Friday, March 29, 13

Slide 5

Slide 5 text

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 ﬁeld-heavy one-pager Friday, March 29, 13

Slide 6

Slide 6 text

■ Develop an understanding of... ■ Application structure ■ Division of responsibilities ■ Some of the fundamental building blocks 6 Goals of the Talk Friday, March 29, 13

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 Lay of the Land Friday, March 29, 13

Slide 9

Slide 9 text

■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

Slide 10

Slide 10 text

■ 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 diﬀerent from a stateless request/ response cycle that has been popular in web development recently Friday, March 29, 13

Slide 11

Slide 11 text

■ Ember API has stabilized ■ Will be at RC2 shortly ■ Ember 1.0 ﬁnal is coming Real Soon Now™ 11 Lay of the Land: 1.0 Status Friday, March 29, 13

Slide 12

Slide 12 text

12 How the layers relate Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13

Slide 13

Slide 13 text

View View Template 13 Overall app data ﬂow Router Controller Controller Model Model Model Model Friday, March 29, 13

Slide 14

Slide 14 text

View View Template 13 Overall app data ﬂow Router Controller Controller Model Model Model Model Data ﬂows down from models via bindings Friday, March 29, 13

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Models 14 Friday, March 29, 13

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

17 Router Controller Controller View View Template Model Model Model Model Models: Often depend on other models Template Friday, March 29, 13

Slide 21

Slide 21 text

18 Router Controller Controller View View Template Model Model Model Model Identity Map Models: Should use an identity map Template Friday, March 29, 13

Slide 22

Slide 22 text

■ To work with the router, a model class should: ■ implement ﬁnd(id) ■ implement then(success, failure) (promise pattern) 19 Models: Working with router Friday, March 29, 13

Slide 23

Slide 23 text

20 Model Model Model Model Models: Testable in isolation Test Suite Test Suite Test Suite Test Suite Friday, March 29, 13

Slide 24

Slide 24 text

■ 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

Slide 25

Slide 25 text

■ 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

Slide 26

Slide 26 text

Controllers 23 Friday, March 29, 13

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Controllers: Expose bindable properties 25 Friday, March 29, 13

Slide 29

Slide 29 text

26 Router Controller Controller View View Template Model Model Model Model Controllers: Often proxy models Template Friday, March 29, 13

Slide 30

Slide 30 text

26 Router Controller Controller View View Template Model Model Model Model Controllers: Often proxy models Template Friday, March 29, 13

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Controllers: Ember.ObjectController 28 Friday, March 29, 13

Slide 33

Slide 33 text

Controllers: Ember.ArrayController 29 Friday, March 29, 13

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Controllers: May collaborate with other controllers 31 Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13

Slide 36

Slide 36 text

Controllers: May collaborate with other controllers 31 Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

33 Controller Controller Controllers: Testable in isolation Test Suite Test Suite Friday, March 29, 13

Slide 39

Slide 39 text

The View Layer 34 Friday, March 29, 13

Slide 40

Slide 40 text

View Layer: Contain all DOM interaction 35 Router Controller Controller View View Template Model Model Model Model Template Friday, March 29, 13

Slide 41

Slide 41 text

View Classes: Responsibilities ■ Optional (will be generated) ■ Translate primitive events (DOM events) into semantic events that affect app state 36 Friday, March 29, 13

Slide 42

Slide 42 text

Views: Let Handlebars do the heavy lifting 37 Friday, March 29, 13

Slide 43

Slide 43 text

Templates: Bound Expressions 38 Friday, March 29, 13

Slide 44

Slide 44 text

Templates: Conditionals 39 Friday, March 29, 13

Slide 45

Slide 45 text

Templates: Outlets are placeholders 40 Friday, March 29, 13

Slide 46

Slide 46 text

Templates: Nesting I 41 Friday, March 29, 13

Slide 47

Slide 47 text

Templates: Changing Scope 42 Friday, March 29, 13

Slide 48

Slide 48 text

Templates: Nesting and Changing Scope 43 Friday, March 29, 13

Slide 49

Slide 49 text

Templates: Firing events 44 That will try to call a selectPost method on the controller, or on the current route Friday, March 29, 13

Slide 50

Slide 50 text

View Layer: Understanding keywords ■ controller ■ view ■ context 45 Friday, March 29, 13

Slide 51

Slide 51 text

Templates: Understanding keywords 46 Friday, March 29, 13

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Views: Ways to handle DOM events ■ Ember-dispatched events ■ Handlebars action helper ■ jQuery 48 Friday, March 29, 13

Slide 54

Slide 54 text

Views: Ember-dispatched events 49 Friday, March 29, 13

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Views: Ember-dispatched events 51 Friday, March 29, 13

Slide 57

Slide 57 text

Views: Using jQuery to handle events 52 preRender inDom destroyed Friday, March 29, 13

Slide 58

Slide 58 text

Views: Using jQuery to handle events 52 preRender inDom destroyed didInsertElement (after) inDom Friday, March 29, 13

Slide 59

Slide 59 text

Views: Using jQuery to handle events 52 preRender inDom destroyed didInsertElement (after) willDestroyElement (before) inDom destroyed Friday, March 29, 13

Slide 60

Slide 60 text

Views: Using jQuery to handle events 53 Friday, March 29, 13

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Router 58 Friday, March 29, 13

Slide 66

Slide 66 text

Router: Responsibilities ■Manages application state ■Keeps the URL up to date as you transition between routes 59 Friday, March 29, 13

Slide 67

Slide 67 text

Router: DSL 60 Friday, March 29, 13

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Router: Tips ■ Be careful with asynchronicity in the router event handlers. ■ Delegate to separate state managers where helpful. 63 Friday, March 29, 13

Slide 71

Slide 71 text

Router: Naming Conventions 64 Friday, March 29, 13

Slide 72

Slide 72 text

65 Overall app data ﬂow, reprise Router Controller Controller View View Template Model Model Model Model Friday, March 29, 13

Slide 73

Slide 73 text

65 Overall app data ﬂow, reprise Router Controller Controller View View Template Model Model Model Model Data ﬂows down from models via bindings Friday, March 29, 13

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Slide 76

Slide 76 text

Q & A Follow me @lukemelia Some examples appear courtesy of my company, Yapp (which is hiring now or soon). Creative Commons photo credits: ﬂickr.com/photos/ﬁctures/4596895 66 Friday, March 29, 13