Ohjelmointi

Jamstack: Staattinen verkkosivustojen vallankumous ylöspäin web-kehityksessä

Jamstack on yhä suositumpi verkkokehitysfilosofia, jonka tavoitteena on nopeuttaa sekä verkkokehitysprosessia että verkkosivujen latausaikoja. Jamstack hyödyntää devops-liikkeen ja jatkuvan integroinnin / jatkuvan toimituksen (CI / CD) tekniikoita, joista on tulossa normi, ja Jamstack tukee pitkäaikaisia ​​tekniikoita interaktiivisten verkkosivujen rakentamiseksi, siirtämällä latausaikakoodien suorittamista pois verkkopalvelimista ja kohti selaimen sisäistä JavaScriptiä ja ulkoisia palveluita, joihin pääsee sovellusohjelmointirajapintojen (API) kautta.

Mikä on Jamstack? Jamstack, määritelty

Jamstack on verkkopalvelumalli, joka perustuu kolmeen pylvääseen, jotka antavat nimikirjaimet sen nimessä: JavaScript, sovellusliittymät, ja merkintä. Jamstack-sivuston verkkosivut koostuvat vakiomerkintäkielestä, joten ne voidaan rakentaa ja testata missä tahansa, ilman riippuvuutta sovelluspalvelimista tai palvelinpuolen tekniikoista, kuten Node.js. Kaikki vuorovaikutteiset toiminnot tarjoaa selaimessa suoritettava tavallinen JavaScript-koodi, joka kutsuu uudelleenkäytettäviä sovellusliittymiä HTTPS: n kautta saadakseen pääsyn ulkoisiin tietoihin tai muihin toimintoihin, joita ei voida rakentaa itse verkkosivulle.

Jos haluat ymmärtää, miksi Jamstack-filosofia on vallankumouksellinen, ota huomioon LAMP-pino, joka on esimerkki tavasta, jolla useimmat kehittäjät ovat ajatelleet verkkokehitystä suurimman osan viimeisistä 15 vuodesta. LAMP tarkoittaa Linux (käyttöjärjestelmä, joka käyttää useimpia verkkopalvelimia), Apache (palvelinohjelmisto, joka toimii näissä Linux-koneissa), MySQL (tietokanta, johon web-sovelluksen tarvitsemat tiedot on tallennettu) ja PHP / Perl / Python (kieli, jolla palvelinpuolen koodi kirjoitetaan). Kun osoitat selaimesi LAMP-pohjaiseen verkkosivustoon, verkkopalvelin suorittaa palvelinpuolen koodin, joka luo verkkosivun lennossa, vetämällä tietoja tarvittaessa MySQL-tietokannasta.

LAMP-arkkitehtuuri mahdollistaa dynaamisten ja interaktiivisten verkkosivustojen luomisen, mutta se vaatii myös tehokkaan verkkopalvelimen - ja mitä enemmän liikennettä sivusto saa, sitä enemmän laskentatehoa palvelinpuolella se tarvitsee. Jopa täysin varustellun palvelimen kanssa dynaamisten verkkosivujen rakentaminen ja lataaminen voi kestää kauan. Maailmassa, jossa ihmiset, joilla on vain vähän huomiota, selaavat Internetiä puhelimillaan, viivästyminen on tullut yhä mahdotonta.

Jamstack syntyi osana "staattinen verkko" -liikettä, joka syntyi 2010-luvun puolivälissä reaktiona tähän perinteiseen malliin siitä, miten verkkosivuston tulisi toimia. Jamstackin ymmärtämiseksi sinun on ymmärrettävä tämän päivän tekniikkastaattiset verkkosivustot.

Staattiset sivustot, staattisten sivustojen luojat ja Jamstack

Jos joudut selittämään täysin aloittelijalle, kuinka verkko toimii, se voi mennä noin seuraavasti: Jossain verkkopalvelimen tiedostojärjestelmässä on HTML-tiedostoja, joihin pääsee HTTP-osoitteilla, jotka verkkoselain lataa ja sitten tulkitsee luodakseen verkkosivun . Mutta se on kuvaus a staattinen sivusto: Se olettaa, että HTML-tiedostot ovat jo olemassa, kun selain etsii niitä. Kuten olemme jo nähneet, suurta osaa verkosta viimeisen vuosikymmenen aikana ovat hallinneet dynaamiset sivustot, jotka sen sijaan luovat HTML-tiedostoja lennossa vastauksena verkkopyyntöihin, usein perustuen parametreihin, jotka välitetään verkkopalvelimelle lomakkeiden kautta tai Itse URL-osoite.

Internetin varhaisina aikoina, kun verkkosivut olivat poikkeuksetta staattisia, monet web-kehittäjät kirjoittivat HTML-koodin käsin. Kun verkkosivut kasvoivat monimutkaisemmiksi, Macromedian Dreamweaverin kaltaiset työkalut saapuivat, mikä voisi luoda staattiset HTML-sivut ohjelmallisesti. Staattisen verkkoliikkeen liikkuessa 2010-luvun puolivälissä uusi ns. Aalto staattiset sivustogeneraattorit alkoi ilmestyä, mukaan lukien Gatsby, Hugo ja Jeckyll. Toisin kuin WYSIWYG-työkalut, kuten Dreamweaver, staattiset sivustogeneraattorit ohjataan komentorivillä ja ne on suunniteltu integroitaviksi CI / CD-prosesseihin. HTML-tiedostot luodaan työkaluilla, usein Markdownissa kirjoitetun sisällön perusteella, ja ne ladataan automaattisesti versionhallintavarastoon, kuten GitHub. Koska nämä tiedostot on merkitty valmiiksi tuotantoa varten, reaaliaikaisen verkkosivuston staattiset sivut päivitetään automaattisesti.

Tärkeä asia pitää mielessä on se staattinen tässä yhteydessä ei tarkoita, että nämä ovat yksinkertaisia ​​Web 1.0 -sivuja, jotka eivät ole vuorovaikutteisia. Muista, että nämä sivut voivat sisältää edistyneen JavaScriptin, joka suoritetaan selaimessa ja soittaa API-kutsuja tietokantoihin, palvelinpuolen toiminnoille tai isännöityille palvelimettomille toiminnoille. Mutta koska mikään näistä suorituksista ei tapahdu itse Web-palvelimessa, staattinen sivusto ei tarvitse teollisuuskäyttöistä web-palvelinta, johon on lisätty tietokanta. Monet staattiset sivustot ovat käytössä sisällön jakeluverkostot, tai CDN: t, joissa sisältöä peilataan useilla palvelimilla ympäri maailmaa, jotta se voidaan toimittaa nopeasti käyttäjille missä tahansa.

Snipcartin markkinointijohtaja Mathieu Dionne kuvailee uuden staattisten sivustojen maailman alkuaikoja blogikirjoituksessa ja mainitsee, että noin vuonna 2015 "Netlify-perustajat ... olivat juuri keksineet termin" Jamstack "kiertääksesi staattisen verkon negatiivinen merkitys. Toisin sanoen, olemme kuvanneet Jamstack-prosessia koko tässä osiossa. Mutta nyt meidän on keskusteltava lyhyesti Netlifysta ja niiden roolista ekosysteemissä.

Mikä on Netlify?

Netlify on pilvipalvelu- ja web-hosting-yritys. Netlify-perustaja Mathias Biilmann loi termin Jamstack, ja Netlify-palvelut on räätälöity asiakkaille, jotka haluavat rakentaa sivustoja Jamstack-filosofian pohjalta.

Netlify väittää murtautuneensa tiettyyn ongelmaan, joka oli pysäyttänyt staattisia sivustoja, mikä on välimuistin mitätöinti. Tietokantapohjaiset dynaamiset verkkosivustot voivat syödä paljon palvelinresursseja, mutta voit olla varma, että ne palvelevat verkkosivustosi uusinta versiota kaikille kävijöille, jotka pysähtyvät. Koska Jamstack-verkkosivustoja isännöidään usein CDN: n useissa hajautetuissa palvelimissa, päivitykset ovat vähemmän suoraviivaisia. Kunkin CDN-palvelimen voi kestää muutamasta minuutista tunteihin sen selvittämiseksi, että sen välimuistissa oleva versio sivustosta ei ole enää voimassa. Netfliyn CDN tarjoaa välimuistin välittömän mitätöinnin HTML-tiedostoille ongelman kiertämiseksi.

Mutta Netlify ei ole ainoa palveluntarjoaja Jamstack-tilassa, eikä sillä ole minkäänlaista tavaramerkkiä tai omistusoikeutta termiin. Saatavilla on useita Jamstack-isännöinti- ja käyttöönottoratkaisuja, ja suurin osa suurista pilvipalvelujen tarjoajista on mukana toiminnassa, mukaan lukien AWS, Google Firebase ja Microsoft Azure.

Jamstack CMS

Jos olet joku, jonka on käsiteltävä verkkosivustoa päivittäin, tiedät, että verkkosivuston rakentaminen ja isännöinti on vasta alkua. Tarvitset myös tavan luoda uutta sisältöä ja lisätä se sivustoosi. Koska ihmiset, jotka tekevät niin, eivät yleensä ole ohjelmoijia, he tarvitsevat käyttäjäystävällisen työkalun - nimittäin sisällön hallintajärjestelmä, tai CMS. Perinteiset sisällönhallintajärjestelmät, kuten WordPress, tarjoavat taustakäyttöliittymän, johon voit kirjoittaa verkkosivuston sisältöä, hallita tietokantaa, johon sisältö on tallennettu, ja rakentaa dynaamisia verkkosivuja, jotka esittävät kyseisen sisällön vastauksena selainpyyntöihin.

Jamstack-sivustojen CMS-tiedostot toimivat eri tavalla, ja niihin viitataan yleensä nimellä päätön. Headless CMS tarjoaa käyttöliittymän sisällön syöttämiseen ja hallintaan sekä tietokannan tai muulla tavoin sen tallentamiseen, mutta ei itse luo HTML-koodia selaimen jäsentämiseen. Sen sijaan verkkosivuston staattiset HTML-sivut käyttävät JavaScriptiä soittaakseen CMS: n sovellusliittymiin, ja CMS palauttaa sisällön muodossa, jonka JavaScript voi muuttaa verkkosivuksi.

Tämä järjestelmä erottaa sisällön perusteellisesti esityksestä, mikä on tietysti pitkäaikainen ideaali ohjelmoinnissa. Koska CMS: llä on käytettävissä oleva sovellusliittymä, useat verkkosivut voivat käyttää sitä helposti. Jos olet esimerkiksi rakentanut erilliset verkkosivustosi mobiili-, työpöytä- ja älykelloversiot, kaikki nämä versiot voivat käyttää samaa sisällönhallintajärjestelmään tallennettua sisältöä.

Kuten arvata voi, Netlifyllä on oma tarjonta tässä tilassa, nimeltään NetlifyCMS, mutta tarjolla on useita muita tarjouksia; kehittäjä Nebojsa Radakovic jakaa ne sinulle blogikirjoituksessa. Luettelossa on paljon uusia ja tulijoita sekä yksi hyvin tuttu nimi. Vaikka käytimme WordPressiä esimerkkinä perinteisestä CMS: stä, WordPress voidaan ajaa päättömänä CMS: nä myös Jamstack-sivuston käyttämiseksi.

Jamstack-konferenssi

Netlify pyrkii myös luomaan Jamstack-yhteisön ja sponsoroimaan Jamstack-konferensseja. Yritys järjesti tapahtumia New Yorkissa, Lontoossa ja San Franciscossa vuonna 2019, ja isännöi virtuaalitapahtumia toukokuussa 2020. Tämän kirjoituksen jälkeen voit kuitenkin ilmoittautua San Franciscon tapahtumaan, joka on suunniteltu 6.-7.10.2020. koronaviruspandemialla on edelleen syksyllä konferenssisuunnitelmia ilmassa.

Jos haluat päivityksiä, voit seurata konferenssia Twitterissä. Voit myös tutustua menneisiin keskusteluihin Jamstack Conf YouTube -kanavalla.

[Myös: 6 parasta JavaScript IDE: tä | 10 parasta JavaScript-editoria]

Jamstack-oppaat

Etsitkö syvemmälle? Katso nämä Jamstack-oppaat, jotka antavat sinulle käytännön kokemusta Jamstack-sivuston rakentamisesta:

  • Kehittäjällä David Nealilla on hyvä johdanto-opas Jamstack-sivuston rakentamisesta, joka alkaa hyvin yksinkertaisesti ja muuttuu sitten yhä monimutkaisemmaksi.
  • LogRocket-blogissa ohjelmasuunnittelija Ogundipe Samuel tarjoaa perusteellisen, vaiheittaisen katsauksen sähköisen kaupankäynnin sivuston rakentamiseen Jamstack-periaatteiden mukaisesti.
  • Netlify tarjoaa kolmen tunnin pituisen video-opetusohjelman, joka kattaa paljon maaperää perusasioista edistyneempiin aiheisiin.

Kun olet oppinut tässä kuvatut peruskäsitteet, olet valmis aloittamaan työskentelyn Jamstack-kehityksen kanssa työelämässäsi. Hyvää oppimista!

$config[zx-auto] not found$config[zx-overlay] not found