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

Introduction to Ember.js

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

Luke Melia

March 28, 2013
Tweet

More Decks by Luke Melia

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. Relevant
    Experience
    3
    Friday, March 29, 13

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  8. 8
    Lay
    of the
    Land
    Friday, March 29, 13

    View Slide

  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

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

    View Slide

  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

    View Slide

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

    View Slide

  13. View View
    Template
    13
    Overall app data flow
    Router Controller Controller
    Model Model Model Model
    Friday, March 29, 13

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  17. Models
    14
    Friday, March 29, 13

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  26. Controllers
    23
    Friday, March 29, 13

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  39. The View Layer
    34
    Friday, March 29, 13

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  43. Templates:
    Bound Expressions 38
    Friday, March 29, 13

    View Slide

  44. Templates:
    Conditionals 39
    Friday, March 29, 13

    View Slide

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

    View Slide

  46. Templates:
    Nesting I 41
    Friday, March 29, 13

    View Slide

  47. Templates:
    Changing Scope 42
    Friday, March 29, 13

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  51. Templates:
    Understanding keywords
    46
    Friday, March 29, 13

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  65. Router
    58
    Friday, March 29, 13

    View Slide

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

    View Slide

  67. Router:
    DSL
    60
    Friday, March 29, 13

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  71. Router:
    Naming Conventions
    64
    Friday, March 29, 13

    View Slide

  72. 65
    Overall app data flow, reprise
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Friday, March 29, 13

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide