You might not need React

Railslove We love to build the web. You might not
need React:  A Talk about Rails, JavaScript and Trade-Oﬀs Marco Schaden [email protected] Jakob Hilden [email protected]  <%= Date.today %>

Hi Marco @donschado Jakob @jkwebs

Legacy (Rails) Code 24.05.2016

Remember the old* days? How frontend development was done in
the Rails world…

User Interface == Asset

jQuery Spaghetti Backbone Marionette AngularJS EmberJS Grunt Gulp Bower Custom
jQuery “Wrapper” Frameworks Single Page Application?

Sprockets as the of the Asset Pipeline tried to keep
up…

Developing JavaScript Applications within Rails was not joyful…

Rails 5.1.0.beta1

the war is over

How to JavaScript in Rails?

Modern Rails Hybrid  Approach SPA +  Rails API

“Modern Rails”

Turbolinks Rails SJR + UJS stimulus.js }btw. no need for
the asset pipeline

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.

1. Form is submitted via AJAX (UJS). 

1. Form is submitted via AJAX (UJS).  the remote: true
option is on by default

2. Server creates or updates a model object.

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 %>") 

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

4. Client evaluates the JavaScript returned by the server,  
which then updates the DOM.

Unobtrusive JavaScript Adapter + Server-generated JavaScript Responses = Simple but
powerful combination

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

https://m.signalvnoise.com/stimulus-1-0-a-modest-javascript-framework-for-the-html-you-already-have-f04307009130 http://www.fullstackradio.com/83

Turbolinks

Consider to revisit it:

Turbolinks makes navigating your web application faster.     Get
the performance beneﬁts 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

Demo: https://game-of-life-turbo.herokuapp.com

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

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

Hybrid Approach

Easy to integrate: https://github.com/reactjs/react-rails

Resources:

Challenges of the Hybrid approach: I18n Sharing CSS between React
and Rails Node for server-side rendering => additional runtime dependency => harder to debug

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

SPA + Rails API

shiny outside complex inside

shiny inside complex outside

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

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 diﬀerent clients and platforms • native look and feel • requires skilled developers  /architects

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 ﬂexibel ﬂexibel, native

Railslove We love to build the web. KTHXBYE!

one more thing…

If you still want to write React…

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

You might not need React

You might not need React

More Decks by DonSchado

Other Decks in Technology

Featured

Transcript