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

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