Ember & Rails - Convention over configuration on both sides of the tubes

My presentation on Ember & Rails I gave at Arrrrcamp Belgium (http://arrrrcamp.be/), Ghent, 2013, October 3.

Transcript

1. Saturday, October 5, 13
2. Saturday, October 5, 13
3. Convention over configuration on both sides of the tubes Ember.js & Rails Saturday, October 5, 13
4. Pirate fact of the day Saturday, October 5, 13
5. Pirates did have exotic parrots. Saturday, October 5, 13
6. “(...) Seafarers in the tropics commonly brought home exotic fauna as souvenirs. Parrots were particularly popular because they were colorful, could be taught to speak, and were easier to care for than, say, monkeys.” Saturday, October 5, 13
7. “(...) Seafarers in the tropics commonly brought home exotic fauna as souvenirs. Parrots were particularly popular because they were colorful, could be taught to speak, and were easier to care for than, say, monkeys.” (Read: they crapped everywhere but at least wouldn't throw it at you.) Saturday, October 5, 13
8. “(...) However, one can't imagine a crewman actually heaving at the capstan with a bird perched on him.” http://www.straightdope.com/columns/read/2729/why-are-pirates-depicted-with-a-parrot-on-their-shoulder Saturday, October 5, 13
9. A love story Saturday, October 5, 13
10. A rough start Saturday, October 5, 13
11. Saturday, October 5, 13
12. Affection with occasional, mild frustration Saturday, October 5, 13
13. Saturday, October 5, 13
14. Saturday, October 5, 13
15. Boundless love Saturday, October 5, 13
16. Saturday, October 5, 13
17. Saturday, October 5, 13
18. Saturday, October 5, 13
19. Saturday, October 5, 13
20. Balint Erdi Ember.js / Rails consultant @baaz http://balinterdi.com Saturday, October 5, 13
21. Aim of the talk Saturday, October 5, 13
22. Aim of the talk • Spread the love Saturday, October 5, 13
23. Aim of the talk • Spread the love • Incite your curiosity Saturday, October 5, 13
24. Aim of the talk • Spread the love • Incite your curiosity • Solid investment in your career Saturday, October 5, 13
25. Aim of the talk • Spread the love • Incite your curiosity • Solid investment in your career • Front-end development is fun Saturday, October 5, 13
26. Server-side MVC frameworks Saturday, October 5, 13
27. Saturday, October 5, 13
28. Objects live for the duration of the request Saturday, October 5, 13
29. Client-side MVC frameworks Saturday, October 5, 13
30. • Model: define properties and behavior • Controller: decorate models with display logic • View: reusable UI element • Template: render html Components Saturday, October 5, 13
31. Saturday, October 5, 13
32. As opposed to server- side MVC ... Saturday, October 5, 13
33. • Objects are long-lived As opposed to server- side MVC ... Saturday, October 5, 13
34. • Objects are long-lived • E.g the same, singleton controller can change models As opposed to server- side MVC ... Saturday, October 5, 13
35. • Objects are long-lived • E.g the same, singleton controller can change models • State is not only maintained in the model layer As opposed to server- side MVC ... Saturday, October 5, 13
36. Why do you need one? • The classic whole page reload is dying out • Users need better & swifter UX Saturday, October 5, 13
37. Why not just use jQuery? Saturday, October 5, 13
38. Why not just use jQuery? • Apps of non-trivial size and/or complexity Saturday, October 5, 13
39. Why not just use jQuery? • Apps of non-trivial size and/or complexity • Sprinkling jQuery selectors only goes that far Saturday, October 5, 13
40. Why not just use jQuery? • Apps of non-trivial size and/or complexity • Sprinkling jQuery selectors only goes that far • Gives structure to your code Saturday, October 5, 13
41. Why not just use jQuery? • Apps of non-trivial size and/or complexity • Sprinkling jQuery selectors only goes that far • Gives structure to your code • Let someone else do the hard stuff Saturday, October 5, 13
42. Why not just use jQuery? • Apps of non-trivial size and/or complexity • Sprinkling jQuery selectors only goes that far • Gives structure to your code • Let someone else do the hard stuff • Less bugs Saturday, October 5, 13
43. • Backbone • Knockout • Angular • ExtJS • Emberjs • ... There are many ... Saturday, October 5, 13
44. Why Ember.js? Saturday, October 5, 13
45. • For building ambitious web applications • Two-way data bindings • Computed properties • Routing as a core principle • Convention over Configuration Saturday, October 5, 13
46. Two-way data bindings {{input type="text" value=firstName}} • Binds two properties together • So that one changes, the other gets updated. Saturday, October 5, 13
47. Computed properties • Property depending on other properties • Gets updated iff any of the dependent properties change • Value is cached fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') Saturday, October 5, 13
48. Single source of truth • Made possible by bindings and computed properties • In your objects • Prevents out-of-sync data • Less code to write and get wrong Saturday, October 5, 13
49. Routing as a core principle Saturday, October 5, 13
50. ”URLs are the UI of the web” Tom Dale, core Ember.js member Saturday, October 5, 13
51. Saturday, October 5, 13
52. Manages application state Saturday, October 5, 13
53. Separation of concerns Saturday, October 5, 13
54. Route hooks • fetch the model • set up controller(s) • redirect • ... • very important part of your application App.UserRoute = Ember.Route.extend({ model: function() { return $.getJSON('/user.json'); } }); Saturday, October 5, 13
55. CoC • Less code to write • “Make a problem go away by not doing it the wrong way” (Stefan Penner) Saturday, October 5, 13
56. Stable, used in production Saturday, October 5, 13
57. Show me the code already! Saturday, October 5, 13
58. TwitterClient::Application.routes.draw do resource :session, only: [:new, :create] resources :timelines root to: 'timelines#home' end class SessionsController < ApplicationController def new ... end def create ... end end class TimelinesController < ApplicationController ... end Saturday, October 5, 13
59. TwitterClient::Application.routes.draw do resource :session, only: [:new, :create] resources :timelines root to: 'timelines#home' end class SessionsController < ApplicationController def new ... end def create ... end end class TimelinesController < ApplicationController ... end Saturday, October 5, 13
60. TwitterClient::Application.routes.draw do resource :session, only: [:new, :create] resources :timelines root to: 'timelines#home' end class SessionsController < ApplicationController def new ... end def create ... end end class TimelinesController < ApplicationController ... end Saturday, October 5, 13
61. App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
62. App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
63. App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
64. App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
65. App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
66. App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
67. App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
68. App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
69. App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); Saturday, October 5, 13
70. App.IndexRoute = Ember.Route.extend({...}); App.TokenRoute = Ember.Route.extend({...}); App.UserRoute = Ember.Route.extend({...}); App.UserIndexRoute = Ember.Route.extend({...}); App.UserTimelineRoute = Ember.Route.extend({...}); App.IndexController = Ember.Controller.extend({...}); App.TokenController = Ember.Controller.extend({...}); App.UserController = Ember.Controller.extend({...}); App.UserIndexController = Ember.ObjectController.extend({...}); App.UserTimelineController = Ember.ObjectController.extend({}); Saturday, October 5, 13
71. <script ... data-template-name="user"> </script> <script ... data-template-name="user/index"> </script> <script ... data-template-name="user/timeline"> </script> App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); Saturday, October 5, 13
72. <script ... data-template-name="user"> </script> <script ... data-template-name="user/index"> </script> <script ... data-template-name="user/timeline"> </script> App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); Saturday, October 5, 13
73. <script ... data-template-name="user"> </script> <script ... data-template-name="user/index"> </script> <script ... data-template-name="user/timeline"> </script> App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); Saturday, October 5, 13
74. <script ... data-template-name="user"> </script> <script ... data-template-name="user/index"> </script> <script ... data-template-name="user/timeline"> </script> App.Router.map(function() { this.route('token'); this.resource('user', function() { this.route('timeline'); }) }); Saturday, October 5, 13
75. Demo time https://github.com/balinterdi/ember-twitter-client Saturday, October 5, 13
76. Thanks to • Dávid Tóth (@tothda) • Organizers of Arrrrcamp Saturday, October 5, 13
77. Want to learn more about Ember? http://emberjs.balinterdi.com Saturday, October 5, 13
78. .Thank you. ?Questions? http://emberjs.balinterdi.com Saturday, October 5, 13