Recommended
More Related Content
Similar to DEV Čtvrtkon #107 - Štefan Földesi
Similar to DEV Čtvrtkon #107 - Štefan Földesi (20)
More from Ctvrtkoncz
More from Ctvrtkoncz (16)
DEV Čtvrtkon #107 - Štefan Földesi
- 1. HTML PO DRÁTĚ Alternativa k MPA a SPA
- 2. Na počátku… Na počátku stvořil Bůh server a klient…
- 3. HTTP: Hypertext Transfer Protocol GET /udalost/dev-ctvrtkon-107 HTTP/2.0 :authority: ctvrtkon.cz HTTP/2.0 200 OK <html> … </html> GET /contacts POST /contacts GET /contacts/1 PUT /contacts/1 DELETE /contacts/1
- 4. Hypertext - Nelineární text propojený pomocí hyperlinků (odkazů)
- 5. Hypermedia - Obrázky - Videa - Formuláře - Tlačítka - Navigační prvky - atd
- 6. HTML: Hypertext Markup Language <a href="https://ctvrtkon.cz">Nejlepší akce!</a> <form action="/login" method="post"> <label for="email">Email</label> <input type="email" name=”email” id="email" /><br /> <label for="password">Heslo</label> <input type="password" name=”password” id="password" /><br /> <button type="submit">Přihlásit</button> </form> GET / HTTP/2.0 :authority: ctvrtkon.cz POST /login HTTP/2.0 email=john.doe%40example.com&password=password
- 7. MPA: Multi-page Application - Každý request způsobí přenačtení celé stránky - Request obsahuje formulářová data, response obsahuje HTML - Stav není zachován mezi stránkami (téměř) - Komunikace probíhá synchronně - UI je poskytnuto serverem, klient ho pouze vykresluje - Web 1.0
- 8. SPA: Single-page application - Při prvním načtení se načte celá aplikace - Request i response obsahuje JSON - Stav aplikace je perzistentní - Komunikace probíhá asynchronně - Server poskytuje pouze data, UI z nich staví klientská aplikace - Web 2.0
- 9. MPA vs SPA Výhody: - Jednoduchost - SEO - Malá zátěž na klienta - Možnosti jazyka a frameworku Nevýhody: - Ztráta stavu - Velikost přenesených dat - Méně interaktivní - Omezené možnosti HTML Výhody: - Interaktivita - Perzistentní stav - Menší množství přenesených dat - DX Nevýhody: - Komplexita - Prvotní načtení - Chování linků a navigace - SEO - Závislost na JavaScript ekosystému
- 10. MPA vs SPA: use cases - Velmi jednoduché weby - Statické weby - Weby bohaté na obsah (news, blogs etc.) - Weby s nižší interaktivitou - Weby vyžadující dobré SEO - Weby s vysokou interaktivitou - Weby s “feelem” mobilní aplikace (animace, hladkost) - Funkční aplikace vyžadující stav - Weby vyžadující oprávnění, kde není SEO důležité
- 11. HDA: Jak to funguje - Prvotní stránka může být plně vykreslená, nebo jen kostra - Requesty na server jsou odeslány asynchronně bez přenačtení stránky - Response obsahuje HTML, které klient rovnou vykreslí - Přenačítají se pouze ty části stránky, které vyžadují update
- 12. HDA: Hypermedia Driven Application - Request obsahuje formulářová data, response obsahuje HTML - UI je poskytnuto serverem, klient ho pouze vykresluje - Nenačítá se velká JavaScriptová aplikace - Interakce nezpůsobí přenačtení celé stránky - Stav je zachován - Komunikace probíhá asynchronně
- 13. HDA: Výhody a nevýhody Výhody: - Jednoduchost - SEO - Možnost volby jazyka a frameworku - Malá zátěž na klienta - Menší množství přenesených dat - Interaktivita - Perzistentní stav Nevýhody: - Omezené možnosti offline - Méně rozšířené paradigma - Menší možnosti interakce a animace než SPA - O něco málo komplexnější než MPA
- 14. HDA: Kde ji vezmu? Laravel: Livewire Ruby on Rails: Hotwire Phoenix: LiveView Všechno ostatní: HTMX Honorable mention: Unpoly Mobile: Hyperview/Hotwire
- 15. A co SSR atd.? SSR: Server-side rendering - Aplikace je psána ve stylu SPA - Na serveru běží Node, který za běhu vytváří HTML dynamicky - JavaScript pro interaktivitu je dodán následně - Server-side logic je možné mít přímo v aplikaci, nebo mít samostatný backend - Next, Nuxt, SvelteKit, Astro - Existují další varianty Nevýhody oproti HDA: - Komplexita (ještě větší než u SPA) - Zamčení do JS ekosystému
- 16. Kam dál? Demo aplikace použitá během prezentace: geeshta/contax Kniha a e-kniha: Hypermedia.systems Esej o komplexitě: The Grug Brained Developer Video o typech webových aplikací: 10 Rendering Patterns for Web Apps Video o tzv. Transitional Web Apps: Have Single-Page Apps Ruined the Web? Dizertační práce, která představila koncepty jako je REST a HATEOAS: Architectural Styles and the Design of Network-based Software Architectures
- 17. Litestar - Relativně nový webový framework pro Python - Podporuje APIs, MPAs i HTMX - Podporuje moderní Python - type annotations, async/await, DI etc. - Obsahuje spoustu funkcionalit out-of-the-box - Stále se vyvíjí a má skvělou komunitu Officiální Web GitHub Discord pozvánka