SlideShare ist ein Scribd-Unternehmen logo
Turbo powered Web Apps
Am Anfang war HTML.
JCON 2021: Turbo powered Web Apps
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
JCON 2021: Turbo powered Web Apps
# 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
mit Turbo Drive
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
Lorem iLorem ipsum dolor sit
amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore magn
1. Scroll Position wird zurückgesetzt
2. ungespeicherte Änderungen
gehen verloren
1. HTML rendern
2. CSS (+ Schriften) verarbeiten
3. JavaScript verarbeiten und
JavaScript VM starten
A
B
C
Page 3
Lorem iLorem ipsum dolor sit
amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore magn
1. Scroll Position wird zurückgesetzt
2. ungespeicherte Änderungen
gehen verloren
1. HTML rendern
2. CSS (+ Schriften) verarbeiten
3. JavaScript verarbeiten und
JavaScript VM starten
<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
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
Lorem iLorem ipsum dolor sit
amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore magn
1. CSS und JavaScript mergen und
verarbeiten
2. HTML Body austauschen
1. ungespeicherte Änderungen
gehen verloren
Seite aus
Cache holen
A
B
C
Page 3
Lorem iLorem ipsum dolor sit
amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore magn
1. ungespeicherte Änderungen
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>
<turbo-frame id="my_frame">
<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 id="my_frame">
<h1>My Result Content</h1>
</turbo-frame>
<div>more content ...</div>
</html>
Turbo Frame Request
GET result.html
Turbo-Frame: my-frame
<html>
<nav></nav>
<turbo-frame id="my_frame">
<h1>My Frame Content</h1>
<a href="result.html">A framed link</a>
</turbo-frame>
</html>
<html>
<nav></nav>
<turbo-frame id="my_frame">
<h1>My Result Content</h1>
</turbo-frame>
</html>
<turbo-frame id="my_frame">
<h1>My Result Content</h1>
</turbo-frame>
Aus Turbo Frame ausbrechen
<a href="result.html" data-turbo-frame="my_frame">Link to Frame</a>
<turbo-frame id="my_frame">
<form action="/submit" method="GET" >
<input type=text>My Input</h1>
<button type="submit">Submit</button>
<form>
</turbo-frame>
aktualisiert
Formular in Turbo Frame
<turbo-frame id="my_frame">
<form action="/submit" method="GET" >
<input type=text>My Input</h1>
<button type="submit">Submit</button>
<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">
<input type=text>My Input</h1>
<button type="submit">Submit</button>
</form>
</html>
POST result.html
Accept: text/vnd.turbo-stream.html
<turbo-stream action="replace" target="my_form">
<template>
<p>Thanks for your Input!</p>
</template>
</turbo-stream>
Formular mit Turbo Stream
<turbo-stream action="replace" target="my_form">
<template>
<p>Thanks for your Input!</p>
</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 class="task">Task 1</div>
<div class="task">Task 0</div>
</div>
EventStream Id: 1
<turbo-stream action="prepend" target="feed-frame">
<template>
<div class="task">Task 1</div>
</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 class="task">Task 0</div>
</div>
Push Data
<turbo-stream action="prepend" target="feed-frame">
<template>
<div class="task">Task 1</div>
</template>
</turbo-stream>
<div target="feed-frame">
<div class="task">Task 1</div>
<div class="task">Task 0</div>
</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
Beispiel To-Do App
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

Ähnlich wie JCON 2021: Turbo powered Web Apps

Legacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenLegacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpen
Philipp Burgmer
 
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
kaftanenko
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
Frank Kleine
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
Nico Steiner
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
Nico Steiner
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
SEARCH ONE
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
Christian Heilmann
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
Martin Leyrer
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Martin Leyrer
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Jakob
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
Martin Kliehm
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
Andreas Schiweck
 
Globetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HHGlobetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HH
Sebastian Heuer
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
QAware GmbH
 
Website Optimierungen
Website OptimierungenWebsite Optimierungen
Website Optimierungen
guest5d1fb2
 

Ähnlich wie JCON 2021: Turbo powered Web Apps (20)

Legacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenLegacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpen
 
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Face...
 
Frontend-Performance mit PHP
Frontend-Performance mit PHPFrontend-Performance mit PHP
Frontend-Performance mit PHP
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021PageSpeed Extreme für das große Speed Update 2021
PageSpeed Extreme für das große Speed Update 2021
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
 
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-OptimierungenAutomatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
Von Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein MigrationsberichtVon Typo3 zu Plone - Ein Migrationsbericht
Von Typo3 zu Plone - Ein Migrationsbericht
 
Globetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HHGlobetrotter @ E-Commerce Hacktable HH
Globetrotter @ E-Commerce Hacktable HH
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
Website Optimierungen
Website OptimierungenWebsite Optimierungen
Website Optimierungen
 

Mehr von Jan Stamer

JAX 2024: Go-über-den-Wolken und in der Cloud
JAX 2024: Go-über-den-Wolken und in der CloudJAX 2024: Go-über-den-Wolken und in der Cloud
JAX 2024: Go-über-den-Wolken und in der Cloud
Jan Stamer
 
JAX 2024: Go in der Praxis einsetzen
JAX 2024: Go in der Praxis einsetzenJAX 2024: Go in der Praxis einsetzen
JAX 2024: Go in der Praxis einsetzen
Jan Stamer
 
W-JAX 2023: Go über den Wolken
W-JAX 2023: Go über den WolkenW-JAX 2023: Go über den Wolken
W-JAX 2023: Go über den Wolken
Jan Stamer
 
CloudLand 2023: Rock, Paper, Scissors Cloud Competition - Go vs. Java
CloudLand 2023: Rock, Paper, Scissors Cloud Competition - Go vs. JavaCloudLand 2023: Rock, Paper, Scissors Cloud Competition - Go vs. Java
CloudLand 2023: Rock, Paper, Scissors Cloud Competition - Go vs. Java
Jan Stamer
 
entwickler.de 05/2023: Go über den Wolken
entwickler.de 05/2023: Go über den Wolkenentwickler.de 05/2023: Go über den Wolken
entwickler.de 05/2023: Go über den Wolken
Jan Stamer
 
IT-Tage 2021: Java to Go - Google Go für Java-Entwickler
IT-Tage 2021: Java to Go - Google Go für Java-Entwickler IT-Tage 2021: Java to Go - Google Go für Java-Entwickler
IT-Tage 2021: Java to Go - Google Go für Java-Entwickler
Jan Stamer
 
entwickler.de Go Day: Go Web Development 101
entwickler.de Go Day: Go Web Development 101entwickler.de Go Day: Go Web Development 101
entwickler.de Go Day: Go Web Development 101
Jan Stamer
 
betterCode() Go: Einstieg in Go, Standard-Library und Ökosystem
betterCode() Go: Einstieg in Go, Standard-Library und ÖkosystembetterCode() Go: Einstieg in Go, Standard-Library und Ökosystem
betterCode() Go: Einstieg in Go, Standard-Library und Ökosystem
Jan Stamer
 
DevOpsCon 2021: Go Web Development 101
DevOpsCon 2021: Go Web Development 101DevOpsCon 2021: Go Web Development 101
DevOpsCon 2021: Go Web Development 101
Jan Stamer
 
JavaForum Nord 2021: Java to Go - Google Go für Java-Entwickler
JavaForum Nord 2021: Java to Go - Google Go für Java-EntwicklerJavaForum Nord 2021: Java to Go - Google Go für Java-Entwickler
JavaForum Nord 2021: Java to Go - Google Go für Java-Entwickler
Jan Stamer
 
Jugs HH: Elefant unter Strom - von OldSQL über NoSQL zu NewSQL?
Jugs HH: Elefant unter Strom - von OldSQL über NoSQL zu NewSQL?Jugs HH: Elefant unter Strom - von OldSQL über NoSQL zu NewSQL?
Jugs HH: Elefant unter Strom - von OldSQL über NoSQL zu NewSQL?
Jan Stamer
 

Mehr von Jan Stamer (11)

JAX 2024: Go-über-den-Wolken und in der Cloud
JAX 2024: Go-über-den-Wolken und in der CloudJAX 2024: Go-über-den-Wolken und in der Cloud
JAX 2024: Go-über-den-Wolken und in der Cloud
 
JAX 2024: Go in der Praxis einsetzen
JAX 2024: Go in der Praxis einsetzenJAX 2024: Go in der Praxis einsetzen
JAX 2024: Go in der Praxis einsetzen
 
W-JAX 2023: Go über den Wolken
W-JAX 2023: Go über den WolkenW-JAX 2023: Go über den Wolken
W-JAX 2023: Go über den Wolken
 
CloudLand 2023: Rock, Paper, Scissors Cloud Competition - Go vs. Java
CloudLand 2023: Rock, Paper, Scissors Cloud Competition - Go vs. JavaCloudLand 2023: Rock, Paper, Scissors Cloud Competition - Go vs. Java
CloudLand 2023: Rock, Paper, Scissors Cloud Competition - Go vs. Java
 
entwickler.de 05/2023: Go über den Wolken
entwickler.de 05/2023: Go über den Wolkenentwickler.de 05/2023: Go über den Wolken
entwickler.de 05/2023: Go über den Wolken
 
IT-Tage 2021: Java to Go - Google Go für Java-Entwickler
IT-Tage 2021: Java to Go - Google Go für Java-Entwickler IT-Tage 2021: Java to Go - Google Go für Java-Entwickler
IT-Tage 2021: Java to Go - Google Go für Java-Entwickler
 
entwickler.de Go Day: Go Web Development 101
entwickler.de Go Day: Go Web Development 101entwickler.de Go Day: Go Web Development 101
entwickler.de Go Day: Go Web Development 101
 
betterCode() Go: Einstieg in Go, Standard-Library und Ökosystem
betterCode() Go: Einstieg in Go, Standard-Library und ÖkosystembetterCode() Go: Einstieg in Go, Standard-Library und Ökosystem
betterCode() Go: Einstieg in Go, Standard-Library und Ökosystem
 
DevOpsCon 2021: Go Web Development 101
DevOpsCon 2021: Go Web Development 101DevOpsCon 2021: Go Web Development 101
DevOpsCon 2021: Go Web Development 101
 
JavaForum Nord 2021: Java to Go - Google Go für Java-Entwickler
JavaForum Nord 2021: Java to Go - Google Go für Java-EntwicklerJavaForum Nord 2021: Java to Go - Google Go für Java-Entwickler
JavaForum Nord 2021: Java to Go - Google Go für Java-Entwickler
 
Jugs HH: Elefant unter Strom - von OldSQL über NoSQL zu NewSQL?
Jugs HH: Elefant unter Strom - von OldSQL über NoSQL zu NewSQL?Jugs HH: Elefant unter Strom - von OldSQL über NoSQL zu NewSQL?
Jugs HH: Elefant unter Strom - von OldSQL über NoSQL zu NewSQL?
 

JCON 2021: Turbo powered Web Apps

  • 5. How it started: How it‘s going:
  • 8. # 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
  • 10. 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 Lorem iLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn 1. Scroll Position wird zurückgesetzt 2. ungespeicherte Änderungen gehen verloren 1. HTML rendern 2. CSS (+ Schriften) verarbeiten 3. JavaScript verarbeiten und JavaScript VM starten A B C Page 3 Lorem iLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn 1. Scroll Position wird zurückgesetzt 2. ungespeicherte Änderungen gehen verloren 1. HTML rendern 2. CSS (+ Schriften) verarbeiten 3. JavaScript verarbeiten und JavaScript VM starten
  • 12. Navigation Server Side Application + Turbo 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 Lorem iLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn 1. CSS und JavaScript mergen und verarbeiten 2. HTML Body austauschen 1. ungespeicherte Änderungen gehen verloren Seite aus Cache holen A B C Page 3 Lorem iLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn 1. ungespeicherte Änderungen gehen verloren 1. CSS und JavaScript mergen und verarbeiten 2. HTML Body austauschen Seite aus Cache holen
  • 14. 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
  • 16. 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
  • 17. Turbo Frame Request <html> <nav></nav> <turbo-frame id="my_frame"> <h1>My Result Content</h1> </turbo-frame> </html> <html> <nav></nav> <turbo-frame id="my_frame"> <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 id="my_frame"> <h1>My Result Content</h1> </turbo-frame> <div>more content ...</div> </html>
  • 18. Turbo Frame Request GET result.html Turbo-Frame: my-frame <html> <nav></nav> <turbo-frame id="my_frame"> <h1>My Frame Content</h1> <a href="result.html">A framed link</a> </turbo-frame> </html> <html> <nav></nav> <turbo-frame id="my_frame"> <h1>My Result Content</h1> </turbo-frame> </html> <turbo-frame id="my_frame"> <h1>My Result Content</h1> </turbo-frame>
  • 19. Aus Turbo Frame ausbrechen <a href="result.html" data-turbo-frame="my_frame">Link to Frame</a> <turbo-frame id="my_frame"> <form action="/submit" method="GET" > <input type=text>My Input</h1> <button type="submit">Submit</button> <form> </turbo-frame> aktualisiert
  • 20. Formular in Turbo Frame <turbo-frame id="my_frame"> <form action="/submit" method="GET" > <input type=text>My Input</h1> <button type="submit">Submit</button> <form> </turbo-frame>
  • 21. 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>
  • 23. 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
  • 25. 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"> <input type=text>My Input</h1> <button type="submit">Submit</button> </form> </html> POST result.html Accept: text/vnd.turbo-stream.html <turbo-stream action="replace" target="my_form"> <template> <p>Thanks for your Input!</p> </template> </turbo-stream>
  • 26. Formular mit Turbo Stream <turbo-stream action="replace" target="my_form"> <template> <p>Thanks for your Input!</p> </template> </turbo-stream> Turbo Streams erlauben Aktionen # append # prepend # replace # update # remove
  • 27. 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 class="task">Task 1</div> <div class="task">Task 0</div> </div> EventStream Id: 1 <turbo-stream action="prepend" target="feed-frame"> <template> <div class="task">Task 1</div> </template> </turbo-stream>
  • 28. Server Sent Events (SSE) per Web Socket <script> Turbo.connectStreamSource( new WebSocket("ws://localhost:3000/ws") ); </script> <div target="feed-frame"> <div class="task">Task 0</div> </div> Push Data <turbo-stream action="prepend" target="feed-frame"> <template> <div class="task">Task 1</div> </template> </turbo-stream> <div target="feed-frame"> <div class="task">Task 1</div> <div class="task">Task 0</div> </div>
  • 30. 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
  • 34. 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