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

Extinguish the Fire with Ember.js

Peter Brown
February 12, 2014

Extinguish the Fire with Ember.js

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

Peter Brown

February 12, 2014
Tweet

More Decks by Peter Brown

Other Decks in Technology

Transcript

  1. PROBLEMS ‣ Client side development is challenging ‣ Expectations about

    how websites should work ‣ Single page applications aren’t always that ‣ Lack of conventions
  2. 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
  3. A framework for creating
 ambitious web applications
 Write dramatically less

    code
 Built for productivity
 
 Don't reinvent the wheel
 EMBER.JS
  4. ROUTER Maps a URL to a Route App.Router.map(function() {! this.resource('posts');!

    this.resource('post', { path: '/post/:post_id' });! });!
  5. 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');! });! });! });!
  6. 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');! });! });! });!
  7. 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);! }! });!
  8. 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');! }! }! });!
  9. TEMPLATE Automatically bound to controller’s state {{#if isPublished}}! <span>! This

    post is published!! </span>! {{else}}! <span>! This post is NOT published!! </span>! {{/if}}!
  10. MODEL Defines schema and relationships App.Post = DS.Model.extend({! title: DS.attr('string'),!

    publishedAt: DS.attr('date'),! author: DS.belongsTo('author')! });!
  11. VIEW When you need more control, used less frequently, always

    associated with a controller var view = Ember.View.create({! templateName: 'say-hello',! name: "Bob"! });!
  12. 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>!
  13. ARCHITECTURE ‣ Supports application growth via: • Organization • Eliminating

    boilerplate • Sensible conventions ‣ Encapsulation • Loose coupling between components
  14. APPLICATION SPEED ‣ 100% of HTML rendering is in browser

    ‣ Server is responsible for data via API Requests
  15. OBJECT MODEL ‣ Computed properties • with and without aggregate

    data ‣ Observers ‣ Bindings • two-way default, one-way for performance
  16. RAILS INFLUENCE ‣ Convention over configuration • Naming conventions (code

    + files) • If it feels painful, you’re likely doing it wrong ‣ REST architecture
  17. BUILD TOOLS ‣ Modules as first-class citizens (ES6 modules) ‣

    Built-in Bower support ‣ CLI commands • $ ember server • $ ember test
  18. OTHER FUN STUFF ‣ Slimming down the codebase ‣ Removing

    jQuery dependency ‣ Continued support for IE8