Ember.js State Manager

An overview of the state manager in Ember.js and how it could be applied to Riak Control.

Transcript

1. Ember.js State Manager @cmeik Thursday, June 28, 12
2. Who Am I? • Christopher Meiklejohn • Software Engineer at Basho Technologies • JavaScript, JavaScript and JavaScript! Thursday, June 28, 12
3. Riak Control Thursday, June 28, 12
4. Riak Control Now for a little story... Thursday, June 28, 12
5. • Monitoring application bundled with Riak. • Open source. • PJAX, jQuery, Webmachine. Riak Control Thursday, June 28, 12
6. So, why Ember.js? Let’s identify the problems. Thursday, June 28, 12
7. PJAX Problem #1 Thursday, June 28, 12
8. PJAX • Unconventional PJAX usage. • Loads template into DOM. • Callback appends script to page. • Script self-invoking to retrieve data from server, and render data into page. Thursday, June 28, 12
9. An Example Thursday, June 28, 12
10. PJAX • All state is stored in the DOM. • Rendered from hidden templates, also in the DOM. • Page is redrawn whenever displayed. Thursday, June 28, 12
11. PJAX • Usually used to return HTML templates with the data already populated. • Slow connections also problematic. • Page will be redirected to if AJAX request doesn’t return in time. • Empty template. • Not good. Thursday, June 28, 12
12. State Management Problem #2 Thursday, June 28, 12
13. State Management • Pub/Sub implementation. • When tabs are clicked, event is triggered to swap template. • PJAX loaded, self invoking JavaScript subscribes to these events. Thursday, June 28, 12
14. An Example Thursday, June 28, 12
15. State Management • Very problematic when trying to manage state between tabs. • Each section is redrawn completely when navigated to. Thursday, June 28, 12
16. State Management • Also controls polling. • When template is loaded for first time, starts polling loop. • Only retrieves data if template is displayed. • Polling loop for each tab. • Unnecessary and expensive. Thursday, June 28, 12
17. The Solutions Thursday, June 28, 12
18. Data Bindings • No reason for individual pages to load duplicate information. • Load information into objects, and share between the sections. • Views updated automatically. • One polling loop. Thursday, June 28, 12
19. Run Loop • Batch updates to the DOM. • Only re-render sections which have changed. Thursday, June 28, 12
20. Templating • Handlebars templates. • No longer have to hide elements in the DOM, loop over, and clone into the page. Thursday, June 28, 12
21. State Manager • Implementation of a finite state machine. • Define a series of application states. • Based on state, can be used to: • Control visible elements on page. • Control polling based on selection. Thursday, June 28, 12
22. State Manager Manage all of the things! Thursday, June 28, 12
23. Basic Usage Thursday, June 28, 12
24. Nested States Thursday, June 28, 12
25. Actions Thursday, June 28, 12
26. State Manager View States Thursday, June 28, 12
27. View States Thursday, June 28, 12
28. Wow, that’s awesome! Yes, except. Thursday, June 28, 12
29. WAT? Thursday, June 28, 12
30. So, now what? Thursday, June 28, 12
31. State Manager The Router Thursday, June 28, 12
32. What The Router Solved. • ViewStates had no handling for serialization of state via the URL. • Nested ViewStates only appended objects to the DOM, couldn’t control insertion point. • More not listed here, see: http:// tomdale.net/2012/05/ember-routing/ Thursday, June 28, 12
33. The Router • Router is a type of StateMachine. • Define a series of routes, which are just states with an additional route property. • Route property used to build URL. • URL serializes the current state of your application. Thursday, June 28, 12
34. The Application • Router requires: • an ApplicationController • an ApplicationView • an application.handlebars • App.initialize(App.Router) • If you use rails, ember-rails generator handles this. Thursday, June 28, 12
35. Router Example Thursday, June 28, 12
36. Router Example Thursday, June 28, 12
37. Outlets? Thursday, June 28, 12
38. Outlets • Defined in your templates. • Area for a child template, determined at runtime. Thursday, June 28, 12
39. Outlet Example Thursday, June 28, 12
40. Outlets, Lots of Magic • connectOutlet(name, context) • Names are inferred, for example: • snapshot -> App.SnapshotView. • snapshot -> App.SnapshotController • Controller and view are instantiated. • context is bound to content on the controller. Thursday, June 28, 12
41. Outlets Sound familiar? Same as when the application and router were initialized. Thursday, June 28, 12
42. Outlet Example Thursday, June 28, 12
43. Riak Control So, how do we apply this? Thursday, June 28, 12
44. Riak Control Routing Route for each section Thursday, June 28, 12
45. Riak Control Templating Outlet Application Template Thursday, June 28, 12
46. Riak Control Polling • Use Ember Data to store all objects in application data store. • Inspect current state to determine which objects to poll and update. • Cleanly isolates XHR polling loop outside of view/templating so it can be switched to a more robust solution (ie. Comet, WebSockets.) Thursday, June 28, 12
47. Riak Control Templating • Handlebars templates loaded immediately. • Templates used to render the objects into the DOM. • Views are bound directly to objects. • Views are no longer redrawn every < 1s. Thursday, June 28, 12
48. Final Points • Ember Data: Very young, very opinionated. • Ember Data: Lots of things don’t work yet. • Ember Router built around using Ember Data; assumption that you’ll have objects returned immediately that are loaded async. • Ember Router: not officially recommended for production, at least until 1.0. Thursday, June 28, 12
49. Thank you! Questions? Comments? Thursday, June 28, 12