Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Extinguish the Fire with Ember.js

45b75f9f866d240362c0d7fa125025ba?s=47 Peter Brown
February 12, 2014

Extinguish the Fire with Ember.js

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

45b75f9f866d240362c0d7fa125025ba?s=128

Peter Brown

February 12, 2014
Tweet

Transcript

  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