Jamstack: Statična revolucija web stranica koja ubrzava web razvoj

Jamstack je sve popularnija filozofija web razvoja kojoj je cilj ubrzati i proces web razvoja i vremena preuzimanja web stranica. Izvlačeći se iz pokreta devops i tehnika kontinuirane integracije / kontinuirane isporuke (CI / CD) koje postaju norma u mnogim organizacijama, Jamstack uklanja dugotrajne tehnike za izradu interaktivnih web stranica, preusmjeravanje izvršavanja koda učitavanja sa web servera i prema JavaScriptu u pregledniku i vanjskim uslugama kojima se pristupa putem sučelja za programiranje aplikacija (API-ji).

Što je Jamstack? Jamstack, definirano

Jamstack je model web aplikacije koji se temelji na tri stupa, a koji daju inicijale u njegovom imenu: JavaScript, API-ji i oznake. Web stranice za web mjesto Jamstack sastoje se od standardnog označnog jezika, tako da se mogu graditi i testirati bilo gdje, bez ovisnosti o poslužiteljima aplikacija ili tehnologijama na strani poslužitelja poput Node.js. Bilo koja interaktivna funkcionalnost pruža se standardnim JavaScript kodom koji se izvršava u pregledniku, a koji upućuje pozive API-ima za ponovnu upotrebu putem HTTPS-a kako bi se dobio pristup vanjskim podacima ili bilo kojoj drugoj funkciji koja se ne može ugraditi u samu web stranicu.

Da biste shvatili zašto je filozofija Jamstacka revolucionarna, razmotrite LAMP stog koji ilustrira način na koji većina programera razmišlja o web razvoju većinu posljednjih 15 godina. LAMP je skraćenica od Linux (OS koji pokreće većinu web poslužitelja), Apache (poslužiteljski softver pokrenut na tim Linux računalima), MySQL (baza podataka u kojoj su pohranjene informacije potrebne web aplikaciji) i PHP / Perl / Python (jezik koji kôd na strani poslužitelja napisan je). Kada svoj preglednik usmjerite na web mjesto temeljeno na LAMP-u, web poslužitelj izvršava kod na strani poslužitelja koji generira web stranicu u letu, crtajući podatke prema potrebi iz MySQL baze podataka.

LAMP arhitektura omogućuje stvaranje dinamičnih i interaktivnih web stranica, ali također zahtijeva i moćan web poslužitelj - a što više web mjesta dobije promet, veća računalna snaga na strani poslužitelja mu je potrebna. Čak i s potpuno opremljenim poslužiteljem, dinamičkim web stranicama može trebati puno vremena za izradu i učitavanje. U svijetu ljudi s kratkom pažnjom koja pretražuje web na njihovim telefonima, to je kašnjenje postalo sve neprihvatljivije.

Jamstack je rođen kao dio pokreta "statične mreže", koji je nastao sredinom 2010. kao reakcija na ovaj tradicionalni model kako web stranica treba raditi. Da biste razumjeli Jamstack, morate razumjeti današnju tehnologiju koja stoji iza  statičnih web stranica.

Statička mjesta, generatori statičkih mjesta i Jamstack

Ako biste nekom novom početniku morali objasniti kako web funkcionira, to bi moglo ići otprilike ovako: Negdje u datotečnom sustavu web poslužitelja postoje HTML datoteke kojima se može pristupiti putem HTTP adresa, a koje web preglednik preuzme, a zatim ih interpretira za stvaranje web stranice . Ali to je opis statične web stranice:  Pretpostavlja se da HTML datoteke već postoje kad ih web preglednik krene tražiti. Kao što smo već vidjeli, velikim dijelom weba tijekom proteklog desetljeća dominiraju dinamičke web stranice, koje umjesto toga generiraju HTML datoteke u hodu kao odgovor na web zahtjeve, često na temelju parametara proslijeđenih web serveru putem obrazaca ili u Sam URL.

U vrlo ranim danima weba, kada su web stranice bile uvijek nepomične, mnogi su web programeri ručno napisali HTML kôd. Kako su web stranice postajale složenije, stizali su alati poput Macromedijinog Dreamweavera, koji su mogli statički HTML stranice generirati programski. Kako je pokret statične mreže krenuo sredinom 2010-ih, počeo se pojavljivati novi val takozvanih generatora statičkih stranica , uključujući Gatsby, Hugo i Jeckyll. Za razliku od WYSIWYG alata poput Dreamweavera, statički generatori web mjesta pokreću se naredbenim retkom i dizajnirani su za integriranje s CI / CD procesima. Alati generiraju HTML datoteke, koje se često temelje na sadržaju napisanom u Markdown-u i automatski se prenose u spremište kontrole verzija, poput GitHub-a. Kako su ove datoteke označene spremnima za proizvodnju, statične stranice na web mjestu uživo automatski se ažuriraju.

Važno je imati na umu da statičnost u ovom kontekstu ne znači da se radi o jednostavnim web stranicama 1.0 koje nisu interaktivne. Zapamtite, ove stranice mogu sadržavati napredni JavaScript koji se izvršava u pregledniku i upućuje API pozive bazama podataka, funkcijama na strani poslužitelja ili hostiranim funkcijama bez poslužitelja. No budući da se ništa od tog izvršavanja ne događa na samom web poslužitelju, statičnom web mjestu nije potreban web host s industrijskim pogonom u kompletu s bazom podataka. Mnoge statičke web stranice raspoređene su na mreže za isporuku sadržaja ili CDN-ove, gdje se sadržaj zrcali na više poslužitelja širom svijeta kako bi se brzo isporučio korisnicima bilo gdje.

Mathieu Dionne, marketinški voditelj u Snipcartu, opisuje rane dane ovog novog svijeta statičnih stranica u blogu i spominje da su oko 2015. godine „osnivači Netlifya ... upravo smislili pojam„ Jamstack “kako bi zaobišli negativna konotacija "statične mreže". Drugim riječima, opisivali smo Jamstack postupak kroz ovaj odjeljak. Ali sada moramo ukratko razgovarati o Netlifyu i njihovoj ulozi u ekosustavu.

Što je Netlify?

Netlify je tvrtka za računalstvo u oblaku i web hosting. Suosnivač Netlifya Mathias Biilmann skovao je pojam Jamstack, a usluge Netlifyja prilagođene su kupcima koji žele graditi web stranice temeljene na Jamstack filozofiji.

Netlify tvrdi da je razbio određeni problem koji je kočio statične web lokacije, a to je poništavanje predmemorije. Dinamične web stranice vođene bazom podataka mogu pojesti puno resursa poslužitelja, ali možete biti sigurni da će poslužiti najnoviju verziju vašeg web mjesta bilo kojem posjetitelju koji svrati. Budući da su web stranice Jamstack često hostirane na više distribuiranih poslužitelja CDN-a, ažuriranja su manje jednostavna. Može potrajati od nekoliko minuta do sati da svaki CDN poslužitelj shvati da njegova predmemorirana verzija web mjesta više ne vrijedi. Netfliyev CDN omogućuje trenutno poništavanje predmemorije za HTML datoteke da bi zaobišle ​​ovaj problem.

No Netlify nije jedini pružatelj usluga hostinga u prostoru Jamstack i nema nikakav zaštitni znak ili vlasničku kontrolu nad tim pojmom. Dostupna su brojna rješenja za hosting i postavljanje Jamstacka, a većina velikih pružatelja usluga u oblaku uključuje se u akciju, uključujući AWS, Google Firebase i Microsoft Azure.

Jamstack CMS

Ako ste netko tko svakodnevno mora rješavati web stranice, znate da je izrada i hostiranje web stranice samo početak. Također vam je potreban način za stvaranje novog sadržaja i dodavanje na vašu web lokaciju. Budući da ljudi koji će to raditi obično neće biti programeri, trebat će im user-friendly alat - naime, sustav za upravljanje sadržajem ili CMS. Tradicionalni CMS-ovi, poput WordPressa, nude pozadinsko korisničko sučelje gdje možete unijeti sadržaj web mjesta, upravljati bazom podataka u kojoj je taj sadržaj pohranjen i graditi dinamične web stranice koje taj sadržaj predstavljaju kao odgovor na zahtjeve preglednika.

CMS-ovi za web stranice Jamstack rade različito i obično se nazivaju bezglavima. CMS bez glave nudi korisničko sučelje za unos i upravljanje sadržajem i bazom podataka ili drugim sredstvima za njegovo pohranjivanje, ali sam ne generira HTML kôd za preglednik za raščlanjivanje. Umjesto toga, statične HTML stranice web stranice koriste JavaScript za pozivanje API-ja CMS-a, a CMS vraća sadržaj u formatu koji JavaScript može pretvoriti u web stranicu.

Ovaj sustav temeljito odvaja sadržaj od prezentacije, što je naravno dugogodišnji ideal programiranja. Budući da CMS ima pristupačni API, više web stranica može mu lako pristupiti. Na primjer, ako ste izgradili zasebne verzije web mjesta za mobilne uređaje, računala i pametne satove, sve ove verzije mogu pristupiti istom sadržaju pohranjenom u CMS-u.

Netlify, kao što ste mogli očekivati, ima vlastitu ponudu na ovom prostoru, nazvanu NetlifyCMS, ali postoji i niz drugih ponuda; programer Nebojša Radaković razlaže ih za vas u postu na blogu. Na tom je popisu puno nadobudnih, kao i jedno vrlo poznato ime. Iako smo WordPress koristili kao primjer tradicionalnog CMS-a, WordPress se može pokretati kao bezglavi CMS za pokretanje web stranice Jamstack.

Jamstack konferencija

Netlify također radi na stvaranju zajednice Jamstack i sponzorira Jamstack konferencije. Tvrtka je 2019. održavala događaje u New Yorku, Londonu i San Franciscu, a u svibnju 2020. bila je domaćin virtualnog događaja. Od pisanja ovog članka možete se prijaviti za događaj u San Franciscu zakazan za 6-7. Listopada 2020. pandemija koronavirusa još uvijek ima planove jesenskih konferencija u zraku. 

Ako želite ažuriranja, konferenciju možete pratiti na Twitteru. Također možete provjeriti prošle razgovore na YouTube kanalu Jamstack Conf.

[Također na: 6 najboljih IDE-ova za JavaScript | 10 najboljih JavaScript urednika]

Jamstack vodiči

Želite li ići dublje? Pogledajte ove tutorijale za Jamstack koji će vam pružiti neko praktično iskustvo u izgradnji web mjesta Jamstack:

  • Razvojni programer David Neal ima dobar uvodni vodič o izradi web stranice Jamstack, koji započinje vrlo jednostavno, a zatim postaje sve složeniji. 
  • Na blogu LogRocket, softverski inženjer Ogundipe Samuel pruža detaljan, detaljni pogled na izgradnju web stranice za e-trgovinu na principima Jamstacka. 
  • Netlify nudi video tutorial od tri sata koji pokriva puno temelja od osnova do naprednijih tema. 

Jednom kada savladate osnovne ovdje opisane koncepte, bit ćete spremni započeti rad s razvojem Jamstacka u svom profesionalnom životu. Sretno učenje!