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

[EMEA on Rails] Frontendless Rails

[EMEA on Rails] Frontendless Rails

Everything is cyclical, and web development is not an exception: ten years ago, we enjoyed developing Rails apps using HTML forms, a bit of AJAX, and jQuery—our productivity had no end! As interfaces gradually became more sophisticated, the "classic" approach began to give way to frontend frameworks, pushing Ruby into an API provider's role.

The situation started to change; the "new wave" is coming, and ViewComponent, StimulusReflex, and Hotwire are riding the crest.

In this talk, I'd like to demonstrate how we can develop modern "frontend" applications in the New Rails Way.

Vladimir Dementyev

June 09, 2021
Tweet

More Decks by Vladimir Dementyev

Other Decks in Programming

Transcript

  1. Frontendless
    Rails
    Frontend
    Vladimir Dementyev
    Evil Martians

    View full-size slide

  2. palkan_tula
    palkan
    github.com/palkan
    2

    View full-size slide

  3. palkan_tula
    palkan
    Web development today
    3
    This is me 😎

    View full-size slide

  4. palkan_tula
    palkan
    Back in 2010s
    4
    Full-stack developer
    It's me again 🙂

    View full-size slide

  5. palkan_tula
    palkan
    5
    Full-stack Ruby on Rails development in 202😷s
    — is that a thing?
    The question

    View full-size slide

  6. Once upon
    a time...

    View full-size slide

  7. palkan_tula
    palkan
    Full-stack Rails
    7
    HTML-over-the-Wire

    View full-size slide

  8. HTML (Haml/Slim)
    Helpers

    View full-size slide

  9. palkan_tula
    palkan
    Helpers 🙀
    9
    https://github.com/redmine/redmine

    View full-size slide

  10. HTML (Haml/Slim) CoffeeScript
    jquery
    Helpers
    jquery-ujs

    View full-size slide

  11. palkan_tula
    palkan
    jquery-ujs
    11
    # show.html.slim
    = link_to "Delete", post_path(post), remote: true
    # destroy.js.erb
    $("#<%= dom_id(post) %>").remove();

    View full-size slide

  12. HTML (Haml/Slim)
    Asset Pipeline
    CoffeeScript
    jquery
    Helpers
    jquery-ujs
    Turbolinks
    Sass
    Bootstrap
    Bundler (asset gems)
    vendor/assets

    View full-size slide

  13. The evolution
    of frontend

    View full-size slide

  14. HTML (Haml/Slim)
    Asset Pipeline
    CoffeeScript
    jquery
    Helpers
    jquery-ujs
    Turbolinks
    Sass
    Bootstrap
    Bundler (asset gems)
    vendor/assets
    npm / yarn
    ES6
    Webpack
    PostCSS
    React
    SPA
    API

    View full-size slide

  15. palkan_tula
    palkan
    Frontend Invasion
    Leads to separation (now we have back-end and
    front-end engineers)
    Makes Rails to serve only as an API provider
    Increases development costs*
    15
    *Opinions expressed are my own, but I'm fine if you borrow them

    View full-size slide

  16. palkan_tula
    palkan
    16
    Is it possible to develop modern web application
    without stepping out of the Ruby and Rails
    comfort zone 🤔

    View full-size slide

  17. palkan_tula
    palkan
    17
    Living classics

    View full-size slide

  18. palkan_tula
    palkan
    18
    Neoclassical

    View full-size slide

  19. palkan_tula
    palkan
    NEW MAGIC
    hotwire.dev
    19

    View full-size slide

  20. palkan_tula
    palkan
    20
    ?

    View full-size slide

  21. palkan_tula
    palkan
    21
    Client-side rendering
    Server-side rendering

    View full-size slide

  22. palkan_tula
    palkan
    22
    Client-side rendering
    Server-side rendering
    SPA
    Turbo Drive / Frames

    View full-size slide

  23. palkan_tula
    palkan
    Turbo Drive
    Poor man's SPA
    Intercepts navigation / forms submission, performs
    AJAX requests, replaces HTML body contents
    Keeps track of visited pages (cache) to provide
    smooth experience
    23
    ex-Turbolinks

    View full-size slide

  24. palkan_tula
    palkan
    Turbo Frames
    Turbolinks for page fragments (frames)
    Lazy loading of page parts (plays well with HTTP
    cache)
    24

    View full-size slide

  25. palkan_tula
    palkan
    Example
    25

    View full-size slide

  26. palkan_tula
    palkan
    Example
    26
    # app/controllers/items_controller.rb
    class ItemsController < ApplicationController
    def update
    item.update!(item_params)
    render partial: "item", locals: {item}
    end
    def destroy
    item.destroy!
    render partial: "item", locals: {item}
    end
    end

    View full-size slide

  27. palkan_tula
    palkan
    Example
    27


    <% unless item.destroyed? %>
    ">
    <%= form_for item do |f| %>

    <%= f.check_box :completed,
    class: item.completed? ? "hidden checked" : "hidden",
    onchange: "this.form.requestSubmit();" %>

    <% end %>
    <%= item.desc %>
    <%= button_to item_path(item), method: :delete do %>
    ...

    <% end %>

    <% end %>

    View full-size slide

  28. palkan_tula
    palkan
    Architecture
    Reactivity
    rails-ujs
    28
    Client-side rendering
    Server-side rendering
    Interactivity
    JS framework
    SPA
    Turbo Drive / Frames
    JS sprinkles

    View full-size slide

  29. palkan_tula
    palkan
    Architecture
    Reactivity
    rails-ujs
    Stimulus
    29
    Client-side rendering
    Server-side rendering
    Interactivity
    JS framework
    JS sprinkles
    SPA
    Turbo Drive / Frames

    View full-size slide

  30. palkan_tula
    palkan
    Stimulus
    30
    stimulusjs.org

    View full-size slide

  31. palkan_tula
    palkan
    Example
    31
    Hide-able banners

    View full-size slide

  32. palkan_tula
    palkan
    Example: jQuery
    32
    function initBannerClose(){

    // Oops, leaking CSS
    $('.banner --close').click(function(e){
    e.preventDefault();
    const banner = $(this).parent();
    banner.remove();
    });
    });
    $(document).on('load', initBannerClose);
    // And don't forget about Turbolinks
    $(document).on('turbolinks:load', initBannerClose);
    // ...or jquery-ujs
    $(document).on('ajax:success', initBannerClose);
    🍜

    View full-size slide

  33. palkan_tula
    palkan
    Example: Stimulus
    33


    AnyWork ...

    import { Controller } from "stimulus";
    export class BannerController extends Controller {
    hide() {
    this.element.remove();
    }
    }

    View full-size slide

  34. palkan_tula
    palkan
    Stimulus
    Stimuli are activated/deactivated automatically
    (MutationObserver API)
    Turbo(links) just works without any hacks
    34

    View full-size slide

  35. palkan_tula
    palkan
    Stimulus
    Turns static HTML into a component
    ...which should be implemented manually (in JS)
    ...or not 😎
    35

    View full-size slide

  36. palkan_tula
    palkan
    Stimulus + Vue
    36
    github.com/gretchenfitze/stimulus-turbolinks

    View full-size slide

  37. palkan_tula
    palkan
    More examples
    stimulusconnect.com
    betterstimulus.com
    github.com/stimulus-use/stimulus-use
    37

    View full-size slide

  38. Okay, okay,
    no more JavaScript!

    View full-size slide

  39. palkan_tula
    palkan
    Architecture
    Reactivity
    rails-ujs
    Stimulus
    39
    Client-side rendering
    Server-side rendering
    Interactivity
    JS framework
    SPA
    Turbo Drive / Frames
    JS sprinkles
    HTML-over-WebSocket

    View full-size slide

  40. palkan_tula
    palkan
    Phoenix LiveView
    40

    View full-size slide

  41. palkan_tula
    palkan
    “A new way to craft modern,
    reactive web interfaces with
    Ruby on Rails.”
    41

    View full-size slide

  42. palkan_tula
    palkan
    42
    Stimulus Reflex creator
    CableReady 🤔

    View full-size slide

  43. palkan_tula
    palkan
    CableReady
    A library to broadcast DOM modification
    commands from server to browsers
    Uses Action Cable as a transport
    Uses morphdom to update HTML
    43

    View full-size slide

  44. palkan_tula
    palkan
    Example
    44


    ...
    <%= button_to item_path(item),
    method: :delete,
    remote: true do %>
    ...
    <% end %>

    View full-size slide

  45. palkan_tula
    palkan
    Example
    45
    # items_controller.rb
    def destroy
    item.destroy!
    stream = ListChannel.broadcasting_for(item.list)
    cable_ready[stream].remove(selector: dom_id(item))
    head :no_content
    end

    View full-size slide

  46. palkan_tula
    palkan
    # items_controller.rb
    def destroy
    item.destroy!
    stream = ListChannel.broadcasting_for(item.list)
    cable_ready[stream].remove(selector: dom_id(item))
    head :no_content
    end
    Example
    46
    $(" ##{dom_id(item)}").remove()

    View full-size slide

  47. palkan_tula
    palkan
    CableReady
    47
    cableready.stimulusreflex.com

    View full-size slide

  48. palkan_tula
    palkan
    CableReady v5.0
    Custom operations
    stream_from helper (like in Hotwire, see further)
    48

    View full-size slide

  49. palkan_tula
    palkan
    StimulusReflex
    Reflexes react on user actions and render HTML
    responses
    CableReady is use to send HTML to clients and to
    update DOM
    49

    View full-size slide

  50. palkan_tula
    palkan
    Example
    51

    View full-size slide

  51. palkan_tula
    palkan
    Example
    52



    <%= item.completed? ? "checked" : "" %>
    data-reflex="change ->List#toggle_item_completion"
    data-item-id="<%= item.id %>
    >
    ...

    <%= item.desc %>
    data-item-id="<%= item.id %>">
    ...


    View full-size slide

  52. palkan_tula
    palkan
    Example
    53
    class ListReflex < ApplicationReflex
    def toggle_item_completion
    item = find_item
    item.toggle!(:completed)
    html = render_partial("items/item", {item})
    selector = dom_id(item)
    cable_ready[
    ListChannel.broadcasting_for(item.list)
    ].outer_html(selector:, html:)
    cable_ready.broadcast
    morph_flash :notice, "Item has been updated"
    end
    private def find_item
    Item.find element.dataset["item-id"]
    end
    end

    View full-size slide

  53. palkan_tula
    palkan
    Example
    54
    class ListReflex < ApplicationReflex
    def toggle_item_completion
    item = find_item
    item.toggle!(:completed)
    html = render_partial("items/item", {item})
    selector = dom_id(item)
    cable_ready[
    ListChannel.broadcasting_for(item.list)
    ].outer_html(selector:, html:)
    cable_ready.broadcast
    morph_flash :notice, "Item has been updated"
    end
    private def find_item
    Item.find element.dataset["item-id"]
    end
    end
    Broadcast DOM to all connected
    clients
    Show flash-notification to the current
    user
    Object representing the current
    element data attributes

    View full-size slide

  54. palkan_tula
    palkan
    Example
    55
    class ApplicationReflex < StimulusReflex ::Reflex
    private
    def morph_flash(type, message)
    morph "#flash", render_partial(
    "shared/alerts",
    {flash: {type => message}}
    )
    end
    end

    View full-size slide

  55. palkan_tula
    palkan
    StimulusReflex
    Stable & Mature (v3.4)
    Comprehensive documentation
    Active Discord community (>1k members)
    Works with AnyCable out-of-the-box 😉
    56

    View full-size slide

  56. palkan_tula
    palkan
    StimulusReflex v4.0
    Transport-agnostic (cables, SSE, message_bus,
    AJAX)
    Reliable data flow
    57

    View full-size slide

  57. palkan_tula
    palkan
    More reflexions
    futurism—lazy-load HTML parts only when they
    become visible
    optimism—real-time remote form validations
    58

    View full-size slide

  58. palkan_tula
    palkan
    More HTML-over-WS
    Turbo Streams
    Motion
    Live
    59

    View full-size slide

  59. palkan_tula
    palkan
    Turbo Streams
    Minimalistic CableReady (only 5 actions)
    Transport-agnostic
    Zero JavaScript
    60

    View full-size slide

  60. palkan_tula
    palkan
    Turbo Streams
    61


    <%= turbo_stream_from workspace %>

    <%= workspace.name %>




    # app/controllers/chat/messages_controller.rb
    class MessagesController < ApplicationController
    def create
    Turbo ::StreamsChannel.broadcast_append_to(
    workspace,
    target: ActionView ::RecordIdentifier.dom_id(workspace, :chat_messages),
    partial: "chats/message",
    locals: {message: params[:message], name: current_user.name}
    )
    head :ok
    end
    end

    View full-size slide

  61. palkan_tula
    palkan
    evilmartians.com/blog
    evilmartians.com/chronicles/hotwire-reactive-rails-with-no-javascript
    62

    View full-size slide

  62. palkan_tula
    palkan
    Motion
    63
    github.com/unabridged/motion

    View full-size slide

  63. palkan_tula
    palkan
    Live
    *copyright / url caption
    64
    github.com/socketry/live

    View full-size slide

  64. palkan_tula
    palkan
    65
    Everything is HTML. How to keep it under control?

    View full-size slide

  65. palkan_tula
    palkan
    Architecture
    Reactivity
    66
    Client-side rendering
    Server-side rendering
    Interactivity
    JS framework
    SPA
    Turbo Drive / Frames
    JS sprinkles
    HTML-over-WebSocket

    View full-size slide

  66. palkan_tula
    palkan
    evilmartians.com/blog
    evilmartians.com/chronicles/evil-front-part-1
    67

    View full-size slide

  67. palkan_tula
    palkan
    68
    Think in components

    View full-size slide

  68. palkan_tula
    palkan
    Architecture
    Reactivity
    69
    Client-side rendering
    Server-side rendering
    Interactivity
    JS framework
    SPA
    Turbo Drive / Frames
    JS sprinkles
    HTML-over-WebSocket
    View Components

    View full-size slide

  69. palkan_tula
    palkan
    View Components
    70
    partials
    decorators
    helpers
    facades
    presenters
    builders
    view components

    View full-size slide

  70. palkan_tula
    palkan
    View Component
    "Ruby objects that output HTML"
    View Model + template
    Isolated, testable, reusable
    Made by GitHub
    71
    github.com/github/view_component

    View full-size slide

  71. palkan_tula
    palkan
    Example
    72
    # app/components/button/component.rb
    class Button ::Component < ViewComponent ::Base
    attr_reader :label, :icon
    def initialize(label:, icon: nil)
    @label = label
    @icon = icon
    end
    alias icon? icon
    end

    View full-size slide

  72. palkan_tula
    palkan
    Example
    73
    # app/components/button/component.html.erb

    <% if icon? %>
    <%= icon %>
    <% end %>
    <% == label %>

    View full-size slide

  73. palkan_tula
    palkan
    74
    # some.html.erb

    <%= render Button ::Component.new(label: "Like", icon: "❤") %>

    Example

    View full-size slide

  74. palkan_tula
    palkan
    75
    # app/components/like_button.rb
    class LikeButton < Button ::Component
    def initialize
    super(label: I18n.t("like"), icon: "❤")
    end
    end
    # some.html.erb

    <%= render LikeButton.new %>

    Example

    View full-size slide

  75. palkan_tula
    palkan
    76
    # test/components/button_test.rb
    class Button ::ComponentTest < ActiveSupport ::TestCase
    include ViewComponent ::TestHelpers
    def test_render
    render_inline Button ::Component.new(label: "Test")
    assert_selector "button.btn", text: "Test"
    assert_no_selector "button.btn i"
    end
    def test_render_with_icon
    render_inline Button ::Component.new(label: "Test", icon: "✔")
    assert_selector "button.btn", text: "Test"
    assert_selector "button.btn i", text: "✔"
    end
    end
    Example

    View full-size slide

  76. palkan_tula
    palkan
    View Component
    Plays nicely with Rails (Rails way)
    Faster rendering (up to 10x faster than partials)
    Preview functionality (similarly to mailers)
    77

    View full-size slide

  77. palkan_tula
    palkan
    View Component
    78
    app/
    frontend/
    components/
    banner/
    component.rb
    component.html.slim
    component.css
    component.js
    Keep HTML, CSS, JS, etc. together

    View full-size slide

  78. palkan_tula
    palkan
    View Component++
    79
    app/
    frontend/
    components/
    chat/
    component.rb
    component.html.slim
    component.css
    component.js
    controller.js
    preview.rb
    preview.html.slim
    reflex.rb
    Keep HTML, CSS, JS, Stimulus controllers, reflexes,
    previews, etc. together

    View full-size slide

  79. palkan_tula
    palkan
    View Component++
    80
    A collection of extensions and developer
    toos for ViewComponent
    github.com/palkan/view_component-contrib

    View full-size slide

  80. palkan_tula
    palkan
    Alternatives
    Cells
    hanami-view
    dry-view
    komponent
    elemental_components
    81

    View full-size slide

  81. palkan_tula
    palkan
    82
    Client-side rendering
    Server-side rendering
    JS framework
    SPA
    Turbo Drive / Frames
    JS sprinkles
    HTML-over-WebSocket
    View Components
    CSS-in-JS / PostCSS

    View full-size slide

  82. palkan_tula
    palkan
    CSS after Bootstrap
    Bulma
    TailwindCSS
    Shoelace
    83

    View full-size slide

  83. palkan_tula
    palkan
    Mobile-first
    CSS-only
    Modular and customizable (via Sass vars)
    Could be enhanced by Vue components (Buefy)
    84

    View full-size slide

  84. palkan_tula
    palkan
    85
    Bulma + Stimulus + Buefy

    View full-size slide

  85. palkan_tula
    palkan
    Utility-first (no components, just classes)
    Components extraction mechanism (@apply)
    Fast prototyping (+playground)
    Optimized production and development builds
    (JIT)
    86

    View full-size slide

  86. palkan_tula
    palkan
    87

    View full-size slide

  87. palkan_tula
    palkan
    Web Components
    Customizable
    Accessibility
    88

    View full-size slide

  88. palkan_tula
    palkan
    89

    <=%=body%>

    View full-size slide

  89. palkan_tula
    palkan
    What to choose?
    Bulma—admin dashboards, or you know some Vue
    Shoelace—CRUD, admin dashboards
    TailwindCSS—user-facing interfaces
    90

    View full-size slide

  90. In the end
    Or does it even matter?

    View full-size slide

  91. palkan_tula
    palkan
    HTML-over-WebSocket (StimulusReflex, Turbo Streams, etc)
    JS sprinkles (Stimulus)
    Fake SPA (Turbo)
    Component-based architectures (ViewComponent,
    komponent, etc.)
    Modern CSS frameworks and tools (Tailwind, Shoelace,
    Bulma)
    92
    Frontendless Rails Way

    View full-size slide

  92. palkan_tula
    palkan
    Frontendless Rails Way
    Could be used instead of JS/SPA approach for
    applications with not-so-tricky UI (dashboards,
    CRUD-s, etc.)
    Increases productivity (though not for free)
    We're just in the beginning of the New Era!
    93

    View full-size slide

  93. THANKS!
    @palkan
    @palkan_tula
    evilmartians.com
    @evilmartians
    discord.gg/stimulus-reflex

    View full-size slide