Lose Kopplung im Frontend mit Hotwire

Heutzutage führt kein Weg an Single-Page Applications vorbei. Ob React, Angular, VueJS oder eines der anderen Frameworks. Die Standardantwort auf die Frage nach der Frontend-Architektur heißt SPA. Doch was kaum jemand bemerkt:

Die SPA-Idee ist legacy! Mit AngularJS wurde vor 10 Jahren diese Idee bereits umgesetzt.

Ich möchte im Vortrag zeigen, aufgrund welcher Frontend-Probleme man ursprünglich SPAs entwickelt hat und ob es für diese Probleme nicht heutzutage innovativere Lösungen gibt: Hier kommt Hotwire ins Spiel!

Transcript

1. Nieder mit den Single Page Applications 🤪 Lose Kopplung im Frontend mit Hotwire_ Hamburg, Februar 2023
2. SPA Ursprung
5. SPA Kosten
6. Bundle Size
7. Traditional Architecture
8. SPA Architecture Overhead
9. SSR-SPA Architecture Overhead
10. Development time due to multiple layers and complexity (security) Cognitive load due to build stack (webpack, minify, uglify, …) Deployment time due to additional pipeline steps Operations costs due to dependency updates and security checks & updates Additional infrastructure due to SSR via NodeJS Performance due to bundle size and interpretation times on client side Overhead Summary
11. SPA Alternativen
14. • Turbo Drive accelerates links and form submissions by negating the need for full page reloads. • Turbo Frames decompose pages into independent contexts, which scope navigation and can be lazily loaded. • Turbo Streams deliver page changes over WebSocket, SSE or in response to form submissions using just HTML and a set of CRUD-like actions. • Turbo Native lets your web-application form the center of your native iOS and Android apps, with seamless transitions between web and native sections. Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine.
15. Bundle Size ~15kb Hotwire Turbo
16. Live Demo
18. Danke Kontakt TalentFormation.com GmbH Benedikt Stemmildt - CTO E: bene@talentformation.com T: +49 (0) 171 1443 957 TalentFormation HQ: Gasstraße 6A 22761 Hamburg