Recommended
More Related Content
Similar to Moderní Server Side UI Rendering v PHP
Similar to Moderní Server Side UI Rendering v PHP (20)
Moderní Server Side UI Rendering v PHP
- 1. Jak na moderní Server-Side UI Rendering (SSR) v PHP Michal Majer 19.5. 2022
- 2. Proč se zabývat SSR v době Reactu/Vue.js? vs Blade SPA (single-page applications)
- 4. • Rychlost vývoje a úprav (např. formuláře) • Menší komplexita a méně závislostí celého systému • Menší nároky na vývojářský tým • 1 vývojář (většinou) zvládne celý task !!! • Lehčí end-2-end testování, monitoring a bug tracking • IDE debugging • Jednodušší UI caching / Implicitní SSR (v SPA řeší např. NextJS/NuxtJS) Výhody tradičního SSR * * Pro určité typy projektů
- 5. • Provázání backend a frontend kódu, chaos v assets • Full-page reloads / stahování nadbytečných dat • Dlouhé a nepřehledné twig/latte/blade špagety • Chybějící typová kontrola • Nefunguje o ffl ine • Není cool • Nevhodné pro velmi komplexní UI Nevýhody tradičního SSR
- 6. Použít SSR nebo frontend framework? vs Blade SPA (single-page applications)
- 7. • Potřeby produktu (komplexní UI vs. komplexní backend?) • Stav produktu • Raný prototyp / MVP • Stabilní produkt po X-tém kompletním přepsání • Složení týmu (backend / frontend / full-stack) • Technologický stack • Finanční a personální zdroje na údržbu SSR nebo SPA framework
- 9. Příklad Sworp Cílem je vybudovat sadu produktů, které skrze automatizaci a moderní technologie zjednoduší život nájemníkům, nájemcům a řemeslníkům. • Nový systém, nový tým, několik nových produktů • Chceme co nejdříve na trh a zároveň … • Chceme dělat věci pořádně, předejít uspěchanému vývoji a tvorbě technického dluhu
- 10. Prioritizace a outsourcing dev-ops v cloudu Interní aplikace a webová prezentace UI design system + framework Prioritní cíle (in-house) Bankovní (a další) integrace API pro mobilní aplikace Vizualizace relevantních dat Mobilní aplikace (klient) Robustní backend architektura a testy Doménová business logika a další … Lokalizace, portály, účetnictví, reporty, noti fi kace, e-maily, …
- 11. • JS SPA nebo PHP SSR? • Chceme výhody SSR • Jak omezit / obejít nevýhody? • Můžeme oddálit rozhodnutí a nemuset vytvářet technický dluh? * Následující slidy ukazují řešení, která se ukázala funkční v našem kontextu a nejsou prezentována jako obecně nejlepší pro všechny projekty :-)
- 12. • Možná řešení: • Webpack Encore • Hotwire Stimulus • Symfony UX Nevýhoda SSR: Provázání backend a frontend kódu, chaos v assets
- 16. yarn watch / build
- 24. • Řešení: Hotwire Turbo • Drive • Frames • Streams Nevýhoda SSR: Full-page reloads / stahování nadbytečných dat https://hotwired.dev/
- 25. • Z klasických HTTP volání vytváří Ajax dotazy • Ihned zpříjemní pocit při navigaci na webu • 3 pravidla nutné dodržet: • <script> tagy do <head> a ideálně používat Stimulus • Verzování a data-turbo-track=“reload" na všechny <script> a <link> tagy • Sémanticky správné návratové kódy při odeslání formulářů 422/302 Turbo: Drive
- 28. Turbo: Frames (3) - eager loading
- 30. Turbo: Frames (5) - lazy loading • Dokud prohlížeč turbo-frame nezobrazí (např. pokud je umístěné v modálu), turbo nevyšle request • Turbo vyšle request až ve chvíli, kdy je turbo-frame viditelné
- 31. Turbo: Streams Action types: append, prepend, replace, update, remove, before, after
- 34. • Řešení: • Symfony UX / Twig (Live) Components • Blade Components • performing/twig-components • … mnoho dalších Nevýhoda SSR: Dlouhé a nepřehledné twig/latte špagety
- 36. Symfony UX: Twig Components (1) https://symfony.com/bundles/ux-twig-component/current/index.html
- 37. Symfony UX: Twig Components (2)
- 38. Symfony UX: Twig Components (3)
- 39. Symfony UX: Twig Components (4)
- 40. Symfony UX: Twig Components (5)
- 43. Nevýhoda SSR: Chybějící typová kontrola https://github.com/guym4c/twig-prop-types
- 46. • Opravdu? :-) • PWA - Progressive web apps + service workers • https://youtu.be/wEPeaJgbIxQ Nevýhoda SSR: Nefunguje of fl ine
- 47. • Nutné balancovat mezi: • Je to vhodný nástroj pro daný problém a kontext? • Je na pracovním trhu dost lidí, kteří to umějí a chtějí dělat? • “Choose boring technology” - Dan McKinley (https://mcfunley.com/choose-boring-technology) • “The nice thing about boringness (so constrained) is that the capabilities of these things are well understood. But more importantly, their failure modes are well understood” • “Mindful choice of technology gives engineering minds real freedom: the freedom to contemplate bigger questions. Technology for its own sake is snake oil.” Nevýhoda SSR: Tradiční SSR není cool
- 48. • Ano, ale … Nevýhoda SSR: Nevhodné pro velmi komplexní UI https://symfonycasts.com/screencast/stimulus/react
- 49. Kde se dozvědět více? • Symfony Slack #ux channel • SymfonyCasts • Stimulus: https://symfonycasts.com/screencast/stimulus • Symfony UX / Turbo: https://symfonycasts.com/screencast/turbo/asset- tracking • Symfony Docs: https://symfony.com/doc/current/frontend/ux.html
- 50. Zdroje / zajímavé odkazy • https://hotwired.dev/ • https://m.signalvnoise.com/the-majestic-monolith/ • https://symfony.com/doc/current/frontend.html • https://symfony.com/bundles/ux-turbo/current/index.html#sending-async- changes-using-mercure-a-chat • https://github.com/giorgiopogliani/twig-components • https://github.com/guym4c/twig-prop-types
- 51. Děkuju za pozornost Michal Majer, 19.5. 2022 E-mail: majermi4@gmail.com Twitter: @MichalMajer15 Péhápkáři Slack: majermi4