Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Choices (Tropical Ruby)

Frontend Choices (Tropical Ruby)

Alex Coles

March 06, 2015
Tweet

More Decks by Alex Coles

Other Decks in Technology

Transcript

  1. Alex Coles | Tropical Ruby, Recife
    Frontend Choices

    View full-size slide

  2. oi Recife ;-)

    View full-size slide

  3. Alex Coles | Tropical Ruby, Recife
    Frontend Choices
    F5

    View full-size slide

  4. not really about choice

    View full-size slide

  5. quem sou eu?

    View full-size slide

  6. I’m a backend guy
    living in a
    frontend world

    View full-size slide

  7. @myabc
    Alex Coles
    Berlin, Germany
    Finn GmbH

    View full-size slide

  8. openproject.org
    Create a demo instance at

    start.openproject.com

    View full-size slide

  9. @myabc
    eurucamp.org
    eurucamp.org jrubyconf.eu

    View full-size slide

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

    View full-size slide

  11. 10 years ago
    2014
    2013
    2012
    2011
    2010
    2009
    2008
    2007
    2006
    2005
    2004

    View full-size slide

  12. 10 years ago
    what was
    I
    doing?

    View full-size slide

  13. 10 years ago
    what was
    the world
    doing?

    View full-size slide

  14. 10 years ago
    what was
    Brazil
    doing?

    View full-size slide

  15. 10 years ago
    what were
    you
    doing?
    ?

    View full-size slide

  16. 10 years ago
    what was
    Apple
    doing?

    View full-size slide

  17. 10 years ago
    what was
    the web
    doing?

    View full-size slide

  18. 10 years ago
    there was no jQuery!

    View full-size slide

  19. 10 years ago
    the end of 2004 was
    to mark a transition

    View full-size slide

  20. …we mostly had “websites”

    View full-size slide

  21. yahoo.com
    Yahoo!
    2004

    View full-size slide

  22. bindows.net
    Bindows
    2004

    View full-size slide

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

    View full-size slide

  24. where we are now

    View full-size slide

  25. …we have “applications”

    View full-size slide

  26. soundcloud.com
    Soundcloud

    View full-size slide

  27. Single Page
    Application
    Architecture

    View full-size slide

  28. chunking
    controller
    templating
    routing
    real-time communicaton
    local storage
    Single Page Application Architecture
    -
    +

    View full-size slide

  29. The Rails (UI) Way

    View full-size slide

  30. Rails is so 2005

    View full-size slide

  31. “Rails Way” for views back in 2005
    •Server Generated
    HTML (ERB, etc.)
    •Prototype
    •Scriptaculous
    •RJS

    View full-size slide

  32. http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf
    RJS

    View full-size slide

  33. RJS
     
    <%=  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

    View full-size slide

  34. “Rails Way” for views now
    • Server Generated HTML
    (ERB, Slim, HAML etc.)
    • jQuery
    • jQuery UI
    • Server generated
    JavaScript Responses
    (SJR)

    View full-size slide

  35. JavaScript has grown up

    View full-size slide

  36. JavaScript has grown up
    percentage of total JS developer jobs has doubled from 2005 to 2010
    indeed.com

    View full-size slide

  37. JavaScript has grown up
    Server-side usage of JS has been
    multiplied by 6 from Jan 2012 to Oct 2014
    W3Techs.com

    View full-size slide

  38. no backend
    nobackend.org

    View full-size slide

  39. hood.ie
    Hoodie

    View full-size slide

  40. 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

    View full-size slide

  41. plethora of frontend frameworks

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. TodoMVC
    todomvc.com

    View full-size slide

  45. but I <3 Ruby
    !

    View full-size slide

  46. back to the question…

    View full-size slide

  47. is there room
    for Rails?

    View full-size slide


  48. – Marcin Stecki @madsheepPL at wroc_love.rb
    Not his [DHH’s] responsibility
    to tell us how to do these
    things.

    View full-size slide

  49. single page
    vs.
    traditional HTML

    View full-size slide

  50. naturally content-dependent

    View full-size slide

  51. what is your content?
    Information pages Closed systems
    Membership sites
    general personal

    View full-size slide

  52. content criteria
    • authentication
    • how real is real-time
    • caching
    • indexing (SEO)

    View full-size slide

  53. 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

    View full-size slide

  54. if it is curated
    content
    Rails way

    View full-size slide

  55. other ways are
    better
    if it is SPA

    View full-size slide

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

    View full-size slide

  57. Ember.js is most like Rails
    • everything should inherit from main object
    ActiveRecord::Base.inherited
    Ember.Object
    Plain Old JavaScript Objects

    View full-size slide

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

    View full-size slide

  59. Ember.js is most like Rails
    • vocabulary (templates, partials, etc.)
    Dependency Injection, Factories, Services, Providers,

    Transclusion
    Models, Controllers, Views, Initializers
    Models, Controllers, Views, Initializers

    View full-size slide

  60. how to make
    things work with
    Rails?

    View full-size slide

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

    View full-size slide

  62. 3 options for using
    Bower

    View full-size slide

  63. gem install bower-rails
    1
    option gem

    View full-size slide

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

    View full-size slide

  65. rails-assets.org
    rails-assets.org
    3
    option

    View full-size slide

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

    View full-size slide

  67. the app/assets/javascripts silo

    View full-size slide

  68. what is the way forward?

    View full-size slide

  69. 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 #

    View full-size slide

  70. Volt
     
    {{  page._cart_items.each  do  |item|  }}  
     
         {{  item._name  }}  
         
    {{  end  }}  

    view
    class  CartController  <  Volt::ModelController  
       model  :cart  
       def  add_to_cart  
           page._cart_items  =  {  name:  page._new_item  }      
           page._new_item  <<  ''  
       end  
    controller

    View full-size slide

  71. eu não gosto de monólitos

    View full-size slide

  72. RJS
     
    <%=  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

    View full-size slide

  73. split completely
    ! tip 3: split

    View full-size slide

  74. applications
    2
    frontend
    =
    1
    API
    +
    1

    View full-size slide

  75. frontend
    API
    Rails Sinatra JS workflows
    Lotus.rb

    View full-size slide

  76. client-server model works

    View full-size slide

  77. monolingualism is bad

    View full-size slide

  78. JavaScript tooling

    View full-size slide

  79. alternative build-pipelines

    View full-size slide

  80. surprisingly well testable
    (and fast)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  83. ember-fast-boot

    View full-size slide

  84. will the SPA kill Rails?

    View full-size slide

  85. muito obrigado!

    View full-size slide