Frontend Choices (Tropical Ruby)

Transcript

1. Alex Coles | Tropical Ruby, Recife Frontend Choices
2. oi Recife ;-)
3. lusófono
4. s/tu/você/
5. Alex Coles | Tropical Ruby, Recife Frontend Choices F5
6. not really about choice
7. “
8. quem sou eu?
9. I’m a backend guy living in a frontend world “
10. @myabc Alex Coles Berlin, Germany Finn GmbH
11. openproject.org Create a demo instance at
 start.openproject.com
12. @myabc eurucamp.org eurucamp.org jrubyconf.eu
13. euruko2015.org Salzburg, Austria | October 17 - 18
14. 10 years ago 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004
15. 10 years ago what was I doing?
16. 10 years ago what was the world doing?
17. 10 years ago what was Brazil doing?
18. 10 years ago what were you doing? ?
19. 10 years ago what was Apple doing?
20. 10 years ago what was the web doing?
21. 10 years ago there was no jQuery!
22. 10 years ago the end of 2004 was to mark a transition
25. …we mostly had “websites”
26. yahoo.com Yahoo! 2004
27. bindows.net Bindows 2004
28. gmail.com Gmail pre-β 2002-4 http://techcrunch.com/2008/06/06/the-evolution-of-pre-launch-gmail-in-screenshots/
29. where we are now
30. …we have “applications”
31. soundcloud.com Soundcloud
32. Single Page Application Architecture
33. chunking controller templating routing real-time communicaton local storage Single Page Application Architecture - +
34. The Rails (UI) Way
35. Rails is so 2005 “
36. “Rails Way” for views back in 2005 •Server Generated HTML (ERB, etc.) •Prototype •Scriptaculous •RJS
37. http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf RJS
38. 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
39. “Rails Way” for views now • Server Generated HTML (ERB, Slim, HAML etc.) • jQuery • jQuery UI • Server generated JavaScript Responses (SJR)
40. meanwhile
41. JavaScript has grown up
42. JavaScript has grown up percentage of total JS developer jobs has doubled from 2005 to 2010 indeed.com
43. JavaScript has grown up Server-side usage of JS has been multiplied by 6 from Jan 2012 to Oct 2014 W3Techs.com
44. no backend nobackend.org
45. hood.ie Hoodie
46. meteor.com Meteor 50 UPCOMING EVENTS 4224 PACKAGES 9915 STACK OVERFLOW QUESTIONS 254K UNIQUE INSTALLS 12 PROFESSIONAL SERVICE PROVIDERS Meteor is a complete open source platform Build apps that are a delight to use, faster than you ever thought possible I N S TA L L M E T E O R I N S TA L L M E T E O R 1 .0. 3 . 2 1 .0. 3 . 2 Star Star Follow Follow @meteorjs @meteorjs 36.8K followers 22945 22945 TUTORIAL DOCS SUBPROJECTS PACKAGES THE METEOR PROJECT BLOG SIGN IN
47. isomorphism
48. plethora of frontend frameworks
49. frontend (MV*) frameworks AngularJS Ember.js KnockoutJS
50. ReactJS ExtJS Backbone View (alone) frontend (component) frameworks Ractive.js
51. TodoMVC todomvc.com
52. but I <3 Ruby !
53. back to the question…
54. “
55. is there room for Rails?
56. “ – Marcin Stecki @madsheepPL at wroc_love.rb Not his [DHH’s] responsibility to tell us how to do these things.
57. single page vs. traditional HTML
58. naturally content-dependent
59. what is your content? Information pages Closed systems Membership sites general personal
60. content criteria • authentication • how real is real-time • caching • indexing (SEO)
61. 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
62. if it is curated content Rails way →
63. other ways are better if it is SPA →
64. some tips
65. what is most like Rails? tip 1: familiarity Ember.js is most like Rails
66. Ember.js is most like Rails • everything should inherit from main object ActiveRecord::Base.inherited Ember.Object Plain Old JavaScript Objects
67. Ember.js is most like Rails • routing DSL built-in routing not in core, third party solutions built-in routing
68. Ember.js is most like Rails • vocabulary (templates, partials, etc.) Dependency Injection, Factories, Services, Providers,
 Transclusion Models, Controllers, Views, Initializers Models, Controllers, Views, Initializers
69. how to make things work with Rails?
70. using asset pipeline / sprockets tip 2: Rails “the non-Rails way
71. use Bower
72. 3 options for using Bower
73. gem install bower-rails 1 option gem
74. config.assets.paths << File.join(Rails.root, ‘bower_components') Rails 4 (Sprockets 2+) 2 option
75. rails-assets.org rails-assets.org 3 option
76. ember-rails-api github.com/dockyard/ember-appkit-rails
77. the app/assets/javascripts silo
78. what is the way forward? →
79. 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 #
80. Volt <ul  id=“items">   {{  page._cart_items.each  do  |item|  }}   <li>        <strong>{{  item._name  }}</strong>      </li>   {{  end  }}   </ul> view class  CartController  <  Volt::ModelController      model  :cart      def  add_to_cart          page._cart_items  =  {  name:  page._new_item  }              page._new_item  <<  ''      end   controller
81. eu não gosto de monólitos
82. 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
83. (IMHO)
84. split completely ! tip 3: split
85. applications 2 frontend = 1 API + 1
86. frontend API Rails Sinatra JS workflows Lotus.rb
87. client-server model works
88. monolingualism is bad
89. JavaScript tooling
90. alternative build-pipelines
91. surprisingly well testable (and fast)
92. isomorphism is possible http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
93. http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
94. ember-fast-boot
95. will the SPA kill Rails?
96. muito obrigado!
97. perguntas?
98. @myabc