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

45b75f9f866d240362c0d7fa125025ba?s=128

Peter Brown

April 10, 2013
Tweet

Transcript

  1. LIGHTING UP WITH EMBER.JS Burlington JS - April 10, 2013

    Presented by Peter Brown
  2. ME. @beerlington github.com/beerlington beerlington.com opinions + cats opinions + code

    code
  3. None
  4. WEB DEVELOPER

  5. RAILS DEVELOPER

  6. JAVASCRIPT DEVELOPER

  7. None
  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.
  9. COFFEESCRIPT

  10. COFFEESCRIPT

  11. EMBER.JS A framework for creating ambitious web applications Write dramatically

    less code Built for productivity Don't waste time making trivial choices
  12. RUBY ON RAILS Web development that doesn’t hurt Optimized for

    programmer happiness and sustainable productivity Convention over configuration
  13. RAILS + EMBER.JS = <3

  14. CONVENTION OVER CONFIGURATION

  15. CONVENTION CONFIGURATION

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

  17. VEN FIGURA

  18. VENFIGURA = RAVE FUNGI

  19. GLOWING MUSHROOMS OMG MAGIC!!!

  20. CONVENTIONS IN LIEU OF CODE

  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
  22. IT’S NOT ALL FUN AND GAMES

  23. None
  24. LEARNING CURVE Frustration Time

  25. PAYOFF OVER TIME Payoff Time

  26. DON’T FEAR THE MAGIC

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

    • Views
  28. TEMPLATES HTML + embedded expressions <ul> {{#each people}} <li>Hello, {{name}}!</li>

    {{/each}} </ul>
  29. ROUTER Manages the state of the application App.Router.map(function() { this.route("about",

    { path: "/about" }); this.route("favorites", { path: "/favs" }); }); URL Route
  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"); } });
  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') });
  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') });
  33. VIEW When you need more control var view = Ember.View.create({

    templateName: 'say-hello', name: "Bob" });
  34. TESTING IN EMBER

  35. TESTING IN EMBER

  36. JAVASCRIPT DEVELOPER?

  37. WRAPPING UP “What kind of application are you building?” Tom

    Dale - Ember.js Core Team
  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
  39. LIVE EXAMPLE