You might not need React

5b7ac75124cebf11ff0de894b365198e?s=47 DonSchado
December 12, 2018

You might not need React

In this talk we discuss 3 different strategies to do JavaScript in Rails Applications and when which might be appropriate.

5b7ac75124cebf11ff0de894b365198e?s=128

DonSchado

December 12, 2018
Tweet

Transcript

  1. Railslove We love to build the web. You might not

    need React:
 A Talk about Rails, JavaScript and Trade-Offs Marco Schaden marco@railslove.com Jakob Hilden jakob@railslove.com
 <%= Date.today %>
  2. Hi Marco @donschado Jakob @jkwebs

  3. Legacy (Rails) Code 24.05.2016

  4. None
  5. Remember the old* days? How frontend development was done in

    the Rails world…
  6. None
  7. User Interface == Asset

  8. jQuery Spaghetti Backbone Marionette AngularJS EmberJS Grunt Gulp Bower Custom

    jQuery “Wrapper” Frameworks Single Page Application?
  9. None
  10. Sprockets as the of the Asset Pipeline tried to keep

    up…
  11. Developing JavaScript Applications within Rails was not joyful…

  12. Rails 5.1.0.beta1

  13. None
  14. None
  15. the war is over

  16. None
  17. None
  18. How to JavaScript in Rails?

  19. Modern Rails Hybrid
 Approach SPA +
 Rails API

  20. “Modern Rails”

  21. Turbolinks Rails SJR + UJS stimulus.js }btw. no need for

    the asset pipeline
  22. SJR

  23. 1. Form is submitted via AJAX (UJS).
 2. Server creates

    or updates a model object.
 3. Server generates a JavaScript response that includes the rendered 
 HTML template for the model.
 4. Client evaluates the JavaScript returned by the server, 
 which then updates the DOM.
  24. 1. Form is submitted via AJAX (UJS).


  25. 1. Form is submitted via AJAX (UJS).
 the remote: true

    option is on by default
  26. 2. Server creates or updates a model object.

  27. 3. Server generates a JavaScript response that includes the rendered

    
 HTML template for the model. *you also might not need jQuery btw ;) # app/views/messages/create.js.erb document.getElementById("message") .insertAdjacentHTML("afterbegin", "<%= j render @message %>")

  28. Alternatives could be: # app/views/messages/create.js.erb
 document.getElementById("<%= dom_id(@message) %>") .innerHTML =

    "<%= j render @message %>"
 # app/views/messages/destroy.js.erb
 document.getElementById("<%= dom_id(@message) %>") .remove()
 # app/views/messages/edit.js.erb
 document.getElementById("<%= dom_id(@message) %>") .innerHTML = "<%= j render 'form' %>"

  29. 4. Client evaluates the JavaScript returned by the server, 


    which then updates the DOM.
  30. None
  31. None
  32. Unobtrusive JavaScript Adapter + Server-generated JavaScript Responses = Simple but

    powerful combination
  33. Resources: A definitive guide to Rails’ unobtrusive JavaScript adapter
 https://m.patrikonrails.com/a-definitive-guide-to-railss-unobtrusive-javascript-adapter-ef13bd047fff

    Server-generated JavaScript Responses https://signalvnoise.com/posts/3697-server-generated-javascript-responses Working with JavaScript in Rails https://guides.rubyonrails.org/working_with_javascript_in_rails.html
  34. None
  35. https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130 http://www.fullstackradio.com/83

  36. Turbolinks

  37. Consider to revisit it:

  38. Turbolinks makes navigating your web application faster. 
 
 Get

    the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. 
 Use HTML to render your views on the server side and link to pages as usual. 
 When you follow a link, Turbolinks automatically fetches the page, swaps in its <body>, and merges its <head>, all without incurring the cost of a full page load. README.md
  39. None
  40. Demo: https://game-of-life-turbo.herokuapp.com

  41. Challenges of the Modern Rails approach: Features distributed over all

    layers “Basecamp style” has a smaller eco system Hard to build very “complex” UI ( lots of interdependent state ) No integrated solution for CSS
  42. Modern 
 Rails Hybrid
 Approach SPA +
 Rails API •

    THE fastest way to get a working product shipped
 (especially small teams) • simple requirements
 = simple solutions • less JS skills needed
 • supports any device 
 that can show html
  43. Hybrid Approach

  44. None
  45. None
  46. Easy to integrate: https://github.com/reactjs/react-rails

  47. None
  48. None
  49. None
  50. Resources:

  51. Challenges of the Hybrid approach: I18n Sharing CSS between React

    and Rails Node for server-side rendering => additional runtime dependency => harder to debug
  52. Modern 
 Rails Hybrid
 Approach SPA +
 Rails API •

    really great to extend and modernise "legacy" apps
 • component based design • easy integration that enables clean solutions for complex interactions • the strength of both eco systems • THE fastest way to get a working product shipped
 (especially small teams) • simple requirements
 = simple solutions • less JS skills needed
 • supports any device 
 that can show html
  53. SPA

  54. SPA + Rails API

  55. None
  56. None
  57. shiny outside complex inside

  58. shiny inside complex outside

  59. Challenges SPA+API: API design (REST vs GraphQL) Fetch and serialize

    JSON Layer to handle errors Security and Authentication Duplicate logic, validations Dev setup and development Integration testing Deployment Slow devices and network
  60. Modern 
 Rails Hybrid
 Approach SPA +
 Rails API •

    THE fastest way to get a working product shipped
 (especially small teams) • simple requirements
 = simple solutions • less JS skills needed
 • supports any device 
 that can show html • really great to extend and modernise "legacy" apps
 • component based design • easy integration that enables clean solutions for complex interactions • the strength of both eco systems • strategy for very big teams with separate departments and parallel projects • most versatile to support different clients and platforms • native look and feel • requires skilled developers
 /architects
  61. None
  62. Team Size Modern 
 Rails Hybrid
 Approach SPA +
 Rails

    API Cross Platform Support Complexity (testability + maintainability) UI/UX Requirements small - mid mid big basic mid advanced low - manageable mid - high very high simple flexibel flexibel, native
  63. Railslove We love to build the web. KTHXBYE!

  64. one more thing…

  65. If you still want to write React…

  66. React Barcamp 2019 26th - 27th January in Cologne https://react-barcamp.de