Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember.js: The Architecture Advantage

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.

Luke Melia

July 12, 2013
Tweet

More Decks by Luke Melia

Other Decks in Technology

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. 21
    3

    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. 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. 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 [email protected].
    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 [email protected].
    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 [email protected].
    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 [email protected].
    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 [email protected].
    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 [email protected].
    Q & A

    View Slide