Slide 1
Slide 1 text
HTML-OVER-
WEBSOCKETS
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
Full-stack Rails
5
HTML-over-the-Wire
Slide 6
Slide 6 text
HTML (Haml/Slim)
Helpers
CoffeeScript
jquery
jquery-ujs
Asset Pipeline
Turbolinks
Sass
Bootstrap
Bundler (asset gems)
vendor/assets
Slide 7
Slide 7 text
HTML (Haml/Slim)
Asset Pipeline
CoffeeScript
jquery
Helpers
jquery-ujs
Turbolinks
Sass
Bootstrap
Bundler (asset gems)
vendor/assets
ES6
Webpack
PostCSS React
SPA
API
npm / yarn
Slide 8
Slide 8 text
palkan_tula
palkan
8
Full-stack Ruby on Rails development in 202😷s
— is that a thing?
Slide 9
Slide 9 text
YES
Slide 10
Slide 10 text
palkan_tula
palkan
Frontendless Rails
RailsConf 2021
10
Slide 11
Slide 11 text
palkan_tula
palkan
HTML-over-
WebSockets:
The overview
11
Slide 12
Slide 12 text
palkan_tula
palkan
Phoenix LiveView
12
Slide 13
Slide 13 text
palkan_tula
palkan
Phoenix LiveView
HTML elements «connects» to an Erlang process via WebSocket
Process reacts on user interaction and re-renders the affected
template parts and sends to the client
Client uses morphdom to perform a fast DOM patching
13
Slide 14
Slide 14 text
palkan_tula
palkan
morphdom
14
Slide 15
Slide 15 text
palkan_tula
palkan
LiveView
15
https://my-live.app
Browser
events
Partial HTML
updates
Internal
events
Erlang process
DOM element
Slide 16
Slide 16 text
palkan_tula
palkan
Partial HTML updates
16
" id="<%= dom_id(item) %>">
>
<%= item.desc %>
Slide 17
Slide 17 text
palkan_tula
palkan
Partial HTML updates
17
" id="<%= dom_id(item) %>">
>
Static vs. Dynamic
0 1
2
3
{
"0": "checked",
"2": "checked"
}
<%= item.desc %>
Slide 18
Slide 18 text
palkan_tula
palkan
Phoenix LiveView
Component-driven architecture
Erlang ecosystem (processes and message passing)
Dedicated templating mechanism
18
Slide 19
Slide 19 text
BACK TO RUBY
Slide 20
Slide 20 text
palkan_tula
palkan
“A new way to craft modern,
reactive web interfaces with
Ruby on Rails.”
20
Slide 21
Slide 21 text
palkan_tula
palkan
21
Stimulus Reflex creator
CableReady 🤔
Slide 22
Slide 22 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
22
Slide 23
Slide 23 text
palkan_tula
palkan
Example
23
...
<%= button_to item_path(item),
method: :delete,
remote: true do %>
...
<% end %>
Slide 24
Slide 24 text
palkan_tula
palkan
Example
24
# 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 25
Slide 25 text
palkan_tula
palkan
Example
25
# 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
$(" ##{dom_id(item)}").remove()
Slide 26
Slide 26 text
palkan_tula
palkan
CableReady
26
cableready.stimulusreflex.com
Slide 27
Slide 27 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
27
Slide 28
Slide 28 text
palkan_tula
palkan
Stimulus
28
stimulusjs.org
Slide 29
Slide 29 text
palkan_tula
palkan
Example
29
Hide-able banners
Slide 30
Slide 30 text
palkan_tula
palkan
Example: jQuery
30
🍜
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 31
Slide 31 text
palkan_tula
palkan
Example: Stimulus
31
import { Controller } from "stimulus";
export class BannerController extends Controller {
hide() {
this.element.remove();
}
}
Slide 32
Slide 32 text
palkan_tula
palkan
Stimulus
Stimuli are activated/deactivated
automatically (MutationObserver API)
Just drop an element with `data-controller`
onto a page (like Custom Elements)
32
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
palkan_tula
palkan
StimulusReflex
34
https://my-reflex.app
Browser events ➝
reflex class & action
CableReady
operation
Action Cable broadcast
from anywhere
Reflex class
DOM element
Document
Slide 35
Slide 35 text
palkan_tula
palkan
Example
35
Slide 36
Slide 36 text
palkan_tula
palkan
Example
36
data-reflex="change ->List#toggle_item_completion"
data-item-id="<%= item.id %>
>
...
<%= item.desc %>
...Slide 37
Slide 37 text
palkan_tula
palkan
Example
37
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 38
Slide 38 text
palkan_tula
palkan
Example
38
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 updates to all
connected clients
Show flash-notification to the current
user
Object representing the current
element data attributes
Slide 39
Slide 39 text
palkan_tula
palkan
Example
39
class ApplicationReflex < StimulusReflex ::Reflex
private
def morph_flash(type, message)
morph "#flash", render_partial(
"shared/alerts",
{flash: {type => message}}
)
end
end
Slide 40
Slide 40 text
palkan_tula
palkan
StimulusReflex
Introduces a new abstraction layer (reflexes)
Unscoped DOM updates (you can even update the
whole page)
DOM manipulations could be customized to infinity
40
Slide 41
Slide 41 text
palkan_tula
palkan
StimulusReflex
Stable & Mature (v4)
Works with AnyCable out-of-the-box
41
Slide 42
Slide 42 text
palkan_tula
palkan
StimulusReflex
Comprehensive documentation
Active Discord community (>1k members)
42
discord.gg/stimulus-reflex
Slide 43
Slide 43 text
palkan_tula
palkan
NEW MAGIC
hotwire.dev
43
Slide 44
Slide 44 text
palkan_tula
palkan
Hotwire
Turbo
Stimulus
Strada
44
Slide 45
Slide 45 text
palkan_tula
palkan
Turbo
Drive (ex-Turbolinks)
Frames
Streams
45
Slide 46
Slide 46 text
palkan_tula
palkan
evilmartians.com/blog
evilmartians.com/chronicles/hotwire-reactive-rails-with-no-javascript
46
Slide 47
Slide 47 text
palkan_tula
palkan
Hotwire Demystified
@jamie_gaskings at RailsConf 2021
47
Slide 48
Slide 48 text
palkan_tula
palkan
Turbo Streams
Minimalistic CableReady (only 5 actions)
Transport-agnostic
Zero JavaScript (uses custom HTML elements to
trigger updates)
48
Slide 49
Slide 49 text
palkan_tula
palkan
DOM
update
Turbo Streams
49
https://my-hot.app
GET/POST/...
HTML
Action Cable broadcast
from anywhere
Rails controller
Action Cable subscribe
Slide 50
Slide 50 text
palkan_tula
palkan
Turbo Streams
50
<%= turbo_stream_from workspace %>
<%= workspace.name %>
Slide 51
Slide 51 text
palkan_tula
palkan
Turbo Streams
51
# 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
Slide 52
Slide 52 text
palkan_tula
palkan
More HTML-over-WS
Motion
Live
52
Slide 53
Slide 53 text
palkan_tula
palkan
Motion
53
github.com/unabridged/motion
Slide 54
Slide 54 text
palkan_tula
palkan
Live
54
github.com/socketry/live
Slide 55
Slide 55 text
palkan_tula
palkan
Live
55
class ClickCounter < Live ::View
def initialize(id, **data)
super
@data[:count] ||= 0
end
def handle(event, details)
@data[:count] = Integer(@data[:count]) + 1
replace!
end
def render(builder)
builder.tag :button, onclick: forward do
builder.text("Add an image. ( #{@data[:count]} images so far).")
end
builder.tag :div do
Integer(@data[:count]).times do
builder.tag :img, src: "https: //picsum.photos/200/300"
end
end
end
end
Slide 56
Slide 56 text
palkan_tula
palkan
HTML-over-WebSockets
Gives full-stack development a second chance
There are plenty of implementations already
StimulusReflex and CableReady are rock solid!
Hotwire is gaining popularity (and stability)
56
Slide 57
Slide 57 text
palkan_tula
palkan
HTML-over-WebSockets
Worth considering if:
You don't want to hire the whole new team
Your app is based on user-server interactions
You want to vitalize a classic Rails app
57
Slide 58
Slide 58 text
THANKS
github.com/palkan
twitter.com/palkan_tula
evilmartians.com
twitter.com/evilmartians