Před několika lety jsme s několika přáteli měli ambiciózní plán provozovat blog. Čtyři lidé dychtiví psát a samozřejmě bychom si našli čas na pravidelné publikování článků, že?
Tehdy jsem byl ve vývoji webu nováčkem a moje jediná zmínitelná zkušenost s pokročilým softwarem pro vývoj webu byl HTML5 Boilerplate – který byl dodán s fantastickým sestavovacím systémem napsaným v ant (ano – je založen na Javě).
Backbone.js se brzy stalo věcí. Lodash a Underscore.js soupeřili o světovou nadvládu a moji přátelé a já jsme se rozhodli použít Jekyll k vybudování našeho blogu a použít zcela novou funkci gh-pages GitHubu jako bezplatné hostingové řešení.
Náš blogový projekt 4waisenkinder.de je nyní čtyři roky starý. Dosáhli jsme 22 příspěvků; není to tak špatné, ale ohlédnu-li se dnes zpět, musím přiznat, že jsem rád, že můj současný soukromý blog běží na jiném nastavení. Stále věřím ve statické stránky, protože jsou bezpečné (není tam žádný server, který by se dal hacknout) a rychlé (není potřeba žádný výpočet serveru).
Tentokrát jsem zvolil řešení JavaScript od začátku do konce (nuxt.js) a jsem potěšen všemi výhodami, které přináší.
Pojďme se podívat na to, co se v průběhu let změnilo a jak nové generátory statických stránek, jako je GatsbyJS (založené na React), nuxt (založené na Vue.js) a next (založené na Reactu), mění krajinu statických stránek a umožňují, aby byly statické stránky rovnoměrné. populárnější než před čtyřmi lety.
Kompletní zásobník řízený JavaScriptem
Jekyll, prostředník a Hugo jsou skvělé nástroje, ale jsou spojeny se zátěží:jsou napsány v programovacím jazyce, který prohlížeče nepodporují.
Ruby, Go, Python a všechny ostatní jazyky jsou skvělé nástroje pro tvorbu webu – ale přidávají další vrstvu složitosti pro vývojáře. Pokud chcete na svém webu jakýkoli druh interakce, neexistuje způsob, jak obejít JavaScript a každý další jazyk zahrnutý do projektu zvyšuje vstupní bariéru.
Najít dobré vývojáře je již obtížné – najít někoho, kdo ovládá více než jeden programovací jazyk, je ještě těžší.
A neříkám, že tito vývojáři neexistují; právě to, že jedna osoba bude schopna kódovat staticky generované a dynamické části ve stejném jazyce, může ušetřit spoustu času a ušetřit nás budoucích bolestí hlavy.
Povolení síly izomorfismu
V minulosti jsem pracoval v sadách PHP/JavaScript, kde jsem musel své šablony psát dvakrát – jednou pro JavaScript jQuery a podruhé pro PHP serverovou aplikaci.
Různé jazyky mají různé způsoby vyjadřování šablon a obvykle jsou nekompatibilní (můžete to ale nechat fungovat). Čas od času vedla „duplikace šablon“ k chybám, kdy vývojáři zapomněli aktualizovat obě oblasti; vedoucí k frustraci.
S izomorfním rozhraním, které vám umožňuje spouštět kód, ať jej odešlete kamkoli (server a prohlížeč), vám ušetří práci a pomůže vám vyhnout se chybám.
Výhody kompletního zásobníku JavaScriptu však nepokrývají pouze opětovné použití šablon.
Výhody aplikací Universal JavaScript
Princip spouštění stejného kódu v prohlížeči i na serveru se nazývá Universal JavaScript a díky knihovnám jako React a Vue již nejsme vázáni na konkrétní prostředí. React například běží v prohlížeči, na serverech, na příkazovém řádku a pravděpodobně na platformách, které mě teď ani nenapadají. Díky tomuto přístupu agnostickému vůči prostředí je Universal Javascript ideální pro generování statických stránek.
Kód HTML aplikace můžete použít k vygenerování kódu HTML a poté odeslat stejnou kódovou základnu do prohlížeče, aby byla umožněna interaktivita. Tento druh opětovné použitelnosti vede k rychlému počátečnímu vykreslování (a všichni víme, že na výkonu webu záleží) bez typického načítání jednostránkových aplikací; pak se z toho vyvine plně funkční JavaScriptová aplikace, která potřebuje jen trochu JSON, aby umožnila další plynulou navigaci a zůstala pěkně animovaná.
Změněné myšlení – místo toho vytvoření univerzálních webových aplikací statických webů
Pojďme se nad tím chvíli zamyslet. Když ke generování svých statických webů používáte aplikační framework JavaScript, nevytváříte další statický web – vytváříte aplikace, které lze dodávat staticky, aby se staly dynamickými, když je spuštěn JavaScript na straně klienta. Tento koncept je přesvědčivý!
Doručovací kanál s vynikajícími vývojářskými nástroji
Tradičním cílem generátoru statických stránek je vykreslovat HTML. Definujete nějaké vstupní soubory, pravděpodobně v markdown, a to vygeneruje nějaké HTML soubory.
Jak byste v tomto nastavení zacházeli s majetkem? Jak byste minimalizovali svůj JavaScript? Kdo by optimalizoval vaše obrázky? Měli byste používat Webpack, Gulp, jeden nebo oba? Nástroj, jehož účelem je transformovat markdown na HTML, by nebyl tím správným nástrojem pro dnešní komplexní vývojové pracovní postupy Frontendu. Samozřejmě, můžete to udělat, aby to fungovalo, ale otázkou zůstává – měli byste?
Rozlišení závislostí, transpilace kódu, optimalizace souborů – všechna tato témata jsou jejich vlastní malou králičí norou, do které se můžete ponořit celé dny. Tento výzkum je dobře strávený čas, ale jsem si jistý, že ne každý má rád svět konfigurace a dokumentace, který dnes zažíváme v ekosystému JavaScriptu.
Kromě toho může vlastní nastavení pro váš osobní web fungovat dobře, ale spuštění zcela vlastního procesu sestavení vždy něco stojí. Pokud vytváříte rozsáhlý web s několika vývojáři, chcete mít konvence kódu, automatické linting kódu a dobře napsanou dokumentaci, aby se noví vývojáři rychle zorientovali.
A buďme k sobě upřímní – v 99 % případů bude mít projekt s tisíci staženími na npm méně chyb, více funkcí a bude lépe zdokumentovaný než vlastní řešení.
Bohatý ekosystém s komponenty pro vše připravené
Další předností React a Vue je, že ekosystémy jsou neuvěřitelně bohaté. Jsme téměř ve fázi, kdy řešením může být vždy „stačí nainstalovat další komponentu“. Hledání komponenty tabs v Reactu dává 382 přístupů a ve Vue 77 přístupů na npm.
To samozřejmě neznamená, že všechny tyto projekty jsou v naprosto dobrém stavu, ale mít jakýkoli druh kódové základny, ze které můžete čerpat inspiraci, vám může pomoci s řešením problémů a nalezením přístupu, který funguje.
Nové rámce se specializují na moderní technologie frontend
PWA, offline-first, servisní pracovníci – to byla velká módní slova minulého roku. Vsadím se, že ne každý si ještě našel čas pohrát si s těmito novými technologiemi, ale tady je háček:s nejnovější aktualizací Safari přicházejí progresivní webové aplikace nyní na iOS; což znamená, že jsou víceméně podporovány napříč prohlížeči a stávají se mainstreamovými – skutečně!
Kolik je potřeba udělat z vašeho webu Gatsby aplikaci připravenou pro offline režim? Nic – Gatsby se standardně dodává jako progresivní webová aplikace!
Kolik mi trvalo udělat z mého osobního blogu progresivní webovou aplikaci? Pouhých 10 minut na instalaci správného pluginu přizpůsobeného frameworku Nuxt. Implementaci service workeru jsem původně psal sám a věřte mi, byla to dobrá zábava a hodně jsem se toho naučil – ale ve srovnání s tím instalace pluginu šitého na míru mému generátoru statických stránek, který prostě funguje, je k nezaplacení!
Rozhraní API pro vše – vše, co potřebujete, je jen jediné volání
Další chybou běžných generátorů statických stránek je, že jsou obvykle založeny na jednoduchém datovém modelu, který zahrnuje pouze příspěvky a stránky – což není příliš praktické při práci se složitými datovými sadami.
Ve chvíli, kdy se váš web rozroste a začne zahrnovat data ze zdrojů, jako je Github pro zobrazení statistik vašich vedlejších projektů nebo Contentful jako obsahová infrastruktura, se zvýší složitost dat a požadavky.
Potřebný proces již nebude zahrnovat pouze transformaci souborů markdown do HTML.
Zápas o data API ve světě řízeném soubory
Jak přenesete data API do generátoru statických stránek? Existují dva způsoby:
- Někdo napíše integraci pro vámi vybraný nástroj
- Sami si načtete data a zapíšete je do souborů
Oba přístupy mají několik nevýhod.
Pokud váš generátor statických stránek potřebuje integraci pro poskytovatele API dle vašeho výběru, jste okamžitě závislí na lidech, kteří tuto integraci udrží. Podle mého názoru je to nesprávný přístup, protože síla API spočívá v tom, že data jsou vzdálena pouze jedno volání HTTP – měla by být přímo na dosah ruky, aniž bych potřebovala další nástroje.
Pokud se rozhodnete zapsat potřebná data na disk ve formátu, kterému váš nástroj rozumí, přesunete zátěž údržby na svou stranu, což vám poskytne větší kontrolu, ale přesto – transformaci JSON na markdown nebo YAML, abyste si je mohli přečíst později pomocí jiný nástroj se mi nezdá.
Když se podíváte na vývojový tok v tomto nastavení, uvidíte, že tento přístup má daleko k tomu, aby byl optimální:
- Načítání dat z rozhraní API
- Zapište všechna data do různých souborů
- Spusťte generátor statických stránek pro vykreslení HTML
Chcete-li vidět nejnovější změny, je třeba zapsat nové soubory, a když musíte generovat více než tisíc stránek, zabere to čas a vývoj se drasticky zpomalí.
Statické webové aplikace založené na API na záchranu
Když vytváříte statické webové aplikace, vše je vždy vzdálené pouze jedno volání HTTP. Volání Ajax jsou v povaze vývojářů JavaScriptu, a když tato volání zkombinujete s přístupem řízeným komponentami, který staví základy Vue a React, skončíte s flexibilní architekturou, která je připravena škálovat podle vašich potřeb obsahu.
Nepotřebujete ani pluginy – stahujte data, kdykoli a kdekoli jsou potřeba. Potřebujete konkrétní informace od jednoho poskytovatele SaaS v záhlaví a fakta od jiného poskytovatele v postranním panelu? Žádný problém – zahrňte další komponentu založenou na datech a máte hotovo!
A co vývojový tok? Nuxt a Next se například dodávají s vývojovým serverem připraveným k použití. Tento server generuje HTML za běhu, když vložíte požadavek (vytváření požadavků API na straně serveru), přičemž je schopen načíst všechna potřebná data během doby sestavování, kdy chcete zůstat statický, a podporuje opětovné načítání za provozu. Toto je velmi přátelské pro vývojáře!
Nové statické hostingové služby a nízkonákladové infrastruktury
S těmito novými nástroji po ruce zůstává otázka:kde budete hostovat svůj statický web v roce 2018.
Stránky GitHub jsou stále možností, dokonce i Amazon s3 je skvělý pro hostování statických stránek, ale nové služby jako Now a Netlify, které vstoupily na scénu, nabízejí přizpůsobené možnosti, aby zůstaly statické.
Tyto služby vám umožní snadno připojit vaše úložiště GitHub, definovat skript sestavení a poté získat vygenerovaný statický web dodaný sítí rychlého doručování obsahu během několika minut.
Další výhoda – všechny tyto nové nástroje jsou dodávány s rozhraními příkazového řádku (CLI) dostupnými prostřednictvím npm, takže nemusíte opouštět ekosystém JavaScriptu a můžete dokonce sami řešit problémy.
A nejlepší ze všeho je, že tyto nástroje přicházejí s velkorysými bezplatnými plány a velmi malou administrativní režií. Pro mě jako vývojáře frontendu v JavaScriptu nemám žádné problémy s vývojem, ale připravenost na rozšíření je jako nebe.
Budoucnost statického webu je jasná
JavaScript je jazyk webu a mám pocit, že jsme právě teď v bodě obratu – nové nástroje a služby sázejí na statické HTML, obohacené o funkce bez serveru prostřednictvím funkcí Lambda nebo softwaru jako služby. poskytovatelé.
Únava JavaScriptu (nebo jak chcete nazvat posledních pár let) přinesla úžasné nástroje, které se staly klíčovou součástí našeho ekosystému, a já vám říkám... budoucnost je jasná!