Ce este JAMstack și cum încep?

Site-urile JAMstack sunt la moda acum în lumea dezvoltatorilor de web. Și pe bună dreptate! Dar ce este mai exact și cum putem profita cu toții de beneficiile sale?

  • Ce este acest JAMstack?
  • Nu trebuie confundat cu serverless
  • Ce alcătuiește JAMstack?
  • Deci, ce face o aplicație JAMstack atât de grozavă?
  • Este considerat site-ul meu web pe JAMstack?
  • Care sunt câteva exemple de JAMstack?
  • Care sunt câteva instrumente pe care le pot folosi pentru a construi site-uri sau aplicații JAMstack?

Ce este acest JAMstack?

Pentru început, JAMstack este o arhitectură și filozofie software care aderă la următoarele componente: Javascript, API-uri și Markup.

Dacă acest lucru sună familiar, este pentru că este! Acea aplicație React pe care o compilați cu Webpack și, în cele din urmă, o difuzați de la S3? Da, aceasta este o aplicație JAMstack. Fișierul HTML simplu care nu are JavaScript și, literalmente, nu face nimic dinamic? Da, aceasta este și o aplicație JAMstack.

Nu trebuie confundat cu serverless

Dacă veniți mai mult din partea cloud a lucrurilor (gândiți-vă la AWS, GCP, Azure), s-ar putea să fiți înclinați să considerați serverless și JAMstack ca același lucru. Acordat că au similitudini în filosofia modului în care sunt gestionate resursele, cum ar fi găzduirea unui site pe S3. Dar o aplicație JAMstack nu va fi întotdeauna o aplicație fără server.

Luați în considerare o aplicație găzduită în spațiu de stocare static pe furnizorul de cloud la alegere. Da, este posibil să serviți aplicația într-un mod fără server, dar este posibil să aveți de-a face cu un API care utilizează Wordpress sau Rails, ambele cu siguranță nu sunt fără server.

Combinarea acestor filosofii poate parcurge un drum lung, dar nu trebuie confundate la fel.

Ce alcătuiește JAMstack?

Înapoi la JAMstack: este compus de obicei din 3 componente: Javascript, API-uri și Markup. Istoria sa provine din transformarea termenului „site static” în ceva mai semnificativ (și mai comercializabil). Deci, în timp ce în cele din urmă un site static este rezultatul final, este explodat pentru a include instrumente de primă clasă pentru fiecare pas al drumului.

Deși nu există niciun set specific de instrumente pe care trebuie să le utilizați sau niciun fel de instrumente dincolo de simplul HTML, există exemple excelente despre ceea ce poate compune fiecare parte a stivei. Să ne aruncăm puțin în fiecare componentă.

Javascript

Componenta care a făcut cel mai mult lucru pentru a populariza JAMstack este Javascript. Limbajul nostru preferat de browser ne permite să furnizăm toți biții dinamici și interacționali pe care s-ar putea să nu îi avem dacă servim HTML simplu fără el.

Aici veți vedea de multe ori cadrele de interfață UI precum React, Vue și noii veniți precum Svelte intră în joc.

Acestea fac construirea aplicațiilor mai simplă și mai organizată, oferind API-uri componente și instrumente care se compilează într-un fișier HTML simplu (sau o grămadă de ele).

Aceste fișiere HTML includ un grup de materiale, cum ar fi imagini, CSS și JS-ul real, care în cele din urmă sunt difuzate către un browser prin CDN-ul dvs. preferat (rețeaua de livrare a conținutului).

API-uri

Utilizarea punctelor forte ale API-urilor este esențială pentru modul în care creați o aplicație JAMstack dinamică. Indiferent dacă este vorba de autentificare sau căutare, aplicația dvs. va utiliza Javascript pentru a face o cerere HTTP către un alt furnizor, care va îmbunătăți în cele din urmă experiența într-o formă sau alta.

Gatsby a inventat expresia „mesh de conținut”, care descrie posibilitățile destul de bune aici.

Nu trebuie neapărat să ajungeți la o singură gazdă pentru un API, dar puteți ajunge la oricâți aveți nevoie (dar încercați să nu treceți peste bord).

De exemplu, dacă aveți un API Wordpress fără cap în care vă găzduiți postările de pe blog, un cont Cloudinary unde vă stocați materialele media specializate și o instanță Elasticsearch care vă oferă funcționalitatea de căutare, toate lucrează împreună pentru a oferi o singură experiență persoanelor care utilizează Site-ul tău.

Markup

Aceasta este piesa critică. Indiferent dacă este vorba de codul HTML scris de mână sau de codul care se compilează până la HTML, este prima parte pe care o serviți clientului. Aceasta este o piesă de facto a oricărui site web, dar modul în care îl serviți este cea mai importantă piesă.

Pentru a fi considerat o aplicație JAMstack, codul HTML trebuie să fie servit static, ceea ce înseamnă practic să nu fie redat dinamic de pe un server.

Dacă strângeți o pagină împreună și o difuzați cu PHP, probabil că nu este o aplicație JAMstack. Dacă încărcați și difuzați un singur fișier HTML din spațiul de stocare care construiește o aplicație cu Javascript, sună ca o aplicație JAMstack.

Dar asta nu înseamnă că trebuie să construim întotdeauna 100% din aplicație în browser. Instrumente precum Gatsby și alte generatoare de site-uri statice ne permit să extragem unele sau toate sursele API la momentul construirii și să redăm paginile ca fișiere HTML.

Gândiți-vă dacă aveți un blog Wordpress, putem trage toate postările și, în cele din urmă, putem crea un fișier HTML nou pentru fiecare postare. Asta înseamnă că vom putea să difuzăm o versiune precompilată a paginii direct în browser, ceea ce echivalează de obicei cu o primă pictură mai rapidă și o experiență mai rapidă pentru vizitatorul dvs.

O notă despre „găzduire”

Utilizarea termenului de găzduire aici poate fi înșelătoare dacă sunteți nou în concept. Da, site-ul dvs. este găzduit tehnic undeva, dar nu este în sens tradițional. Nu aveți un server pe care să îl mențineți unde încărcați fișierele cu un client FTP precum Cyberduck.

În schimb, indiferent dacă îl faceți singur cu S3 sau îl introduceți în Netlify (care este de fapt multi-cloud), activele dvs. HTML și statice sunt servite din stocarea obiectelor. În partea de jos, aveți de obicei un CDN, cum ar fi Cloudflare, care păstrează aceste fișiere în locații din întreaga lume, astfel încât paginile dvs. să se încarce mai rapid pentru persoanele care vă vizitează site-ul.

Deci, ce face o aplicație JAMstack atât de grozavă?

Aplicațiile JAMstack satisfac în mod inerent majoritatea, dacă nu toți cei 5 piloni ai AWS Well-Architected Framework. Acestea sunt concepte de bază pe care AWS le consideră că oferă o infrastructură rapidă, sigură, performantă, rezistentă și eficientă.

Să vedem cum ...

Viteză

Faptul că serviți aplicații JAMstack ca fișiere statice direct de pe un CDN (de obicei) face posibil ca aplicația dvs. să se încarce foarte repede. Au trecut vremurile în care serverul trebuie să petreacă timp construind pagina înainte de a răspunde; acum serviți pagina la fel de simplu ca HTML „ca atare” sau cu un anumit tip de hidratare pe partea de client, așa cum ați vedea cu React.

Cost

Cel mai adesea, site-urile JAMstack vor rula mai ieftin decât omologii lor de pe server. Găzduirea activelor statice este ieftină și acum pagina dvs. este difuzată în același ritm.

Scalabilitate

Întrucât vă serviți fișierele în afara găzduirii statice, probabil un CDN, acest lucru vă oferă în mod automat o scalabilitate infinită. Majoritatea furnizorilor vor face această reclamație, ceea ce înseamnă că nu veți avea probleme să lăsați orice aflux de oameni să vă lovească site-ul prin ușa din față.

întreținere

Fundația site-ului dvs. static nu este un server, ceea ce înseamnă că nu este nevoie să îl întrețineți. Indiferent dacă este vorba de Netlify, S3 sau orice alt furnizor, HTML-ul static, CSS și JS sunt întreținute pentru dvs. fără dureri de cap.

Securitate

Dublându-vă lipsa de server pe care trebuie să o întrețineți personal, nu trebuie să vă faceți griji la fel de mult cu privire la blocarea modalităților de intrare a oamenilor.

În schimb, va trebui să vă concentrați mai ales pe permisiunile de blocare a conținutului privat și să vă asigurați utilizatorii că informațiile lor personale nu sunt disponibile publicului.

Dar acest lucru depinde și de API-urile dvs.

Oricât de multe puncte sunt adevărate pentru aspectele statice ale site-ului dvs., rețineți că s-ar putea să depindeți în continuare de un anumit tip de API pentru experiența dvs. din partea clientului.

Încercați să profitați de aceste solicitări la momentul compilării când puteți, cum ar fi cu un generator de site static. În caz contrar, va trebui să cântăriți numărul de accesări pe care le faceți la un punct final dinamic și modul în care acesta afectează toate punctele de mai sus pentru experiența dvs. generală.

Este considerat site-ul meu web pe JAMstack?

Am vorbit deja despre cele 3 componente (Javascript, API-uri, Markup), dar despre ce nu am vorbit este faptul că nu trebuie neapărat să le utilizați pe toate pentru a considera site-ul dvs. demn de eticheta JAM .

Într-adevăr, totul se reduce la Markup și la modul în care îl serviți. În loc ca aplicația dvs. Rails să redea codul HTML pentru dvs., puteți găzdui o aplicație precompilată React pe S3 care ajunge la Rails printr-un set de API-uri.

Dar nici nu trebuie să aveți API-uri. Nici nu trebuie să aveți Javascript! Atâta timp cât serviți un fișier HTML fără ca acesta să fie compilat pe un server la momentul solicitării (cunoscut și ca pre-redare), aveți un site JAMstack.

Care sunt câteva exemple de JAMstack?

freecodecamp.org

Da! freecodecamp.org și portalul său de învățare este un site JAMstack construit pe Gatsby. Chiar și cu complexitatea oferirii unei aplicații pentru a urma cursuri de cod, freeCodeCamp este capabil să reunească puterea unui generator de site static și API-uri puternice pentru a aduce oamenilor din întreaga lume puterea de a învăța codul.

Puteți vedea Quincy din freeCodeCamp vorbind mai multe despre acest lucru la JAMstack_conf 2018:

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

Notă: portalurile Știri și Forum nu sunt în prezent site-uri JAMstack.

Alimente imposibile

Principalul site web pentru Impossible Foods nu este altul decât un site Gatsby! Totul, de la rețetele lor până la localizatorul lor, este compilat prin intermediul generatorului nostru de site-uri statice preferat „rapid”.

web.dev

Centrul de resurse web.dev de la Google este construit folosind cele 11ty. Puteți găsi chiar și codul open source la: //github.com/GoogleChrome/web.dev

Care sunt câteva instrumente pe care le pot folosi pentru a construi site-uri sau aplicații JAMstack?

Vestea bună cu toate aceste noutăți este că există o mulțime de instrumente disponibile în prezent și o mulțime de alte pe drum. S-ar putea să fie încă puțin aspre în jurul marginilor, dar asta pentru că aceasta este o nouă lume curajoasă a sculei și care necesită o netezire pentru a obține corect.

Construirea aplicației dvs.

Aceasta este partea distractivă. Cum îți vei construi aplicația? Cu Scully în imagine, puteți alege destul de mult gustul preferat al cadrului de interfață și să începeți. Iată câteva dintre cele mai populare pentru a începe, dar în niciun caz nu este exhaustivă.

  • 11ty
  • Gatsby
  • Hugo
  • Nift
  • Scully (pentru tine fanii Angular)
  • Si multe altele…

Ai nevoie să aleg unul? Începeți cu Gatsby și bootstrap cu un starter simplu.

Servirea aplicației dvs.

Îmi place să mă gândesc la asta ca la partea ușoară, în funcție de configurare. Instrumente precum Netlify și Zeit fac din acest lucru o experiență ușoară de configurat prin conectarea la repo Github și construirea oricând este introdus un nou commit, dar, desigur, aveți opțiuni precum AWS dacă doriți mai mult control.

  • AWS
  • Azur
  • GCP
  • Pagini Github
  • Netlify
  • Surge
  • Zeit

Ai nevoie să aleg unul? Începeți cu Netlify și luați 5 minute pentru a implementa acel site Gatsby.

Aplicația dvs. este dinamică

Într-adevăr, acesta poate fi orice lucru care poate fi folosit ca API care face cereri de la browser. Nu am de gând să enumăr o grămadă de exemple pe tip, dar aici sunt câteva instrumente și locuri unde puteți găsi unele resurse.

  • Auth0 - Autentificare
  • Cloudinary - Management media
  • Google Analytics - Analiza traficului web
  • headlesscms.org - Listă nesfârșită de CMS-uri fără cap
  • Sanity - CMS
  • Serverless Framework - DIY, ușor de implementat resurse fără server
  • Snipcart - Comerț electronic
  • Stripe - Managementul plăților
  • Și o grămadă de alte resurse ...
  • Și o grămadă de alte opțiuni CMS ...
  • Și câteva informații generale și instrumente ...

Și ce zici de resursele generale de învățat?

Puteți găsi o mulțime de resurse pentru a începe și a alerga rapid în lumea JAMstack.

  • Cum să găzduiască și să implementeze un site static sau o aplicație JAMstack pe AWS S3 și CloudFront de la mine pe freeCodeCamp
  • Un ghid pas cu pas: Gatsby pe Netlify de pe Netlify
  • Construiți-vă propriul blog din Scratch folosind grupul Eleventy din filament
  • Cum să vă găzduiți site-ul static cu AWS - Un ghid pentru începători de la freeCodeCamp
  • Hugo Tutorial: Cum să construiți și să găzduiți un site de comerț electronic static (foarte rapid) din SnipCart
  • Cum să construiți aplicații JAMstack autentificate fără server cu Gatsby și Netlify din freeCodeCamp

Așteptați să vedeți mai multe

Similar cu omologul său fără server, zilele JAMstack sunt tinere. Odată cu trecerea timpului, vom vedea instrumentele maturate și extinse, oferind noi modalități interesante de a construi rapid site-uri rapide pe care oricine le poate folosi.

Alăturați-vă conversației de pe Twitter și spuneți-mi care este partea dvs. preferată în construirea unui site JAMstack!

Lipseste ceva?

Vă lipsește instrumentul preferat JAMstack sau un exemplu minunat? Ping-mă pe Twitter!

Urmăriți-mă pentru mai multe Javascript, UX și alte lucruri interesante!

  • ? Urmărește-mă pe Twitter
  • ? ️ Abonați-vă la Youtube-ul meu
  • ✉️ Înscrieți-vă la Newsletter-ul meu