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
23. None
24. None

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