JavaScript Link to heading
O dynamické funkcie sa stará JavaScript. Predstavte si, že chcem na svojej stránke kontaktný formulár. Ako ho implementujem len so statickými stránkami ? Neexistoval by spôsob, pretože statická stránka je statická stránka.
APIs Link to heading
Operácie na strane servera sa abstrahujú do API a pristupuje sa k nim cez HTTPS pomocou JavaScriptu.
Markup Link to heading
Webové stránky sa poskytujú ako statické súbory HTML. Môžu byť generované zo zdrojových súborov, ako je napríklad Markdown, pomocou statického generátora stránok.
Static Site Generators Link to heading
Generátory statických stránok nie sú novým nápadom, ale väčšina spoločností poskytujúcich webhosting nasadzuje nové webové stránky pomocou WordPressu atď., kde je obsah stránok/článkov uložený na serveri v databáze. Generátory statických stránok na druhej strane idú smerom k vopred generovaným statickým stránkam a potom ich poskytujú používateľom priamo prostredníctvom siete CDN.
Pripomeňme si, ako fungujú „tradičné“ najbežnejšie CMS na trhu: ak navštívite stránku, URI najskôr stiahne obsah tejto stránky z databázy na strane servera, potom príslušnú šablónu a až potom sa stránka naskladá a zobrazí v prehliadači. Nezáleží na tom, či používate MySQL ako databázu na strane servera a PHP ako jazyk, ktorý tieto stránky vytvára, alebo MongoDB s Node a stránky komponujete pomocou JavaScriptu. Toto je zásada - obsah sa nachádza v databáze a web ešte v skutočnosti neexistuje - vytvára sa priebežne až po prijatí žiadosti o stránku od používateľa.
Na druhej strane, statické generátory stránok (SSG) fungujú odlišne: ak požadujete stránku, stránka vo formáte html je už na strane servera pripravená na takmer okamžité zobrazovanie, všetky údaje na stránke boli pripravené vopred a poskytuje sa rovnakým spôsobom všetkým, ktorí navštívia vašu stránku. Teraz sa ponoríme trochu hlbšie. Celý váš obsah je zapísaný do súborov .md (Markdown) a tento obsah je potom vložený do súborov tém (html šablón) podľa vášho výberu podľa súboru pravidiel, všetko závisí od vybranej platformy statického generátora webových stránok, kde spustíte proces zostavovania, ktorý to urobí za vás, výsledkom bude statická stránka HTML s obsahom z príslušného súboru .md a vzhľadom podľa zvolenej šablóny. Vývoj s architektúrou JAMstack prebieha väčšinou lokálne, existujú však ‘bezhlavé’ systémy CMS, ktoré fungujú s väčšinou SSG (viac nižšie). Proces budovania môžete spustiť lokálne a iba skopírovať súbory html na svoj hostiteľský server alebo celý proces presunúť na stranu poskytovateľa hostiteľského servera (ak to podporujú), aby ste dokončili proces nasadenia, ktorý vaše súbory html umiestni na CDN podľa vášho výberu.
Aké sú výhody ? Link to heading
Pretože obsah JAMstack sa generuje počas ‘buildu’ a poskytuje sa pomocou CDN, výhodou je vyšší výkon.
Pretože sa nemusíte obávať zraniteľnosti servera / databázy, je tiež výhodou vyššia bezpečnosť.
Hosting statických súborov je veľmi lacný alebo dokonca zadarmo..
Z pohľadu vývojárov je to lepší zážitok, môžete sa sústrediť na klientske rozhranie bez toho, aby ste sa starali o architektúru na pozadí. To tiež prináša rýchlejší vývoj.
V neposlednom rade je to škálovateľné, CDN sa stará o kompenzáciu dopytu používateľov :)
Pracovný postup Link to heading
Pracovný postup JAMstack je dosť jednoduchý, ako príklad si môžeme pozrieť tento web a zverejnenie nového príspevku do blogu.
-
Obsah tvorím pomocou markdownových súborov, tieto súbory je možné zapisovať ručne alebo pomocou “bezhlavého” CMS ako napr. forestry.io alebo Netlify CMS a mnoho ďalších.
-
Keď je obsah pripravený, jednoducho vykonám zmeny pomocou gitu v mojom úložisku, ku ktorému je pripojený Netlify pre automatizované nasadenie. Netlify potom začne build pomocou Hugo statického generátora stránok, toto zostavenie mojej stránky trvá priemerne 30 sekúnd, pretože Hugo je extrémne rýchly;)
-
Po dokončení zostavenia Netlify zverejní zmeny vo svojom CDN a zneplatní vyrovnávaciu pamäť.
Zmeny sú aktívne od začiatku do konca do jednej minúty .. :)
Ako poznámka pod čiarou, existujú služby, ktoré kombinujú všetky vyššie uvedené vlastnosti a výhody, jednou z nich je stackbit, vyskúšajte si to !