AlpineJS

Potrebujete pre menu, modal a filter naozaj celý frontendový framework?

AlpineJS pridá na web interaktivitu v kilobajtoch, nie v megabajtoch. Rozbaľovacie menu, modaly, taby, filtre a logika formulárov fungujú priamo v HTML, bez samostatnej frontendovej aplikácie a bez zložitého buildu.

Prebrať interaktivitu Späť na hlavnú stránku

Väčšina firemných webov potrebuje z interaktivity prekvapivo málo: otvoriť menu na mobile, zobraziť modal s formulárom, prepnúť taby, odfiltrovať zoznam a ukázať alebo skryť pole podľa výberu. Napriek tomu sa na takéto weby čoraz častejšie nasadzuje React alebo Vue. Do projektu tým pribudne build, stovky kilobajtov skriptov a celá vrstva, ktorú treba udržiavať a aktualizovať. Návštevník za to platí načítaním na mobile, klient cenou každej ďalšej zmeny.

AlpineJS rieši presne tento priestor. Je to malá knižnica, v ktorej sa správanie píše priamo do HTML atribútov, podobne ako sa kedysi používalo jQuery, ale s prehľadným deklaratívnym zápisom a reaktívnym stavom. Nepotrebuje virtuálny DOM ani vlastný build a do stránky sa pridá jedným súborom. Vo WordPress témach, v Sage projektoch aj na statických weboch tak dostanete interaktivitu, ktorá je čitateľná priamo v zdrojovom kóde a nezaťaží zvyšok webu.

Čo Alpine rieši a prečo je taký malý

Alpine má zhruba pätnásť kilobajtov a jeho celý slovník sa dá naučiť za jedno popoludnie. Stav sa deklaruje na elemente, podmienené zobrazenie, cykly, prechody a reakcie na udalosti sa zapíšu ako atribúty. Nie je to náhrada Reactu, ale doplnok pre weby, ktoré sú v jadre serverom generované HTML a potrebujú len oživiť. Práve preto sa nasadzuje rýchlo: nič sa neprepisuje, existujúca šablóna sa iba doplní o atribúty tam, kde má niečo reagovať.

Približne 15 kB oproti stovkám kB pri Reacte
Žiadny povinný build ani samostatná aplikácia
Správanie je viditeľné priamo v HTML
Dá sa doplniť do existujúceho webu postupne

Prvky, ktoré s Alpine robím najčastejšie

V praxi ide o rovnakú skupinu prvkov na väčšine projektov. Mobilné a viacúrovňové menu, modálne okná a bočné panely, taby a akordeóny v často kladených otázkach, filtrovanie a triedenie výpisov, kopírovanie do schránky, počítadlá znakov a upozornenia. Všetko sú to veci, ktoré musia fungovať spoľahlivo a prístupne, nie efektne. Pri každom prvku riešim aj ovládanie klávesnicou, správne ARIA atribúty a zatvorenie klávesom Escape, aby web ostal použiteľný aj bez myši.

Mobilné menu, rozbaľovacie zoznamy a bočné panely
Modaly a potvrdzovacie dialógy
Taby, akordeóny a FAQ sekcie
Filtrovanie, triedenie a živé vyhľadávanie vo výpise
Ovládanie klávesnicou a ARIA atribúty

Formuláre a logika bez vlastného API

Najviac času na bežnom webe zoberie logika formulárov. Zobraziť fakturačné údaje až po zaškrtnutí políčka, prepočítať cenu podľa vybranej varianty, overiť formát pred odoslaním, odoslať formulár na pozadí a ukázať výsledok bez opätovného načítania stránky. Alpine to zvládne bez toho, aby vznikla samostatná frontendová aplikácia. Serverová časť zostáva vo WordPresse alebo v Laraveli, kde už logika aj tak je, takže sa validácia neduplikuje na dvoch miestach s rizikom, že sa časom rozíde.

Podmienené polia a viackrokové formuláre
Prepočet ceny alebo súčtu v reálnom čase
Odoslanie na pozadí bez opätovného načítania stránky
Validácia zostáva na serveri ako zdroj pravdy

Alpine a Tailwind ako prirodzená dvojica

Alpine a Tailwind CSS spolu fungujú veľmi dobre, pretože obidva držia všetko pri komponente: vzhľad v triedach, správanie v atribútoch. Pri čítaní šablóny vidíte naraz, ako prvok vyzerá aj čo robí, bez hľadania v troch súboroch. Prechody a animácie sa dajú riešiť Tailwind triedami, ktoré Alpine prepína. V Sage téme sa z toho stane komponent, ktorý sa použije na desiatich stránkach a spravuje sa na jednom mieste.

Vzhľad aj správanie na jednom mieste v šablóne
Animácie cez Tailwind triedy prepínané Alpine
Zapadá do Sage komponentov aj statických webov
Menej súborov, v ktorých treba hľadať pri zmene

Kedy Alpine nestačí a je lepší React

Alpine neodporúčam všade. Ak je jadrom projektu rozsiahle rozhranie s vlastným smerovaním, zdieľaným stavom naprieč obrazovkami, offline režimom alebo tabuľkami s tisíckami riadkov, React či Vue dá tímu lepšie nástroje. Hranicu vidím tam, kde už stav prestáva patriť jednému prvku a začína patriť celej aplikácii. Bežné weby, prezentácie, e-shopy s klasickým košíkom a WordPress témy sú však presne ten prípad, kde je Alpine dostatočný a o rok lacnejší na údržbu. Cenu za doplnenie interaktivity na existujúci web dostanete písomne vopred.

React pri rozsiahlom rozhraní s vlastným smerovaním
React pri zdieľanom stave naprieč obrazovkami
Alpine pre weby postavené na serverovom HTML
Cena interaktivity písomne vopred, vrátane DPH

Časté otázky o AlpineJS

Je AlpineJS náhrada za React?

Nie, a ani sa o to nesnaží. Alpine oživuje stránky, ktoré generuje server, a stav drží pri konkrétnom prvku. React je vhodnejší tam, kde je frontend samostatná aplikácia s vlastným smerovaním a zdieľaným stavom naprieč obrazovkami.

Dá sa Alpine pridať na existujúci web?

Áno a je to najčastejší prípad. Alpine sa pridá jedným súborom a nasadzuje sa postupne po jednotlivých prvkoch. Nie je nutné prepisovať šablóny ani meniť spôsob, akým web funguje, takže sa dá začať jedným menu alebo modálom.

Nahradí Alpine jQuery na starších weboch?

Vo väčšine prípadov áno a výsledok býva čitateľnejší. jQuery obvykle rieši rovnaké úlohy dlhším a rozptýleným kódom. Ak však na webe visí plugin, ktorý jQuery vyžaduje, nechávam ho tam, kde je, a nové časti píšem v Alpine.

Ako je to s prístupnosťou a SEO?

Obsah generuje server, takže vyhľadávač aj čítačka obrazovky dostanú hotové HTML. Pri interaktívnych prvkoch dopĺňam ARIA atribúty, správne poradie pri prechádzaní klávesnicou a zatváranie klávesom Escape. Skryté časti sa neskrývajú spôsobom, ktorý by mátol vyhľadávače.

Koľko stojí doplnenie interaktivity na web?

Jednotlivý prvok ako menu, modal alebo taby je malá úprava od 25 €. Cenu kompletnejšej sady prvkov na webe vrátane DPH dostanete písomne vopred.

Bezplatná kontrola webu

Neviete, či je s vaším webom všetko v poriadku? Pozriem sa naň.

Pošlite adresu a pár slov o tom, čo vás trápi. Prejdem rýchlosť, mobilnú verziu, chyby a to, či sa návštevník ľahko dostane ku kontaktu, a napíšem vám, čo by som riešil ako prvé. Bez poplatku a bez povinnosti ďalšej spolupráce.

Potrebujete web oživiť bez toho, aby ste ho prepísali?

Napíšte mi, ktoré prvky majú reagovať a na čom web beží. Poviem, či to zvládne Alpine, koľko to bude stáť a čo by som riešil inak.

Prebrať interaktivitu