Slide 1
Slide 1 text
Frontendless
Rails
Frontend
Vladimir Dementyev
Evil Martians
Slide 2
Slide 2 text
palkan_tula
palkan
github.com/palkan
2
Slide 3
Slide 3 text
palkan_tula
palkan
Web development today
3
This is me 😎
Slide 4
Slide 4 text
palkan_tula
palkan
Back in 2010s
4
Full-stack developer
It's me again 🙂
Slide 5
Slide 5 text
palkan_tula
palkan
5
Full-stack Ruby on Rails development in 202😷s
— is that a thing?
The question
Slide 6
Slide 6 text
Once upon
a time...
Slide 7
Slide 7 text
palkan_tula
palkan
Full-stack Rails
7
HTML-over-the-Wire
Slide 8
Slide 8 text
HTML (Haml/Slim)
Helpers
Slide 9
Slide 9 text
palkan_tula
palkan
Helpers 🙀
9
https://github.com/redmine/redmine
Slide 10
Slide 10 text
HTML (Haml/Slim) CoffeeScript
jquery
Helpers
jquery-ujs
Slide 11
Slide 11 text
palkan_tula
palkan
jquery-ujs
11
# show.html.slim
= link_to "Delete", post_path(post), remote: true
# destroy.js.erb
$("#<%= dom_id(post) %>").remove();
Slide 12
Slide 12 text
HTML (Haml/Slim)
Asset Pipeline
CoffeeScript
jquery
Helpers
jquery-ujs
Turbolinks
Sass
Bootstrap
Bundler (asset gems)
vendor/assets
Slide 13
Slide 13 text
The evolution
of frontend
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
palkan_tula
palkan
16
Is it possible to develop modern web application
without stepping out of the Ruby and Rails
comfort zone 🤔
Slide 17
Slide 17 text
palkan_tula
palkan
17
Living classics
Slide 18
Slide 18 text
palkan_tula
palkan
18
Neoclassical
Slide 19
Slide 19 text
palkan_tula
palkan
NEW MAGIC
hotwire.dev
19
Slide 20
Slide 20 text
palkan_tula
palkan
20
?
Slide 21
Slide 21 text
palkan_tula
palkan
21
Client-side rendering
Server-side rendering
Slide 22
Slide 22 text
palkan_tula
palkan
22
Client-side rendering
Server-side rendering
SPA
Turbo Drive / Frames
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
palkan_tula
palkan
Turbo Frames
Turbolinks for page fragments (frames)
Lazy loading of page parts (plays well with HTTP
cache)
24
Slide 25
Slide 25 text
palkan_tula
palkan
Example
25
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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 %>
<% end %>
<%= item.desc %>
<%= button_to item_path(item), method: :delete do %> ... <% end %>Slide 28
Slide 28 text
palkan_tula
palkan
Architecture
Reactivity
rails-ujs
28
Client-side rendering
Server-side rendering
Interactivity
JS framework
SPA
Turbo Drive / Frames
JS sprinkles
Slide 29
Slide 29 text
palkan_tula
palkan
Architecture
Reactivity
rails-ujs
Stimulus
29
Client-side rendering
Server-side rendering
Interactivity
JS framework
JS sprinkles
SPA
Turbo Drive / Frames
Slide 30
Slide 30 text
palkan_tula
palkan
Stimulus
30
stimulusjs.org
Slide 31
Slide 31 text
palkan_tula
palkan
Example
31
Hide-able banners
Slide 32
Slide 32 text
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);
🍜
Slide 33
Slide 33 text
palkan_tula
palkan
Example: Stimulus
33
import { Controller } from "stimulus";
export class BannerController extends Controller {
hide() {
this.element.remove();
}
}
AnyWork ...
Slide 34
Slide 34 text
palkan_tula
palkan
Stimulus
Stimuli are activated/deactivated automatically
(MutationObserver API)
Turbo(links) just works without any hacks
34
Slide 35
Slide 35 text
palkan_tula
palkan
Stimulus
Turns static HTML into a component
...which should be implemented manually (in JS)
...or not 😎
35
Slide 36
Slide 36 text
palkan_tula
palkan
Stimulus + Vue
36
github.com/gretchenfitze/stimulus-turbolinks
Slide 37
Slide 37 text
palkan_tula
palkan
More examples
stimulusconnect.com
betterstimulus.com
github.com/stimulus-use/stimulus-use
37
Slide 38
Slide 38 text
Okay, okay,
no more JavaScript!
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
palkan_tula
palkan
Phoenix LiveView
40
Slide 41
Slide 41 text
palkan_tula
palkan
“A new way to craft modern,
reactive web interfaces with
Ruby on Rails.”
41
Slide 42
Slide 42 text
palkan_tula
palkan
42
Stimulus Reflex creator
CableReady 🤔
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
palkan_tula
palkan
Example
44
...
<%= button_to item_path(item),
method: :delete,
remote: true do %>
...
<% end %>
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
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()
Slide 47
Slide 47 text
palkan_tula
palkan
CableReady
47
cableready.stimulusreflex.com
Slide 48
Slide 48 text
palkan_tula
palkan
CableReady v5.0
Custom operations
stream_from helper (like in Hotwire, see further)
48
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
palkan_tula
palkan
Example
51
Slide 52
Slide 52 text
palkan_tula
palkan
Example
52
data-reflex="change ->List#toggle_item_completion"
data-item-id="<%= item.id %>
>
...
<%= item.desc %>
...Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
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
Slide 55
Slide 55 text
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
Slide 56
Slide 56 text
palkan_tula
palkan
StimulusReflex
Stable & Mature (v3.4)
Comprehensive documentation
Active Discord community (>1k members)
Works with AnyCable out-of-the-box 😉
56
Slide 57
Slide 57 text
palkan_tula
palkan
StimulusReflex v4.0
Transport-agnostic (cables, SSE, message_bus,
AJAX)
Reliable data flow
57
Slide 58
Slide 58 text
palkan_tula
palkan
More reflexions
futurism—lazy-load HTML parts only when they
become visible
optimism—real-time remote form validations
58
Slide 59
Slide 59 text
palkan_tula
palkan
More HTML-over-WS
Turbo Streams
Motion
Live
59
Slide 60
Slide 60 text
palkan_tula
palkan
Turbo Streams
Minimalistic CableReady (only 5 actions)
Transport-agnostic
Zero JavaScript
60
Slide 61
Slide 61 text
palkan_tula
palkan
Turbo Streams
61
<%= turbo_stream_from workspace %>
# 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
<%= workspace.name %>
Slide 62
Slide 62 text
palkan_tula
palkan
evilmartians.com/blog
evilmartians.com/chronicles/hotwire-reactive-rails-with-no-javascript
62
Slide 63
Slide 63 text
palkan_tula
palkan
Motion
63
github.com/unabridged/motion
Slide 64
Slide 64 text
palkan_tula
palkan
Live
*copyright / url caption
64
github.com/socketry/live
Slide 65
Slide 65 text
palkan_tula
palkan
65
Everything is HTML. How to keep it under control?
Slide 66
Slide 66 text
palkan_tula
palkan
Architecture
Reactivity
66
Client-side rendering
Server-side rendering
Interactivity
JS framework
SPA
Turbo Drive / Frames
JS sprinkles
HTML-over-WebSocket
Slide 67
Slide 67 text
palkan_tula
palkan
evilmartians.com/blog
evilmartians.com/chronicles/evil-front-part-1
67
Slide 68
Slide 68 text
palkan_tula
palkan
68
Think in components
Slide 69
Slide 69 text
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
Slide 70
Slide 70 text
palkan_tula
palkan
View Components
70
partials
decorators
helpers
facades
presenters
builders
view components
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
palkan_tula
palkan
Example
73
# app/components/button/component.html.erb
<% if icon? %>
<%= icon %>
<% end %>
<% == label %>
Slide 74
Slide 74 text
palkan_tula
palkan
74
# some.html.erb
<%= render Button ::Component.new(label: "Like", icon: "❤") %>
Example
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
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
Slide 77
Slide 77 text
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
Slide 78
Slide 78 text
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
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
palkan_tula
palkan
View Component++
80
A collection of extensions and developer
toos for ViewComponent
github.com/palkan/view_component-contrib
Slide 81
Slide 81 text
palkan_tula
palkan
Alternatives
Cells
hanami-view
dry-view
komponent
elemental_components
81
Slide 82
Slide 82 text
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
Slide 83
Slide 83 text
palkan_tula
palkan
CSS after Bootstrap
Bulma
TailwindCSS
Shoelace
83
Slide 84
Slide 84 text
palkan_tula
palkan
Mobile-first
CSS-only
Modular and customizable (via Sass vars)
Could be enhanced by Vue components (Buefy)
84
Slide 85
Slide 85 text
palkan_tula
palkan
85
Bulma + Stimulus + Buefy
Slide 86
Slide 86 text
palkan_tula
palkan
Utility-first (no components, just classes)
Components extraction mechanism (@apply)
Fast prototyping (+playground)
Optimized production and development builds
(JIT)
86
Slide 87
Slide 87 text
palkan_tula
palkan
87
Slide 88
Slide 88 text
palkan_tula
palkan
Web Components
Customizable
Accessibility
88
Slide 89
Slide 89 text
palkan_tula
palkan
89
<=%=body%>
Slide 90
Slide 90 text
palkan_tula
palkan
What to choose?
Bulma—admin dashboards, or you know some Vue
Shoelace—CRUD, admin dashboards
TailwindCSS—user-facing interfaces
90
Slide 91
Slide 91 text
In the end
Or does it even matter?
Slide 92
Slide 92 text
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
Slide 93
Slide 93 text
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
Slide 94
Slide 94 text
THANKS!
@palkan
@palkan_tula
evilmartians.com
@evilmartians
discord.gg/stimulus-reflex