Už v novembri roku 2015 vyšiel na smashingmagazine.com článok Prečo sú generátory statických stránok Ďalšou Veľkou Vecou. Myslené na internete, samozrejme. A zdá sa, že autor trafil klinec po hlavičke. Napríklad nové CMS Grav využívajúce takýto generátor a uchovávajúce stránky či články ako súbory, a nie v databáze, následne v roku 2016 získalo ocenenie Best Open Source CMS. A ako huby po daždi sa začali objavovať nové generátory, internetom začali rezonovať nové výrazy ako JAMstack, vznikly preň nové služby, atď. Poďme sa preto bližšie pozrieť čo sa skrýva za úspechom Grav čo sú vlastne Static Site Generators, prečo sú považované za The Next Big Thing, čo je JAMstack architektúra a ako to celé môže pomôcť aj vám. Static Site Generators Generátory statických stránok nie sú nový nápad, ich popularita začala rásť už v roku 2012. Avšak nadvlády WordPress a pod. sa prakticky ani nedotkli. Prečo teda to halo okolo toho až teraz? No teraz ako kde. Niekde už dlhšiu dobu, ale na Slovensku Ešte aj dnes väčšina našich IT firiem, ktoré sa zaoberajú zákazkovou tvorbou web stránok, nasadzuje nové weby nad WordPress, Joomla, Drupal, atď., prípadne nad vlastnými CMS, ktoré však väčšinou zdieľajú s menovanými ten istý princíp obsah stránok / článkov sa ukladá na serveri do databázy. Možno sa mýlim, ale keď som skúsil vygoogliť čisto slovenské výsledky na kľúčové slovo JAMstack, ponúkol mi Google jediný, veľmi zevrubný článok, aj to od čecha. Pričom vo svete čoraz viac firiem siaha po tejto novej architektúre. Ešte aj samotný smashingmagazine.com na ktorom vyšiel spomínaný článok sa rozhodol pre heroický krok migrovať všetky svoje články z WordPress na Netlify platformu. Inými slovami ísť cestou statických stránok, miesto dynamicky generovaných. Ale v našich končinách ani jeden článok, v Čechách jeden. Ten zevrubný Prv ako si vysvetlíme ich podstatu, pripomeňme si najskôr ako fungujú tradičné, najbežnejšie CMS na trhu: a ak od neho požadujete stránku, na základe URI sa na strane servera najskôr stiahne obsah tejto stránky z databázy, za behu sa vygeneruje konečné HTML podľa príslušnej šablóny a až potom je takto vyskladaná stránka odoslaná do prehliadača. Nezáleží na tom, či ste na strane servera použili ako databázu MySQL a PHP ako jazyk ktorý tie stránky skladá, alebo MongoDB s Node a stránky skladáte pomocou JavaScriptu. A už vôbec nie na použitom frameworku či ste zvolili Laravel pre PHP a ako šablónovací jazyk Blade, alebo Express pre Node a šablóny definujete s Pug. Ide o princíp obsah je v databáze a stránky v princípe neexistujú. Sú tvorené za behu onfly po obdržaní požiadavky requestu na stránku. Ešte raz dôrazňujem nejde o technológie stack použitý pre túto architektúru. Či už ste použili Apache-PHP-MySQL, alebo Node-JS-NoSQL, či Tomcat-Java-Oracle, je to jedno. Na druhej strane, Static Site Generators na to idú inak, na prvý pohľad komplikovanejšie: ak napríklad chcete pridať nový článok, najčastejšie ho musíte napísať ako .md súbor. Čiže plain text s využitím Markdown značiek, nie HTML, navyše napísaný aj uložený u seba, lokálne. Ďalej musíte mať HTML šablónu s využitím nejakého šablónovacieho systému, napríklad Mustache. To celé vám beží nad Node platformou, na ktorej následne pustíte na build proces, ktorého výsledkom je statická HTML stránka s obsahom z príslušného .md súboru a výzorom podľa Mustache šablóny. To je samozrejme príliš povrchný a málo pochopiteľný náhľad, preto si to opíšme ešte podrobnejšie v najjednoduchšom prípade ide o toto: žiadne admin rozhranie zavesené vonku na webe v ktorom si pohodlne, vo Word like online editore napíšete obsah. Vývoj s JAMstack architektúrou sa odohráva výlučne lokálne. S využitím Node platformy, príslušných npm knižníc so static site generatorom a stránky / príspevky sa neukladajú do databázy, ale do priečinka ako samostatné súbory v .md formáte. Plus musíte napísať, zvyčajne v toml, alebo yaml formáte, konfiguračný súbor s meta informáciami. Čo je čo tento .md súbor je stránka, tento je zasa článok, takáto bude štruktúra menu a pod. Následne nad tým celým pustíte build a nad vykompilovanými stránkami pustíte deploy proces, ktorý vám ich umiestni na vami zvolené CDN. Čiže nie na klasický web hosting. On aj rozmach rôznych cenovo dostupných často zdarma Content Delivery Networks, stojí vlastne za vzmáhajúcou sa popularitou tejto architektúry JAMstack So Static Site Generators je úzko spätá JAMstack architektúra. Čo samo o sebe je len skratka pre JavaScript, APIs, Markup. Prečo úzko spätá? Lebo bez nej by nebolo možné konkurovať dynamickým CMS. Je pravda, statické stránky servírované z CDN budú načítané naozaj rýchlo, o to pokoj, ale čo ak tam chcem čo len kontaktný formulár? Ten mám ako implementovať so statickými stránkami? Nijako, statická stránka je statická stránka. Preto sa aj Static Site Generators nepoužívajú sami o sebe, ale skôr ako súčasť celého JAMstacku. Dá sa povedať, že v tejto architektúre predstavujú to M v názve. No a zvyšné dve písmená názvu, J a A, nám pomôžu nám pomôžu s tou dynamickou stránkou v tomto prípade s kontaktným formulárom, ktorého spracovanie si zavoláte ako API call spustené JavaScriptom na strane klienta. To je podstata. Čiže v tomto konkrétnom prípade už v samotnej šablóne vašej stránky musíte mať JavaScript, ktorý po kliknutí na Odoslať zavolá napríklad cez REST zo serveru API funkciu, ktorej odovzdáte obsah formulára, a až tá funkcia na serveri skomponuje a odošle email. Takže ako z toho vyplýva, nie je to len o CDN, to je len časť príbehu. Je to v konečnom dôsledku o rôznych serverless platformách, napríklad Google Firebase, Microsoft Azure, či Amazon AWS. Ak by sme použili napríklad googlovský BaaS Firebase, tak si v predchádzajúcom príklade musíme u seba napísať aj tú funkciu, to API volanie, čo odošle email. A deploy bude v tomto prípade obnášať nielen umiestnenie stránok na Firebase Hosting, ale aj umiestnenie API funkcie na Firebase Cloud Functions. JAMstack je proste úzko spätý s rôznymi NIEČO as a Service platformami BaaS, FaaS, CaaS, a pod. ale zároveň nie je na žiadnej konkrétnej závislý. Takže rovnako dobre si môžete samotné stránky zavesiť na Firebase Hosting, čo je tiež CDN, ale samotné API volanie si môžete umiestniť napríklad na Stdlib, čo je zasa FaaS, lebo vám viac sedí, že so Stdlib môžete vo svojej funkcii rovno použiť ES6, kým Firebase Cloud Functions bežia na LTS verzii Node, čiže podporujú bez transpilovania len ES5. Výhody a nevýhody Najskôr nevýhody, lebo minimálne dve sú zjavné: autori sa musia naučiť Markdown a pre každé pridanie článku je potrebná asistencia programátora. Možno vás to už aj samých napadlo. Veď keď pridám článok ako nový .md súbor, musí sa vo všetkých stávajúcich statických stránkach zmeniť minimálne menu. A keďže nie sú dynamicky generované, treba ich vlastne všetky nanovo pregenerovať, aby sa v každej objavila tá nová položka menu. A máte pravdu. Suma sumárum, okrem ťažšieho napísania článku, lebo Markdown, musí ešte aj programátor do konfiguračného súboru meta informácií pridať aj položku menu a pregenerovať všetky stránky nanovo. Lenže obe nevýhody sú relatívne. Po prvé, Markdown je lightway jazyk učí sa a používa rýchlo. A pregenerovanie, build celého projektu je taktiež veľmi rýchly. Navyše, s generátorom ako napríklad Hugo a so službou napríklad Netlify, si viete život s JAMstack výrazne uľahčiť. Hugo vám ponúka na stiahnutie asi stovku predpripravených šablón a iné funkcionality k tvorbe obsahu a Netlify, niečo ako BaaS, ale zamerané na JAMstack weby, vám zasa ponúka napríklad Continuous Deployment a iné služby, ktoré vám zasa zjednoduchšia tú programátorskú stránku veci. V praxi, ak sa chcete rýchlo dopracovať k výsledku, môžete skúsiť napríklad takýto postup: na stránke gohugo.io nájdete postup stiahnúť a nainštalovať Node, doinštalovať Hugo, stiahnúť predpripravenú šablónu, vytvoriť Markdown s obsahom, pustiť build a web je pripravený. Následne sa zaregistrovať na netlify.com a deploy pustiť naň. Hotovo Na oboch týchto stránkach nájdete podrobné návody je to naozaj asi najrýchlejšia cesta, ako si vytvoriť vlastný JAMstack based web. Prípadne si pozrite getgrav.org, hotové CMS A teraz tie výhody, ktoré takýmto prístupom získate: Rýchlosť Netlify je tiež CDN, dokonca tiež aj zdarma. Takže vaše stránky sa budú načítavať rýchlejšie ako WordPress generované. V priemere 6 krát rýchlejšie, keďže sa negenerujú onfly, ale už vygenerované sú. Nezávislosť na serverovej platforme. Vytočí vás Netlify? Zrušíte účet a presmerujete doménu napríklad na Firebase. Pretože si treba uvedomiť, kde žije váš kód napríklad na Githube, nie na web hostingu. Keď dokončíte svoj projekt, odporúča sa uploadnúť svoj kód napríklad tam. No a v prípade, že takto meníte svojho providera z Netlify na Firebase, nainštalujete si Node, Git, naklonujete projekt, npm install, build, deploy, hotovo. Žiadne zálohovanie a obnova databáz. Bezpečnosť nie len preto, že žiadna databáza žiadne SQLi. Ale všeobecne sú WordPress, Joomla, či Drupal inštalácie v kuse napádané. Každú chvíľu sa príde na nejaký nový exploit a kým sa CMS stihnú aktualizovať, milióny webov na nich postavené sú v tom momente zraniteľné. Škálovateľnosť. V prípade klasického web hostingu sa o škálovateľnosti ani nedá hovoriť. Kým CDN ju má z princípu vyrovná sa s ďaleko väčšou záťažou. Rovnako vaše API funkcie ťažia zo škálovateľnosti Node. Cena. Keďže žiadny klasický web hosting s PHP a databázou, náklady na server nula Prekvapivo, väčšina riešení pre JAMstack, či Netlify, či nejaký BaaS, sú v základe ponúkané zdarma a dostatočné pre väčšinu webov. Stačí si len zakúpiť doménu so službou (masked) redirect a môžete mať kompletný web. Rýchlejší a lacnejší. A v konečnom dôsledku aj lepšia Developer Experience, nie len UX User Experience. Záverom Čo dodať? Sú JAMstack a Static Site Generators naozaj The Next Big Thing? Ťažko povedať, avšak vyzerá to, že áno. Minimálne to vyzerá ako dobrý nápad. Tam, kde je dôležitý Time To Content rýchlosť načítania stránok, tam víťazí JAMstack architektúra. A rýchlosť načítania by mala byť vždy dôležitá. Ide predsa o užívateľov. Preto technológia, ktorá je schopná to zabezpečiť, rozhodne stojí za zváženie. Nieto ešte, keď väčšou rýchlosťou nie len užívatelia získavajú lepšie UX, ale váš web zároveň lepšie SEO. Už spomínaný smashingmagazine.com z tej migrácie chrochtal blahom rýchlosť načítania stránok im spadla z 800 milisekúnd na 80. DESAŤNÁSOBNÉ ZRÝCHLENIE. No nekúp to Ale samozrejme, žiadna, ani táto architektúra, nie je vhodná na všetky druhy webov. WordPress rozhodne odpísaný nie je, pri každom webe treba vopred zvážiť pre a proti. I keď tým proti JAMstack nemyslím zrovna, že kladie väčšie nároky na autorov článkov, že sa musia naučiť Markup jazyk to si myslím, že za vyššie uvedené výhody stojí. Skôr to, že s JAMstackom sa napríklad ťažko implementujú roles, viac úrovňové užívateľské práva, čo zas WordPress má v defaulte. A taký online chat? Tam už vyslovene treba aj databázu, to už nie je pravá JAMstack aplikácia, akokoľvek ju tiež postavíte nad BaaS. Pravá JAMstack aplikácia je doslova stateless, nezávislá na databáze, nezávislá na serveri. Konečné rozhodnutie teda vždy padne na základe povahy chystaného webu. Ale cieľom tohoto článku ani nebolo presvedčiť vás na nové, jediné pravé riešenie. A už vôbec nie naučiť vás z programátorského hľadiska ako na JAMstack. Len vám ukázať, že to ide aj inak a kde má to inak prínosy a slabinyThe post WordPress je odpísaný, “dal ho dole” JAMstack! first appeared on web stránky od 3W .
Nově zřízený Wordpress hosting má nyní EU či CZ doménu v ceně! Navíc je teď Wordpress hosting se slevou 40%!
prejsť na článokRozšířili jsme naši nabídku webhostingu o novou variantu WordPress.
prejsť na článokVyzkoušejte si s CZECHIA.com snadnou instalaci Open Source aplikací. WordPress si spustíte do jedné minuty!
prejsť na článokTým WordPressu odhalil kritickou zranitelnost pluginu Elementor pro Wordpress. Více informací přináší Interval.cz
prejsť na článokPrávě teď můžete mít profesionální hosting WORDPRESS vhodný pro webové stránky, ať už blog, firemní prezentaci nebo jiný projekt za výhodnou cenu.
prejsť na článok