Mi a JAMstack és hogyan kezdjem el?

A JAMstack webhelyek most divatosak a webes fejlesztők világában. És jogosan! De mi is ez pontosan és hogyan használhatjuk ki mindannyian az előnyeit?

  • Mi ez a JAMstack?
  • Ez nem tévesztendő össze a szervertelen
  • Miből áll a JAMstack?
  • Tehát mitől olyan JAMstack alkalmazás?
  • Webhelyemet a JAMstacken tartják?
  • Melyek a JAMstack példái?
  • Milyen eszközöket használhatok a JAMstack webhelyek vagy alkalmazások létrehozásához?

Mi ez a JAMstack?

Először is, a JAMstack olyan szoftverarchitektúra és filozófia, amely a következő összetevőkhöz ragaszkodik: Javascript, API-k és Markup.

Ha ez ismerősen hangzik, akkor azért van! Az a React alkalmazás, amelyet a Webpack segítségével állít össze, és végül S3-ból szolgál ki? Igen, ez egy JAMstack alkalmazás. Ez az egyszerű HTML fájl, amely nem rendelkezik JavaScript-sel és szó szerint nem csinál semmi dinamikusat? Igen, ez is egy JAMstack alkalmazás.

Ez nem tévesztendő össze a szervertelen

Ha inkább a dolgok felhő felől érkezik (gondoljon az AWS-re, a GCP-re, az Azure-ra), akkor hajlamos lehet arra, hogy a kiszolgáló nélküli és a JAMstack-et ugyanazt gondolja. Bizonyos, hogy vannak hasonlóságaik az erőforrások kezelésének filozófiájában, például egy webhely S3-on történő tárolása. De a JAMstack alkalmazás nem mindig lesz kiszolgáló nélküli alkalmazás.

Vegyünk egy statikus tárhelyen tárolt alkalmazást az Ön által kiválasztott felhőszolgáltatón. Igen, lehet, hogy kiszolgáló nélküli módon szolgálja az alkalmazást, de előfordulhat, hogy olyan API-val van dolga, amely a Wordpress vagy a Rails szolgáltatást használja, és mindkettő természetesen nem szerver nélküli.

Ezeknek a filozófiáknak az összekapcsolása hosszú utat jelenthet, de nem szabad összekeverni őket ugyanazokkal.

Miből áll a JAMstack?

Vissza a JAMstackhez: általában 3 összetevőből áll: Javascript, API-k és Markup. Története abból ered, hogy a "statikus hely" kifejezést valami értelmesebbé (és piacképesebbé) növesztette. Tehát bár végeredményben egy statikus webhely jelenti a végeredményt, felrobbantják, hogy az első osztályú szerszámokat az út minden lépéséhez tartalmazzák.

Noha nincsenek speciális eszközök, amelyeket használnia kell, vagy egyáltalán nincs olyan eszköz, amely túlmutatna az egyszerű HTML-en, vannak remek példák arra, hogy mi alkothatja a verem egyes részeit. Merüljünk bele egy kicsit az egyes alkatrészekhez.

Javascript

A JAMstack népszerűsítéséhez valószínűleg a legtöbb munkát végző komponens a Javascript. Kedvenc böngészőnyelvünk lehetővé teszi számunkra az összes dinamikus és interaktív bit biztosítását, amelyek esetleg nem rendelkeznének, ha sima HTML-t szolgáltatnánk nélküle.

Itt láthatja sokszor a felhasználói felület kereteit, mint a React, a Vue és az újonnan érkezők, mint a Svelte.

Egyszerűbbé és szervezettebbé teszik az alkalmazások készítését azáltal, hogy összetevő API-kat és szerszámokat kínálnak le egy egyszerű HTML fájlba (vagy egy csomóba).

Ezek a HTML fájlok olyan eszközök csoportját tartalmazzák, mint a képek, a CSS és a tényleges JS, amelyek végül egy kedvenc böngészőhöz kerülnek a kedvenc CDN-en (tartalomszolgáltató hálózat) keresztül.

API-k

Az API-k erősségének kihasználása a JAMstack alkalmazás dinamikussá tételének alapvető eleme. Legyen szó hitelesítésről vagy keresésről, az alkalmazás a Javascript használatával HTTP-kérést küld egy másik szolgáltatóhoz, amely végső soron javítja az élményt egyik vagy másik formában.

Gatsby kitalálta a "tartalmi háló" kifejezést, amely nagyon jó munkát végez az itteni lehetőségek ismertetésében.

Nem feltétlenül csak egy gazdagéphez kell fordulnia az API-hoz, de annyit elérhet, amennyire szüksége van (de ne próbáljon túlzásba esni).

Például, ha van fej nélküli Wordpress API-ja, ahol a blogbejegyzéseit tárolja, egy Cloudinary-fiókja, ahol tárolja a speciális adathordozókat, és egy Elasticsearch-példány, amely biztosítja a keresési funkciókat, akkor ezek együtt működnek, hogy egyetlen élményt nyújtsanak a használók számára te oldalad.

Jelölés

Ez a kritikus darab. Legyen szó a kézzel írt HTML-ről vagy a kódról, amely lefordul a HTML-be, ez az első rész, amelyet az ügyfélnek szolgál. Ez egyfajta de facto darab minden weboldalról, de hogy hogyan szolgálod fel, az a legfontosabb cikk.

Ahhoz, hogy JAMstack alkalmazásnak lehessen tekinteni, a HTML-t statikusan kell kiszolgálni, ami alapvetően azt jelenti, hogy nem dinamikusan rendereltek egy szerverről.

Ha egy oldalt összeállít és PHP-vel tálalja, akkor valószínűleg nem JAMstack alkalmazás. Ha egyetlen HTML-fájlt tölt fel és tárol a tárhelyről, amely Javascript-lel készít egy alkalmazást, az JAMstack-alkalmazásnak hangzik.

De ez nem azt jelenti, hogy mindig az alkalmazás 100% -át kell felépítenünk a böngészőben. Az olyan eszközök, mint a Gatsby és más statikus webhely-generátorok lehetővé teszik számunkra, hogy beépítéskor beolvassuk az API-források egy részét vagy egészét, és az oldalakat HTML-fájlokká alakítsuk.

Gondoljon arra, hogy ha van Wordpress blogja, akkor be tudjuk tölteni az összes bejegyzést, és végül létrehozhatunk egy új HTML fájlt minden bejegyzéshez. Ez azt jelenti, hogy képes leszünk az oldal előre lefordított változatát közvetlenül a böngészőnek kiszolgálni, ami általában egyenlő a látogató gyorsabb első festésével és gyorsabb élményével.

Egy megjegyzés a "tárhelyről"

A tárhely kifejezés használata itt félrevezető lehet, ha még nem ismeri a koncepciót. Igen, az Ön webhelye technikailag valahol tárhelyet kap, de ez nem a hagyományos értelemben vett. Nincs olyan szervere, amelyet fenntartana, ahová feltöltheti fájljait egy olyan FTP-klienssel, mint a Cyberduck.

Ehelyett, akár önmaga csinálja az S3-mal, akár a Netlify-ba (amely valójában többfelhős), a HTML-jét és a statikus eszközeit az objektumtárhelyről kapja. Ennek hátulján általában van egy CDN, például a Cloudflare, amely a fájlokat a világ minden táján tárolja, így az oldalai gyorsabban betöltődnek az Ön webhelyét látogató emberek számára.

Tehát mitől olyan JAMstack alkalmazás?

A JAMstack alkalmazások eredendően kielégítik az AWS jól felépített keretrendszer 5 oszlopának legtöbbjét, ha nem is mind. Ezeket az alapvető koncepciókat az AWS úgy ítéli meg, hogy gyors, biztonságos, nagy teljesítményű, ellenálló és hatékony infrastruktúrát kínál.

Lássuk, hogyan ...

Sebesség

Az a tény, hogy a JAMstack alkalmazásokat statikus fájlként szolgálja közvetlenül egy CDN-ről (általában), valószínűsíti, hogy az alkalmazás szuper gyorsan fog betöltődni. Elmúltak azok az idők, amikor a szervernek időt kellett töltenie az oldal elkészítésével, mielőtt válaszolt volna; Most az oldalt egyszerűen "HTML formában", vagy a kliens oldali hidratálással szolgálja ki, mint amit a Reactnél látna.

Költség

Gyakrabban a JAMstack webhelyek olcsóbban fognak futni, mint szerver oldali társaik. A statikus eszközök tárolása olcsó, és most az oldalad ugyanolyan ütemben kerül kiszolgálásra.

Méretezhetőség

Mivel a fájlokat statikus tárhelyen kívül, valószínűleg CDN-n kívül szolgálja ki, ez nagyjából automatikusan végtelen méretezhetőséget biztosít. A legtöbb szolgáltató benyújtja ezt az igényt, vagyis nem okoz gondot, ha a bejárati ajtón keresztül beáramlik az Ön webhelyére érkező emberek beáramlása.

Karbantartás

A statikus webhely alapja nem szerver, vagyis nem kell fenntartania. Legyen szó Netlify, S3 vagy bármely más szolgáltatóról, statikus HTML-jét, CSS-jét és JS-jét fejfájásmentesen fenntartja.

Biztonság

Kétségbe vonva a szerver hiányát, amelyet személyesen kell fenntartania, nem igazán kell annyira aggódnia, hogy lezárja az emberek behatolási lehetőségeit.

Ehelyett elsősorban az engedélyekre kell összpontosítania, hogy lezárja a privát tartalmat, és biztosítsa felhasználóit, hogy személyes adataik nem nyilvánosak.

De ez az API-jaitól is függ

Bár ezek a pontok igazak a webhely statikus vonatkozásaira, ne feledje, hogy továbbra is függhet valamilyen API-tól az ügyféloldali élmény érdekében.

Próbálja meg kihasználni ezeket a kéréseket fordításkor, amikor csak lehet, például egy statikus webhelygenerátor segítségével. Ellenkező esetben mérlegelnie kell a dinamikus végpontig elért találatok számát, és azt, hogy ez hogyan befolyásolja az összes fenti pontot az általános élmény érdekében.

Webhelyemet a JAMstacken tartják?

Már beszéltünk a 3 komponensről (Javascript, API-k, Markup), de amiről nem beszéltünk, az az a tény, hogy nem feltétlenül kell mindhármat használniuk ahhoz, hogy webhelyét a JAM címkéhez méltónak tartsuk .

Tényleg az egész a Jelölésig és annak szolgálatáig áll. Ahelyett, hogy a Rails alkalmazás a HTML-kódot megjelenítené az Ön számára, az S3-on előre lefordított React alkalmazást üzemeltethet, amely API-k segítségével elérhetővé válik a Rails számára.

De még API-k sem szükségesek. Nem is kell Javascript! Amíg egy HTML fájlt anélkül szolgál ki, hogy azt egy szerverre kellene fordítania, kérésre (más néven előre vissza kell adnia), Önnek van egy JAMstack webhelye.

Melyek a JAMstack példái?

freecodecamp.org

Igen! A freecodecamp.org és oktatási portálja egy JAMstack webhely, amely a Gatsby-n épült. A FreeCodeCamp még a bonyolult szolgáltatásokkal együtt is képes kódtanfolyamokat folytatni, és képes összegyűjteni a statikus webhely-generátor és az erőteljes API-k erejét, hogy a világ minden táján élő emberek elsajátítsák a kód tanulásának erejét.

Láthatja Quincy-t a freeCodeCamp-ról, erről többet beszélhet a 2018-as JAMstack_conf-on:

//www.youtube.com/watch?v=e5H7CI3yqPY

Megjegyzés: A Hírek és a Fórum portálok jelenleg nem a JAMstack webhelyei.

Lehetetlen ételek

Az Impossible Foods fő weboldala nem más, mint egy Gatsby webhely! A receptjeiktől kezdve a helykeresőig mindent a kedvenc "lángoló" statikus webhely-generátorunkon keresztül állítunk össze.

web.dev

A Google web.dev erőforrásközpontját az egyre növekvő 11 ezer felhasználásával építették ki. Még a nyílt forráskódúvá tett kódot is megtalálja a következő címen: //github.com/GoogleChrome/web.dev

Milyen eszközöket használhatok a JAMstack webhelyek vagy alkalmazások létrehozásához?

A jó hír ezzel a rengeteg hanggal kapcsolatban az, hogy jelenleg rengeteg eszköz áll rendelkezésre, és még egy csomó további. Lehet, hogy még mindig kissé durvaak a szélein, de ez azért van, mert ez egy új, bátor világ a szerszámokban, és ehhez némi simításra van szükség ahhoz, hogy jobb legyen.

Az alkalmazás elkészítése

Ez a szórakoztató rész. Hogyan fogja felépíteni az alkalmazását? A képen látható Scullyval nagyjából kiválaszthatja kedvenc felhasználói felületének ízét, és elindulhat a földről. Itt van néhány népszerű a kezdéshez, de korántsem teljes.

  • 11ty
  • Gatsby
  • Hugo
  • Nift
  • Scully (szögletes rajongók számára)
  • És még sok más…

Szükségem van egy választásra? Kezdje a Gatsby-val, és egy egyszerű indítóval indítsa el a bootstrap-ot.

Az alkalmazás kiszolgálása

Szeretem ezt a könnyű résznek gondolni, a beállításaitól függően. Az olyan eszközök, mint a Netlify és a Zeit, könnyedén konfigurálhatóvá teszik ezt, ha bekapcsolódnak a Github repo-ba, és bármikor felépíthetik az új elkötelezettséget, de természetesen van olyan opció, mint az AWS, ha nagyobb irányítást szeretne.

  • AWS
  • Égszínkék
  • GCP
  • Github Pages
  • Netlify
  • Túlfeszültség
  • Zeit

Szükségem van egy választásra? Kezdje a Netlify programmal, és szánjon 5 percet a Gatsby webhely telepítésére.

Az alkalmazás dinamikussá tétele

Valójában ez bármi lehet, ami API-ként használható, és kéréseket küld a böngészőből. Típusonként nem sorolok fel egy csomó példát, de itt van néhány eszköz és hely, ahol néhány forrást találhat.

  • Auth0 - Hitelesítés
  • Cloudinary - Médiakezelés
  • Google Analytics - webes forgalomelemzés
  • headlesscms.org - Fejetlen CMS-ek végtelen listája
  • Egészség - CMS
  • Serverless Framework - barkácsolás, könnyen telepíthető szerver nélküli erőforrások
  • Snipcart - e-kereskedelem
  • Csík - Fizetések kezelése
  • És egy csomó más forrás ...
  • És egy csomó más CMS-választás ...
  • És néhány általános információ és eszköz ...

És mi a helyzet az általános tanulási forrásokkal?

Nagyon sok erőforrást találhat a JAMstack világ gyors elindításához és működéséhez.

  • Statikus webhely vagy JAMstack alkalmazás tárolása és telepítése tőlem az AWS S3 és a CloudFront oldalra
  • Lépésenkénti útmutató: Gatsby a Netlify-on a Netlify-ból
  • Készítse el saját blogját a Scratch-ból az Eleven a filament csoportból
  • Statikus webhelyének tárolása az AWS segítségével - Kezdő útmutató a freeCodeCamp oldalról
  • Hugo oktatóanyag: Hogyan készítsünk és tároljunk (nagyon gyors) statikus e-kereskedelmi webhelyet a SnipCart-ból
  • Hogyan lehet hitelesített kiszolgáló nélküli JAMstack alkalmazásokat készíteni a Gatsby és a Netlify segítségével a freeCodeCamp alkalmazásból

Számítson rá, hogy többet lát

Szerver nélküli társához hasonlóan a JAMstack napja is fiatal. Ahogy telik az idő, látni fogjuk, hogy az eszközök kiforrottak és kibővülnek, új izgalmas módszereket kínálva számunkra, hogy gyorsan létrehozzunk gyors webhelyeket, amelyeket bárki használhat.

Csatlakozzon a Twitteren folytatott beszélgetéshez, és tudassa velem, mi a kedvenc része a JAMstack webhely felépítésének!

Valami hiányzik?

Hiányzik a kedvenc JAMstack eszközöd vagy egy fantasztikus példa? Ping engem a Twitteren!

Kövessen engem további Javascript, UX és egyéb érdekességekért!

  • ? Kövess a Twitteren
  • ? ️ Iratkozzon fel a Youtube-ra
  • ✉️ Iratkozzon fel a hírlevelemre