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

Intro to Ember.js

Luke Melia
January 22, 2014

Intro to Ember.js

Delivered at Flask-NYC Meetup on January 22nd, 2014

Luke Melia

January 22, 2014
Tweet

More Decks by Luke Melia

Other Decks in Technology

Transcript

  1. An Intro to
    Ember.js
    Luke Melia
    Flask NYC Meetup
    January 22nd, 2014

    View Slide

  2. About this Embereño
    !2

    View Slide

  3. ■ Ember’s approach
    ■ Demo
    ■ When to use Ember
    !3
    Sections of the Talk

    View Slide

  4. Ember’s Approach
    ■ Targeting “ambitious apps”
    ■ Convention over configuration
    ■ Boilerplate code
    ■ Community-driven,

    paving cowpaths
    !4

    View Slide

  5. ■ Forked off Sproutcore in 2011 by Yehuda
    Katz, Tom Dale and others
    ■ Now a 9-person core team including
    NYCers Stefan Penner & Alex Matchneer
    ■ Reached 1.0 release status on

    August 31, 2013
    ■ Currently at 1.3.1
    !5
    Quick History

    View Slide

  6. ■ Robust object model (mixins, class-based
    inheritance)
    ■ Key-value observer system to support
    declarative data-binding
    ■ Dependency injection container
    ■ More: run loop, events, promises,

    data-bound templates using Handlebars…
    !6
    Core building blocks

    View Slide

  7. ■ MVC is not created equal
    ■ C is for Controller, but “controller”
    has many different meanings.
    ■ +R for Router
    !7
    MVC

    View Slide

  8. !8
    How the layers relate
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Template

    View Slide

  9. View View
    Template
    !9
    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

    View Slide

  10. Models
    !10

    View Slide

  11. !11
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Models:
    Usually serialized/deserialized
    to/from API
    API Client
    Template

    View Slide

  12. !12
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Models:
    Should not depend on controllers,
    views or other app state
    Template

    View Slide

  13. ■ Subclass Ember.Object for your
    model classes
    ■ Retrieve and persist data using XHR
    !13
    Models the simple way:
    $.ajax plus Ember.Object

    View Slide

  14. !14
    Models the simple way:
    $.ajax plus Ember.Object

    View Slide

  15. ■ Data library under development by the
    Ember core team and community (an
    “ORM” for the browser?)
    ■ Store + Adapter + Serializer
    ■ DS.Store implements an Identity Map
    ■ Currently 1.0 beta; API is much less stable
    than Ember core
    !15
    Models the robust way:
    Ember Data

    View Slide

  16. !16
    Models the robust way:
    Ember Data

    View Slide

  17. Controllers
    !17

    View Slide

  18. !18
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Controllers:
    Present data for
    the view layer to render
    Template

    View Slide

  19. Controllers:
    Expose bindable properties
    !19

    View Slide

  20. !20
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Controllers:
    Often proxy models
    Template

    View Slide

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

    View Slide

  22. Controllers:
    Ember.ObjectController
    !22

    View Slide

  23. The View Layer
    !23

    View Slide

  24. View Layer:
    Contain all DOM interaction
    !24
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Template

    View Slide

  25. View Classes:
    Responsibilities
    ■ Optional (will be generated)
    ■ Translate primitive events
    (DOM events) into semantic
    events that affect app state
    !25

    View Slide

  26. Views:
    Let Handlebars do
    the heavy lifting !26

    View Slide

  27. Templates:
    Bound Expressions !27

    View Slide

  28. Templates:
    Conditionals !28

    View Slide

  29. Templates:
    Outlets are placeholders !29

    View Slide

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

    View Slide

  31. Views:
    Ember-dispatched events
    !31

    View Slide

  32. Templates:
    Firing events !32
    That will trigger the
    “selectPost” action on the controller,
    or on the current route

    View Slide

  33. Views:
    Using jQuery to handle events
    !33

    View Slide

  34. Router
    !34

    View Slide

  35. Router:
    Responsibilities
    ■Manages application state
    ■Fills outlets with template/view/
    controller triads
    ■Keeps the URL up-to-date as
    you transition between routes
    !35

    View Slide

  36. Router:
    DSL
    !36

    View Slide

  37. Router:
    Route classes I
    !37

    View Slide

  38. Router:
    Route classes II
    !38
    ■Lots of hooks to override
    conventional behavior when
    needed
    ■http://emberjs.com/api/classes/
    Ember.Route.html

    View Slide

  39. Router:
    Naming Conventions
    !39

    View Slide

  40. !40
    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

    View Slide

  41. ■ QUnit
    ■ ember-testing (built in DSL for
    integration tests)
    ■ testem (ember-app-kit)
    ■ people also use Mocha, Jasmine, others
    !41
    Testing

    View Slide

  42. Demo
    !42

    View Slide

  43. When to use Ember
    !43

    View Slide

  44. The client-side continuum
    !44
    Library Framework

    View Slide

  45. When should you use Ember?
    ■ You’re making a non-trivial app
    ■ You want your app to grow and
    remain maintainable
    ■ Scale to team-based development
    ■ You want to enjoy the journey!
    !45

    View Slide

  46. Ember.js
    NYC Meetup
    !46

    View Slide

  47. Q & A
    !
    !
    !
    !
    Follow me @lukemelia
    Some examples appear courtesy of my company. Yapp Labs
    offers Ember.js consulting and training.
    Creative Commons photo credits: flickr.com/photos/fictures/4596895
    !47

    View Slide