Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View Slide

  2. Hi
    Marco
    @donschado
    Jakob
    @jkwebs

    View Slide

  3. Legacy (Rails) Code 24.05.2016

    View Slide

  4. View Slide

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

    View Slide

  6. View Slide

  7. User Interface == Asset

    View Slide

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

    View Slide

  9. View Slide

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

    View Slide

  11. Developing JavaScript Applications
    within Rails was not joyful…

    View Slide


  12. View Slide

  13. Rails 5.1.0.beta1

    View Slide

  14. View Slide

  15. View Slide


  16. the war is over

    View Slide

  17. View Slide

  18. View Slide

  19. How to JavaScript in Rails?

    View Slide

  20. Modern
    Rails
    Hybrid

    Approach
    SPA +

    Rails API

    View Slide

  21. “Modern Rails”

    View Slide

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

    View Slide

  23. SJR

    View Slide

  24. 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.

    View Slide

  25. 1. Form is submitted via AJAX (UJS).


    View Slide

  26. 1. Form is submitted via AJAX (UJS).

    the remote: true option is on by default

    View Slide

  27. 2. Server creates or updates a model object.

    View Slide

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


    View Slide

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


    View Slide

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

    which then updates the DOM.

    View Slide

  31. View Slide

  32. View Slide

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

    View Slide

  34. 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

    View Slide

  35. View Slide

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

    View Slide

  37. Turbolinks

    View Slide

  38. Consider to revisit it:

    View Slide

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

    View Slide

  40. View Slide

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

    View Slide

  42. 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

    View Slide

  43. 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

    View Slide

  44. Hybrid Approach

    View Slide

  45. View Slide

  46. View Slide

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

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. Resources:

    View Slide

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

    View Slide

  53. 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

    View Slide

  54. SPA

    View Slide

  55. SPA + Rails API

    View Slide

  56. View Slide

  57. View Slide

  58. shiny outside
    complex inside

    View Slide

  59. shiny inside
    complex outside

    View Slide

  60. 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

    View Slide

  61. 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

    View Slide

  62. View Slide

  63. 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

    View Slide

  64. Railslove
    We love to build the web.
    KTHXBYE!

    View Slide

  65. one more thing…

    View Slide

  66. If you still want to write React…

    View Slide

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

    View Slide