{"language":"sk","path":"/sluzby/alpinejs/","switchPath":"/en/services/alpinejs-development/","kind":"service","tags":["frontend","code","lightweight"],"title":"AlpineJS vývoj | Ľahká interaktivita bez Reactu | Šimon Cihra","metaDescription":"AlpineJS na weby a WordPress témy: menu, modaly, taby, filtre a logika formulárov v kilobajtoch. Kedy stačí Alpine a kedy je lepší React. Ceny a rozsah.","kicker":"AlpineJS","h1":"Potrebujete pre menu, modal a filter naozaj celý frontendový framework?","lead":"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.","intro":["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."],"sections":[{"title":"Čo Alpine rieši a prečo je taký malý","paragraphs":["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ť."],"points":["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"]},{"title":"Prvky, ktoré s Alpine robím najčastejšie","paragraphs":["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."],"points":["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"]},{"title":"Formuláre a logika bez vlastného API","paragraphs":["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."],"points":["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"]},{"title":"Alpine a Tailwind ako prirodzená dvojica","paragraphs":["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."],"points":["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"]},{"title":"Kedy Alpine nestačí a je lepší React","paragraphs":["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."],"points":["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"]}],"faqTitle":"Časté otázky o AlpineJS","faq":[{"question":"Je AlpineJS náhrada za React?","answer":"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."},{"question":"Dá sa Alpine pridať na existujúci web?","answer":"Á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."},{"question":"Nahradí Alpine jQuery na starších weboch?","answer":"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."},{"question":"Ako je to s prístupnosťou a SEO?","answer":"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."},{"question":"Koľko stojí doplnenie interaktivity na web?","answer":"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."}],"relatedTitle":"Súvisiace služby","related":[{"label":"Všetky služby","href":"/sluzby/","description":"Prehľad webových služieb a možností spolupráce."},{"label":"Tailwind CSS","href":"/sluzby/tailwind-css/","description":"Dizajnový systém a konzistentné komponenty naprieč webom."},{"label":"Sage a Blade","href":"/sluzby/sage-a-blade/","description":"Moderné WordPress témy s čistou štruktúrou a komponentmi."},{"label":"PHP vývoj","href":"/sluzby/php-vyvoj/","description":"Vlastné pluginy, serverová logika a záchrana starého kódu."},{"label":"Bedrock WordPress","href":"/sluzby/bedrock-wordpress/","description":"Composer, mu-pluginy a nasadenia z gitu pre udržateľný WordPress."}],"ctaTitle":"Potrebujete web oživiť bez toho, aby ste ho prepísali?","ctaText":"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.","ctaLabel":"Prebrať interaktivitu"}