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

Lighting Up with Ember.js

Lighting Up with Ember.js

Introduction to Ember.js presented at Burlington JS. The code from the demo portion can be found at https://github.com/beerlington/ember-cats

Peter Brown

April 10, 2013
Tweet

More Decks by Peter Brown

Other Decks in Programming

Transcript

  1. LIGHTING UP
    WITH EMBER.JS
    Burlington JS - April 10, 2013
    Presented by Peter Brown

    View Slide

  2. ME.
    @beerlington
    github.com/beerlington
    beerlington.com
    opinions + cats
    opinions + code
    code

    View Slide

  3. View Slide

  4. WEB DEVELOPER

    View Slide

  5. RAILS DEVELOPER

    View Slide

  6. JAVASCRIPT DEVELOPER

    View Slide

  7. View Slide

  8. BACKBONE.JS
    Backbone.js gives structure to web applications by
    providing models with key-value binding and custom
    events, collections with a rich API of enumerable
    functions, views with declarative event handling, and
    connects it all to your existing API over a RESTful
    JSON interface.

    View Slide

  9. COFFEESCRIPT

    View Slide

  10. COFFEESCRIPT

    View Slide

  11. EMBER.JS
    A framework for creating
    ambitious web applications
    Write dramatically less code
    Built for productivity
    Don't waste time making trivial choices

    View Slide

  12. RUBY ON RAILS
    Web development that doesn’t hurt
    Optimized for programmer happiness
    and sustainable productivity
    Convention over configuration

    View Slide

  13. RAILS + EMBER.JS = <3

    View Slide

  14. CONVENTION
    OVER
    CONFIGURATION

    View Slide

  15. CONVENTION
    CONFIGURATION

    View Slide

  16. CON + VEN + TION
    CON + FIGURA + TION

    View Slide

  17. VEN
    FIGURA

    View Slide

  18. VENFIGURA = RAVE FUNGI

    View Slide

  19. GLOWING MUSHROOMS
    OMG MAGIC!!!

    View Slide

  20. CONVENTIONS
    IN LIEU OF CODE

    View Slide

  21. “It is more important to reduce
    the effort of maintenance than
    it is to reduce the effort of
    implementation”
    Max Kanat-Alexander, Code Simplicity

    View Slide

  22. IT’S NOT ALL FUN
    AND GAMES

    View Slide

  23. View Slide

  24. LEARNING CURVE
    Frustration
    Time

    View Slide

  25. PAYOFF OVER TIME
    Payoff
    Time

    View Slide

  26. DON’T FEAR THE MAGIC

    View Slide

  27. GETTING STARTED
    • Templates
    • Routing
    • Controllers
    • Models
    • Views

    View Slide

  28. TEMPLATES
    HTML + embedded expressions

    {{#each people}}
    Hello, {{name}}!
    {{/each}}

    View Slide

  29. ROUTER
    Manages the state of the application
    App.Router.map(function() {
    this.route("about", { path: "/about" });
    this.route("favorites", { path: "/favs" });
    });
    URL
    Route

    View Slide

  30. ROUTE
    Customizing the behavior of a route
    App.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
    // Set the IndexController's `title`
    controller.set('title', "My App");
    }
    });

    View Slide

  31. CONTROLLER
    Acts as a proxy to the model
    App.SongController = Ember.ObjectController.extend({
    duration: function() {
    var duration = this.get('content.duration'),
    minutes = Math.floor(duration / 60),
    seconds = duration % 60;
    return [minutes, seconds].join(':');
    }.property('content.duration')
    });

    View Slide

  32. MODEL
    Persisted objects
    App.Person = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    birthday: DS.attr('date'),
    fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
    }.property('firstName', 'lastName')
    });

    View Slide

  33. VIEW
    When you need more control
    var view = Ember.View.create({
    templateName: 'say-hello',
    name: "Bob"
    });

    View Slide

  34. TESTING IN EMBER

    View Slide

  35. TESTING IN EMBER

    View Slide

  36. JAVASCRIPT DEVELOPER?

    View Slide

  37. WRAPPING UP
    “What kind of application are you building?”
    Tom Dale - Ember.js Core Team

    View Slide

  38. RESOURCES
    • http://emberjs.com/guides/
    • http://emberweekly.com/
    • http://railscasts.com
    • http://eviltrout.com/2013/02/27/adding-to-discourse-
    part-1.html
    • https://peepcode.com/products/emberjs

    View Slide

  39. LIVE EXAMPLE

    View Slide