Ember.js - More than Meets the Eye

Many developers know that Ember.js is designed to solve the problems that every web developer faces. They might even be familiar with some of its most popular features, like computed properties, bindings, and observers. But the real power of Ember.js is in a set of conventions for common problems that other frameworks force you to decide for each new project.

In this talk, Tom will illustrate why having common conventions and vocabulary increases productivity and makes it easier for developers to collaborate. He'll also demonstrate some of the powerful new features in Ember.js that make managing complexity in large web applications easy—and even fun.

From the 2012 TXJS conference.

Transcript

1. More than Meets the Eye EMBER.JS
2. COMPLEX PROBLEMS
5. HAVE SIMPLE, EASY TO UNDERSTAND, AND WRONG ANSWERS. COMPLEX PROBLEMS Attributed to H.L. Mencken. But the internet is often a liar.
6. CORRECTNESS EASE OF USE PRODUCTIVITY > FILE SIZE
7. CORRECTNESS EASE OF USE PRODUCTIVITY > FILE SIZE Important More Important
9. 0 2250 4500 6750 9000 Backbone.js Ember.js+Ember Data Lines of Code
10. 0 2250 4500 6750 9000 Backbone.js Ember.js+Ember Data Lines of Code What’s here?
12. FEATURES SYNTACTIC SUGAR ABSTRACTIONS CONVENTION OVER CONFIGURATION
13. CONVENTIONS
14. WHY ARE CONVENTIONS GOOD?
15. ELIMINATE TRIVIAL CHOICES
16. REDUCE CODE
17. INCREASE PREDICTABILITY
18. “As soon as you build an interesting application in Backbone, one of the challenges you are likely to encounter is wanting to have composite views, or views that are contained within a larger view. I’ve solved this problem several ways in different projects…” http://blog.gaslightsoftware.com/post/24538291598/ backbone-js-views-done-the-right-way
19. VIEW HIERARCHY
20. ▪ Maintains Hierarchy ▪ Parent View ▪ Child Views ▪ Delegates Events ▪ Renders DOM Representation EMBER.VIEW
21. ▪ Composable ▪ Reusable EMBER.VIEW
22. ▪ Developer is responsible for rendering child views and inserting into parent element ▪ Developer is responsible for maintaining reference to child views SIMPLE SOLUTION
23. Alex’s Texas-Style BBQ & Co-Working Space Hours: 8am - 11pm • Heart-Attack Burger • Semicolon Consultation AppView MenuView What happens if we want to change the close time?
24. Alex’s Texas-Style BBQ & Co-Working Space Hours: 8am - 10pm • Heart-Attack Burger • Semicolon Consultation AppView MenuView
25. Alex’s Texas-Style BBQ & Co-Working Space Hours: 8am - 10pm • Heart-Attack Burger • Semicolon Consultation AppView MenuView
26. Alex’s Texas-Style BBQ & Co-Working Space Hours: 8am - 10pm • Heart-Attack Burger • Semicolon Consultation AppView MenuView
27. ▪ Every connection is ad hoc ▪ The more child views, the more chances for making a mistake ▪ Lots of boilerplate ▪ Implementation must be perfect from top- most view to child-most view, or else: ▪ Weird rendering bugs ▪ Event listeners do not get torn down VIEW HIERARCHY
28. ▪ Guarantees: ▪ One parent view (except root view) ▪ Zero or more child views ▪ Re-rendering a view renders child views in correct location automatically ▪ Predictable across all Ember.js apps ▪ Views highly re-usable ADVANTAGES
29. ▪ Automatic cleanup on removal ▪ Unbinds all bindings and observers registered by child views ▪ Unbinds all bindings and observers registered on child views ▪ Removes all internal references to eliminate many sources of leaks ▪ Lifecycle events ▪ didInsertElement, willRerender, willRemoveElement, willDestroy ADVANTAGES
30. THIS IS A COMMON PROBLEM, SO LET’S SOLVE IT COMPLETELY.
31. ROUTING
32. ROUTING IS NOT REALLY A ROUTING PROBLEM.
33. ▪ Routing is a state management problem ▪ The URL is just application state, serialized ▪ If we bring convention to state management, serializing and deserializing URLs becomes relatively trivial ROUTING Because we expect Ember developers to follow conventions, we can make assumptions about how apps are built, and bring new features “for free.”
34. HOW DO WE BRING CONVENTION TO STATE MANAGEMENT?
35. STATE CHARTS
36. AD-HOC STATE VS. EXPLICIT STATE OBJECTS
37. ▪ One object per conceptual application state ▪ States are modeled hierarchically ▪ Respond to events ▪ Can optionally transition to a different state STATES
38. ▪ Impossible to be in two states at once ▪ Events sent to a state that does not handle that event causes exception ▪ Failing fast is better than subtly broken behavior ▪ Requires you to reason about what events are valid in which states BENEFITS
39. ▪ Log user’s movement throughout your app ▪ Transmit to server in case of error ▪ Isolates application logic from presentation ▪ Free routing! BENEFITS
40. application.handlebars <h1>My Blog</h1> {{outlet}} OUTLETS
41. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER
42. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER <ul> {{#each}} <li><a {{action showPost href=true}}> {{title}} </a></li> {{/each}} </ul>
43. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER User clicks link
44. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER Transition to show state, passing current post
45. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER Serialize the post via post.get('id') and set URL to /posts/51
46. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER Call connectOutlets with the post
47. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER Create new App.PostView instance bound to postController (conventions!)
48. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER Replace main outlet with the new view
49. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER User enters at /posts/51
50. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER Router transitions to root.posts.show
51. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER Router nds post = Post.find(51)
52. Ember.Router.extend({ root: Ember.State.extend({ posts: Ember.State.extend({ route: '/posts', index: Ember.State.extend({ route: '/', showPost: Ember.State.transitionTo('show'), connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostsView, App.Post.all()); } }), show: Ember.State.extend({ route: '/:post_id', connectOutlets: function(router, post) { router.get('applicationController') .connectOutlet(App.PostView, post); } }) }) }) }); ROUTER Router calls connectOutlets, and behavior continues as before
53. Model Controller View
54. Model Controller View Router
55. Controller View Router ▪ Stateless ▪ Responds to events from view ▪ Transitions to new states ▪ Saves state on controllers ▪ Very little logic ▪ Container for information needed to render bound views ▪ One or more views bound to one controller ▪ Turns primitive (click) events into semantic events (showPost) ▪ Sends events to router ▪ Renders representation of bound controller
56. CONVENTIONS
57. ELIMINATE TRIVIAL CHOICES
58. REDUCE CODE
59. INCREASE PREDICTABILITY
60. @TOMDALE THANK YOU