Frontend Choices (Tropical Ruby)

Frontend Choices (Tropical Ruby)

9b1a71682de14fc6fc2b944a9c4814a0?s=128

Alex Coles

March 06, 2015
Tweet

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. quem sou eu?

  8. I’m a backend guy living in a frontend world “

  9. @myabc Alex Coles Berlin, Germany Finn GmbH

  10. openproject.org Create a demo instance at
 start.openproject.com

  11. @myabc eurucamp.org eurucamp.org jrubyconf.eu

  12. euruko2015.org Salzburg, Austria | October 17 - 18

  13. 10 years ago 2014 2013 2012 2011 2010 2009 2008

    2007 2006 2005 2004
  14. 10 years ago what was I doing?

  15. 10 years ago what was the world doing?

  16. 10 years ago what was Brazil doing?

  17. 10 years ago what were you doing? ?

  18. 10 years ago what was Apple doing?

  19. 10 years ago what was the web doing?

  20. 10 years ago there was no jQuery!

  21. 10 years ago the end of 2004 was to mark

    a transition
  22. None
  23. None
  24. …we mostly had “websites”

  25. yahoo.com Yahoo! 2004

  26. bindows.net Bindows 2004

  27. gmail.com Gmail pre-β 2002-4 http://techcrunch.com/2008/06/06/the-evolution-of-pre-launch-gmail-in-screenshots/

  28. where we are now

  29. …we have “applications”

  30. soundcloud.com Soundcloud

  31. Single Page Application Architecture

  32. chunking controller templating routing real-time communicaton local storage Single Page

    Application Architecture - +
  33. The Rails (UI) Way

  34. Rails is so 2005 “

  35. “Rails Way” for views back in 2005 •Server Generated HTML

    (ERB, etc.) •Prototype •Scriptaculous •RJS
  36. http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf RJS

  37. 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
  38. “Rails Way” for views now • Server Generated HTML (ERB,

    Slim, HAML etc.) • jQuery • jQuery UI • Server generated JavaScript Responses (SJR)
  39. meanwhile

  40. JavaScript has grown up

  41. JavaScript has grown up percentage of total JS developer jobs

    has doubled from 2005 to 2010 indeed.com
  42. JavaScript has grown up Server-side usage of JS has been

    multiplied by 6 from Jan 2012 to Oct 2014 W3Techs.com
  43. no backend nobackend.org

  44. hood.ie Hoodie

  45. 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
  46. isomorphism

  47. plethora of frontend frameworks

  48. frontend (MV*) frameworks AngularJS Ember.js KnockoutJS

  49. ReactJS ExtJS Backbone View (alone) frontend (component) frameworks Ractive.js

  50. TodoMVC todomvc.com

  51. but I <3 Ruby !

  52. back to the question…

  53. is there room for Rails?

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

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

  56. naturally content-dependent

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

    general personal
  58. content criteria • authentication • how real is real-time •

    caching • indexing (SEO)
  59. 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
  60. if it is curated content Rails way →

  61. other ways are better if it is SPA →

  62. some tips

  63. what is most like Rails? tip 1: familiarity Ember.js is

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

    main object ActiveRecord::Base.inherited Ember.Object Plain Old JavaScript Objects
  65. Ember.js is most like Rails • routing DSL built-in routing

    not in core, third party solutions built-in routing
  66. Ember.js is most like Rails • vocabulary (templates, partials, etc.)

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

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

    way
  69. use Bower

  70. 3 options for using Bower

  71. gem install bower-rails 1 option gem

  72. config.assets.paths << File.join(Rails.root, ‘bower_components') Rails 4 (Sprockets 2+) 2 option

  73. rails-assets.org rails-assets.org 3 option

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

  75. the app/assets/javascripts silo

  76. what is the way forward? →

  77. 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 #
  78. 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
  79. eu não gosto de monólitos

  80. 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
  81. (IMHO)

  82. split completely ! tip 3: split

  83. applications 2 frontend = 1 API + 1

  84. frontend API Rails Sinatra JS workflows Lotus.rb

  85. client-server model works

  86. monolingualism is bad

  87. JavaScript tooling

  88. alternative build-pipelines

  89. surprisingly well testable (and fast)

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

  91. http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

  92. ember-fast-boot

  93. will the SPA kill Rails?

  94. muito obrigado!

  95. perguntas?

  96. @myabc