You might not need React

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Hi Marco @donschado Jakob @jkwebs

Slide 3

Slide 3 text

Legacy (Rails) Code 24.05.2016

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

User Interface == Asset

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Developing JavaScript Applications within Rails was not joyful…

Slide 12

Slide 12 text

⏭

Slide 13

Slide 13 text

Rails 5.1.0.beta1

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

the war is over

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

How to JavaScript in Rails?

Slide 20

Slide 20 text

Modern Rails Hybrid  Approach SPA +  Rails API

Slide 21

Slide 21 text

“Modern Rails”

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

SJR

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

1. Form is submitted via AJAX (UJS). 

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

2. Server creates or updates a model object.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Turbolinks

Slide 38

Slide 38 text

Consider to revisit it:

Slide 39

Slide 39 text

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 , and merges its , all without incurring the cost of a full page load. README.md

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Hybrid Approach

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Resources:

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

SPA

Slide 55

Slide 55 text

SPA + Rails API

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

shiny outside complex inside

Slide 59

Slide 59 text

shiny inside complex outside

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

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