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
2. About this Embereño !2
3. ▪ Ember’s approach ▪ Demo ▪ When to use Ember !3 Sections of the Talk
4. Ember’s Approach ▪ Targeting “ambitious apps” ▪ Convention over configuration ▪ Boilerplate code ▪ Community-driven,
 paving cowpaths !4
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
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
7. ▪ MVC is not created equal ▪ C is for Controller, but “controller” has many different meanings. ▪ +R for Router !7 MVC
8. !8 How the layers relate Router Controller Controller View View Template Model Model Model Model Template
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
10. Models !10
11. !11 Router Controller Controller View View Template Model Model Model Model Models:
    Usually serialized/deserialized to/from API API Client Template
12. !12 Router Controller Controller View View Template Model Model Model Model Models:
    Should not depend on controllers, views or other app state Template
13. ▪ Subclass Ember.Object for your model classes ▪ Retrieve and persist data using XHR !13 Models the simple way:
    $.ajax plus Ember.Object
14. !14 Models the simple way:
    $.ajax plus Ember.Object
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
16. !16 Models the robust way:
    Ember Data
17. Controllers !17
18. !18 Router Controller Controller View View Template Model Model Model Model Controllers:
    Present data for
    the view layer to render Template
19. Controllers:
    Expose bindable properties !19
20. !20 Router Controller Controller View View Template Model Model Model Model Controllers:
    Often proxy models Template
21. Controllers:
    Ember.ObjectController ▪ Transparently proxies missing properties and methods to the object set as its content property ▪ Destroyer of boilerplate !21
22. Controllers:
    Ember.ObjectController !22
23. The View Layer !23
24. View Layer:
    Contain all DOM interaction !24 Router Controller Controller View View Template Model Model Model Model Template
25. View Classes:
    Responsibilities ▪ Optional (will be generated) ▪ Translate primitive events (DOM events) into semantic events that affect app state !25
26. Views:
    Let Handlebars do
    the heavy lifting !26
27. Templates:
    Bound Expressions !27
28. Templates:
    Conditionals !28
29. Templates:
    Outlets are placeholders !29
30. Views:
    Ways to handle DOM events ▪ Ember-dispatched events ▪ Handlebars action helper ▪ jQuery !30
31. Views:
    Ember-dispatched events !31
32. Templates:
    Firing events !32 That will trigger the “selectPost” action on the controller, or on the current route
33. Views:
    Using jQuery to handle events !33
34. Router !34
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
36. Router:
    DSL !36
37. Router:
    Route classes I !37
38. Router:
    Route classes II !38 ▪Lots of hooks to override conventional behavior when needed ▪http://emberjs.com/api/classes/ Ember.Route.html
39. Router:
    Naming Conventions !39
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
41. ▪ QUnit ▪ ember-testing (built in DSL for integration tests) ▪ testem (ember-app-kit) ▪ people also use Mocha, Jasmine, others !41 Testing
42. Demo !42
43. When to use Ember !43
44. The client-side continuum !44 Library Framework
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
46. Ember.js NYC Meetup !46
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