Stimulus, Swup, Locomotive
Na webu je klíčové používat javascriptové knihovny, ať už pro přidanou funkcionalitu nebo celkové řešení jako jQuery, Vue, React. Na našich projektech jsme dlouhodobě využívali jQuery a u webových aplikací zase Vue.
Za posledních pár let se snažíme naše frontendové řešení postupně modernizovat. Nastal tedy čas postupně od jQuery opustit. Otázka byla čím ho nahradit. Nechceme se totiž vydat směrem, kdy na webech budeme využívat čistě jen MVC frameworky jako Vue nebo React, ačkoliv jejich myšlenka vázání eventů a práce s komponentama se nám líbí. Chtěli jsme něco, co řeší pouze interakci na frontendu. Samotné vykreslování stránek pak zůstane klasicky v režii backendu, a to např. kompletně v Nette. Nakonec jsme naše hledání zužili ke knihovnám Stimulus, Alpine nebo Livewire. Z těchto knihoven se nám nejvíce zamlouval, především díky své jednoduchosti, Stimulus.
A co to ten Stimul vlastně je? Jaké jsou jeho hlavní přednosti a proč jsme se rozhodli právě pro využití této konkrétní knihovny? Na to se podíváme právě v dnešním článku.
Stimulus
Skládá se ze čtyř hlavních částí - definice controlleru (komponenty), definice akce (eventy), definice targetů (referenční elementy na stránce) a data mapy (práce s daty controlleru). Celá krása v tomto řešení je, že jednotlivé controllery si udržují svojí životnost, tz. můžete libovolně vzít část kódu ze stránky nebo naopak přidat kompletně nový kód a umístit ho kamkoliv. Následně veškeré eventy a data zůstanou zachované a budou stále fungovat bez nutnosti cokoliv znovu reinitovat. Toto funguje výborně se všema ostatníma knihovnama pro překreslování obsahu.
Další hlavní výhodou Stimulusu a všech ostatních MVC frameworků je jednoduchost a jednotný zápis definice eventů. V jQuery si v podstatě lze event nadefinovat absolutně jakkoliv a většinou je v tom pak strašný nepořádek. Ve stimulusu se eventy definují následujícím způsobem.
Jedná se o jednoduchý zápis na frontendu, z kterého lze jasně poznat, co přesně event dělá a kde hledat jeho definici. Nebudeme do detailu vypisovat, jak knihovna funguje, doporučujeme raději navštívit stránky stimulusjs.org a podívat se na příklady. Knihovna je vyvíjená od tvůrců Basecamp a momentálně probíhá práce na verzi 2.
Swup
Pomalé přenačtení obsahu celé stránky dneska není moc hezké řešení. Většina knihoven dnes řeší jen překreslování jednotlivého obsahu, který se mění. Jak již bylo řečeno, stále však chceme řešit vykreslování stránek přes backend. K takovému řešení jsou skvělé knihovny jako Swup nebo Turbolinks. Vzhledem ke své jednoduchosti, jsme si už přes pár lety vybrali Swup. Knihovna při každém načtení nové stránky překreslí jen oblasti, které jsou pro to definované. Funguje to opravdu skvěle, a to včetně možností přidání libovolných animací při změně stránky. Swup právě dokonale kooperuje se Stimulusem, protože po každém překreslení stránky není potřeba opět definovat eventy a javascriptovou funkcionalitu na stránce - vše se děje automaticky. K jednotlivému překreslování dílčího dynamického obsahu na stránce pomocí ajaxu je pak skvělé přidat taky knihovnu Naja. Tím máme v podstatě vyřešené všechno - překreslování celých stránek, překreslování dílčího obsahu a zajištění interakce na stránkách.
Locomotive
Třetí knihovna na kterou nedáme dopustit je Locomotive Scroll. Scrollování stránek na počítačích není úplně ideální a doposud neexistuje CSS vlastnost, která by toto vylepšila a zajistila "smooth experience" na každém zařízení. Existuje mnoho knihoven, které se to snaží řešit, ale žádná nefunguje tak skvěle jako Locomotive. Scrollování myší je ihned mnohem příjemenější. Navíc lze přidat i různé efekty jako parallax nebo zobrazení obsahu při scrollu.
Shrnutí
Frontend se snažíme stále vylepšovat a to hlavně v oblasti technologí a rychlosti. Odstraněním jQuery jsme ušetřili 50% celkové datové náročnosti načítaného javascriptu. Dbáme na to, aby se používali jen takové knihovny, které jsou bezprostředně na webu potřeba. Práve díky tomu má náš nový Newlogic web v Google Pagepseed hodnocení přes 90%. Zde si pak můžete prohlédnout použití těch nejmodernějších řešení, jak už zmíněných knihoven nebo dalších řešení jako lazyload obrázků, webp, nativní css slidery a mnoho dalšího.