Extinguish the Fire with Ember.js

Presented to the Burlington Web application group at the Front end framework faceoff.

1. EXTINGUISH THE FIRE
 WITH EMBER.JS BTVWAG - Feb 12, 2014
 Presented by Peter Brown
2. WEB DEVELOPER @beerlington
3. PROBLEMS ‣ Client side development is challenging ‣ Expectations about how websites should work ‣ Single page applications aren’t always that ‣ Lack of conventions
4. HYPOTHESIS As browsers become more capable and JS enables us to do more, the applications we build will become more ambitious and require better tools. Complexity Capability
5. A framework for creating
 ambitious web applications
 Write dramatically less code
 Built for productivity
 
 Don't reinvent the wheel
 EMBER.JS
6. WHAT DOES EMBER LOOK LIKE?
7. ROUTER Maps a URL to a Route App.Router.map(function() {! this.resource('posts');! this.resource('post', { path: '/post/:post_id' });! });!
8. ROUTER /posts → PostsRoute /post/123 → PostRoute App.Router.map(function() {! this.resource('posts');! this.resource('post', { path: '/post/:post_id' });! });!
9. ROUTER Nested Routes App.Router.map(function() {! this.resource('post', { path: '/post/:post_id' }, function() {! this.route('edit');! this.resource('comments', function() {! this.route('new');! });! });! });!
10. ROUTER /post/123 → PostRoute /post/123/edit → PostEditRoute /post/123comments → CommentsRoute /post/123/comments/new → CommentsNewRoute App.Router.map(function() {! this.resource('post', { path: '/post/:post_id' }, function() {! this.route('edit');! this.resource('comments', function() {! this.route('new');! });! });! });!
11. ROUTE Responsible for loading data, displaying templates and setting up application state. App.PostRoute = Ember.Route.extend({! model: function(params) {! return this.store.find('post', params.post_id);! }! });!
12. CONTROLLER Acts as a proxy to the model and handles events from the template App.PostController = Ember.ObjectController.extend({! actions: {! publishPost: function() {! this.toggleProperty('isPublished');! }! }! });!
13. TEMPLATE Handlebars = HTML + embedded expressions Hello, <strong>{{firstName}}</strong>!!
14. TEMPLATE Hello, App.ApplicationController = Ember.Controller.extend({! firstName: "Peter"! });! The PostRoute “glues” these together
15. TEMPLATE Automatically bound to controller’s state {{#if isPublished}}! <span>! This post is published!! </span>! {{else}}! <span>! This post is NOT published!! </span>! {{/if}}!
16. MODEL Defines schema and relationships App.Post = DS.Model.extend({! title: DS.attr('string'),! publishedAt: DS.attr('date'),! author: DS.belongsTo('author')! });!
17. VIEW When you need more control, used less frequently, always associated with a controller var view = Ember.View.create({! templateName: 'say-hello',! name: "Bob"! });!
18. COMPONENT Custom HTML elements, like views without controller <script type="text/x-handlebars" id="components/blog-post">! <h1>Blog Post</h1>! <p>Lorem ipsum dolor sit amet.</p>! </script>!
19. DATA AND EVENT RELATIONSHIPS
20. DATA BINDING Route View Model Controller Template
21. EVENT BUBBLING View Model Controller Template Route
22. UPDATING DATA View Controller Template Model Route
23. EMBER’S ADVANTAGES
24. ARCHITECTURE ‣ Supports application growth via: • Organization • Eliminating boilerplate • Sensible conventions ‣ Encapsulation • Loose coupling between components
25. APPLICATION SPEED ‣ 100% of HTML rendering is in browser ‣ Server is responsible for data via API Requests
26. OBJECT MODEL ‣ Computed properties • with and without aggregate data ‣ Observers ‣ Bindings • two-way default, one-way for performance
27. MASTER-DETAIL INTERFACE
28. MASTER-DETAIL INTERFACE
29. FRIENDLY DOCUMENTATION
30. RAILS INFLUENCE ‣ Convention over configuration • Naming conventions (code + files) • If it feels painful, you’re likely doing it wrong ‣ REST architecture
31. EMBER’S DISADVANTAGES
32. LEARNING CURVE Frustration Time
33. SPRINKLES OF JAVASCRIPT
34. HANDLEBARS
35. EMBER DATA BETA!
36. WHAT’S COMING?
37. EMBER DATA 1.0
38. BUILD TOOLS ‣ Modules as first-class citizens (ES6 modules) ‣ Built-in Bower support ‣ CLI commands • $ ember server • $ ember test
39. HTMLBARS ‣ Performance gains ‣ Faster Rendering (comparable to React) ‣ Will build DOM instead of strings
40. HTMLBARS <img {{bind-attr src=imageUrl}}> Before After <img src="{{imageUrl}}">!
41. OTHER FUN STUFF ‣ Slimming down the codebase ‣ Removing jQuery dependency ‣ Continued support for IE8
42. HONORABLE MENTION
43. HONORABLE MENTION
44. “What kind of application are you building?” Tom Dale - Ember co-creator