Programování

Jamstack: Revoluce statického webu urychluje vývoj webu

Jamstack je stále populárnější filozofie vývoje webu, jejímž cílem je urychlit proces vývoje webu i dobu stahování webových stránek. Jamstack čerpá z pohybu devops a technik kontinuální integrace / nepřetržitého doručování (CI / CD), které se stávají normou v mnoha organizacích, a vylepšuje dlouhodobé techniky pro vytváření interaktivních webových stránek a přesouvá načítání kódu z webových serverů směrem k JavaScriptu v prohlížeči a externím službám přístupným prostřednictvím aplikačních programovacích rozhraní (API).

Co je Jamstack? Jamstack, definováno

Jamstack je model webové aplikace založený na třech pilířích, které obsahují iniciály ve svém názvu: JavaScript, API, a označení. Webové stránky pro web Jamstack se skládají ze standardního značkovacího jazyka, takže je lze vytvářet a testovat kdekoli, bez závislostí na aplikačních serverech nebo technologiích na straně serveru, jako je Node.js. Veškeré interaktivní funkce poskytuje standardní kód JavaScript, který se spouští v prohlížeči a umožňuje volání opakovaně použitelných rozhraní API přes HTTPS, aby získal přístup k externím datům nebo jiným funkcím, které nelze integrovat do samotné webové stránky.

Abychom pochopili, proč je filozofie Jamstacku revoluční, zvažte LAMP stack, který je příkladem způsobu, jakým většina vývojářů přemýšlí o vývoji webů po většinu posledních 15 let. LAMP znamená Linux (OS, který napájí většinu webových serverů), Apache (serverový software běžící na těchto strojích s Linuxem), MySQL (databáze, kde jsou uloženy informace, které webová aplikace potřebuje) a PHP / Perl / Python (jazyk, ve kterém je napsán kód na straně serveru). Když nasměrujete prohlížeč na web založený na LAMP, webový server provede kód na straně serveru, který generuje webovou stránku za běhu a podle potřeby kreslí data z databáze MySQL.

Architektura LAMP umožňuje vytváření dynamických a interaktivních webů, ale také vyžaduje výkonný webový server - a čím více provozu web získá, tím více výpočetního výkonu na straně serveru potřebuje. Dokonce i s plně vybaveným serverem může vytvoření a načtení dynamických webových stránek trvat dlouho. Ve světě lidí s krátkou pozorností procházejících web na svých telefonech je toto zpoždění stále nepřijatelné.

Jamstack se zrodil jako součást hnutí „statický web“, které vzniklo v polovině 2010s jako reakce proti tomuto tradičnímu modelu, jak by měl web fungovat. Abyste porozuměli Jamstacku, musíte pochopit dnešní technologii za seboustatické webové stránky.

Statické weby, statické generátory webů a Jamstack

Pokud byste museli úplnému nováčkovi vysvětlit, jak web funguje, mohlo by to vypadat například takto: Někde v souborovém systému webového serveru jsou soubory HTML přístupné prostřednictvím adres HTTP, které webový prohlížeč stáhne a poté interpretuje a vytvoří webovou stránku. . Ale to je popis a statické stránky: Předpokládá, že soubory HTML již existují, když je webový prohlížeč hledá. Jak jsme již viděli, velké části webu v posledním desetiletí dominovaly dynamické weby, které místo toho generují soubory HTML za běhu v reakci na webové požadavky, často na základě parametrů předávaných webovému serveru prostřednictvím formulářů nebo v Samotná URL.

V raných dobách webu, kdy byly webové stránky vždy statické, mnoho vývojářů webu napsalo kód HTML ručně. Jak se webové stránky staly složitějšími, dorazily nástroje jako Macromedia's Dreamweaver, které mohly tyto statické stránky HTML programově generovat. Jak se pohyb statického webu rozběhl v polovině 2010, začala nová vlna tzv statické generátory stránek se začaly objevovat, včetně Gatsbyho, Huga a Jeckyll. Na rozdíl od nástrojů WYSIWYG, jako je Dreamweaver, jsou statické generátory webů řízeny z příkazového řádku a jsou navrženy tak, aby byly integrovány do procesů CI / CD. Nástroje HTML generují soubory HTML, často založené na obsahu napsaném v Markdownu, a automaticky se nahrávají do úložiště správy verzí, jako je GitHub. Protože jsou tyto soubory označeny jako připravené k produkci, statické stránky na živém webu se automaticky aktualizují.

Je důležité mít na paměti, že statický v tomto kontextu neznamená, že se jedná o jednoduché webové stránky 1.0, které nejsou interaktivní. Nezapomeňte, že tyto stránky mohou zahrnovat pokročilý JavaScript, který se spouští v prohlížeči a provádí volání API do databází, funkcí na straně serveru nebo hostovaných funkcí bez serveru. Ale protože k žádnému z těchto výkonů nedochází na samotném webovém serveru, statický web nepotřebuje průmyslového webového hostitele s databází. Mnoho statických webů je nasazeno na sítě pro doručování obsahu, nebo CDN, kde se obsah zrcadlí na více serverech po celém světě, aby mohl být rychle doručen uživatelům kdekoli.

Mathieu Dionne, vedoucí marketingu ve společnosti Snipcart, popisuje v blogovém příspěvku počátky tohoto nového světa statických webů a uvádí, že kolem roku 2015 „zakladatelé Netlify ... právě přišli s termínem„ Jamstack “ negativní konotace „statického webu“. “Jinými slovy, v této části popisujeme proces Jamstack. Nyní však musíme krátce diskutovat o Netlify a jejich roli v ekosystému.

Co je Netlify?

Netlify je cloudová výpočetní a webhostingová společnost. Spoluzakladatel Netlify Mathias Biilmann vytvořil termín Jamstack a služby Netlify jsou šité na míru zákazníkům, kteří chtějí stavět weby založené na filozofii Jamstack.

Netlify tvrdí, že prolomil konkrétní problém, který brzdil statické stránky, což je zneplatnění mezipaměti. Databázové dynamické webové stránky mohou spotřebovat spoustu serverových zdrojů, ale můžete si být jisti, že budou poskytovat nejnovější verzi vašeho webu každému návštěvníkovi, který se zastaví. Protože webové stránky Jamstack jsou často hostovány na více distribuovaných serverech CDN, aktualizace jsou méně přímočaré. Může trvat kdekoli od několika minut až hodin, než každý server CDN zjistí, že jeho verze webu v mezipaměti již není platná. CDN společnosti Netfliy poskytuje okamžité zneplatnění mezipaměti pro soubory HTML, aby se tento problém vyřešil.

Netlify však není jediným poskytovatelem hostingu v prostoru Jamstack a nad tímto výrazem nemá žádnou ochrannou známku ani vlastnickou kontrolu. K dispozici je řada řešení hostování a nasazení Jamstacku a většina velkých poskytovatelů cloudu se do akce zapojuje, včetně AWS, Google Firebase a Microsoft Azure.

CMS Jamstack

Pokud jste někdo, kdo se musí každodenně zabývat webem, víte, že vytváření a hostování webu je jen začátek. Potřebujete také způsob, jak vytvořit nový obsah a přidat ho na svůj web. Protože lidé, kteří to budou dělat, obvykle nebudou programátory, budou potřebovat uživatelsky přívětivý nástroj - jmenovitě systém pro správu obsahu, nebo CMS. Tradiční CMS, jako je WordPress, nabízejí uživatelské rozhraní typu back-end, kde můžete zadávat obsah webu, spravovat databázi, kde je tento obsah uložen, a vytvářet dynamické webové stránky, které tento obsah prezentují v reakci na požadavky prohlížeče.

CMS pro stránky Jamstack fungují odlišně a obecně se o nich říká bezhlavý. Bezhlavý CMS nabízí uživatelské rozhraní pro zadávání a správu obsahu a databázi nebo jiné prostředky k jeho ukládání, ale sám o sobě negeneruje HTML kód pro analýzu prohlížeče. Místo toho statické stránky HTML webu používají k volání rozhraní API systému CMS JavaScript a CMS vrací obsah ve formátu, který JavaScript může proměnit na webovou stránku.

Tento systém důkladně odděluje obsah od prezentace, což je samozřejmě dlouhodobý ideál programování. Protože CMS má přístupné API, může k němu snadno přistupovat více webových stránek. Pokud jste například vytvořili samostatnou verzi svého webu pro mobily, počítače a chytré hodinky, všechny tyto verze mají přístup ke stejnému obsahu uloženému v CMS.

Netlify, jak můžete očekávat, má v tomto prostoru svou vlastní nabídku nazvanou NetlifyCMS, ale k dispozici je řada dalších nabídek; vývojář Nebojsa Radakovic je pro vás rozdělí v příspěvku na blogu. Na tomto seznamu je spousta up-and-příchozích, stejně jako jedno velmi známé jméno. Zatímco jsme jako příklad tradičního CMS použili WordPress, WordPress lze provozovat také jako bezhlavý CMS pro napájení stránek Jamstack.

Konference Jamstack

Netlify také pracuje na vytvoření komunity Jamstack a sponzoruje konference Jamstack. Společnost uspořádala akce v New Yorku, Londýně a San Francisku v roce 2019 a v květnu 2020 uspořádala virtuální událost. V době psaní tohoto článku se můžete zaregistrovat na akci v San Francisku naplánovanou na 6. – 7. Října 2020. pandemie koronaviru má ve vzduchu stále plány na konferenci.

Pokud chcete dostávat novinky, můžete konferenci sledovat na Twitteru. Můžete si také prohlédnout minulé rozhovory na kanálu Jamstack Conf YouTube.

[Také na: 6 nejlepších IDE JavaScriptu | 10 nejlepších editorů JavaScriptu]

Výukové lekce Jamstack

Chcete jít hlouběji? Podívejte se na tyto výukové programy Jamstack, které vám poskytnou praktické zkušenosti s vytvářením stránek Jamstack:

  • Vývojář David Neal má dobrý úvodní tutoriál o vytváření stránek Jamstack, který začíná velmi jednoduše a je stále složitější.
  • Na blogu LogRocket poskytuje softwarový inženýr Ogundipe Samuel podrobný podrobný pohled na budování webu elektronického obchodování na principech Jamstack.
  • Netlify nabízí tříhodinový videonávod, který pokrývá mnoho základů od základních až po pokročilejší témata.

Jakmile si osvojíte základní koncepty zde uvedené, budete připraveni začít pracovat s vývojem Jamstack ve svém profesionálním životě. Šťastné učení!