HTML spielt in modernen Web Anwendungen nur die zweite Geige.
JavaScript Frameworks wie Angular oder React spielen die erste. Aber muss das so sein? Mit Turbo (https://turbo.hotwire.dev/) stellt Basecamp (um Rails Gründer David Heinemeier Hansson) einen alternativen Ansatz vor, um moderne Web Anwendungen mit plain HTML zu entwickeln. Das Grundprinzip von Turbo: Über die Leitung geht nur HTML, gerendert wird auf dem Server.
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
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
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