Frontend Choices

9b1a71682de14fc6fc2b944a9c4814a0?s=47 Alex Coles
September 18, 2014

Frontend Choices

9b1a71682de14fc6fc2b944a9c4814a0?s=128

Alex Coles

September 18, 2014
Tweet

Transcript

  1. Frontend choices Alex Coles | Ruby & Rails Meetup, Дніпропетро́вськ

  2. front end vs. frontend

  3. Not really about choice

  4. ‘I’m a backend guy living in a frontend world’

  5. About me

  6. @myabc Alex Coles Berlin, Germany Finn GmbH

  7. openproject.org

  8. eurucamp.org

  9. 1..2..3

  10. one one: background

  11. Single Page Application Architecture

  12. Single Page Application Architecture • Chunking • Controller • Templating

    • Routing • Real-time Communicaton • Local storage min MAX
  13. single page vs. traditional HTML

  14. naturally content-dependent

  15. What’s your content? Information Pages Membership sites Closed Systems

  16. Content Criteria • Authentication • Caching • Indexing (SEO) •

    Content TTL - relevance at a point in time
  17. Curated content vs. dynamic • how many combinations of a

    unique set of data: • a blog with comments • a hotel page with reviews • a dashboard
  18. two two: where we are now

  19. “The Rails Way”

  20. History of the Rails Interface

  21. “Rails is so 2005”

  22. “Rails Way” back in 2005 • Server Generated HTML (ERB,

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

  24. 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
  25. “Rails Way” now • Server Generated HTML (ERB, Slim, HAML

    etc.) • jQuery • jQuery UI • Server generated JavaScript Responses (SJR)
  26. Where we are now

  27. JavaScript has grown up

  28. No backend nobackend.org

  29. Hoodie hood.ie

  30. Meteor www.meteor.com

  31. but I <3 Ruby

  32. So here’s the question…

  33. None
  34. Room for Rails?

  35. The Rails Way

  36. – Marcin Stecki @madsheep at wroc_love.rb “Not his [DHH]'s responsibility

    to tell us how to do these things.”
  37. Frontend frameworks

  38. Frontend (MV*) frameworks • AngularJS • Ember.js • KnockoutJS

  39. Frontend (component) frameworks • ReactJS • Backbone.View (alone) • ExtJS

  40. TodoMVC todomvc.com

  41. None
  42. None
  43. None
  44. What is most like Rails?

  45. Ember.js is most like Rails • Everything should inherit from

    Ember.Object
 (think ActiveRecord::Base.inherited) • Routing DSL • Vocabulary (templates, partials, etc.)
  46. three three: practical usage

  47. Using asset pipeline / sprockets

  48. Use Bower

  49. 3 options for using Bower

  50. gem install bower-rails Option 1

  51. Rails 4 (Sprockets 2+) Option 2

  52. config.assets.paths << File.join(Rails.root, 'vendor', 'assets', ‘components') Option 2

  53. Option 3 rails-assets.org

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

  55. the app/assets/javascripts silo

  56. None
  57. What is the way forward?

  58. (IMHO)

  59. Split Completely

  60. I don’t like monoliths

  61. Two applications: one API, one frontend

  62. Rails or Sinatra for API
 A JS workflow for Frontend

  63. Surprisingly testable (and fast)

  64. One more thing…

  65. Volt is a framework for building data rich web applications

    shockingly fast. Play Video ! Get Started " Home Getting Started Docs API Blog Community # Volt Framework voltframework.com
  66. Спасибо
 Спасибі

  67. Questions?

  68. @myabc