Uvod u JAMstack: arhitektura modernog weba

Siguran sam da ste već susreli riječ JAMstack, ali možda niste razumjeli što to stvarno znači. I ranije sam vidio ovu riječ, ali nisam je htio provjeriti dok Egwuenu Gift nije organizirao JAMstack Lagos. Tada sam shvatio da već izrađujem JAMstack aplikacije.

JAMstack je moderna arhitektura za web razvoj. To nije programski jezik ili bilo koji oblik alata. To je više praksa web razvoja čiji je cilj postizanje boljih performansi, veće sigurnosti, niže cijene skaliranja i boljeg iskustva za programere.

U ovom članku predstavit ću vam što znači JAMstack, zašto bi vas trebalo zanimati, najbolje prakse i kako započeti. ?

Uvod

Prema službenoj dokumentaciji JAMstacka,

JAMstack je moderna arhitektura web razvoja koja se temelji na JavaScript-u na strani klijenta, API-ima za višekratnu upotrebu i unaprijed izgrađenom Markup-u. Kada govorimo o “Stacku”, više ne govorimo o operativnim sustavima, određenim web poslužiteljima, pozadinskim programskim jezicima ili bazama podataka. JAMstack ne radi o određenim tehnologijama. To je novi način izrade web stranica i aplikacija koji donosi bolje performanse, veću sigurnost, niže troškove skaliranja i bolje iskustvo za programere.

JAMstack je glavni trend u web razvoju koji je skovao Mathias Biilman, izvršni direktor i suosnivač Netlifya.

Ok, smiri se! Što je JAMstack?

Možda ste naišli na određene pojmove poput MEAN stoga i MERN stoga. To su samo izrazi koji se koriste za klasificiranje ili grupiranje nekih određenih tehnologija s ciljem postizanja određenog cilja.

Ovdje stoji JAMstack

J avaScript

PI

M arkup

Nizovi su obično samo kombinacija nekoliko tehnologija koje se koriste za stvaranje weba ili mobilne aplikacije. Dakle, JAMstack je kombinacija JavaScript-a, API-ja i označavanja. Prilično zanimljivo zar ne?

JAMstack projekti ne oslanjaju se na kod poslužitelja - oni se mogu distribuirati umjesto da se oslanjaju na poslužitelj. Poslužuju se izravno s CDN-a, JAMstack aplikacije otključavaju brzinu, performanse i bolje korisničko iskustvo.

Korisni uvjeti

Često ću koristiti ove izraze u ovom članku i mislio sam da biste trebali znati njihova značenja (ako već ne znate):

  • API je kratica za Application Programming Interface (Internetsko programsko sučelje), koji je softverski posrednik koji omogućuje da dvije aplikacije međusobno razgovaraju.
  • CDN (mreža za isporuku sadržaja) sustav je distribuiranih poslužitelja (mreža) koji isporučuju stranice i drugi web sadržaj korisniku na temelju zemljopisnog položaja korisnika, podrijetla web stranice i poslužitelja za isporuku sadržaja.
  • Server je računalo namijenjeno zahtjevima procesa i dostaviti podatke na drugo računalo preko interneta ili lokalne mreže.
  • Baza podataka je skup informacija koji je organiziran tako da se može lako pristupiti, uspio i ažurira

Zašto JAMstack?

Tradicionalne web stranice ili CMS stranice (npr. WordPress, Drupal, itd.) U velikoj se mjeri oslanjaju na poslužitelje, dodatke i baze podataka. Ali JAMstack može učitati neki JavaScript koji prima podatke iz API-ja, poslužujući datoteke s CDN-a i oznake generirane pomoću statičkog generatora web mjesta tijekom vremena postavljanja.

Zvuči cool zar ne ?!

JAMstack je brz

Što se tiče minimiziranja vremena učitavanja, ništa ne može nadmašiti unaprijed izgrađene datoteke poslužene putem CDN-a. JAMstack web stranice su super brze jer se HTML već generira tijekom vremena postavljanja i upravo se poslužuje putem CDN-a bez ikakvih smetnji ili kašnjenja.

JAMstack je vrlo osiguran

Sve funkcionira putem API-ja i stoga nema kršenja baze podataka ili sigurnosti. Zahvaljujući procesima na strani poslužitelja koji su apstrahirani u API-je mikro usluga, smanjuju se površine za napade, tako da vaša web stranica postaje visoko zaštićena.

JAMstack je jeftiniji i lakši za skaliranje

Web stranice JAMstack sadrže samo nekoliko datoteka minimalnih veličina koje se mogu poslužiti bilo gdje. Skaliranje je pitanje posluživanja tih datoteka negdje drugdje ili putem CDN-a.

JAMstack najbolje prakse

  • Koristite CDN za distribuciju datoteka, a ne poslužitelja
  • Instalacija i doprinos vašem projektu trebali bi biti jednostavni i manje složeni. Upotrijebite alate poput npm i Git kako biste osigurali standardno i brže postavljanje.
  • Koristite alate za izgradnju i učinite svoj projekt kompatibilnim za sve preglednike (npr. Babel, Browserify, Webpack itd.)
  • Osigurajte da je vaš projekt u skladu s web standardima i da je visoko dostupan
  • Provjerite je li postupak izrade automatiziran za smanjenje stresa.
  • Učinite svoj proces implementacije automatskim, a za to možete koristiti platforme poput Netlifya

Kako započeti?

Za izgradnju JAMstack aplikacija za nekoliko minuta možete koristiti neke već izgrađene tehnologije. Evo nekoliko:

  • Gatsby : Gatsby je besplatni okvir otvorenog koda zasnovan na Reactu koji pomaže programerima u izradi brzih web stranica i aplikacija
  • NuxtJS : NuxtJS je Vue.js okvir za univerzalne aplikacije, statički generirane aplikacije, aplikacije s jednom stranicom, progresivne web aplikacije i stolne aplikacije
  • Hugo : Hugo je najbrži okvir za izgradnju web stranica na svijetu. Jedan je od najpopularnijih generatora statičkih stranica otvorenog koda. Svojom nevjerojatnom brzinom i fleksibilnošću Hugo izgradnju web stranica ponovno čini zabavnom.
  • Netlify CMS : Netlify CMS je upravljanje sadržajem otvorenog koda za vaš Git tijek rada koje se može koristiti sa bilo kojim statičkim generatorom web stranica za brži i fleksibilniji web projekt
  • Sadržajno : Sadržajno je pametniji i besprijekorni sustav upravljanja sadržajem koji urednicima i programerima pruža objedinjeni sadržaj čime se poboljšava suradnja i brže isporučuje digitalni proizvodi na tržište.
  • Svelte : Svelte je radikalni novi pristup izgradnji korisničkih sučelja. Dok tradicionalni okviri kao što su React i Vue većinu svog posla rade u pregledniku , Svelte taj rad prebacuje u korak kompajliranja koji se događa kada gradite svoju aplikaciju.

i još mnogo toga. . .

Korisni resursi

  • JAMstack WTF
  • Kako izraditi JAMstack web stranicu
  • Što je JAMstack i zašto biste ga trebali isprobati
  • CMS spreman za JAMstack
  • JAMstack za klijente: CMS o prednostima i statičkim stranicama
  • Idite statično: 5 razloga da isprobate JAMstack na sljedećem projektu
  • Statičke web stranice + JAMstack = ❤

Više resursa pronađite ovdje

Zaključak

JAMstack je izmišljen kao način da se stavi nomenklatura na novi način izrade web stranica i aplikacija koji donosi bolje performanse, veću sigurnost, niže troškove skaliranja i bolje iskustvo za programere.

JAMstack se ne odnosi na specifične tehnologije, to je moderna arhitektura web razvoja koja se temelji na JavaScript-u na strani klijenta, API-ima za višekratnu upotrebu i unaprijed izgrađenom Markup-u.

Pridružite se zajednici JAMstack da biste saznali više i dobili više ažuriranja.

PS: Ovaj je članak prvi put objavljen na mom blogu ovdje