Programovanie

Jamstack: Statická revolúcia webových stránok podporujúca vývoj webu

Jamstack je čoraz populárnejšia filozofia vývoja webu, ktorej cieľom je urýchliť proces vývoja webu aj časy sťahovania webových stránok. Vychádzajúc z pohybu devops a techník nepretržitej integrácie / nepretržitého doručovania (CI / CD), ktoré sa stávajú normou v mnohých organizáciách, Jamstack zdokonaľuje dlhotrvajúce techniky budovania interaktívnych webových stránok a posúva vykonávanie kódu načítania mimo webové servery a smerom k JavaScriptu v prehliadači a externým službám prístupným prostredníctvom aplikačných programovacích rozhraní (API).

Čo je Jamstack? Jamstack, definované

Jamstack je model webovej aplikácie založený na troch pilieroch, ktoré vo svojom názve obsahujú iniciály: JavaScript, API, a označenie. Webové stránky pre web Jamstack pozostávajú zo štandardného značkovacieho jazyka, takže je ich možné vytvárať a testovať kdekoľvek, bez závislostí na serveroch aplikácií alebo technológiách na strane servera, ako je Node.js. Všetky interaktívne funkcie poskytuje štandardný kód JavaScript, ktorý sa spúšťa v prehliadači a umožňuje volať opakovane použiteľné rozhrania API cez HTTPS, aby získal prístup k externým údajom alebo iným funkciám, ktoré nemožno zabudovať do samotnej webovej stránky.

Aby ste pochopili, prečo je filozofia Jamstacku revolučná, pouvažujte nad zásobníkom LAMP, ktorý je príkladom toho, ako väčšina vývojárov uvažuje o vývoji webu po väčšinu posledných 15 rokov. LAMP znamená Linux (OS, ktorý napája väčšinu webových serverov), Apache (serverový softvér bežiaci na týchto strojoch so systémom Linux), MySQL (databáza, kde sú uložené informácie, ktoré webová aplikácia potrebuje), a PHP / Perl / Python (jazyk, v ktorom je napísaný kód na strane servera). Keď smerujete prehliadač na webovú stránku založenú na LAMP, webový server vykoná kód na strane servera, ktorý generuje webovú stránku za behu a podľa potreby čerpá údaje z databázy MySQL.

Architektúra LAMP umožňuje vytváranie dynamických a interaktívnych webových stránok, ale vyžaduje tiež výkonný webový server - a čím viac servera dostane prevádzku, tým viac výpočtového výkonu na strane servera potrebuje. Aj s plne vybaveným serverom sa môže vytvorenie a načítanie dynamických webových stránok trvať dlho. Vo svete ľudí s krátkou pozornosťou, ktorí prezerajú web na svojich telefónoch, je toto oneskorenie čoraz neprijateľnejšie.

Jamstack sa zrodil ako súčasť hnutia „statický web“, ktoré vzniklo v polovici 2010. rokov ako reakcia proti tomuto tradičnému modelu fungovania webových stránok. Ak chcete porozumieť Jamstacku, musíte pochopiť dnešnú technológiu pozadustatické webové stránky.

Statické stránky, statické generátory stránok a Jamstack

Ak by ste úplnému nováčikovi museli vysvetľovať, ako web funguje, mohlo by to ísť asi takto: Niekde v súborovom systéme webového servera sa nachádzajú súbory HTML prístupné cez adresy HTTP, ktoré webový prehliadač stiahne a potom interpretuje a vytvorí tak webovú stránku. . Ale toto je popis a statická stránka: Predpokladá, že súbory HTML už existujú, keď ich vyhľadáva webový prehľadávač. Ako sme už videli, veľkej časti webu za posledné desaťročie dominovali dynamické stránky, ktoré namiesto toho generujú súbory HTML priebežne v reakcii na webové požiadavky, často na základe parametrov odovzdaných webovému serveru prostredníctvom formulárov alebo v Samotná URL.

V úplných začiatkoch webu, keď boli webové stránky vždy statické, napísali mnohí vývojári webu kód HTML ručne. Keď sa webové stránky stávali zložitejšími, prišli nástroje ako Macromedia's Dreamweaver, ktoré tieto statické stránky HTML mohli programovo generovať. Keď sa pohyb statického webu rozbehol v polovici 2010, nastala nová vlna tzv statické generátory stránok začali vznikať vrátane Gatsbyho, Huga a Jeckyll. Na rozdiel od nástrojov WYSIWYG, ako je Dreamweaver, sú statické generátory webov riadené príkazovým riadkom a sú navrhnuté tak, aby boli integrované do procesov CI / CD. Súbory HTML sú generované nástrojmi, často na základe obsahu napísaného v Markdowne, a automaticky sa nahrávajú do úložiska riadenia verzií, ako je GitHub. Pretože sú tieto súbory označené ako pripravené na výrobu, statické stránky na živom webe sa automaticky aktualizujú.

Je dôležité mať na pamäti to statický v tomto kontexte neznamená, že sa jedná o jednoduché webové stránky 1.0, ktoré nie sú interaktívne. Pamätajte, že tieto stránky môžu obsahovať pokročilý JavaScript, ktorý sa spúšťa v prehľadávači a umožňuje volania API do databáz, funkcií na strane servera alebo hostovaných funkcií bez servera. Pretože sa však nič z tohto vykonania nestane na samotnom webovom serveri, statická stránka nepotrebuje priemyselného webového hostiteľa s databázou. Mnoho statických webov je nasadených na serveri siete na doručovanie obsahu, alebo CDN, kde sa obsah zrkadlí na viacerých serveroch po celom svete, aby sa používateľom rýchlo doručil kdekoľvek.

Mathieu Dionne, vedúci marketingu v spoločnosti Snipcart, popisuje v blogovom príspevku začiatky tohto nového sveta statických stránok a uvádza, že okolo roku 2015 „zakladatelia Netlify ... práve prišli s pojmom„ Jamstack “, aby mohli pracovať negatívna konotácia „statického webu“. “Inými slovami, proces Jamstack popisujeme v tejto časti. Teraz však musíme stručne prediskutovať Netlify a ich úlohu v ekosystéme.

Čo je Netlify?

Netlify je spoločnosť poskytujúca cloud a počítačový hosting. Spoluzakladateľ spoločnosti Netlify Mathias Biilmann vytvoril termín Jamstack a služby Netlify sú šité na mieru zákazníkom, ktorí chcú stavať weby na základe filozofie Jamstack.

Netlify tvrdí, že prelomil konkrétny problém, ktorý brzdil statické stránky, čo je zneplatnenie vyrovnávacej pamäte. Databázové dynamické webové stránky môžu stráviť veľa serverových zdrojov, ale môžete si byť istí, že poskytnú najnovšiu verziu vášho webu každému návštevníkovi, ktorý sa zastaví. Pretože webové stránky Jamstack sú často hostené na viacerých distribuovaných serveroch CDN, aktualizácie sú menej priame. Môže trvať kdekoľvek od niekoľkých minút až hodín, kým každý server CDN zistí, že jeho verzia stránky v medzipamäti už nie je platná. Sieť CDN spoločnosti Netfliy poskytuje okamžité zneplatnenie vyrovnávacej pamäte pre súbory HTML, aby sa tento problém vyriešil.

Netlify však nie je jediným poskytovateľom hostenia v priestore Jamstack a nad týmto výrazom nemá nijakú ochrannú známku ani majetkovú kontrolu. K dispozícii je množstvo riešení Jamstack pre hosťovanie a nasadenie a väčšina veľkých poskytovateľov cloudových služieb sa do akcie zapojila, vrátane AWS, Google Firebase a Microsoft Azure.

CMS Jamstack

Ak ste niekto, kto musí pracovať s webovou stránkou každý deň, viete, že vytvorenie a hostenie webovej stránky je len začiatok. Potrebujete tiež spôsob, ako vytvoriť nový obsah a pridať ho na svoju stránku. Pretože ľudia, ktorí to budú robiť, zvyčajne nebudú programátormi, budú potrebovať užívateľsky príjemný nástroj - konkrétne systém pre správu obsahu, alebo CMS. Tradičné CMS, ako napríklad WordPress, ponúkajú používateľské rozhranie typu back-end, kde môžete zadávať obsah webových stránok, spravovať databázu, kde je tento obsah uložený, a vytvárať dynamické webové stránky, ktoré tento obsah prezentujú na základe požiadaviek prehliadača.

CMS pre stránky Jamstack fungujú rôzne a všeobecne sa o nich hovorí bezhlavý. Bezhlavý CMS ponúka používateľské rozhranie na zadávanie a správu obsahu a databázu alebo iný spôsob jeho ukladania, sám však negeneruje kód HTML na analýzu prehľadávača. Namiesto toho statické stránky HTML webových stránok používajú na uskutočňovanie hovorov rozhrania API systému CMS JavaScript. CMS vráti obsah vo formáte, ktorý môže JavaScript zmeniť na webovú stránku.

Tento systém dôkladne oddeľuje obsah od prezentácie, čo je samozrejme dlhodobý ideál programovania. Pretože má CMS prístupné API, môže k nemu ľahko pristupovať viac webových stránok. Napríklad ak ste vytvorili samostatnú verziu svojho webu pre mobilné zariadenia, počítače a smart hodinky, všetky tieto verzie majú prístup k rovnakému obsahu uloženému v CMS.

Netlify, ako možno čakáte, má v tomto priestore svoju vlastnú ponuku s názvom NetlifyCMS, ale k dispozícii je množstvo ďalších ponúk; vývojár Nebojsa Radakovic ich pre vás rozdelí v blogovom príspevku. Na tomto zozname je veľa záujemcov, ako aj jedno veľmi známe meno. Aj keď sme ako príklad tradičného CMS použili WordPress, WordPress je možné prevádzkovať ako CMS bez hlavy aj na napájanie stránok Jamstack.

Jamstack konferencia

Netlify tiež pracuje na vytvorení komunity Jamstack a sponzoruje konferencie Jamstack. Spoločnosť usporiadala udalosti v New Yorku, Londýne a San Franciscu v roku 2019 a v máji 2020 usporiadala virtuálnu akciu. Od tohto písania sa však môžete zaregistrovať na akciu v San Franciscu naplánovanú na 6. - 7. októbra 2020. pandémia koronavírusu má vo vzduchu stále plány na pád.

Ak potrebujete ďalšie informácie, môžete sledovať konferenciu na Twitteri. Môžete si tiež pozrieť minulé rozhovory na kanáli Jamstack Conf YouTube.

[Tiež na: 6 najlepších IDE JavaScriptu | 10 najlepších editorov JavaScriptu]

Výukové programy pre Jamstack

Pozeráte sa hlbšie? Vyskúšajte tieto návody na Jamstack, ktoré vám poskytnú praktické skúsenosti s vytváraním stránok Jamstack:

  • Vývojár David Neal má dobrý úvodný návod na vytváranie stránok Jamstack, ktorý začína veľmi jednoducho a potom je čoraz zložitejší.
  • Na blogu LogRocket poskytuje softvérový inžinier Ogundipe Samuel podrobný a podrobný pohľad na budovanie webu elektronického obchodu na princípoch Jamstack.
  • Netlify ponúka trojhodinový videonávod, ktorý pokrýva množstvo oblastí od základných až po pokročilejšie témy.

Keď si osvojíte základné tu uvedené koncepty, budete pripravení začať pracovať s vývojom Jamstack vo svojom profesionálnom živote. Šťastné učenie!

$config[zx-auto] not found$config[zx-overlay] not found