Kas ir JAMstack un kā es varu sākt?

JAMstack vietnes šobrīd ir ļoti dusmīgas tīmekļa izstrādātāju pasaulē. Un pamatoti! Bet kas tas īsti ir un kā mēs visi varam izmantot tā priekšrocības?

  • Kas tas ir par JAMstacku?
  • To nevajadzētu jaukt ar bez serveriem
  • Kas veido JAMstack?
  • Tātad, kas padara JAMstack lietotni tik lielisku?
  • Vai mana vietne tiek uzskatīta par JAMstack?
  • Kādi ir daži JAMstack piemēri?
  • Kādus rīkus es varu izmantot, lai izveidotu JAMstack vietnes vai lietotnes?

Kas tas ir par JAMstacku?

Lai sāktu, JAMstack ir programmatūras arhitektūra un filozofija, kas atbilst šādiem komponentiem: Javascript, API un Markup.

Ja tas izklausās pazīstami, tas ir tāpēc, ka ir! Šī React lietotne, kuru jūs apkopojat ar Webpack un galu galā izmantojat no S3? Jā, tā ir JAMstack lietotne. Šis vienkāršais HTML fails, kam nav JavaScript un burtiski nedara neko dinamisku? Jā, tā ir arī JAMstack lietotne.

To nevajadzētu jaukt ar bez serveriem

Ja jūs nākat vairāk no lietu mākoņa puses (domājiet par AWS, GCP, Azure), iespējams, jūs sliecaties domāt par to, kas nav servera un JAMstack. Piešķirts, ka viņiem ir līdzība resursu pārvaldības filozofijā, piemēram, vietnes mitināšana vietnē S3. Bet JAMstack lietotne ne vienmēr būs lietotne bez serveriem.

Apsveriet lietotni, kas tiek mitināta statiskā krātuvē jūsu izvēlētajā mākoņa nodrošinātājā. Jā, jūs, iespējams, apkalpojat lietotni bez servera, bet, iespējams, jums ir darīšana ar API, kas izmanto Wordpress vai Rails, kas abi noteikti nav bez serveriem.

Šo filozofiju apvienošana var iet tālu, taču tās nevajadzētu jaukt kā tādas pašas.

Kas veido JAMstack?

Atpakaļ uz JAMstack: parasti tas sastāv no 3 komponentiem: Javascript, API un Markup. Tās vēsture izriet no termina "statiskā vietne" izaudzēšanas par kaut ko jēgpilnāku (un nopērkamāku). Tātad, lai gan galu galā statiskā vietne ir gala rezultāts, tā tiek uzspridzināta, lai iekļautu pirmās klases instrumentus katram solim.

Lai gan nav īpašu rīku kopuma, kas jums jāizmanto, vai vispār citu rīku, kas pārsniedz vienkāršu HTML, ir lieliski piemēri tam, kas var veidot katru kaudzes daļu. Ļaujiet nedaudz ienirt pie katra komponenta.

Javascript

Komponents, kas, iespējams, ir paveicis visvairāk darba, lai popularizētu JAMstack, ir Javascript. Mūsu iecienītā pārlūkprogrammas valoda ļauj mums nodrošināt visus dinamiskos un interaktīvos bitus, kas mums varētu nebūt, ja bez tā apkalpojam vienkāršu HTML.

Šeit daudzreiz redzēsiet tādus lietotāja interfeisa ietvarus kā React, Vue un jaunpienācējus, piemēram, Svelte.

Tie padara lietotņu veidošanu vienkāršāku un organizētāku, nodrošinot komponentu API un rīkus, kas apkopo līdz vienkāršam HTML failam (vai vairākiem no tiem).

Šie HTML faili ietver aktīvu grupu, piemēram, attēlus, CSS un faktisko JS, kas galu galā tiek piegādāti pārlūkprogrammai, izmantojot jūsu iecienīto CDN (satura piegādes tīklu).

API

JAMstack lietotnes dinamiskuma pamatā ir API stipro pušu izmantošana. Neatkarīgi no tā, vai tā ir autentifikācija vai meklēšana, jūsu lietojumprogramma izmantos Javascript, lai veiktu HTTP pieprasījumu citam pakalpojumu sniedzējam, kas galu galā uzlabos pieredzi vienā vai otrā formā.

Getsbijs izdomāja frāzi "satura siets", kas diezgan labi strādā, aprakstot šeit sniegtās iespējas.

Lai iegūtu API, jums nav obligāti jāsazinās tikai ar vienu resursdatoru, bet jūs varat sazināties ar tik daudz, cik jums nepieciešams (bet mēģiniet nepārsniegt bortu).

Piemēram, ja jums ir Wordpress API bez galvas, kurā izvietojat savus emuāra ziņojumus, Cloudinary konts, kurā glabājat specializētos multivides failus, un Elasticsearch eksemplārs, kas nodrošina jūsu meklēšanas funkcionalitāti, viņi visi strādā kopā, lai nodrošinātu vienotu pieredzi lietotājiem, kuri lieto jūsu vietnē.

Atzīmes

Šis ir kritiskais gabals. Neatkarīgi no tā, vai tas ir jūsu puses rakstīts HTML kods vai kods, kas tiek apkopots līdz HTML, tā ir pirmā daļa, kuru jūs apkalpojat klientam. Tas ir sava veida de facto jebkuras vietnes gabals, taču vissvarīgākais ir tas, kā jūs to apkalpojat.

Lai HTML varētu uzskatīt par JAMstack lietotni, tas ir jāapkalpo statiski, kas būtībā nozīmē, ka tas netiek dinamiski renderēts no servera.

Ja jūs kopā saliekat lapu un apkalpojat to ar PHP, tas, iespējams, nav JAMstack lietotne. Ja augšupielādējat un apkalpojat vienu HTML failu no krātuves, kas izveido lietotni ar Javascript, tas izklausās kā JAMstack lietotne.

Bet tas nenozīmē, ka mums vienmēr ir jāveido 100% lietotnes pārlūkprogrammā. Rīki, piemēram, Gatsby un citi statisko vietņu ģeneratori, ļauj mums būvniecības laikā iegūt dažus vai visus mūsu API avotus un atveidot lapas kā HTML failus.

Padomājiet, ja jums ir WordPress emuārs, mēs varam ievietot visus ierakstus un galu galā izveidot jaunu HTML failu katram ierakstam. Tas nozīmē, ka mēs varēsim iepriekš sagatavotu lapas versiju piegādāt tieši pārlūkprogrammai, kas parasti ir vienāda ar ātrāku pirmo krāsu un ātrāku apmeklētāja pieredzi.

Viena piezīme par "mitināšanu"

Šeit termina mitināšana lietošana var būt maldinoša, ja koncepcijā esat jauns. Jā, jūsu vietne tehniski tiek kaut kur mitināta, taču tā nav tradicionālā nozīmē. Jums nav servera, kuru uzturat, kur augšupielādējat failus, izmantojot FTP klientu, piemēram, Cyberduck.

Tā vietā, neatkarīgi no tā, vai to darāt pats ar S3, vai ievadot to Netlify (kas faktiski ir vairāku mākoņu), jūsu HTML un statiskie aktīvi tiek apkalpoti no objektu krātuves. Tā aizmugurē parasti ir CDN, piemēram, Cloudflare, kas šos failus saglabā kešatmiņā visā pasaulē, padarot jūsu lapas ātrāk ielādējamas cilvēkiem, kuri apmeklē jūsu vietni.

Tātad, kas padara JAMstack lietotni tik lielisku?

JAMstack lietotnes pēc savas būtības apmierina lielāko daļu, ja ne visus AWS labi veidotā ietvara 5 pīlārus. Tie ir galvenie jēdzieni, kurus AWS uzskata par ātru, drošu, augstas veiktspējas, elastīgu un efektīvu infrastruktūras nodrošināšanu.

Apskatīsim, kā ...

Ātrums

Fakts, ka jūs JAMstack lietotnes kā statiskus failus apkalpojat tieši no CDN (parasti), visticamāk, jūsu lietotne tiks ielādēta ļoti ātri. Ir pagājušas dienas, kad serverim pirms atbildes ir jāpavada laiks, veidojot lapu; tagad jūs apkalpojat lapu kā vienkāršu HTML "kā tas ir", vai ar kāda veida klienta puses hidratāciju, kā jūs redzētu ar React.

Izmaksas

Biežāk JAMstack vietnes darbosies lētāk nekā viņu servera puses kolēģi. Statisko līdzekļu mitināšana ir lēta, un tagad jūsu lapa tiek apkalpota ar tādu pašu ātrumu.

Mērogojamība

Tā kā jūs savus failus apkalpojat ārpus statiskā mitināšanas, iespējams, CDN, tas diezgan automātiski automātiski nodrošina bezgalīgu mērogojamību. Lielākā daļa pakalpojumu sniedzēju izvirzīs šo prasību, kas nozīmē, ka jums nebūs problēmu ļaut cilvēkiem ienākt jūsu mājas lapā caur ārdurvīm.

Apkope

Jūsu statiskās vietnes pamats nav serveris, tas nozīmē, ka jums tas nav jāuztur. Neatkarīgi no tā, vai tas ir Netlify, S3 vai kāds cits pakalpojumu sniedzējs, jūsu statiskais HTML, CSS un JS tiek uzturēts bez galvassāpēm.

Drošība

Divkāršojot servera trūkumu, kas jums personīgi jāuztur, jums nav tik daudz jāuztraucas par to, kā bloķēt cilvēku iebrukuma veidus.

Tā vietā jums galvenokārt jākoncentrējas uz atļaujām, lai bloķētu privātu saturu un nodrošinātu lietotājiem, ka viņu personiskā informācija nav publiski pieejama.

Bet tas ir atkarīgs arī no jūsu API

Lai arī šie punkti atbilst jūsu vietnes statiskajiem aspektiem, paturiet prātā, ka klienta pieredzei jūs joprojām varat būt atkarīgs no kāda veida API.

Mēģiniet izmantot šos pieprasījumus kompilēšanas laikā, kad varat, piemēram, izmantojot statisko vietņu ģeneratoru. Pretējā gadījumā jums būs jānosver dinamiskā galapunktā veikto trāpījumu skaits un tā, kā tas ietekmē visus iepriekš minētos punktus jūsu vispārējai pieredzei.

Vai mana vietne tiek uzskatīta par JAMstack?

Mēs jau runājām par 3 komponentiem (Javascript, API, Markup), bet par ko mēs nerunājām, ir fakts, ka jums nav obligāti jāizmanto visi trīs no tiem, lai uzskatītu savu vietni par JAM etiķetes cienīgu .

Tiešām tas viss ir saistīts ar atzīmi un to, kā jūs to apkalpojat. Tā vietā, lai jūsu Rails lietotne atveidotu jūsu HTML, jūs varētu mitināt iepriekš kompilētu lietotni React S3, kas sazinās ar Rails, izmantojot API kopu.

Bet jums pat nav jābūt API. Jums pat nav jābūt Javascript! Kamēr jūs apkalpojat HTML failu, ja tas pēc pieprasījuma nav jāapkopo serverī (jeb iepriekš to atveidojot), jums ir JAMstack vietne.

Kādi ir daži JAMstack piemēri?

freecodecamp.org

Jā! freecodecamp.org un tā mācību portāls ir JAMstack vietne, kas veidota uz Getsbija. Pat ja ir sarežģīti nodrošināt lietotni, lai apmeklētu kodu kursus, freeCodeCamp spēj apvienot statisko vietņu ģeneratora un jaudīgo API iespējas, lai cilvēkiem visā pasaulē ļautu apgūt kodu.

Jūs varat redzēt Quincy no freeCodeCamp par to vairāk runāt 2018. gada JAMstack_conf:

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

Piezīme: Ziņu un Forumu portāli pašlaik nav JAMstack vietnes.

Neiespējami ēdieni

Impossible Foods galvenā vietne nav nekas cits kā Getsbija vietne! Viss, sākot no viņu receptēm un beidzot ar atrašanās vietas meklētāju, tiek apkopots, izmantojot mūsu iecienīto "ātri degošo" statisko vietņu ģeneratoru.

web.dev

Google web.dev resursu centrs ir izveidots, izmantojot pieaugošo 11ty. Jūs pat varat atrast kodu, kas izveidots kā atvērtais avots, vietnē: //github.com/GoogleChrome/web.dev

Kādus rīkus es varu izmantot, lai izveidotu JAMstack vietnes vai lietotnes?

Labās ziņas par visu šo buzz ir tas, ka šobrīd ir pieejams daudz rīku un vēl daudz tonnu. Viņi, iespējams, joprojām ir nedaudz raupji ap malām, bet tas ir tāpēc, ka šī ir drosmīga jauna instrumentu pasaule, un tas prasa zināmu izlīdzināšanu, lai iegūtu tikai labi.

Lietotnes konstruēšana

Šī ir jautrā daļa. Kā jūs gatavojaties izveidot savu lietotni? Izmantojot Scully attēlā, jūs varat diezgan daudz izvēlēties savu iecienīto lietotāja saskarnes aromātu un palaist zemē. Šeit ir daži populāri, lai sāktu darbu, taču tas nekādā gadījumā nav pilnīgs.

  • 11.gads
  • Getsbijs
  • Hugo
  • Nift
  • Scully (jums, leņķa faniem)
  • Un vēl daudz vairāk…

Vai man vajag izvēlēties vienu? Sāciet ar Gatsby un bootstrap ar vienkāršu starteri.

Tiek rādīta jūsu lietotne

Man patīk domāt par to kā par vieglu daļu atkarībā no iestatīšanas. Rīki, piemēram, Netlify un Zeit, padara šo konfigurāciju vēsu, pieslēdzoties savam Github repo un izveidojot jebkurā laikā, kad tiek iestumta jauna saistība, taču, protams, jums ir iespējas, piemēram, AWS, ja vēlaties lielāku kontroli.

  • AWS
  • Azura
  • GSP
  • Gituba lapas
  • Netlify
  • Pārspriegums
  • Zeit

Vai man vajag izvēlēties vienu? Sāciet ar Netlify un aizņemiet 5 minūtes, lai izvietotu šo Gatsby vietni.

Padariet savu lietotni dinamisku

Tas tiešām var būt jebkas, ko var izmantot kā API, veicot pieprasījumus no pārlūkprogrammas. Es neuzskaitīšu virkni piemēru katram tipam, taču šeit ir daži rīki un vietas, kurās varat atrast dažus resursus.

  • Auth0 - autentifikācija
  • Cloudinary - multivides pārvaldība
  • Google Analytics - tīmekļa trafika analīze
  • headlesscms.org - bezgalīgs CMS saraksts bez galvas
  • Veselība - CMS
  • Serverless Framework - DIY, viegli izvietot resursus bez servera
  • Snipcart - e-komercija
  • Stripe - maksājumu pārvaldība
  • Un virkne citu resursu ...
  • Un virkne citu CMS izvēles iespēju ...
  • Un vispārīga informācija un rīki ...

Un kā ar vispārējiem resursiem, lai mācītos?

Jūs varat atrast daudz resursu, lai ātri sāktu darboties JAMstack pasaulē.

  • Kā mitināt un izvietot statisku vietni vai JAMstack lietotni AWS S3 un CloudFront no manis vietnē freeCodeCamp
  • Soli pa solim: Gatsby vietnē Netlify no Netlify
  • Veidojiet pats savu emuāru no Scratch, izmantojot vienpadsmit no kvēldiega grupas
  • Kā mitināt savu statisko vietni, izmantojot AWS - ceļvedis iesācējiem no freeCodeCamp
  • Hugo apmācība: Kā izveidot un mitināt (ļoti ātri) statisku e-komercijas vietni no SnipCart
  • Kā izveidot autentificētas bez servera JAMstack lietotnes ar Gatsby un Netlify no freeCodeCamp

Gaidiet, ka redzēsiet vairāk

Līdzīgi kā kolēģim bez servera, arī JAMstack laiki ir jauni. Laika gaitā mēs redzēsim, ka rīki ir nobrieduši un paplašināti, piedāvājot jaunus aizraujošus veidus, kā ātri izveidot ātras vietnes, kuras ikviens var izmantot.

Pievienojieties sarunai Twitter un ļaujiet man uzzināt, kāda ir jūsu iecienītākā JAMstack vietnes veidošanas sastāvdaļa!

Kaut kas pietrūkst?

Vai jums trūkst iecienītā JAMstack rīka vai lieliska piemēra? Ping mani čivināt!

Sekojiet man, lai iegūtu vairāk Javascript, UX un citas interesantas lietas!

  • ? Seko man čivināt
  • ? ️ Abonējiet manu Youtube
  • ✉️ Reģistrējieties manam biļetenam