Architecting Ember.js Apps

Covers building Ember.js apps with a focus on application structure, and how responsibilities are divided, and how to manage complexity as your app goes from small to large.

Transcript

1. Architecting
   Ember.js
   Apps
   Luke Melia
   Ember.js NYC Meetup
   October 22nd, 2012
   

   View Slide

2. About this Emberaño
   2
   

   View Slide

3. Relevant
   Experience
   3
   

   View Slide

4. My
   Experience
   Building
   Ember
   Apps
   4
   

   View Slide

5. Mobile
   Cross-platform, mobile-style UI with offline
   support, wrapper in PhoneGap
   5
   Dashboard
   Simple one-pager for desktop/tablet,
   previously Rails + jQuery/ajax
   Editor
   Rich desktop-style app for desktop/tablet,
   previously a Sproutcore app
   

   View Slide

6. ■ Develop an understanding
   of...
   ■ Application structure
   ■ Division of responsibilities
   ■ How to manage complexity
   6
   Goals of the Talk
   

   View Slide

7. The Idea Behind the Talk
   ■ 98% of application
   architecture is
   understanding your layers
   and knowing what code
   should go where
   7
   

   View Slide

8. 8
   Lay
   of the
   Land
   

   View Slide

9. ■MVC is not created equal
   ■C is for Controller, but
   “controller” has many different
   meanings.
   9
   Lay of the Land:
   MVC
   

   View Slide

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
    

    View Slide

11. ■ Ember is still pre-1.0 and
    moving quickly
    ■ Some of the advice I share
    today is likely to be wrong
    soon.
    11
    Lay of the Land:
    Pre-1.0
    

    View Slide

12. 12
    How the layers relate
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    

    View Slide

13. 13
    Overall app data flow
    Router /
    State Manager
    Controller Controller
    View View
    View View
    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
    

    View Slide

14. Models
    14
    

    View Slide

15. 15
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    Models:
    Usually serialized/deserialized
    to/from API
    API Client
    

    View Slide

16. 16
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    Models:
    Should not depend on controllers,
    views or other app state
    

    View Slide

17. 17
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    Models:
    May depend on other models
    

    View Slide

18. 18
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    Identity Map
    Models:
    Should use an identity map
    

    View Slide

19. ■ To work with the router, a model
    class should:
    ■ implement find(id)
    ■ implement then(success, failure)
    (promise pattern)
    19
    Models:
    Working with router
    

    View Slide

20. 20
    Model Model Model Model
    Models:
    Testable in isolation
    Test Suite Test Suite Test Suite Test Suite
    

    View Slide

21. ■ ember-data is an ORM for Ember
    ■ Store + Adapter + Serializer
    ■ DS.Store implements an Identity Map
    ■ REST Adapter
    ■ Work in progress; will be merged into
    ember.js
    21
    Models:
    ember-data
    

    View Slide

22. Controllers
    22
    

    View Slide

23. 23
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    Controllers:
    Present data for
    views to render
    

    View Slide

24. Controllers:
    Expose bindable properties
    24
    

    View Slide

25. 25
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    Controllers:
    Often proxy models
    

    View Slide

26. Controllers:
    Ember.ObjectController
    ■ Transparently proxies missing
    properties and methods to the
    object set as its content property
    ■ Destroyer of boilerplate
    26
    

    View Slide

27. Controllers:
    Ember.ObjectController
    27
    

    View Slide

28. Controllers:
    Ember.ArrayController
    28
    

    View Slide

29. Controllers:
    Created during app
    initialization 29
    

    View Slide

30. Controllers:
    May collaborate with other
    controllers 30
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    

    View Slide

31. Controllers:
    connectControllers(...)
    31
    

    View Slide

32. 32
    Controller Controller
    Controllers:
    Testable in isolation
    Test Suite Test Suite
    

    View Slide

33. Views
    33
    

    View Slide

34. Views:
    Contain all DOM interaction
    34
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    

    View Slide

35. Views:
    Responsibilities
    ■ Render HTML elements
    ■ Handle DOM events
    ■ Trigger actions that
    affect app state
    35
    

    View Slide

36. Views:
    Rendering is usually
    handled with templates 36
    Router /
    State Manager
    Controller Controller
    View View
    View View
    Model Model Model Model
    Handlebars
    

    View Slide

37. Views:
    Let Handlebars do
    the heavy lifting 37
    

    View Slide

38. Views:
    Understanding keywords
    ■ controller
    ■ view
    ■ context
    38
    

    View Slide

39. View:
    Understanding keywords
    39
    

    View Slide

40. Views:
    Use with a single controller
    ■ Should bind to properties of one
    controller
    ■ If you need data from elsewhere,
    bring it into this view’s controller
    using connectControllers() as
    discussed above
    40
    

    View Slide

41. Views:
    Ways to handle DOM events
    ■ Ember-dispatched events
    ■ Handlebars action helper
    ■ jQuery
    41
    

    View Slide

42. Views:
    Ember-dispatched events
    42
    

    View Slide

43. Views:
    Ember-dispatched events
    43
    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
    

    View Slide

44. Views:
    Ember-dispatched events
    44
    

    View Slide

45. Views:
    Handlebars action helper
    45
    

    View Slide

46. Views:
    Using jQuery to handle events
    46
    preRender
    inBuffer
    inDom
    destroyed
    didInsertElement (after)
    willDestroyElement (before)
    inDom
    destroyed
    

    View Slide

47. Views:
    Using jQuery to handle events
    47
    

    View Slide

48. View tips I
    ■ Remember that views are
    created and destroyed over
    lifetime of app and at render time
    48
    

    View Slide

49. View tips II
    ■ It’s a good practice for views to
    know as little as possible about
    their parent view hierarchy
    49
    

    View Slide

50. 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
    50
    

    View Slide

51. Router
    51
    

    View Slide

52. Router:
    Tips
    ■ It can get large. Break it up into
    separate files, one per state.
    ■ Be careful with asynchronicity in the
    router event handlers.
    ■ Delegate to separate state managers
    where possible.
    52
    

    View Slide

53. 53
    Overall app data flow, reprise
    Router /
    State Manager
    Controller Controller
    View View
    View View
    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
    

    View Slide

54. 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
    54
    

    View Slide