Jamstack: Mga benepisyo, kahinaan, kasaysayan at higit pa

Ang Jamstack ay ang modernong paraan upang bumuo ng mga website at app. Dahil naghahatid ito ng pangkalahatang mas mahusay na pagganap kaysa sa mga tradisyonal na website. Bilang karagdagan sa iba pang mga pakinabang at pagtitipid sa gastos.

Ang layunin ay i-load muna ang isang static na website ng HTM at pagkatapos ay unti-unting pahusayin ang site at karanasan ng user. Nagreresulta ito sa napakabilis na paglo-load ng mga pahina, na maaaring mag-load sa ibang pagkakataon ng mga larawan at iba pang dynamic na nilalaman kung kinakailangan.

Ang Jamstack ay isang praktikal na diskarte sa web development na nag-aalok ng mga pakinabang para sa parehong mga may-ari ng site at mga bisita. Ngunit habang ito ay isang kamangha-manghang pag-unlad, hindi pa rin ito perpekto para sa lahat ng uri ng mga website.

Tinitingnan ng post na ito ang kasaysayan at iba't ibang feature ng Jamstack revolution, upang matuklasan kung ano ang magagawa nito para sa iyo at sa iyong negosyo.

Isang maliit na kasaysayan ng Jamstack

Ang mga web-server ay orihinal na nagsilbi ng mga static na pahina mula noong 1980s, hanggang sa naging popular ang server-side scripting at ang mga dynamic na website ay naging de-facto wed-development standard noong unang bahagi ng 2000s.

Habang lumalago ang Internet, gayunpaman, ang mga pag-optimize ay naging kinakailangan upang makatipid ng mga gastos at maabot ang mas maraming bisita. Ito ay humantong sa paggamit ng website caching, content-delivery network, at media optimizations.

Bilang karagdagan sa lahat ng ito, ang mga personal na computer ay nagiging mas malakas, at mas maraming workload ang inililipat sa front-end para sa pagpapatupad ng JavaScript. Ito ay humantong sa pag-unlad ng maraming mga bagong teknolohiya tulad ng jQuery, at mamaya sa Angular, React JS, Vue, at iba pang JavaScript library.

Ang 3 haligi ng Jamstack

Utang ng Jamstack ang ebolusyon nito sa tatlong magkakaibang ngunit komplementaryong teknolohiya, kung wala ito ay magiging imposible. Ang mga teknolohiyang ito ay JavaScript, Markup, at mga API. Nag-aambag sila ng 3 inisyal na bumubuo sa Siksikan ng trapiko sa Jamstack; J para sa JavaScript, A para sa mga API, at M para sa Markup.

Narito ang isang mas malapit na pagtingin sa bawat isa sa mga teknolohiyang ito at kung ano ang dulot nito sa Jamstack ecosystem.

• JavaScript – Ang JavaScript ay isang client-side interpreted scripting language, bagama't ginagawa na ngayon ng mga frameworks tulad ng Node.js na available ang engine para sa server-side scripting din. Ang pagiging client-side ay nangangahulugan na kahit anong JavaScript code ang isusulat mo para sa isang website ay makakahanap ng execution pagkatapos ma-load ang page sa browser ng isang web visitor.
  
  Nangangahulugan ang pagiging isang binibigyang kahulugan na wika na ang code ay ibinibigay 'as-is' sa web page, at hindi naipon muna tulad ng sa mga wika tulad ng C at C++. Sinusuportahan ng lahat ng sikat na browser ang wikang JavaScript, bagama't may mga pagkakaiba sa kanilang mga interpretasyon sa nakaraan. Ito ang sitwasyon na humantong sa pagbuo ng mga balangkas tulad ng jQuery upang pangalagaan ang lahat ng mga isyung iyon.
  
  Ngayon, ginagawang mas madali ng maraming modernong framework ang paggawa ng mga kamangha-manghang bagay gamit ang JavaScript at para sa mas kaunting oras at abala na una mong kailangan. Ang ilang mga frameworks tulad ng Next.js at Vue ay may kasamang mga feature na ginagawang madali ang pag-develop ng UI gamit ang JavaScript. At ito ay nag-ambag ng napakalaking sa Jamstack revolution.
  
• Mga API – Ang API o Application Programming Interface ay ang pinakabago sa 3 haliging ito ng Jamstack ecosystem. Ito ay isang teknolohikal na pag-unlad na lumago mula sa Internet, sa layuning gawing mas madali ang buhay ng mga programmer.
  
  Hinahayaan ka ng mga API na mag-query at makakuha ng impormasyon mula sa isang hanay ng mga mapagkukunan sa web, sa pamamagitan lamang ng paggamit sa web address o URL ng mapagkukunang iyon at pananatili sa mga tinukoy na protocol nito. Nagsimula ito bilang isang paraan ng pakikipag-ugnayan sa isang website nang hindi gumagamit ng tradisyonal na browser, ngunit ito ay umunlad.
  
  Sa ngayon, nag-aalok ang mga API ng iba't ibang serbisyo, kabilang ang data-banking tulad ng serbisyo ng Firebase, mga serbisyo sa lagay ng panahon, mga serbisyo sa pananalapi, mga booking, data ng krimen, data ng flight, mga serbisyo sa text-to-speech, mga conversion na rate ng pera, at iba pa.
  
  Pinapadali ng pag-develop ng API na ito na palitan ang mga tradisyunal na website na umaasa sa database ng mga decoupled system na makakakuha ng kanilang impormasyon mula sa mga source ng API. Maaaring i-load ng isang Jamstack site ang data ng API sa panahon ng static-files compilation run nito. O maaari itong mag-load ng isang simpleng HTML na site at gumamit ng JavaScript upang i-load ang alinmang mapagkukunan na kailangan nito kapag kailangan nito.
  
  Karagdagan ay dapat tandaan na ang isang API ay hindi dapat pampubliko o panlabas. Maaari mong gamitin ang anumang serbisyo na iyong pinili o lumikha ng sa iyo na partikular sa iyong site. Ang mga serverless function ay naging popular din bilang isang API source para sa mga site ng Jamstack. At para sa magandang dahilan, na makikita mo sa ibaba.
  
• Markup – Ang isang markup language ay anumang computer convention na gumagamit ng mga tag upang tukuyin ang mga elemento sa isang dokumento. Ang pinakasikat na markup language ay ang HyperText Markup Language o HTML, na nagpapatakbo sa karamihan ng web.
  
  Ang layunin ng markup sa Jamstack ay tukuyin ang layout ng isang web page o app. Nangangahulugan ito ng paglalagay ng mga item sa mga tamang posisyon, kabilang ang mga kahon, mga lugar ng teksto, mga larawan, isang header, at iba pa. Ang nasabing pahina na walang script ay tinatawag na a static na site.
  
  Gayunpaman, maaari mong i-code ang isang Jamstack website nang direkta sa HTML o gumamit ng iba pang mga wika at platform, tulad ng isang static-site generator. Marami sa mga static-site generator na ito ang tumatanggap ng HTML at markdown na mga wika.

Static vs Dynamic na Site

Ang bilis ng paglo-load ng website ay mahalaga para sa isang magandang karanasan ng user at, samakatuwid, naging bahagi ng Mga Core Web Vitals ng Google, na mga salik sa pagraranggo para sa mga resulta ng paghahanap. Ang paraan ng Jamstack ay ang pag-load ng isang static na site sa lalong madaling panahon, pagkatapos ay magdagdag ng mga extra kung kinakailangan, kadalasang gumagamit ng JavaScript at mga API.

Ang pagho-host ng isang static na site ay nangangahulugan din na ang iyong server ay gumagawa ng mas kaunting trabaho. At ang matitipid ay napakalaki na katulad ng isang serbisyo Nag-aalok ang Netlify ng libreng static-site hosting. Ang mga static na site ay mas madaling gawin at i-deploy kaysa sa mga dynamic na site.

Gayunpaman, ang mga dynamic na website ay mayroon ding ilang partikular na kalamangan gaya ng kadalian ng pag-edit, higit pang functionality, at mga feature tulad ng user-profile at account. Ginagawa nitong madalas na mas mahusay ang mga dynamic na site para sa mas kumplikadong mga proyekto. At least, sa ngayon.

Mga Benepisyo ng Jamstack Sites

Ang mga website ng Jamstack ay nag-aalok ng maraming pakinabang kaysa sa mga tradisyonal. At ang mga pakinabang na ito ay nakakatulong sa kanilang lumalagong katanyagan. Pangalawa, karamihan sa mga kalamangan na ito ay naaayon sa mga modernong kasanayan sa pagbuo ng web. At ginagawa nitong modernong paraan ang Jamstack para bumuo ng mga website at app.

Narito ang ilang benepisyo na maaari mong asahan mula sa paglalapat ng mga prinsipyo ng Jamstack:

• Mabilis na Naglo-load – Ang mga static na web page ay naglo-load nang mas mabilis kaysa sa mga dynamic na website dahil ang kailangan lang gawin ng server ay ihatid ang mga static na file. Ang isang dynamic na site, sa kabilang banda, ay kailangang i-parse muna ang script sa gilid ng server. Pagkatapos ay isagawa ito, tawagan ang database para sa mga talaan, at suriin ang iba pang mga variable sa kapaligiran bago ihatid ang panghuling HTML file sa kliyente.
  
• Mababang Paggamit ng Resource – Maaari mong buuin ang iyong mga static na pahina nang isang beses at ihahatid lamang ang mga ito pagkatapos. O maaari mong muling buuin ang mga pahina araw-araw, bawat oras, o bawat minuto, depende sa iyong mga pangangailangan. Magagamit mo ang mas kaunting mga mapagkukunan kaysa sa isang dynamic na site. At nangangahulugan ito ng mas mababang gastos din.
  
• Mas mabuti Katiwasayan – Nag-aalok ang arkitekturang Jamstack ng mas maliit na attack surface para sa mga malisyosong aktor kaysa sa mga dynamic na website. Mas maganda pa ito kapag ang lahat ng mga tawag sa API ay ginawa habang tumatakbo ang compilation, kaya walang ideya ang isang web visitor tungkol sa kung aling mga web services at protocol ang ginagamit.
  
• Madaling Scalability – Mas madaling sukatin ang mga static na website dahil mas kaunting mapagkukunan ang ginagamit nila kaysa sa mga dynamic na site. Dagdag pa sa data-banking at iba pang mga isyu sa pamamahala ng mapagkukunan ay kakaunti o ganap na wala.
  
• Madaling Pagpapanatili – Walang imprastraktura upang mapanatili, walang database admin routines, walang security patch, at iba pa.

• flexibility – Madali kang magdagdag at mag-alis ng mga mapagkukunan. Hindi ka umaasa sa isang partikular na database o scripting language, maliban sa JavaScript at HTML. Baguhin ang isang linya at ikaw ay konektado sa ibang API.

Kahinaan ng Jamstack Sites

Ang mga site ng Jamstack ay mayroon ding kanilang mga isyu, at narito ang mga pinakatanyag.

• Ito ay hindi pa isang mature na teknolohiya.
• Maaari kang magkaroon ng mga isyu kung kailangan mo ng mga dynamic na feature.
• Maaaring maging problema ang pag-asa sa API, kahit na bihira ito.

Jamstack at walang server na mga function

Kahit na ang mga Jamstack site ay gumagamit ng mga static na web page, hindi sila ganap na static. Dahil maaari mong gamitin ang API at walang server na mga function upang magdagdag ng dynamic na data sa site.

Pinapadali ng mga serbisyo tulad ng Google cloud serverless function, Netlify function, at Firebase database service na magdagdag ng dynamic na data sa anumang Jamstack site.

Ang repositoryo ng GitHub at kontrol sa bersyon

Maaari mong direktang i-host ang iyong mga static na pahina sa isang host ng Jamstack tulad ng Netlify. O maaari mong i-host ang iyong mga development file sa isang repository tulad ng GitHub at hayaan ang isang host tulad ng Netlify na ma-access ang mga ito at bumuo ng mga static na pahina tuwing kailangan mo.

Bukod sa pag-aalok sa iyo ng isang lugar upang i-host ang iyong code, pinapadali ng mga repositoryo ng software na pamahalaan ang iba't ibang bersyon ng iyong software. Kaya madali kang makakabalik sa dating stable na bersyon kung sakaling makatuklas ka ng mga isyu sa kasalukuyan.

Ginagawang madali ng GitHub ang lahat para sa iyo. Dagdag pa, maaari kang magbigay ng tahasang pag-access sa iyong host ng Jamstack na pinili tulad ng Netlify, upang i-access at i-compile ang iyong bagong data sa tuwing gagawa ka ng update.

Mga Static Site Generator

Mga generator ng static na site o ang mga SSG ay kahanga-hangang tool na nagbibigay-daan sa mga hindi gaanong marunong sa teknolohiya na gawing modernong mga site ng Jamstack ang mga dynamic na website.

Ang ilang mga SSG tulad ng Eleventy o 11ty ay idinisenyo para sa mga minimalist, habang ang iba tulad ng Gatsby ay kasama ang lahat ng mga kampanilya at whistles na maaari mong hilingin. Maaari silang mag-alok ng mga feature tulad ng pangangasiwa ng larawan, mga layout ng site na madaling gamitin sa mobile, mga generator ng menu, awtomatikong paging, at iba pa.

Ang mga sikat na generator ng site ng Jamstack ay kinabibilangan ng:

1. Susunod.js
2. gatsby
3. ika-11
4. Nuxt
5. Scully
6. Hugo
7. Jekyll
8. nakakadiri
9. Vuepress

Mga Framework ng JavaScript na nakatuon sa UI

Malaki ang epekto ng ebolusyon ng JavaScript framework na nakatuon sa UI sa ebolusyon ng Jamstack. Oo naman, maaari mong palaging gumamit ng vanilla JavaScript sa iyong mga static na site, ngunit ang paggamit ng isang framework ay ginagawang mas mahusay at mas madali ang mga bagay.

Kasama sa pinakasikat na UI-focused JavaScript frameworks ang:

1. Gantihin
2. Anggular
3. Vue
4. makinis

Netlify at Jamstack Hosting

Ang lahat ng mga site ng Jamstack ay nangangailangan ng pagho-host at tulad ng serbisyo netlify nag-aalok ito ng libre. Matagal nang kasangkot ang Netlify sa kilusang Jamstack at nag-aalok ng modelo ng pagpepresyo ng freemium.

Ngunit hindi tulad ng tradisyonal na mga senaryo sa pagho-host, ang mga libreng serbisyo sa pagho-host ng Jamstack ay nag-aalok ng mahusay na halaga at pagganap. Ang libreng plano ng Netlify, halimbawa, ay may kasamang walang limitasyong mga site, isang rich dashboard, a CMS, mga function na walang server, at awtomatikong pagkuha ng isinumiteng data ng form.

Kasama sa iba pang libreng serbisyo sa pagho-host ng Jamstack ang:

1. vercel
2. Digital Ocean
3. Azure Static Web Apps

Walang Ulo na Mga Sistema sa Pamamahala ng Nilalaman

Ang walang ulo na sistema ng pamamahala ng nilalaman o konsepto ng CMS ay maaaring nakakalito para sa mga bago sa Jamstack ecosystem. Ngunit ang pagiging walang ulo ay nangangahulugan lamang na ang software ay hindi naka-attach sa anumang platform.

Ang mga platform tulad ng WordPress at Drupal, halimbawa, ay may kasamang mga sistema ng pamamahala ng nilalaman na hindi mapaghihiwalay sa platform. Ibig sabihin, magagamit mo lang ang kanilang editor para mag-publish sa platform kung saan ito bahagi.

Ang mga walang ulo na sistema ay hindi nakakabit sa anumang platform. Sa halip, kumokonekta sila sa pamamagitan ng mga API sa maraming platform, na ginagawa itong lubos na nababaluktot na mga tool.

Ang pinakasikat na walang ulo na CMS software na ginagamit ng mga admin ng site ng Jamstack ay kinabibilangan ng:

1. strapi
2. NetlifyCMS
3. Aswang
4. GraphCMS
5. Kontento
6. Palagubatan

Paano bumuo ng isang Jamstack site

Ang pagbuo ng isang Jamstack site mula sa kamay ay diretso. Narito kung paano mo ito gagawin:

• Hakbang 1 – Idisenyo ang layout ng iyong website gamit ang HTML at CSS.
• Hakbang 2 - Magdagdag ng karagdagang pag-andar gamit ang JavaScript.
• Hakbang 3 - Magdagdag ng mga function at kahilingan ng API.
• Hakbang 4 – I-upload ang iyong mga file sa iyong HTML server.

Ngunit ang mga hakbang sa itaas ay malamang na kapana-panabik para sa mga geeks lamang. Kaya, ang iba't ibang mga developer ay nakabuo ng iba't ibang mga tool upang matulungan ang mga hindi coder na makapasok sa pagkilos nang hindi isang master coder.

Narito ang iba at mas madaling paraan:

1. Mga Static Site Generator – Ito ang mga tool tulad ng Gatsby na nagpapadali sa paggawa ng isang umiiral na dynamic na website sa isang Jamstack static na site. Mayroon silang iba't ibang pag-andar at ang ilan ay may kasamang espesyal plugin para sa ilang mga platform tulad ng WordPress.

2. Mga Kagamitan sa Disenyo – Ito ang mga design app tulad ng Stackbit at Builder.io, na nagpapadali sa disenyo ng modernong Jamstack site nang hindi alam kung paano mag-code. Idisenyo at i-deploy lamang.

Kailan bumuo ng isang Jamstack site

Bagama't maaaring hindi perpekto ang arkitekturang Jamstack para sa ilang uri ng mga website, matagumpay mong magagamit ito para sa mga sumusunod na uri ng mga website:

• Mga Personal na Site – Mga pangunahing site na nagsasabi sa mundo kung sino ka.
• Mga Website ng kumpanya – Mga site ng kumpanya na kinabibilangan ng mga address, produkto, serbisyo, at iba pa.
• Mga Landing na Pahina – Espesyal na ginawa upang makuha ang impormasyon mula sa mga bisita sa web.
• Mga Tindahan ng e-Commerce – Iba't ibang uri ng mga site na nagbebenta ng mga bagay online.
• Blogs - Mga site ng nilalaman para sa mga regular na pag-update. Awtomatikong iko-convert ng mga SSG ang iyong mga WordPress site.

Konklusyon

Naabot na namin ang dulo ng post na ito sa Jamstack at lahat ng kailangan mong malaman tungkol dito. At dapat mong matanto sa ngayon na ang hinaharap ng web ay kaakibat ng kilusang Jamstack.

Kung bago ka sa web development, dapat mong yakapin ang Jamstack nang walang pagkaantala. At kung ikaw ay isang batikang old-school web developer, pagkatapos ay tanungin ang iyong sarili kung gusto mong maiwan.