Bevezetés a JAMstack-be: a modern web architektúrája

Biztos vagyok benne, hogy korábban találkozott a JAMstack szóval, de lehet, hogy nem értette, mit is jelent valójában. Láttam már ezt a szót is, de nem törődtem vele, hogy kivizsgáljam, amíg az Egwuenu Gift meg nem szervezte a JAMstack Lagos-t. Aztán rájöttem, hogy már építettem JAMstack alkalmazásokat.

A JAMstack egy modern webfejlesztő architektúra. Ez nem programozási nyelv vagy bármilyen eszköz. Ez inkább egy webfejlesztési gyakorlat, amelynek célja a jobb teljesítmény, a magasabb biztonság, az alacsonyabb méretezési költségek és a jobb fejlesztői tapasztalatok érvényesítése.

Ebben a cikkben bemutatom, hogy mit jelent a JAMstack, miért kell törődnie velük, a legjobb gyakorlatokkal és az indulás módjával. ?

Bevezetés

A JAMstack hivatalos dokumentációja szerint

A JAMstack egy modern webfejlesztési architektúra, amely kliensoldali JavaScript-en, újrafelhasználható API-kon és előre elkészített jelöléseken alapul. Amikor a „The Stack” -ről beszélünk, már nem beszélünk operációs rendszerekről, meghatározott webszerverekről, háttérprogramozási nyelvekről vagy adatbázisokról. A JAMstack nem konkrét technológiákról szól. A weboldalak és alkalmazások készítésének új módja, amely jobb teljesítményt, nagyobb biztonságot, alacsonyabb méretezési költségeket és jobb fejlesztői élményt nyújt.

A JAMstack a webfejlesztés egyik fő trendje, amelyet Mathias Biilman, a Netlify vezérigazgatója és társalapítója hozott létre.

Oké, hideg! Mi a JAMstack?

Előfordulhat, hogy olyan konkrét feltételekkel találkozott, mint a MEAN stack és a MERN stack. Ezek csak bizonyos technológiák osztályozására vagy csoportosítására használt kifejezések egy adott cél elérése érdekében.

A JAMstack itt áll

J avaScript

Egy PI

M arkup

A veremek általában csak többféle technológia kombinációját jelentik, amelyeket webes vagy mobilalkalmazások létrehozására használnak. Tehát a JAMstack a JavaScript, az API-k és a Markup kombinációja. Nagyon érdekes, igaz?

A JAMstack projektek nem támaszkodnak a kiszolgálóoldali kódra - terjesztésük helyett szerverre támaszkodhat. Közvetlenül CDN-ről szolgáltatva a JAMstack alkalmazások felszabadítják a sebességet, a teljesítményt és javítják a felhasználói élményt.

Hasznos feltételek

Gyakran fogom használni ezeket a kifejezéseket ebben a cikkben, és úgy gondoltam, hogy ismernie kell azok jelentését (ha még nem):

  • Az API az Application Programming Interface rövidítése, amely egy szoftverközvetítő, amely két alkalmazás számára lehetővé teszi, hogy egymással beszéljenek.
  • A CDN (tartalomszolgáltató hálózat) egy elosztott szerverek (hálózatok) rendszere, amelyek oldalakat és egyéb webes tartalmakat juttatnak el a felhasználóhoz, a felhasználó földrajzi elhelyezkedése, a weboldal eredete és a tartalomszolgáltató kiszolgáló alapján.
  • A Szerver olyan számítógép, amelyet kérelmek feldolgozására és adatok továbbítására lehet továbbítani egy másik számítógépre az interneten vagy a helyi hálózaton keresztül.
  • Az adatbázis egy olyan információgyűjtemény, amely úgy van rendszerezve, hogy könnyen hozzáférhető, kezelhető és frissíthető legyen

Miért pont a JAMstack?

A hagyományos vagy CMS-webhelyek (pl. WordPress, Drupal stb.) Nagymértékben támaszkodnak a szerverekre, a beépülő modulokra és az adatbázisokra. De a JAMstack betölthet néhány JavaScriptet, amely adatokat fogad egy API-ból, kiszolgálja a fájlokat egy CDN-ből, és a statikus webhelygenerátor segítségével generált jelöléseket telepítési idő alatt.

Jól hangzik ugye ?!

A JAMstack gyors

Amikor a betöltés idejét minimalizálni kell, semmi sem múlja felül az előre elkészített fájlokat, amelyeket a CDN-n keresztül szolgáltatnak. A JAMstack webhelyek szupergyorsak, mert a HTML már a telepítés ideje alatt jön létre, és csak a CDN-en keresztül szolgáltatja őket, interferencia vagy háttérkésés nélkül.

A JAMstack rendkívül biztonságos

Minden egy API-n keresztül működik, ezért nincsenek adatbázisok vagy biztonsági megsértések. A kiszolgálóoldali folyamatok mikro-szolgáltatás API-kká történő elvonatkoztatásával a támadások felülete csökken, és így a webhelye rendkívül biztonságossá válik.

A JAMstack olcsóbb és könnyebben méretezhető

A JAMstack webhelyek csak néhány, minimális méretű fájlt tartalmaznak, amelyek bárhol kiszolgálhatók. A méretezés a fájlok kiszolgálásának kérdése máshol vagy CDN-eken keresztül.

JAMstack legjobb gyakorlatok

  • Használja a CDN-t a fájlok terjesztésére a kiszolgálók helyett
  • A projekt telepítésének és közreműködésének könnyűnek és kevésbé összetettnek kell lennie. Használjon olyan eszközöket, mint az npm és a Git a szabványos és gyorsabb beállítás érdekében.
  • Használjon buildeszközöket, és tegye projektjét kompatibilisvé az összes böngésző számára (pl. Babel, Browserify, Webpack stb.)
  • Győződjön meg arról, hogy projektje megfelel az internetes szabványoknak és jól hozzáférhető
  • Győződjön meg arról, hogy a gyártási folyamat automatizált a stressz csökkentése érdekében.
  • Tegye automatikusvá a telepítési folyamatot, ehhez olyan platformokat használhat, mint a Netlify

Hogyan kezdjem el?

Néhány már beépített technológiát felhasználva néhány perc alatt elkészítheti a JAMstack alkalmazásokat. Íme néhány:

  • Gatsby : A Gatsby egy ingyenes és nyílt forráskódú, a React-en alapuló keretrendszer, amely segít a fejlesztőknek lángoló, gyors webhelyek és alkalmazások létrehozásában.
  • NuxtJS : A NuxtJS a Vue.js keretrendszer az univerzális alkalmazásokhoz, statikusan generált alkalmazásokhoz, egyoldalas alkalmazásokhoz, progresszív webalkalmazásokhoz és asztali alkalmazásokhoz
  • Hugo : A Hugo a világ leggyorsabb kerete a weboldalak készítéséhez. Ez az egyik legnépszerűbb nyílt forráskódú statikus webhely-generátor. Elképesztő sebességével és rugalmasságával a Hugo ismét szórakoztatóvá teszi a weboldalak építését.
  • Netlify CMS : A Netlify CMS egy nyílt forráskódú tartalomkezelő a Git munkafolyamathoz, amely bármely statikus webhely-generátorral használható egy gyorsabb és rugalmasabb webprojekthez
  • Tartalmas : A Contentful intelligensebb és zökkenőmentes tartalomkezelő rendszer, amely egységes szerkesztést és szerkesztőket biztosít a szerkesztőknek és fejlesztőknek, ezáltal fokozva az együttműködést és biztosítva a digitális termékek gyorsabb piacra kerülését.
  • Svelte : A Svelte egy radikális új megközelítés a felhasználói felületek felépítéséhez. Míg a hagyományos keretrendszerek, mint például a React és a Vue, munkájuk nagy részét a böngészőben végzik , a Svelte ezt az alkalmazást egy fordítási lépésbe állítja át, amely az alkalmazás elkészítésekor történik.

és még sok más. . .

Hasznos források

  • JAMstack WTF
  • Hogyan készítsünk JAMstack webhelyet
  • Mi az a JAMstack és miért érdemes kipróbálni
  • JAMstack-kész CMS
  • JAMstack ügyfeleknek: Az előnyökről és a statikus webhely CMS-ről
  • Legyen statikus: 5 ok a JAMstack kipróbálására a következő projektben
  • Statikus webhelyek + JAMstack = ❤

További forrásokat itt talál

Következtetés

A JAMstack-et úgy találták ki, hogy a weboldalak és alkalmazások új építési módjára nómenklatúrát alkalmazzanak, amely jobb teljesítményt, magasabb biztonságot, alacsonyabb méretezési költségeket és jobb fejlesztői élményt nyújt.

A JAMstack nem konkrét technológiákról szól, hanem egy modern webfejlesztő architektúra, amely kliensoldali JavaScript-en, újrafelhasználható API-kon és előre elkészített Markupon alapul.

Csatlakozzon a JAMstack közösséghez, ha többet szeretne megtudni és további frissítéseket szeretne kapni.

PS: Ez a cikk először itt jelent meg a blogomon