Lighting Up with Ember.js

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