Moderní Server Side UI Rendering v PHP

Jak na moderní Server-Side UI
Rendering (SSR) v PHP
Michal Majer
19.5. 2022

Proč se zabývat SSR v době
Reactu/Vue.js?
vs
Blade
SPA (single-page applications)

• 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ů

• 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

Použít SSR nebo frontend
framework?
vs
Blade
SPA (single-page applications)

• 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

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

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, …

• 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 :-)

• Možná řešení:

• Webpack Encore

• Hotwire Stimulus

• Symfony UX
Nevýhoda SSR:

Provázání backend a frontend kódu, chaos v assets

https://symfony.com/doc/current/frontend.html

https://www.stimulus-components.com/

https://symfony.com/doc/current/frontend/ux.html#all-symfony-ux-packages

• Řešení:  
Hotwire Turbo

• Drive

• Frames

• Streams
Nevýhoda SSR:

Full-page reloads / stahování nadbytečných dat
https://hotwired.dev/

• 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

Turbo: Frames (3) - eager loading

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é

Turbo: Streams
Action types: append, prepend, replace, update,
remove, before, after

• Ř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

Symfony UX: Twig Components (1)
https://symfony.com/bundles/ux-twig-component/current/index.html

performing/twig-components (1)
https://github.com/giorgiopogliani/twig-components

performing/twig-components (2)
https://github.com/giorgiopogliani/twig-components

Nevýhoda SSR:

Chybějící typová kontrola
https://github.com/guym4c/twig-prop-types

• Opravdu? :-)

• PWA - Progressive web apps 
+ service workers

• https://youtu.be/wEPeaJgbIxQ
Nevýhoda SSR:

Nefunguje of
fl
ine

• 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

• Ano, ale …
Nevýhoda SSR:

Nevhodné pro velmi komplexní UI
https://symfonycasts.com/screencast/stimulus/react

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

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

Děkuju za pozornost
Michal Majer, 19.5. 2022
E-mail: majermi4@gmail.com
Twitter: @MichalMajer15  
Péhápkáři Slack: majermi4

Moderní Server Side UI Rendering v PHP

More Related Content

Similar to Moderní Server Side UI Rendering v PHP