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 full-size slide

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

    View full-size slide

  3. WEB DEVELOPER

    View full-size slide

  4. RAILS DEVELOPER

    View full-size slide

  5. JAVASCRIPT DEVELOPER

    View full-size slide

  6. 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 full-size slide

  7. COFFEESCRIPT

    View full-size slide

  8. COFFEESCRIPT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. RAILS + EMBER.JS = <3

    View full-size slide

  12. CONVENTION
    OVER
    CONFIGURATION

    View full-size slide

  13. CONVENTION
    CONFIGURATION

    View full-size slide

  14. CON + VEN + TION
    CON + FIGURA + TION

    View full-size slide

  15. VENFIGURA = RAVE FUNGI

    View full-size slide

  16. GLOWING MUSHROOMS
    OMG MAGIC!!!

    View full-size slide

  17. CONVENTIONS
    IN LIEU OF CODE

    View full-size slide

  18. “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 full-size slide

  19. IT’S NOT ALL FUN
    AND GAMES

    View full-size slide

  20. LEARNING CURVE
    Frustration
    Time

    View full-size slide

  21. PAYOFF OVER TIME
    Payoff
    Time

    View full-size slide

  22. DON’T FEAR THE MAGIC

    View full-size slide

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

    View full-size slide

  24. TEMPLATES
    HTML + embedded expressions

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

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

    View full-size slide

  30. TESTING IN EMBER

    View full-size slide

  31. TESTING IN EMBER

    View full-size slide

  32. JAVASCRIPT DEVELOPER?

    View full-size slide

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

    View full-size slide

  34. 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 full-size slide

  35. LIVE EXAMPLE

    View full-size slide