Pro Yearly is on sale from $80 to $50! »

Frontend Choices (RubyConf Portugal)

9b1a71682de14fc6fc2b944a9c4814a0?s=47 Alex Coles
October 13, 2014

Frontend Choices (RubyConf Portugal)

9b1a71682de14fc6fc2b944a9c4814a0?s=128

Alex Coles

October 13, 2014
Tweet

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
  32. None
  33. None
  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*…

  87. None
  88. None
  89. None
  90. but I <3 Ruby !

  91. so here is the question

  92. is there room for Rails?

  93. “ – Marcin Stecki @madsheepPL at wroc_love.rb Not his [DHH’s]

    responsibility to tell us how to do these things.
  94. single page vs. traditional HTML

  95. naturally content-dependent

  96. what is your content? general personal

  97. what is your content? Information pages general personal

  98. what is your content? Information pages Membership sites general personal

  99. what is your content? Information pages Closed systems Membership sites

    general personal
  100. content criteria

  101. content criteria • authentication

  102. content criteria • authentication • how real is real-time

  103. content criteria • authentication • how real is real-time •

    caching
  104. content criteria • authentication • how real is real-time •

    caching • indexing (SEO)
  105. how unique is the view to be rendered?

  106. how unique is the view to be rendered? how many

    combinations of a unique set of data?
  107. how unique is the view to be rendered? how many

    combinations of a unique set of data? • a blog with comments
  108. 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
  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 • a dashboard
  110. if it is curated content Rails way →

  111. other ways are better if it is SPA →

  112. some tips

  113. what is most like Rails? tip 1: familiarity

  114. what is most like Rails? tip 1: familiarity

  115. tip 1: familiarity Ember.js is most like Rails

  116. Ember.js is most like Rails

  117. Ember.js is most like Rails • everything should inherit from

    main object
  118. Ember.js is most like Rails • everything should inherit from

    main object ActiveRecord::Base.inherited)
  119. Ember.js is most like Rails • everything should inherit from

    main object ActiveRecord::Base.inherited) Ember.Object
  120. Ember.js is most like Rails • everything should inherit from

    main object ActiveRecord::Base.inherited) Ember.Object Plain Old JavaScript Objects
  121. Ember.js is most like Rails

  122. Ember.js is most like Rails • routing DSL

  123. Ember.js is most like Rails • routing DSL built-in routing

  124. Ember.js is most like Rails • routing DSL built-in routing

    built-in routing
  125. Ember.js is most like Rails • routing DSL built-in routing

    not in core, third party solutions built-in routing
  126. Ember.js is most like Rails

  127. Ember.js is most like Rails • vocabulary (templates, partials, etc.)

  128. Ember.js is most like Rails • vocabulary (templates, partials, etc.)

    Models, Controllers, Views, Initializers
  129. Ember.js is most like Rails • vocabulary (templates, partials, etc.)

    Models, Controllers, Views, Initializers Models, Controllers, Views, Initializers
  130. Ember.js is most like Rails • vocabulary (templates, partials, etc.)

    Dependency Injection, Factories, Services, Providers,
 Transclusion Models, Controllers, Views, Initializers Models, Controllers, Views, Initializers
  131. how to make things work with Rails?

  132. using asset pipeline / sprockets tip 2: Rails “the non-Rails

    way
  133. use Bower

  134. use Bower

  135. 3 options for using Bower

  136. gem install bower-rails 1 option gem

  137. config.assets.paths << File.join(Rails.root, 'vendor', 'assets', ‘components') Rails 4 (Sprockets 2+)

    2 option
  138. rails-assets.org rails-assets.org 3 option

  139. ember-rails-api github.com/dockyard/ember-appkit-rails

  140. the app/assets/javascripts silo

  141. one more thing… (sidetrack)

  142. 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 #
  143. what is the way forward? →

  144. (IMHO)

  145. split completely ! tip 3: split

  146. I don’t like monoliths

  147. applications 2

  148. applications 2 =

  149. applications 2 = 1 API +

  150. applications 2 frontend = 1 API + 1

  151. API

  152. API Rails

  153. API Rails Sinatra

  154. API Rails Sinatra Lotus.rb

  155. frontend API Rails Sinatra Lotus.rb

  156. frontend API Rails Sinatra JS workflows Lotus.rb

  157. JavaScript tooling

  158. isomorphism is possible http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

  159. surprisingly well testable (and fast)

  160. muito obrigado!

  161. perguntas?

  162. @myabc