Intro to Ember.js

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

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