Miért érdemes statikus webhelyek készítéséhez használni a GatsbyJS-t?

A Gatsby az idő előrehaladtával egyre növekszik, és örülök, hogy rengeteg webhely, például marketingoldalak, blogok és generált statikus oldalak használják.

Ami elsősorban a zökkenőmentes fejlesztési tapasztalatok, a hihetetlen eredmények és a meleg közösség vonzott. Kicsit elmélyülve annak működésében, az ökoszisztéma és annak lehetőségeinek megvitatása több fejlesztővel arra késztettem, hogy elgondolkodjak azon, mennyire erős - sokkal több, mint azt eredetileg feltételeztem.

Ez a cikk arra törekszik, hogy lássa, miért nyert népszerűséget. Ha már használja, akkor jobban megismerheti azokat a funkciókat, amelyeket még nagyobb fejlesztési élmény érdekében használhat.

Ne feledje, hogy ez az, ami nekem működik, és csak a véleményemet osztom meg. Semmiképp sem mondom, hogy a jelenlegi beállításod, amely működik számodra, elavult, de csak azt próbálom megosztani, hogy a Gatsby milyen nagyszerű volt számomra.

Mi az a Gatsby?

Ez egy másik statikus webhely-generátor, mint Hugo, Jekyll és így tovább. Tehát mi teszi különlegessé? Miért beszélünk erről konkrétan?

A Gatsby olyan statikus webhelyek létrehozására használható, amelyek Progresszív Webalkalmazások, megfelelnek a legújabb webes szabványoknak és optimalizálva vannak nagy teljesítményre. Használja a legújabb és legnépszerűbb technológiákat, beleértve a ReactJS-t, a Webpack-ot, a GraphQL-t, a modern ES6 + JavaScript-et és a CSS-t.

Ez azt jelenti, hogy sok fejlesztő képes beugrani sok tanulási görbe nélkül, mivel már ismeri vagy legalább használta a Gatsby ebből a technológiai veremből az egyik darabját.

Ezenkívül szeretnék hozzáfűzni valamit, amit olyan fejlesztőkkel vettem észre, akiknek fogalmuk sem volt a legújabb keretrendszerekről és könyvtárakról, és csak hozzászoktak a webhelyek építésének hagyományos HTML, JavaScript, CSS fájlokhoz.

A fejlődés megközelítése

Az egyik oldalon vannak olyan felhasználók, akik alkalmazásszerű, zökkenőmentes élményt várnak az interneten. A másik oldal fejlesztők, akik hozzászoktak ahhoz, hogy olyan oldalak legyenek, amelyek mindegyikének HTML-fájljai vannak, vagy esetleg valamilyen sablont használnak - a legalapján - belső linkekkel rendelkező oldalakként .

Ha a legújabb keretek bármelyikével kezdi, vegyük a React esetét. Lehet, hogy egy alkalmazás fut és fut minimális konfigurációval a create-reagál-alkalmazással. De ha megnézzük a projekt felépítését, akkor nem sok értelme lehet egy újoncnak, vagy akár néhány fejlesztőnek, akik más tech halmazokból érkeznek. A minta nagyon különbözik attól, amit valaha látott.

Ez azért van, mert további beállítás nélkül egyoldalas alkalmazások, SPA-k kiépítését célozzák. Útválasztás, oldalak hozzáadása vagy SEO-hoz való optimalizálásához több eszközre és konfigurációra lesz szükség.

Ez nem tűnik túl kényelmesnek, ha statikus webhelyeket szeretne, ugye? Tehát itt van a Gatsby, amelyet erre a konkrét felhasználási esetre optimalizáltunk. Ez intuitívabb lehet a fejlesztők számára, mivel vannak olyan összetevőkből létrehozott oldalak, amelyek követik azt az alapötletet, hogy a webhelyek belső linkeket tartalmazó oldalak.

Jellemzők

Alkatrészek

Az alkotóelemek a React egyik kulcsfontosságú jellemzője, és most már gyakran követik a web-tervezési mintát. A felhasználói interfészek jelenlegi bonyolultsági szintje mellett szinte lehetetlen fenntartható kódot írni hosszú HTML oldalakra, vagy sablonmotorokat használni, és elvárni a következetességet.

Tehát ehelyett újrafelhasználható összetevőket építünk, majd felhasználjuk őket nézetek összeállításához. Így külön moduljaink vannak, amelyek külön dolgokat kezelnek, és könnyebb kezelni és karbantartani. Az összetevő csak az összes szükséges információt tartalmazza, és a Reacst használó Gatsby ugyanazt a mintát követi.

Az atomtervezés olyan megközelítés, amely jó módszer az összetett interfészek kezelésére, és ezt itt is alkalmazhatnánk a React komponensekkel. Brad Frostnak van egy csodálatos blogbejegyzése, amely leírja, mi ez és hogyan működik.

Webpack csomag és legújabb szerszámok

A Webpack optimalizált, tömörített HTML, JavaScript és CSS csomagokat hoz létre. Ha a Babel és további beépülő modulok előre vannak konfigurálva, lehetővé teszi a legújabb ES6 + JavaScript és GraphQL használatát.

Jegesedés a tortán: beépített forró újratöltéssel és kódfelosztással rendelkezünk, amely jobb fejlesztési élményt és jobb webhely teljesítményt nyújt. Ennek célja, hogy a fejlesztő minimális szerszámkonfigurációt írjon, és jobban összpontosítson a webhely tényleges fejlesztésére.

Gatsby bővítmények, indítók és React csomagok

Bármelyik csomagot használhatja, amelyet már használt az NPM-mel, különösen a React csomagokat, mivel ugyanarra épül fel. De ez még nem minden: nagy számban vannak folyamatosan bővülő bővítmények, indítók és transzformátorok a Gatsby közösség részéről.

Szinte soha nem jut el odáig, hogy valójában saját eszközre vagy modulra kell építenie, a közösség máris hatalmas számot kínál minden igénynek megfelelõen.

Ezek használatával a Gatsby további funkciókkal bővíthető. Például néhány példa az adaptív képek, az offline funkcionalitás, a CMS forrásadatai és az adatjelölési formátumok, harmadik féltől származó szolgáltatások hozzáadása (Google elemzés stb.) Stb.

Stílus

A bonyolult felhasználói felületek megint összetett stílusmintákat jelentenek, és csak idő kérdése, hogy a stíluslapok felfújódjanak. Megkapja a specifitással kapcsolatos problémákat, több száz kódsoron keresztül lapozgatva próbálja meg kitalálni a dolgokat, és végül felhasználja !importanta hozzáadott stílus tényleges megtekintését.

A Gatsby támogatja az SCSS, a CSS-in-JavaScript könyvtárakat, lehetővé téve a stílusok jobb és egyszerűbb kezelését. Még ennek a beállítását is meglehetősen könnyű kezelni egy plugin vagy csomag telepítésével.

Érzékeny képek

A képek átméretezése az érzékenység érdekében a különböző eszközökön, lusta betöltés, használat srcsetsés picture… Már unalmasan hangzik, amikor manuálisan kell végrehajtani.

Bár manapság ez a teljesítmény és az alkalmazás-szerűen optimalizált interfészek követelménye, nem sok olyan eszközt látunk, amelyekbe közvetlenül be tudnánk ugrani és felhasználhatnánk.

Eközben Gatsby-ban csak egy beépülő modullal, különösen a gatsby-plugin-sharp segítségével közvetlenül generálhat folyékony képeket, hozzáadhat szűrőket, módosíthatja a formátumokat, elmosódhat a terhelés alatt és még sok minden mást. Ez rengeteg munkát és időt takarít meg a képek kézi átméretezésével, valamint az érzékeny képek explicit kazán kódjának megírásával. Ez egyben jobb teljesítményt és simább felhasználói élményt nyújt.

App-szerű élmény

A teljesítménynöveléssel és a felhasználói élmény zökkenőmentességének növelésével a Gatsby egy teljes alkalmazásszerű élményre törekszik, amely teljes PWA-kból kölcsönöz. Nincsenek újratöltések az oldalak között, ha hiperhivatkozások helyett gatsby-linket használnak, és az alkalmazás továbbra is simának és teljesítőnek tűnik a lustán feltöltött képeknek és a kódfelosztásnak köszönhetően.

Azon webhelyek esetében, amelyek megfelelnek az ön teljesítményének is, rengeteg tennivalónk és útmutatásunk van: tömörítés és csomagolás, böngésző gyorsítótárazás és aszinkron szkriptek vagy fájlok betöltése stb. Ha olyan keretrendszerrel dolgozik, mint a React, még több aggodalomra ad okot, bár ez megold néhány problémát: kódfelosztás, SEO, szükség esetén útválasztás, érzékeny képek, és a lista folytatódik.

A Gatsby célja mindezen problémák megoldása, kevesebb időt fordítva szerszámokra, konfigurálásra és a környezetre, és több idő jut a webhely tényleges tervezésére és fejlesztésére.

A Gatsby-ökoszisztéma

Bővítmények

A Gatsbyt kibővíthetőnek és rugalmasnak építették - a pluginek használata az egyik módja annak. Közvetlenül telepíthetők, és különféle funkciókhoz használhatók, ideértve a webhely offline elérését, a Google Analytics hozzáadását, az inline SVG-k támogatását, Ön megnevezi - a lista szinte végtelen.

A Gatsby bővítmények különféle típusai közül a gatsby-forrás beépülő modulok elsősorban helyi vagy távoli forrásból nyerik az adatokat, és lehetővé teszik, hogy a GraphQL-en keresztül használhatók legyenek. Ezek a források lehetnek CMS-ek, például Wordpress, Drupal, Plone, helyi jelölés, XML, vagy olyan fájlok, adatbázisok, API-k és adatformátumok, mint a JSON, CSV.

Ez azt jelenti, hogy szinte egyáltalán bármi felhasználható forrásként a Gatsby-val való együttműködéshez és statikus helyek létrehozásához.

Megjegyzés: A GraphQL az API-k lekérdezési nyelve, amely azon a filozófián dolgozik, hogy csak pontosan azt kéri, amire szüksége van. A REST API-któl eltérően nem a végpontokat keresi az adatok megadásához és az abból származó struktúrából történő feldolgozáshoz, hanem azt kérdezi, amit szeretne, és közvetlenül felhasználja ezeket az adatokat. További információ arról, hogyan működik és hogyan kell használni a dokumentumaikban.

A telepítés után egyes bővítmények azonnal felhasználhatók, csak felsorolva őket, gatsby-config.jsa többieket pedig egy opcióobjektummal konfigurálva.

Nézze meg a Gatsby plugin könyvtárat, amely már elég sok plugint tartalmaz, és az aktív közösség még többet ad hozzá.

Kezdők

Ezek alapvetően Gatsby kazánlapok, amelyek segítenek a fejlesztés gyors elindításában, attól függően, hogy milyen webhelyről van szó. Segítenek abban, hogy közvetlenül belekezdhessen egy webhely, konfiguráció és alapvető funkciók fejlesztésébe, amelyekre már szüksége van. Ami azt jelenti, hogy kevesebb idő jut a szerszámozásra, több idő jut a fejlesztésre.

A Gatsby bővítmények gyakran rendelkeznek megfelelő indítókkal, amelyek megmutatják vagy gyors módot kínálnak a használatának megkezdésére. Hivatkozásként szolgálnak a beépülő plugin összes szolgáltatására és bemutató konfigurációjára is.

A Gatsby témák még fejlesztés alatt álló funkció, amely lehetővé teszi ezeknek a funkcióknak és mintáknak a csomagolását és újrafelhasználását, hasonlóan az indítókhoz. A Gatsby blogban olvashat bővebben arról, hogy mi főz.

Statikus webhelyek

Először vessünk egy pillantást arra, hogy Gatsby hogyan működik belsőleg. Az alkalmazás futtatásakor API-kéréseket küldő SPA-któl eltérően a Gatsby az összes adathívást elvégzi, beleértve a helyi fájlokból származó adatok beszerzését is a készítés ideje alatt. Ezeket az adatokat statikus HTML, JavaScript és CSS fájlok létrehozására használják fel. Ez a statikus megjelenítés teszi a dolgokat gyorsabban működni.

Ez sokat szólt Gatsby-ról, annak ökoszisztémájáról és arról, hogyan segít elképesztő statikus helyek létrehozásában. De miért akarunk statikus oldalakat? Nem úgy hangzik, mint egy visszalépés a dinamikusaktól?

  • Nem igényelnek összetett kiszolgáló-beállítást adatbázisokkal, karbantartást, és nincsenek méretezési problémáik.
  • Az adatok teljesen biztonságosak. A CMS-ek és az API-k privát funkciókkal rendelkeznek, de az adatok továbbra is jelen vannak a kiszolgálón, amelyek kihasználhatók. Gatsby csak a forrásból veszi a megjelenítéshez szükséges adatokat, a privát vagy a biztonságos adatok pedig még a végső összeállításban sem szerepelnek. Ami a lehető legbiztonságosabb.
  • Ahelyett, hogy a kiszolgálókra támaszkodna az oldalak dinamikus generálásában, előbb renderelje őket az építkezésen és használja a CDN-eket, hogy lenyűgözően gyors és zökkenőmentes élményt nyújtson a felhasználók számára az egész világon.
  • Gatsby statikus renderelést végez. A tartalom HTML formátumban és keresőmotorra optimalizálva elérhetővé válik, hosszú kezdeti betöltési idő nélkül.

Próbáld ki!

Ennek fényt kellett volna adnia arra, hogy milyen nagy a hype körülötte, és miért választják egyes nagyvállalatok a webhelyükön való felhasználást. Úgy tűnik, hogy a Gatsby webhely bemutatója az utóbbi időben számos elképesztő kiegészítéssel növekszik.

Talán itt az ideje, hogy megmártózzon és körülnézzen!

A CodeSandbox jóvoltából ezt azonnal megtehetjük, magában a böngészőben.

Ha helyben szeretné futtatni, akkor nézze meg a gatsby-cli oldalt. Ez a leggyorsabb és legegyszerűbb módszer az induláshoz. Lenyűgöző dokumentációkat és oktatóanyagokat is tartalmaznak, amelyekkel elmélyülhet a gatsbyjs.org webhelyek fejlesztésében.

Remélem tetszett ez a cikk, és érdemesnek találta. Megtekintheti az összes projektemet a Githubon vagy a Dribbble-n, és ne habozzon, forduljon hozzám a Twitteren!

Érdemes megnézni a többi cikkemet is:

Progresszív webalkalmazások: A web- és mobilalkalmazások közötti szakadék áthidalása

Hacsak nem szikla alatt élt, valószínűleg hallott már PWA-król vagy Progresszív Webalkalmazásokról. Ez egy nagyon aktuális téma ... medium.freecodecamp.org Hackathon jelentés: Mit tud kódolni 30 óra alatt? Elég sok!

Mit lehet építeni 30 óra alatt egyenesen? Másodéves főiskolai hallgatók csoportjaként növekvő munkaállománnyal… medium.freecodecamp.org ACM 2k17-os kód: Moodify építése

A március nagyon eredményes hónap volt, ennek a nagy eseménynek köszönhető, amelyet a NIT… a hackernoon.com szervezett.