Ember.js: The Architecture Advantage

This talk covers in detail how Ember.js supports the development and maintenance of large, ambitious Javascript apps. Shallow explorations of Ember.js like ToDoMVC or getting started tutorials make it too easy to miss the amazing experience of scaling functionality in an Ember app.

Transcript

1. Ember.js:
   The Architecture
   Advantage
   Luke Melia
   GothamJS
   July 12th, 2013
   

   View Slide

2. About this Javascript Developer
   2
   

   View Slide

3. Relevant
   Experience
   3
   2
   Years of Ember
   under my belt
   

   View Slide

4. Relevant
   Experience
   4
   6
   Consumer-grade
   Ember.js apps
   

   View Slide

5. Relevant
   Experience
   5
   44
   Commits
   to Ember.js
   

   View Slide

6. Ember.js NYC
   Meetup
   6
   

   View Slide

7. “I’m evaluating
   Javascript MVC
   frameworks.”
   7
   

   View Slide

8. 8
   Smart
   developers
   experiment with
   technologies
   before making
   big choices...
   

   View Slide

9. Smart
   developers
   experiment with
   technologies
   before making
   big choices...
   9
   

   View Slide

10. ...and they
    visit with the
    community
    around a
    project.
    10
    

    View Slide

11. But it’s hard to
    know what it’s
    like to actually
    live with it.
    11
    

    View Slide

12. 12
    How
    does a framework
    support you as the size and
    complexity of your app increases?
    How
    does a framework
    support you as the size and
    complexity of your app increases?
    How
    does a framework
    support you as the size and
    complexity of your app increases?
    

    View Slide

13. Ember’s approach
    shines as the size
    and complexity of
    an app grows.
    13
    Let’s look at why.
    

    View Slide

14. This talk is not an Ember tutorial.
    14
    

    View Slide

15. This talk is an
    exploration of the
    value of good
    architecture in
    Ember.js...
    15
    

    View Slide

16. ...with pictures of
    New York City...
    16
    

    View Slide

17. ...and no pictures
    of cats.
    17
    

    View Slide

18. 18
    Unless it’s a
    Broadway cat!
    

    View Slide

19. 19
    Or a subway cat.
    

    View Slide

20. What are the qualities
    of a framework that
    supports app
    evolution well?
    20
    

    View Slide

21. View Slide

22. It should be clear
    where code
    belongs and
    where to find it.
    22
    

    View Slide

23. You should have
    to write and
    maintain the least
    amount of code
    necessary.
    23
    

    View Slide

24. Change in one
    area of your app
    should not affect
    other areas.
    24
    

    View Slide

25. 25
    ๏ Well-Organized
    ๏ Eliminates Boilerplate
    ๏ Loosely Coupled
    

    View Slide

26. 26
    ๏ Well-Organized
    ๏ Eliminates Boilerplate
    ๏ Loosely Coupled
    

    View Slide

27. 27
    Clear Delineation of Responsibilities
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Template
    

    View Slide

28. 28
    Clear Delineation of Responsibilities
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Template
    Templates define the HTML to render.
    

    View Slide

29. 29
    Clear Delineation of Responsibilities
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Template
    Models encapsulate the data and
    logic of your problem domain.
    

    View Slide

30. 30
    Clear Delineation of Responsibilities
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Template
    Controllers present data to a template for rendering,
    by proxying models and
    by managing local transient state.
    

    View Slide

31. 31
    Clear Delineation of Responsibilities
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Template
    The Router transitions between a
    collection of routes, each representing
    a high-level application state.
    Each Route coordinates models and
    controllers for its state and handles
    high-level events appropriately.
    

    View Slide

32. 32
    Clear Delineation of Responsibilities
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Template
    Views execute DOM-related logic.
    

    View Slide

33. 33
    A map helps you know
    where you are and
    where to find things.
    

    View Slide

34. The router DSL is a map of your app 34
    PostRoute will load the Post model into the
    PostController and render the “post” template
    into the main outlet.
    

    View Slide

35. The router DSL is a map of your app 35
    CommentsRoute will render the “comments”
    template with the CommentsController into
    the main outlet of the “post” template.
    

    View Slide

36. Pods of
    Functionality
    Ember apps are
    organized by hanging
    Controller-Template
    pairs off of each
    Route, providing
    clear boundaries and
    isolation.
    36
    

    View Slide

37. Go with
    the Flow
    Ember apps
    have a clear flow
    of data and
    events.
    37
    

    View Slide

38. 38
    A clear flow of data and events
    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
    Template
    

    View Slide

39. Ember
    Components
    Web components
    while we’re waiting
    for web components.
    39
    

    View Slide

40. Truth in
    Javascript
    ๏ Not in DOM
    ๏ Not in the URL
    40
    

    View Slide

41. 41
    ๏ Well-Organized
    ๏ Eliminates Boilerplate
    ๏ Loosely Coupled
    

    View Slide

42. Convention Over Configuration 42
    

    View Slide

43. Convention Over Configuration 43
    PostController instance
    

    View Slide

44. Convention Over Configuration 44
    

    View Slide

45. Convention Over Configuration 45
    

    View Slide

46. ObjectController 46
    All properties not defined on the ObjectController
    will be delegated to the model.
    

    View Slide

47. Convention Over Configuration 47
    Default
    behavior
    

    View Slide

48. A Sidenote on Embracing Asynchrony 48
    the model hook
    is Promise-aware
    

    View Slide

49. Convention Over Configuration 49
    Default
    behavior
    

    View Slide

50. Convention Over Configuration 50
    

    View Slide

51. Active Generation 51
    

    View Slide

52. Convention Over Configuration 52
    

    View Slide

53. 53
    ๏ Well-Organized
    ๏ Eliminates Boilerplate
    ๏ Loosely Coupled
    

    View Slide

54. 54
    Logicless templates
    Ember uses
    Handlebars,
    a superset of the
    Mustache templating
    language.
    Emphasis on keeping
    logic out of the template.
    

    View Slide

55. Logicless Templates 55
    Yep.
    Nope. Not even possible.
    

    View Slide

56. Data-bound Templates 56
    All data-bound!
    Property paths in Ember Handlebars expressions
    are automatically observed and updated upon
    change.
    

    View Slide

57. Uniform Access Principle
    “All services available through a
    module should be available
    through a uniform notation,
    which does not betray
    whether they are implemented
    through storage or computation.”
    Bertrand Meyer
    57
    

    View Slide

58. 58
    Uniform Access Principle in Basic Javascript
    

    View Slide

59. 59
    Uniform Access Principle in Basic Javascript
    

    View Slide

60. 60
    Uniform Access Principle in Ember.js
    

    View Slide

61. 61
    Uniform Access Principle in Ember.js
    

    View Slide

62. View Slide

63. 63
    The Ember Router is a state machine
    ■ State machines are a proven way to reduce
    complexity in apps
    ■ External components send events to a state
    machine without knowing what state it is in –
    the current state will handle it
    ■ Similar win as polymorphism – very decoupled
    

    View Slide

64. 64
    The Ember Router is a state machine
    Template Router
    Current
    Route
    action action
    Template Router
    Product
    Route
    logout logout
    OrderConfirmation
    Route
    vs.
    

    View Slide

65. 65
    The Ember Router is a
    hierarchical state machine
    ■ Hierarchical state machines allow better
    modeling of common event handling
    ■ Events start at the current route and flow up to
    parent routes until a route handles it
    ■ The router provides a natural hierarchy
    

    View Slide

66. 66
    The Ember Router is a
    hierarchical state machine
    

    View Slide

67. 67
    The Ember Router is a
    hierarchical state machine
    ApplicationRoute
    ProductRoute OrderRoute
    ShippingRoute BillingRoute ConfirmationRoute
    

    View Slide

68. 68
    The Ember Router is a
    hierarchical state machine
    ApplicationRoute
    ProductRoute OrderRoute
    ShippingRoute BillingRoute ConfirmationRoute
    ApplicationRoute
    OrderRoute
    BillingRoute
    

    View Slide

69. View Slide

70. Ember’s Container & Resolver 70
    ■ The Container is the crux of Ember’s dependency
    injection.
    ■ Dependency injection is another proven design
    pattern for reducing coupling.
    ■ Instead of an object instantiating its collaborators,
    the container “injects” them at creation time.
    

    View Slide

71. Ember’s Container & Resolver 71
    Container
    App &
    framework
    code
    lookup(‘controller:post’)
    

    View Slide

72. Ember’s Container & Resolver 72
    Container
    App &
    framework
    code
    lookup... Resolver
    resolve(‘controller:post’)
    The DefaultResolver will convert “controller:post” to
    “PostController” and return that from the App global.
    The Container instantiates it with any registered injections.
    App.PostController
    

    View Slide

73. Ember’s Container & Resolver 73
    Container
    App &
    framework
    code
    lookup...
    Custom
    Resolver
    resolve(‘controller:post’)
    Substitute a custom Resolver to integrate Ember’s
    conventions with your module and file system conventions.
    No globals, no requires, no cruft!
    requireModule(
    ‘app/controllers/post’
    )
    

    View Slide

74. Room for Improvement
    ๏ Ember’s container-ization is
    not yet 100% complete
    ๏ Controllers can become
    junk drawers
    ๏ Persistence libraries are
    still evolving
    ๏ The Ember global is
    unavoidable for now
    ๏ Approaching 1.0, asymptotically 74
    

    View Slide

75. 75
    Thanks to awesome Flickr people
    http://www.flickr.com/photos/nikonvscanon/3453373352
    http://www.flickr.com/photos/yourdon/9215882934
    http://www.flickr.com/photos/wallyg/5584045410
    http://www.flickr.com/photos/klg19/6227922248
    http://www.flickr.com/photos/bestarns/8305879000
    http://www.flickr.com/photos/kinerific/7561104998
    http://www.flickr.com/photos/curiousexpeditions/2402300942
    http://www.flickr.com/photos/wiredphotostream/6303520386
    http://www.flickr.com/photos/jmarx/4672943910
    http://www.flickr.com/photos/chrisgold/6894624818
    http://www.flickr.com/photos/romanschmitz/7245386194
    http://www.flickr.com/photos/iandavid/3804456709
    http://www.flickr.com/photos/onesevenone/5883546214
    http://www.flickr.com/photos/numbphoto/4637718471
    http://www.flickr.com/photos/fakeisthenewreal/121258082
    http://www.flickr.com/photos/9061377@N05/703903629
    http://www.flickr.com/photos/niznoz/4170565734
    http://www.flickr.com/photos/en321/434725548
    http://www.flickr.com/photos/23912576@N05/3446062013
    http://www.flickr.com/photos/wwward0/6790464887
    http://www.flickr.com/photos/martyj/2444129560
    http://www.flickr.com/photos/rrrrred/4566754249
    http://www.flickr.com/photos/nodame88/3038653470
    http://www.flickr.com/photos/joiseyshowaa/3191428445
    http://www.flickr.com/photos/ktylerconk/1526148499
    http://www.flickr.com/photos/niceimages/9057275375
    http://www.flickr.com/photos/perspective/7726249646
    http://www.flickr.com/photos/onesevenone/6434338833
    http://www.flickr.com/photos/instantvantage/5862910811
    http://www.flickr.com/photos/vogelium/6209272108
    http://www.flickr.com/photos/alanrmiles/3405474639
    http://www.flickr.com/photos/onesevenone/4051045279
    http://www.flickr.com/photos/digiart2001/3611238793
    http://www.flickr.com/photos/posterboynyc/8737852416
    http://www.flickr.com/photos/dcreeves2000/114712202
    http://www.flickr.com/photos/23912576@N05/2883743786
    

    View Slide

76. 76
    Follow me @lukemelia
    Some examples appear courtesy of my company, Yapp Labs.
    We are available for Ember.js-related consulting. Contact luke@yapp.us.
    Q & A
    

    View Slide

77. 77
    Follow me @lukemelia
    Some examples appear courtesy of my company, Yapp Labs.
    We are available for Ember.js-related consulting. Contact luke@yapp.us.
    Q & A
    

    View Slide

78. 78
    Follow me @lukemelia
    Some examples appear courtesy of my company, Yapp Labs.
    We are available for Ember.js-related consulting. Contact luke@yapp.us.
    Q & A
    

    View Slide

79. 79
    Follow me @lukemelia
    Some examples appear courtesy of my company, Yapp Labs.
    We are available for Ember.js-related consulting. Contact luke@yapp.us.
    Q & A
    

    View Slide

80. 80
    Follow me @lukemelia
    Some examples appear courtesy of my company, Yapp Labs.
    We are available for Ember.js-related consulting. Contact luke@yapp.us.
    Q & A
    

    View Slide

81. 81
    Follow me @lukemelia
    Some examples appear courtesy of my company, Yapp Labs.
    We are available for Ember.js-related consulting. Contact luke@yapp.us.
    Q & A
    

    View Slide