JCON 2021: Turbo powered Web Apps

How it started: How it‘s going:

Komplexität
User Experience
Single Page
Application
Server Side
Application
New
Sweet
Spot

# bescheidenes Java Script
Framework für Controller
# hybride mobile
Applications mit nativem
Code und Web Views
# Beschleunigt Seitenwechsel
und Formulare
# Aufteilung von Seiten in
Komponenten
# Dynamische Updates

Navigation in klassischer Server Side Application
A
B
C
Page 1
Lorem iLorem ipsum dolor sit
amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore magn
1. HTML rendern
2. CSS (+ Schriften) verarbeiten
3. JavaScript verarbeiten und
JavaScript VM starten
A
B
C
Page 2
1. Scroll Position wird zurückgesetzt
2. ungespeicherte Änderungen
gehen verloren
1. HTML rendern
A
B
C
Page 3
1. Scroll Position wird zurückgesetzt
gehen verloren
1. HTML rendern

<head>
<script src="//@hotwired/turbo@7.0.1/turbo.es5-umd.js"/>
</head>
Turbo einlegen

Navigation Server Side Application + Turbo
A
B
C
Page 1
1. HTML rendern
A
B
C
Page 2
1. CSS und JavaScript mergen und
verarbeiten
2. HTML Body austauschen
gehen verloren
Seite aus
Cache holen
A
B
C
Page 3
gehen verloren
1. CSS und JavaScript mergen und
verarbeiten
2. HTML Body austauschen
Seite aus
Cache holen

DEMO
Turbo Navigation
http://localhost:3000/samples/turbo-drive_01/page1.html

Navigation mit Turbo Drive
# Turbo übernimmt alle Links und Formulare aus gleichem
Origin (auch Redirects)
# HTML Head wird gemergt, Body ersetzt
# Während Seite lädt wird Version aus Cache angezeigt

Seiten zerlegen
mit Turbo Frames

Von Seiten zu Turbo Frames
Turbo
Frame
Turbo
Frame
# Seite wird in Turbo Frames zerlegt die einzeln aktualisiert werden
# Links und Formular Eingaben beziehen sich nur auf Frame

Turbo Frame Request
<html>
<nav></nav>
<turbo-frame id="my_frame">
<h1>My Result Content</h1>
</turbo-frame>
</html>
<html>
<nav></nav>
<h1>My Frame Content</h1>
<a href="result.html">A framed link</a>
</turbo-frame>
</html>
GET result.html
Turbo-Frame: my-frame
<html>
<nav></nav>
</turbo-frame>
<div>more content ...</div>
</html>

Turbo Frame Request
GET result.html
Turbo-Frame: my-frame
<html>
<nav></nav>
<h1>My Frame Content</h1>
<a href="result.html">A framed link</a>
</turbo-frame>
</html>
<html>
<nav></nav>
</turbo-frame>
</html>
</turbo-frame>

Aus Turbo Frame ausbrechen
<a href="result.html" data-turbo-frame="my_frame">Link to Frame</a>
<form action="/submit" method="GET" >
<input type=text>My Input</h1>
<button type="submit">Submit</button>
<form>
</turbo-frame>
aktualisiert

Formular in Turbo Frame
<form action="/submit" method="GET" >
<form>
</turbo-frame>

Lazy Turbo Frame
<turbo-frame id="my_frame" src="feed-frame">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</turbo-frame>

DEMO
Turbo Frames
http://localhost:3000/samples/turbo-frame_01/index.html

Seite zerlegen mit Turbo Frames
# Seite wird in Turbo Frames zerlegt die einzeln aktualisiert
werden
# Links und Formulare wirken nur innerhalb des Frames
# Frames können lazy geladen werden

Dynamische Updates
mit Turbo Streams

Formular mit Turbo Stream
<html>
<nav></nav>
<p>Thanks for your Input!</p>
</html>
<html>
<nav></nav>
<form action="/submit"
method="POST"
id="my_form">
</form>
</html>
POST result.html
Accept: text/vnd.turbo-stream.html
<turbo-stream action="replace" target="my_form">
<template>
</template>
</turbo-stream>

Formular mit Turbo Stream
<turbo-stream action="replace" target="my_form">
<template>
</template>
</turbo-stream>
Turbo Streams erlauben Aktionen
# append
# prepend
# replace
# update
# remove

Server Sent Events (SSE) per Turbo Stream
<script>
Turbo.connectStreamSource(
new EventSource("/events?stream=messages")
);
</script>
<div id="feed-frame">
<div class="task">Task 0</div>
</div>
<div id="feed-frame">
</div>
EventStream Id: 1
<turbo-stream action="prepend" target="feed-frame">
<template>
</template>
</turbo-stream>

Server Sent Events (SSE) per Web Socket
<script>
Turbo.connectStreamSource(
new WebSocket("ws://localhost:3000/ws")
);
</script>
<div target="feed-frame">
</div>
Push Data
<turbo-stream action="prepend" target="feed-frame">
<template>
</template>
</turbo-stream>
<div target="feed-frame">
</div>

DEMO
Turbo Streams
http://localhost:3000/task/new

Dynamische Updates mit Turbo
Streams
# mit Streams können feingranular Teile der Seite aktualisiert
werden
# eigener Turbo Accept Header gibt an ob Client Turbo Streams
akzeptiert
# Live Updates per Server Sent Events oder Web Sockets

Turbo Drive
Navigation
Formular mit
Turbo Stream
Turbo Frame

DEMO
To-Do App
http://localhost:3000/

Turbo Drive
# SPA-Style Navigation
# Beschleunigt Seitenwechsel und Formulare
Turbo Frames
# Seite wird in Turbo Frames zerlegt die einzeln
aktualisiert werden
# Links und Formulare wirken innerhalb des Frames
Turbo Streams
# Feingranulare Updates von Teilen der Seiten
# Live Updates per Server Sent Events oder
WebSockets

Jan Stamer
Solution Architect
jan.stamer@comdirect.de

JCON 2021: Turbo powered Web Apps

Weitere ähnliche Inhalte

Mehr von Jan Stamer (15)

JCON 2021: Turbo powered Web Apps