Frontend Choices (RubyConf Portugal)

Transcript

1. Alex Coles | RubyConf Portugal, Braga Frontend Choices
2. olá Braga
3. not really about choice
4. I’m a backend guy living in a frontend world “
5. quem sou eu?
6. @myabc Alex Coles Berlin, Germany Finn GmbH
7. @myabc openproject.org openproject.org OpenProject
8. @myabc eurucamp.org eurucamp.org eurucamp
9. @myabc eurucamp.org eurucamp.org eurucamp
10. 10 years ago
11. 10 years ago 2004
12. 10 years ago what was I doing?
13. 10 years ago what was I doing?
14. 10 years ago what was I doing?
15. 10 years ago what was the world doing?
16. 10 years ago what was the world doing?
17. 10 years ago what was the world doing?
18. 10 years ago what was the world doing?
19. 10 years ago what was the world doing?
20. 10 years ago what was Portugal doing?
21. 10 years ago what was Portugal doing?
22. 10 years ago what was Portugal doing?
23. 10 years ago what were you doing?
24. 10 years ago what were you doing? ?
25. 10 years ago what was Apple doing?
26. 10 years ago what was Apple doing?
27. 10 years ago what was Apple doing?
28. 10 years ago what was the web doing?
29. 10 years ago what was the web doing?
30. 10 years ago there was no jQuery!
31. 10 years ago but the end of 2004 was to mark a transition
34. The Rails Way
35. Rails is so 2005 “
36. Rails is so 2005 “
37. “Rails Way” back in 2005
38. “Rails Way” back in 2005 •Server Generated HTML (ERB, etc.)
39. “Rails Way” back in 2005 •Server Generated HTML (ERB, etc.) •Prototype
40. “Rails Way” back in 2005 •Server Generated HTML (ERB, etc.) •Prototype •Scriptaculous
41. “Rails Way” back in 2005 •Server Generated HTML (ERB, etc.) •Prototype •Scriptaculous •RJS
42. http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf RJS
43. http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf RJS
44. RJS
45. RJS <div  id="items"></div>   <%=  link_to_remote  'Add  to  cart',  url:  {  controller:  'cart',  action:   'add_to_cart'  }%> erb view
46. RJS <div  id="items"></div>   <%=  link_to_remote  'Add  to  cart',  url:  {  controller:  'cart',  action:   'add_to_cart'  }%> erb view class  CartController  <  ActionController::Base      def  add_to_cart          @item  =  CartItem.new          @cart.items  <<  @item      end   end controller
47. RJS <div  id="items"></div>   <%=  link_to_remote  'Add  to  cart',  url:  {  controller:  'cart',  action:   'add_to_cart'  }%> erb view class  CartController  <  ActionController::Base      def  add_to_cart          @item  =  CartItem.new          @cart.items  <<  @item      end   end controller page.insert_html    :bottom,  :items,  partial:  'item',  object:  @item   page.replace_html  :items_count,  I18n.t(:item,  count:   @cart.items.count)   rjs view
48. …we mostly had “websites”
49. yahoo.com Yahoo! 2004
50. bindows.net Bindows 2004
51. gmail.com Gmail pre-β 2002-4 http://techcrunch.com/2008/06/06/the-evolution-of-pre-launch-gmail-in-screenshots/
52. where we are now
53. …we have “applications”
54. soundcloud.com Soundcloud
55. Single Page Application Architecture
56. Single Page Application Architecture - +
57. chunking Single Page Application Architecture - +
58. chunking controller Single Page Application Architecture - +
59. chunking controller templating Single Page Application Architecture - +
60. chunking controller templating routing Single Page Application Architecture - +
61. chunking controller templating routing real-time communicaton Single Page Application Architecture - +
62. chunking controller templating routing real-time communicaton local storage Single Page Application Architecture - +
63. “Rails Way” now
64. “Rails Way” now • Server Generated HTML (ERB, Slim, HAML etc.)
65. “Rails Way” now • Server Generated HTML (ERB, Slim, HAML etc.) • jQuery
66. “Rails Way” now • Server Generated HTML (ERB, Slim, HAML etc.) • jQuery • jQuery UI
67. “Rails Way” now • Server Generated HTML (ERB, Slim, HAML etc.) • jQuery • jQuery UI • Server generated JavaScript Responses (SJR)
68. JavaScript has grown up
69. JavaScript has grown up percentage of total JS developer jobs has doubled from 2005 to 2010 indeed.com
70. JavaScript has grown up Server-side usage of JS has been multiplied by 6 from Jan 2012 to Oct 2014 W3Techs.com
71. no backend nobackend.org
72. hood.ie Hoodie
73. isomorphism
74. meteor.com Meteor
75. frontend frameworks
76. frontend (MV*) frameworks
77. frontend (MV*) frameworks AngularJS
78. frontend (MV*) frameworks AngularJS KnockoutJS
79. frontend (MV*) frameworks AngularJS Ember.js KnockoutJS
80. frontend (component) frameworks
81. frontend (component) frameworks Ractive.js
82. ReactJS frontend (component) frameworks Ractive.js
83. ReactJS Backbone View (alone) frontend (component) frameworks Ractive.js
84. ReactJS ExtJS Backbone View (alone) frontend (component) frameworks Ractive.js
85. TodoMVC todomvc.com
86. More on MV*…
90. but I <3 Ruby !
91. so here is the question
92. “
93. is there room for Rails?
94. “ – Marcin Stecki @madsheepPL at wroc_love.rb Not his [DHH’s] responsibility to tell us how to do these things.
95. single page vs. traditional HTML
96. naturally content-dependent
97. what is your content? general personal
98. what is your content? Information pages general personal
99. what is your content? Information pages Membership sites general personal
100. what is your content? Information pages Closed systems Membership sites general personal
101. content criteria
102. content criteria • authentication
103. content criteria • authentication • how real is real-time
104. content criteria • authentication • how real is real-time • caching
105. content criteria • authentication • how real is real-time • caching • indexing (SEO)
106. how unique is the view to be rendered?
107. how unique is the view to be rendered? how many combinations of a unique set of data?
108. how unique is the view to be rendered? how many combinations of a unique set of data? • a blog with comments
109. how unique is the view to be rendered? how many combinations of a unique set of data? • a blog with comments • a hotel page with reviews
110. how unique is the view to be rendered? how many combinations of a unique set of data? • a blog with comments • a hotel page with reviews • a dashboard
111. if it is curated content Rails way →
112. other ways are better if it is SPA →
113. some tips
114. what is most like Rails? tip 1: familiarity
115. what is most like Rails? tip 1: familiarity
116. tip 1: familiarity Ember.js is most like Rails
117. Ember.js is most like Rails
118. Ember.js is most like Rails • everything should inherit from main object
119. Ember.js is most like Rails • everything should inherit from main object ActiveRecord::Base.inherited)
120. Ember.js is most like Rails • everything should inherit from main object ActiveRecord::Base.inherited) Ember.Object
121. Ember.js is most like Rails • everything should inherit from main object ActiveRecord::Base.inherited) Ember.Object Plain Old JavaScript Objects
122. Ember.js is most like Rails
123. Ember.js is most like Rails • routing DSL
124. Ember.js is most like Rails • routing DSL built-in routing
125. Ember.js is most like Rails • routing DSL built-in routing built-in routing
126. Ember.js is most like Rails • routing DSL built-in routing not in core, third party solutions built-in routing
127. Ember.js is most like Rails
128. Ember.js is most like Rails • vocabulary (templates, partials, etc.)
129. Ember.js is most like Rails • vocabulary (templates, partials, etc.) Models, Controllers, Views, Initializers
130. Ember.js is most like Rails • vocabulary (templates, partials, etc.) Models, Controllers, Views, Initializers Models, Controllers, Views, Initializers
131. Ember.js is most like Rails • vocabulary (templates, partials, etc.) Dependency Injection, Factories, Services, Providers,
 Transclusion Models, Controllers, Views, Initializers Models, Controllers, Views, Initializers
132. how to make things work with Rails?
133. using asset pipeline / sprockets tip 2: Rails “the non-Rails way
134. use Bower
135. use Bower
136. 3 options for using Bower
137. gem install bower-rails 1 option gem
138. config.assets.paths << File.join(Rails.root, 'vendor', 'assets', ‘components') Rails 4 (Sprockets 2+) 2 option
139. rails-assets.org rails-assets.org 3 option
140. ember-rails-api github.com/dockyard/ember-appkit-rails
141. the app/assets/javascripts silo
142. one more thing… (sidetrack)
143. voltframework.com Volt Framework Volt is a framework for building data rich web applications shockingly fast. Play Video ! Get Started " Home Getting Started Docs API Blog Community #
144. what is the way forward? →
145. (IMHO)
146. split completely ! tip 3: split
147. I don’t like monoliths
148. applications 2
149. applications 2 =
150. applications 2 = 1 API +
151. applications 2 frontend = 1 API + 1
152. API
153. API Rails
154. API Rails Sinatra
155. API Rails Sinatra Lotus.rb
156. frontend API Rails Sinatra Lotus.rb
157. frontend API Rails Sinatra JS workflows Lotus.rb
158. JavaScript tooling
159. isomorphism is possible http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
160. surprisingly well testable (and fast)
161. muito obrigado!
162. perguntas?
163. @myabc