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
2. ME. @beerlington github.com/beerlington beerlington.com opinions + cats opinions + code code
4. WEB DEVELOPER
5. RAILS DEVELOPER
6. JAVASCRIPT DEVELOPER
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
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