A Brief Introduction To Ember.js

Christopher Meiklejohn will be presenting a basic overview of Ember.js, why you would want to use it, and how Basho uses it in their web applications.

Transcript

1. A Brief Introduction To Ember.js September 26, 2012 1 Friday, September 28, 12
2. Me • Christopher Meiklejohn • @cmeik • cmeiklejohn@basho.com 2 Friday, September 28, 12
3. Basho • Creators of Riak • Dynamo • Erlang • We are hiring! 3 Friday, September 28, 12
4. Goals • This is not a tutorial. • Not trying to teach every single implementation detail of an Ember application. • Focusing on concepts and not syntax. • Showing an easier and more expressive way of building web applications. 4 Friday, September 28, 12
5. What is Ember? 5 Friday, September 28, 12
6. Ember.js • MVC framework • Inspired by Cocoa • Fork of SproutCore 2.0 • In the family of MV* style frameworks. • Knockout.js, Angular.js, Backbone.js • Leverages jQuery, Metamorph, Handlebars 6 Friday, September 28, 12
7. 7 Friday, September 28, 12
8. Goals • Eliminate boilerplate • Loading a series of data • Rendering data into the DOM • Updating the DOM as it changes • Provide standard application architecture • MVC-based framework • Rich application router / state manager 8 Friday, September 28, 12
9. Part 1: Concepts • Ember Core Features • Bindings/Computed Properties • Auto-updating templates • State Manager • Router • Ember Data • Run Loop and Asynchrony 9 Friday, September 28, 12
10. Part 2: In Practice • Use Cases • Riak Control 10 Friday, September 28, 12
11. Part 1 Concepts 11 Friday, September 28, 12
12. Bindings • Keeps properties of objects in sync • One-way or two-way • Propagation of changes in direction • Chainable • Extremely useful with MVC • Model => Controller => View 12 Friday, September 28, 12
13. Bindings 13 Friday, September 28, 12
14. Computed Properties • Treat a function like a property • De!ne dependencies of that function • Binding changes cause property to update • Chainable 14 Friday, September 28, 12
15. Computed Properties 15 Friday, September 28, 12
16. Observers 16 Friday, September 28, 12
17. Templates • Handlebars • Bindings aware • Connected to views 17 Friday, September 28, 12
18. Templates 18 Friday, September 28, 12
19. State Manager • Implementation of a !nite state machine • Building block for several applications • Perfect for managing many complex states 19 Friday, September 28, 12
20. State Manager 20 Friday, September 28, 12
21. State Manager • Concepts • enter/exit • actions • states/nested states • Examples • record lifecycle in Ember Data • routing in Ember 21 Friday, September 28, 12
22. Router • Built on top of the Ember state manager • De!nes a series of application states • Generates URLs based on state • Serialization of current state • Allows linking to speci!c application state • URL is deserialized • State chart traversal 22 Friday, September 28, 12
23. Router 23 Friday, September 28, 12
24. Router • Upon entering a state the router can: • Insert a particular view into the DOM • Load content from the data store • Assign content to the controller 24 Friday, September 28, 12
25. Router 25 Friday, September 28, 12
26. Data • Data persistence layer for Ember • Exposes API for persisting and loading records • Pluggable adapters • Fixture/REST/IndexedDB • Uses StateManager, integrates with Router • Alpha quality 26 Friday, September 28, 12
27. Asynchrony 27 Friday, September 28, 12
28. Asynchrony • Property change causes invalidation of dependencies • Changes are queued, and subsequently coalesced • As run loop !nishes, changes are propagated down to all bindings • Extremely e"cient • Coordinated by the Ember Run Loop 28 Friday, September 28, 12
29. Whew, OK. 29 Friday, September 28, 12
30. Part 2 In Practice 30 Friday, September 28, 12
31. Riak Control 31 Friday, September 28, 12
32. Riak Control • Control panel for managing Riak • Server written in Erlang • UI originally built with jQuery and pjax • Re-architected in Ember.js • Improved performance • Massive reduction in view rendering code • In place updates of content when polling 32 Friday, September 28, 12
33. Riak Control 33 Friday, September 28, 12
34. Models • De!ne Ember Data models • De!ne attribute types • Also supports hasMany, belongsTo • Adapter responsible for retrieving the object • Default RESTAdapter very opinionated 34 Friday, September 28, 12
35. Models 35 Friday, September 28, 12
36. Router • De!ne a state for each top level state • Snapshot, Cluster, Ring, etc. • De!ne actions on the router which will be used for state transitions, or navigation. • De!ne default state for the router. • When entering state, load models and connect the router. 36 Friday, September 28, 12
37. Router 37 Friday, September 28, 12
38. Application Template • Consists of a series of links and an outlet • Router will, based on current state • Instantiate (one or more) controller/view pair for that state • Connect that view to the outlet 38 Friday, September 28, 12
39. Application Template 39 Friday, September 28, 12
40. Riak Control 40 Friday, September 28, 12
41. Template and View • Consists of a series of computed properties • Automatically updated as the model changes • View renders only the template 41 Friday, September 28, 12
42. Snapshot Template 42 Friday, September 28, 12
43. Snapshot View 43 Friday, September 28, 12
44. Controller • Controller is responsible providing !ltered computed properties to the view. • Not showing you awful hack to refresh objects via XHR. 44 Friday, September 28, 12
45. Snapshot Controller 45 Friday, September 28, 12
46. Voila! 46 Friday, September 28, 12
47. Conclusion 47 Friday, September 28, 12
48. Conclusion • Lots of conventions • Follow the conventions, and bene!t • Eliminate boilerplate code in your app • If you don’t like changing APIs, wait for 1.0. 48 Friday, September 28, 12
49. Questions? Thank you! 49 Friday, September 28, 12