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.

52cc8a838bf44a589d2572833b2dd1b9?s=128

Vladimir Dementyev

June 09, 2021
Tweet

Transcript

  1. Frontendless Rails Frontend Vladimir Dementyev Evil Martians

  2. palkan_tula palkan github.com/palkan 2

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

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

    again 🙂
  5. palkan_tula palkan 5 Full-stack Ruby on Rails development in 202😷s

    — is that a thing? The question
  6. Once upon a time...

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

  8. HTML (Haml/Slim) Helpers

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

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

  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();
  12. HTML (Haml/Slim) Asset Pipeline CoffeeScript jquery Helpers jquery-ujs Turbolinks Sass

    Bootstrap Bundler (asset gems) vendor/assets
  13. The evolution of frontend

  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
  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
  16. palkan_tula palkan 16 Is it possible to develop modern web

    application without stepping out of the Ruby and Rails comfort zone 🤔
  17. palkan_tula palkan 17 Living classics

  18. palkan_tula palkan 18 Neoclassical

  19. palkan_tula palkan NEW MAGIC hotwire.dev 19

  20. palkan_tula palkan 20 ?

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

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

    / Frames
  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
  24. palkan_tula palkan Turbo Frames Turbolinks for page fragments (frames) Lazy

    loading of page parts (plays well with HTTP cache) 24
  25. palkan_tula palkan Example 25

  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
  27. palkan_tula palkan Example 27 <!-- _item.html.erb --> <turbo-frame id="<%=dom_id(item)%>"> <%

    unless item.destroyed? %> <div class="<%=item.completed? ? "checked" : "" %>"> <%= form_for item do |f| %> <label class="any-check mr-4"> <%= f.check_box :completed, class: item.completed? ? "hidden checked" : "hidden", onchange: "this.form.requestSubmit();" %> </label> <% end %> <p><%= item.desc %> </p> <%= button_to item_path(item), method: :delete do %> <svg> ... </svg> <% end %> </div> <% end %> </turbo-frame>
  28. palkan_tula palkan Architecture Reactivity rails-ujs 28 Client-side rendering Server-side rendering

    Interactivity JS framework SPA Turbo Drive / Frames JS sprinkles
  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
  30. palkan_tula palkan Stimulus 30 stimulusjs.org

  31. palkan_tula palkan Example 31 Hide-able banners

  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); 🍜
  33. palkan_tula palkan Example: Stimulus 33 <div data-controller="banner"> <svg data-action="click ->banner#hide">

    </svg> <p>AnyWork ... </p> </div> import { Controller } from "stimulus"; export class BannerController extends Controller { hide() { this.element.remove(); } }
  34. palkan_tula palkan Stimulus Stimuli are activated/deactivated automatically (MutationObserver API) Turbo(links)

    just works without any hacks 34
  35. palkan_tula palkan Stimulus Turns static HTML into a component ...which

    should be implemented manually (in JS) ...or not 😎 35
  36. palkan_tula palkan Stimulus + Vue 36 github.com/gretchenfitze/stimulus-turbolinks

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

  38. Okay, okay, no more JavaScript!

  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
  40. palkan_tula palkan Phoenix LiveView 40

  41. palkan_tula palkan “A new way to craft modern, reactive web

    interfaces with Ruby on Rails.” 41
  42. palkan_tula palkan 42 Stimulus Reflex creator CableReady 🤔

  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
  44. palkan_tula palkan Example 44 <!-- _item.html.erb --> <div id="<%= dom_id(item)

    %>"> ... <%= button_to item_path(item), method: :delete, remote: true do %> <svg> ... </svg> <% end %> </div>
  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
  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()
  47. palkan_tula palkan CableReady 47 cableready.stimulusreflex.com

  48. palkan_tula palkan CableReady v5.0 Custom operations stream_from helper (like in

    Hotwire, see further) 48
  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
  50. None
  51. palkan_tula palkan Example 51

  52. palkan_tula palkan Example 52 <!-- _item.html.erb --> <div id="<%= dom_id(item)

    %>"> <label class="any-check mr-4"> <input type="checkbox" class="hidden" <%= item.completed? ? "checked" : "" %> data-reflex="change ->List#toggle_item_completion" data-item-id="<%= item.id %> > <svg> ... </svg> </label> <p><%= item.desc %> </p> <button data-reflex="click ->List#destroy_item" data-item-id="<%= item.id %>"> <svg> ... </svg> </button> </div>
  53. 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
  54. 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
  55. 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
  56. palkan_tula palkan StimulusReflex Stable & Mature (v3.4) Comprehensive documentation Active

    Discord community (>1k members) Works with AnyCable out-of-the-box 😉 56
  57. palkan_tula palkan StimulusReflex v4.0 Transport-agnostic (cables, SSE, message_bus, AJAX) Reliable

    data flow 57
  58. palkan_tula palkan More reflexions futurism—lazy-load HTML parts only when they

    become visible optimism—real-time remote form validations 58
  59. palkan_tula palkan More HTML-over-WS Turbo Streams Motion Live 59

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

    Zero JavaScript 60
  61. palkan_tula palkan Turbo Streams 61 <!-- app/views/workspaces/show.html.erb --> <div> <%=

    turbo_stream_from workspace %> <div id="<%= dom_id(workspace, :chat) %>" class="chat"> <h1><%= workspace.name %> </h1> <hr class="mt-1"> <div class="messages" id="<%= dom_id(workspace, :chat_messages) %>"> </div> </div> # 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
  62. palkan_tula palkan evilmartians.com/blog evilmartians.com/chronicles/hotwire-reactive-rails-with-no-javascript 62

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

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

  65. palkan_tula palkan 65 Everything is HTML. How to keep it

    under control?
  66. palkan_tula palkan Architecture Reactivity 66 Client-side rendering Server-side rendering Interactivity

    JS framework SPA Turbo Drive / Frames JS sprinkles HTML-over-WebSocket
  67. palkan_tula palkan evilmartians.com/blog evilmartians.com/chronicles/evil-front-part-1 67

  68. palkan_tula palkan 68 Think in components

  69. 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
  70. palkan_tula palkan View Components 70 partials decorators helpers facades presenters

    builders view components
  71. 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
  72. 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
  73. palkan_tula palkan Example 73 # app/components/button/component.html.erb <button class="btn"> <% if

    icon? %> <i><%= icon %> </i> <% end %> <% == label %> </button>
  74. palkan_tula palkan 74 # some.html.erb <div class="container"> <%= render Button

    ::Component.new(label: "Like", icon: "❤") %> </div> Example
  75. 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 <div class="container"> <%= render LikeButton.new %> </div> Example
  76. 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
  77. 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
  78. 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
  79. 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
  80. palkan_tula palkan View Component++ 80 A collection of extensions and

    developer toos for ViewComponent github.com/palkan/view_component-contrib
  81. palkan_tula palkan Alternatives Cells hanami-view dry-view komponent elemental_components 81

  82. 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
  83. palkan_tula palkan CSS after Bootstrap Bulma TailwindCSS Shoelace 83

  84. palkan_tula palkan Mobile-first CSS-only Modular and customizable (via Sass vars)

    Could be enhanced by Vue components (Buefy) 84
  85. palkan_tula palkan 85 Bulma + Stimulus + Buefy

  86. palkan_tula palkan Utility-first (no components, just classes) Components extraction mechanism

    (@apply) Fast prototyping (+playground) Optimized production and development builds (JIT) 86
  87. palkan_tula palkan 87

  88. palkan_tula palkan Web Components Customizable Accessibility 88

  89. palkan_tula palkan 89 <!-- flash/component.html.erb --> <sl-alert type="<%=type%>" duration="3000" closable

    open> <=%=body%> </sl-alert>
  90. palkan_tula palkan What to choose? Bulma—admin dashboards, or you know

    some Vue Shoelace—CRUD, admin dashboards TailwindCSS—user-facing interfaces 90
  91. In the end Or does it even matter?

  92. 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
  93. 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
  94. THANKS! @palkan @palkan_tula evilmartians.com @evilmartians discord.gg/stimulus-reflex