$30 off During Our Annual Pro Sale. View Details »

You might not need React

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.

DonSchado

December 12, 2018
Tweet

More Decks by DonSchado

Other Decks in Technology

Transcript

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

    need React:
 A Talk about Rails, JavaScript and Trade-Offs Marco Schaden [email protected] Jakob Hilden [email protected]
 <%= Date.today %>
  2. jQuery Spaghetti Backbone Marionette AngularJS EmberJS Grunt Gulp Bower Custom

    jQuery “Wrapper” Frameworks Single Page Application?
  3. SJR

  4. 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.
  5. 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 %>")

  6. 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' %>"

  7. 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
  8. 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
  9. 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
  10. 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
  11. Challenges of the Hybrid approach: I18n Sharing CSS between React

    and Rails Node for server-side rendering => additional runtime dependency => harder to debug
  12. 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
  13. SPA

  14. 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
  15. 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
  16. 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