Utvrdite kako Jamstack kombinuje moderne razvojne prakse sa starim statičnim veb stranicama kako bi programeri mogli brže da prave brze veb stranice.
Author: Josh Fruhlinger
Jamstack je popularna filozofija veb razvoja koja ima za cilj da ubrza i razvoj veba i vreme potrebno za preuzimanje veb stranice. Na osnovu devops-a i CI/CD-a, Jamstack menja dugogodišnje tehnike za pravljenje interaktivnih veb stranica, pomerajući izvršavanje koda pri učitavanju dalje od veb servera a prema JavaScriptu u pretraživaču i spoljnim servisima kojima se pristupa preko API-ja. Krajnji rezultat je pristup koji je pogodan za programere u izgradnji statičkih veb sajtova koji se veoma brzo prikazuju i koji se lako mogu prilagoditi za više platformi.
Jamstack arhitektura
Jamstack je arhitektura veb aplikacije zasnovana na tri stuba od kojih potiču inicijali u njenom imenu: JavaScript, API i markap. Veb stranice na Jamstack sajtu se sastoje od standardnog jezika za označavanje, tako da mogu da se prave i testiraju bilo gde, da nemaju zavisnosti od servera aplikacija ili tehnologija na strani servera kao što je Node.js. Sve interaktivne funkcionalnosti su obezbeđene standardnim JavaScript kodom koji se izvršava u pretraživaču, koji poziva API-je za višekratnu upotrebu preko HTTPS-a. Ovi pozivi se koriste za pristup spoljnim podacima ili bilo kojoj drugoj funkciji koja se ne može ugraditi u samu veb stranicu.
Da biste razumeli zašto je Jamstack revolucionaran, razmislite o LAMP steku, koji ilustruje način na koji većina programera razmišlja o veb razvoju u poslednjih 15 godina. LAMP je skraćenica za Linux (operativni sistem koji pokreće većinu veb servera), Apache (serverski softver koji radi na tim Linux mašinama), MySQL (baza podataka u kojoj se čuvaju podaci veb aplikacije) i PHP/Perl/Python (jezik koji se koristi za pisanje koda na serverskoj strani ). Kada svoj pretraživač usmerite na veb sajt zasnovan na LAMP-u, veb server na serverskoj strani izvršava kôd koji u hodu generiše veb stranicu, izvlačeći po potrebi podatke iz MySQL baze podataka.
LAMP arhitektura omogućava programerima da kreiraju dinamičke i interaktivne veb sajtove, ali takođe zahteva moćan veb server — i što više saobraćaja sajt dobija, potrebno mu je više računarske snage na serverskoj strani. Čak i sa potpuno opremljenim serverom, za izradu i učitavanje dinamičkih veb stranica može da bude potrebno mnogo vremena. U svetu u kojem ljudi imaju kratak raspon pažnje, a često pretražuju veb na svojim telefonima, to kašnjenje je postalo glavna bolna tačka.
Jamstack je nastao kao deo pokreta za statične veb stranice, sredinom 2010-ih kao reakcija na ovaj tradicionalni model funkcionisanja veb sajtova. Da biste razumeli Jamstack, morate razumeti tehnologiju koja stoji iza statičnih veb sajtova.
Statičke veb stranice i Jamstack
Ako biste potpunom početniku morali da objasnite kako funkcioniše veb, to bi moglo da ide otprilike ovako: Negde u sistemu fajlova veb servera postoje HTML fajlovi, kojima se pristupa preko HTTP adresa, pa ih veb pretraživač preuzima, a zatim tumači kako bi napravio veb stranicu . Ali to je opis statičnog veb sajta: pretpostavlja se da HTML fajlovi već postoje kada ih veb pretraživač traži. Ali velikim delom veba tokom protekle decenije dominirali su dinamički veb-sajtovi, koji generišu HTML fajlove u hodu kao odgovor na veb zahteve, često na osnovu parametara koji se prosleđuju veb serveru preko obrazaca ili u samom URL-u.
Generatori statičkih sajtova
U ranim danima veba, kada su veb stranice uvek bile statične, mnogi veb programeri su HTML kôd pisali ručno. Kako su veb stranice postajale sve složenije, stigle su alatke kao što je Macromedia Dreamweaver i počele programski da generišu statične HTML stranice. Kako su statične veb stranica uzele maha, počeo je da se pojavljuje novi talas generatora statičkih sajtova, uključujući Gatsby, Hugo i Jeckyll. Za razliku od WYSIWYG alata kao što je Dreamweaver, generatori statičkih sajtova su vođeni sa komandne linije i dizajnirani su da se dobro integrišu sa CI/CD procesima. Ovi alati generišu HTML fajlove, često zasnovane na sadržaju napisanom u Markdown-u i automatski se otpremaju u spremište za kontrolu verzija kao što je GitHub. Pošto su ovi fajlovi označeni kao spremni za produkciju, statične stranice na živom veb sajtu se ažuriraju automatski.
Mreže za isporuku sadržaja
Važna stvar koju treba imati na umu je da statičnost u ovom kontekstu ne podrazumeva jednostavne veb 1.0 stranice koje nisu interaktivne. Ove stranice mogu da sadrže napredni JavaScript koji se izvršava u pretraživaču i upućuje API pozive bazama podataka, funkcionalnosti na serverskoj strani ili hostovanim funkcijama bez servera. Ali pošto se ništa od tog izvršavanja ne dešava na veb serveru, statičkom sajtu nije potreban veb host na industrijskom pogonu zajedno sa bazom podataka. Mnogi statični sajtovi se postavljaju na mreže za isporuku sadržaja ili CDN-ove, gde se sadržaj preslikava na više servera širom sveta kako bi se brzo isporučio korisnicima bilo gde.
Mathieu Dionne, voditelj marketinga u Snipcart-u, opisuje rane dane ovog novog sveta statičnih veb sajtova u postu na blogu i pominje da su oko 2015. godine „osnivači Netlify-a … upravo smislili termin ‘Jamstack’ kako bi zaobišli negativnu konotaciju ’statične mreže’.“
U ovom odeljku smo opisali proces Jamstack. Sada, hajde da ukratko opišemo Netlify i njegovu ulogu u ekosistemu Jamstack.
Netlify i Jamstack
Netlify je kompanija za računarstvo u oblaku i veb hosting, a njen suosnivač, Mathias Biilmann, skovao je termin Jamstack. Netlify-ove usluge su prilagođene klijentima koji žele da grade sajtove zasnovane na Jamstack filozofiji.
Netlify tvrdi da je rešio konkretan problem koji je kočio statične veb sajtove, a to je poništavanje keša. Dinamički veb sajtovi vođeni bazama podataka mogu da troše mnogo serverskih resursa, ali možete biti sigurni da će ponuditi najnoviju verziju vašeg veb sajta svakom posetiocu koji naiđe. Pošto su Jamstack veb sajtovi često hostovani na više distribuiranih servera CDN-a, ažuriranja su složenija. Može potrajati od nekoliko minuta do više sati dok svaki CDN server ne shvati da njegova keširana verzija sajta više nije važeća. Da bi se zaobišao ovaj problem, Netlify CDN obezbeđuje trenutno poništavanje keša za HTML fajlove.
U godinama otkako je Netlify prihvatio Jamstack, kompanija je koristila ovu tehnologiju kao okosnicu svoje PaaS ponude, pružajući platformu sadržaja za velike kompanije kao što su Nike i Peleton.
Jamstack i Gatsby
Netlify nije jedini provajder hostinga u Jamstack prostoru i nema nikakav zaštitni znak ili vlasničku kontrolu nad tim terminom. Dostupna su različita rešenja za hostovanje i primenu Jamstack-a, a većina velikih dobavljača u oblaku se priključuje, uključujući Amazon Web Services, Google Firebase i Microsoft Azure. Druge, specijalizovanije kompanije su takođe ušle u ovaj prostor, uključujući Gatsby, Inc., tvorca istoimenog generatora statičkih sajtova.
Gatsby (kompanija) je izgradila ponudu visokih usluga iza generatora Gatsby sajtova. Zbog njegovih korena otvorenog koda, generator Gatsby sajtova se nalazi i u ponudi drugih provajdera usluga, uključujući Netlify.
CMS bez čeonog dela
Naravno, pravljenje i hostovanje veb stranice je samo početak, kao što znate ako ste ikada morali da upravljate veb sajtom. Potreban vam je i način da kreirate novi sadržaj i dodate ga na svoj veb sajt. Pošto to obično rade ljudi koji nisu programeri, biće im potreban alat koji je prilagođen korisniku — naime, sistem za upravljanje sadržajem ili CMS (engl. content management system). Tradicionalni CMS-ovi, poput WordPress-a, nude pozadinski korisnički interfejs (UI) gde možete da unesete sadržaj veb sajta, upravljate bazom podataka u kojoj se taj sadržaj čuva i gradite dinamičke veb stranice koje prikazuju taj sadržaj u odgovor na zahteve iz pretraživača.
CMS-ovi za Jamstack sajtove funkcionišu drugačije i generalno su poznati kao „bez čeonog dela“ (engl. headless). CMS bez čeonog dela nudi korisnički interfejs za unošenje i upravljanje sadržajem i bazom podataka ili drugim sredstvima za njegovo skladištenje, ali sam ne generiše HTML kôd koji će pretraživač da raščlanjuje. Umesto toga, statične HTML stranice veb sajta koriste JavaScript za pozivanje CMS API-ja, a CMS vraća sadržaj u formatu koji JavaScript može da pretvori u veb stranicu.
Ovaj sistem potpuno odvaja sadržaj od prezentacije, što je naravno dugogodišnji ideal programiranja. Pošto CMS ima pristupačan API, više veb stranica može lako da ga koristiti. Na primer, ako ste napravili zasebne verzije svog veb sajta za mobilne uređaje, računare i pametne satove, sve ove verzije mogu da pristupe istom sadržaju uskladištenom u CMS-u.
Netlify, kao što možete očekivati, ima svoju ponudu u ovom prostoru, pod nazivom NetlifyCMS, ali postoje i druge ponude; programer Nebojša Radaković ih razlaže u svom uvodu u CMS-ove bez čeonog dela. Na toj listi ima mnogo novih imena, ali i jedno veoma poznato. Iako smo WordPress koristili kao primer tradicionalnog CMS-a, on se takođe može pokrenuti za napajanje Jamstack sajta kao CMS bez čeonog dela.
Zašto koristiti Jamstack?
Dotakli smo se mnogih prednosti korišćenja Jamstack-a, ali vredi ih ponoviti, sada kada imate potpunu sliku:
Brzina: Statički sajtovi se brže učitavaju — i to nije samo pitanje pogodnosti. Google kažnjava spore sajtove tako što snižava njihov rang u pretraživanju, a kupci navikli na brze odgovore često napuštaju transakcije e-trgovine ako se koraci sporo učitavaju.
Iskustvo programera: Programeri mogu da prave statične sajtove koristeći devops tehnike koje su transformisale praksu i produktivnost u industriji. A Jamstack filozofija proizvodi stekove sajtova koji jasno razdvajaju probleme, omogućavajući programerima da se usredsrede na svoje oblasti specijalizacije: dizajneri i programeri čeonih delova mogu da grade sajtove bez potrebe da tečno govore jezik na serverskoj strani, dok pozadinski programeri mogu da se fokusiraju na API-je. Pitanja sadržaja se u potpunosti rešavaju u oblasti CMS-a.
Fleksibilnost: statičke sajtove mogu da hostuju tradicionalni veb serveri, CDN-ovi, specijalizovani servisi ili neka kombinacija ova tri. A pošto CMS-ovi bez čeonog dela komuniciraju sa čeonim krajevima preko API-ja, lako možete da pravite sajtove za više platformi koji dele isti sadržaj.
Kada treba izbeći Jamstack
Uz sve te prednosti, ipak treba reći da Jamstack nije za svakoga. Druga strana Jamstack-a koji je prilagođen potrebama programera je ta što ćete se, ako želite da pokrenete veb sajt zasnovan na Jamstacku, više oslanjati na programere nego što biste želeli. Ovo i nije tako loše za kompanije koje već imaju ili su spremne da angažuju namenski tim za veb razvoj sa veštinama neophodnim za Jamstack. Ali mnoge manje firme su navikle da koriste komercijalni softver ili softver otvorenog koda koji im omogućava da izvršavaju svoje veb stranice bez potrebe za svakodnevnim učešćem programera. Sajtovi za e-trgovinu, posebno, imaju tendenciju da se oslanjaju na širok spektar dodataka i biblioteka razvijenih tokom godina za tradicionalna rešenja veb hostinga; njihovi Jamstack ekvivalenti nisu toliko rasprostranjeni ili zreli, što znači da Jamstack nije uvek dobar za e-trgovinu.
Da li je Jamstack popularan?
Uprkos uzbuđenju oko njega, Jamstack trenutno podržava prilično mali deo svih veb sajtova. Veb almanah procenjuje da su 2021. sajtovi napravljeni pomoću generatora statičkih sajtova (skoro svi bi bili napravljeni u skladu sa Jamstack filozofijom) činili samo oko 1 procenat svih veb sajtova. Ipak, Jamstack se nalazi u periodu brzog rasta, a njegov tržišni udeo raste za faktor više od dva svake godine u poslednje tri godine. Jedan veliki znak povećanja interesovanja programera za ovu tehnologiju: oko trećine Jamstack programera su prilično novi, sa manje od dve godine iskustva.
Jamstack tutorijali
Želite da idete dublje? Pogledajte ove Jamstack vodiče za programere:
Hasura, kompanija koja se fokusira na GraphQL API sistem koji koriste Gatsby i druge Jamstack platforme, ima dobar vodič na visokom nivou koji vas vodi korak po korak kroz arhitektonska razmatranja i izbore od koji h se sastoji Jamstack sajt.
Veb domaćin Digital Ocean ima dobar vodič za pravljenje Jamstack portfolio sajta koristeći Angular i Scully.
Netlify nudi video tutorijal koji pokriva mnogo sadržaja, od osnova do naprednijih tema, i uključuje uvod u izgradnju Jamstack sajta vođenog bazom podataka.
Kada savladate osnovne koncepte koji su ovde navedeni, bićete spremni da koristite Jamstack principe i tehnologije za svoje veb sajtove. Srećno učenje!
Izvor: InfoWorld