IkusiMapa ikusiArrastratuWebgunera joan

Nola eraiki web ultrazkarrak eta administragarriak Astro eta Strapirekin

Gaur web garapenari buruz hitz egingo dugu. Nerea Gómez eta Igor Nietorekin, agentziako garapen taldeko kideak, Astro eta Strapi-ri buruz hitz egingo dugu. Teknologia hauen erabilera konbinatuak errendimendua eta malgutasuna nola ematen dituen sakonduko dugu, horrek Worköholics-en eraikitzen ditugun esperientzia digitalak optimizatzen laguntzen duelarik.

Bai, gaur web garapenari buruz hitz egingo dugu. Eta, nahiz eta teknizismo jakin batzuk erabili, gure helburua sarrera hau ulergarria eta mundu guztiarentzat erabilgarria izatea da. Azken finean, web garapena ez da diziplina isolatu bat, baizik eta kodetik hartzen diren erabakiak,eragin zuzena dute diseinuan, komunikazioan, SEOn, kudeaketan edo marketing lanean.

Elkarrizketan erabilitako kontzepturen batekin zalantzarik izanez gero (kontsultatu farmazialariari), amaieran sartu dugun web-garapenaren munduarekin lotutako terminoen glosategia kontsulta dezakezu.

Orain, hori bai, has gaitezen hasieratik: Zer da Astro?

Igor: Astro web-garapeneko framework bat da, eta React, Angular, Gatsby edo JavaScript ekosistemako beste tresna ezagun batzuk ez bezala, sekulako malgutasuna ematen digu errenderizatzeko estrategia aukeratzeko edo datuen jatorri desberdinak konfiguratzeko. Horrez gain, "islands" deiturikoak sortzeko gai da, eta horiekin esparru ezberdinetan garatutako osagai edo funtzionaltasun isolatuak gara ditzazkegu.

Orduan, zerk bereizten du Astro beste framework batzuetatik?

Igor: Nik esango nuke Astro tresna bikaina dela, beste frameworkekin primeran bizi dena. Inola ere ez nuke React, Angular, Vue edo Svelte bezalako beste esparru batzuen aurka egingo. Astro, hain zuzen ere, proiektu beraren parte gisa esparru desberdinak erabiltzeko aukera ematen duen tresna da.

Bestalde, renderizazio-estrategia desberdinak jarrai ditzakegu, proiektuaren testuinguruaren arabera. Hasierako konfigurazioaren bidez, Server Side Rendering edo Static Site Generation aukeratu ahal izango dugu.

Zeintzuk dira abantailak? Eta desabantailak?

Igor: Astroren abantailetako bat ikaskuntza-kurba eta tenplate-en sistema erabiltzeko erraztasuna dira. Gainera, dokumentazio zabala, addon ekosistema edo plugin oso erabilgarriak ditu. Entengabe garatzen ari den kode irekiko proiektua da, gaztea izan arren, garapen-komunitate zabala duena.

Desabantaila gisa, eta kontraesankorra badirudi ere, malgutasun handia duenez, huts egin dezakegu proiektu baterako soluzio gisa aukeratzerakoan.

Adibidez, Astrok bezeroaren aldeko kodea exekutatu badezake ere, ez nuke inola ere erabiliko SPA bat sortzeko, hori ez baita bere helburua, eta badaude beste framework batzuk, hala nola Angular edo React, kasuistika horretara askoz hobeto egokitzen direnak.

Eta Strapi, zer da? Zertarako balio du?

Nerea: Strapi kode irekiko 100% JavaScript CMS headless oso boteretsua da. Front-etik erabat bereizita dago, eta, beraz, garatzaileei aukera ematen digu API bat sortzeko, endpoint-ak hedatzeko edo sortzeko edo datu-egiturak azkar eta erraz sortzeko.

Gainera, aplikazio edo webgune baten edukia erraz kudea daiteke, aparteko garapenik behar izan gabe. Oinarri-oinarrian, Strapik oinarrizko funtzionalitateak eskaintzen dizkizu, hala nola rolen kudeaketa edo posta elektronikoak bidaltzea, eta horiek, lehenik eta behin, funtzionalitate konplexuak izan daitezke.

Ados, baina zer da zehazki CMS headless bat?

Nerea: CMS headless esaten zaio Strapiri, inoren mende ez dagoen CMS bat delako, hau da, front batena (erabiltzaileak ikusten duen zatia). Erabat bananduta eta frontetik bereizita dago. Nolabait esateko, webgune bat eta eduki-administratzaile bat izango genituzke, bakoitzak bere aldetik bizi ahal izango lituzkeenak, eta ez lukete elkarren mendekotasunik izango. Garatzeko orduan, webgunearen edo apparen eskalagarritasunari dagokionez, edo APIaren erorketa posibleen aurrean, abantaila izugarria izango litzateke.

Zergatik da positiboa Strapi kode irekikoa izatea?

Nerea: Programak nola funtzionatzen duen eta bere erraiak ikusteko askatasuna izatea bikaina da. Aldatzea edo zabaltzea, norberak nahi duena egiteko, komunitate batean laguntzea eta beste garatzaile batzuen ekarpenez elikatzea da open source izatea polittzen duena.

Izan ere, garatzaileok erronka eta funtzionalitate berrien aurrean jartzen gara egunero, eta, beraz, oso garrantzitsua da komunitate handi bat egotea bertan oinarritzeko.

Gaingiroki, nola funtzionatzen du Strapik?

Nerea: Funtsean, Strapik moduluetan oinarritutako arkitektura erabiltzen du. Strapi moduluak funtzionaltasun espezifikoa duten paketeak dira, hala nola erabiltzailea autentifikatzeko modulu bat edo edukia administratzeko modulu bat. Modulu horiek gehitu edo kendu egin daitezke, beharrezkoa den heinean, eta horrek malgutasun eta pertsonalizazio handia ematen du aplikazioen garapenean.

Gainera, garatzaileok bere edukia sortu eta administratu dezakegu erabiltzeko erraza den erabiltzaile-interfaze baten bidez.

Nola integratzen dira Strapi eta Astro?

Igor: Astroren onena bere aldakortasuna da. Datu-jatorri desberdinekin integratzeko gai da. Adibidez, proiektu bereko edukiak kontsumi genitzake Markdown, JSON edo API baten bidez. Kasu honetan, zehazki, Strapi REST API baten bidez azaltzen da, eta horren gainean erabateko kontrola izango dugu; adibidez, endpoint bakoitzaren ikuspena konfiguratu ahal izango dugu.

Zergatik funtzionatzen dute hain ondo Astrok eta Strapik?

Igor: Nire ustez, errendimenduari garrantzi handia ematen ari zaizkion bi tresna dira, eta, beraz, web edo aplikazio benetan azkarrak direnak lortzen ditugu. Gainera, stack teknologiko berarekin, oso proiektu desberdinen eskakizunei irtenbidea emateko gai gara.

Nerea: Astrok beste framework js batzuekiko duen aldakortasunak, CMS Strapiren potentziarekin batera, askoz azkarrago lan egitea eta benetan emaitza sinestezinak lortzea eragiten du. Azken batean, datu edo eduki karga handia izan arren, errendimendu handiko webguneak garatzeko aukera ematen digu.

Zein da orain arte Astro+Strapirekin izan duzuen esperientzia?

Igor: Gaur egun, hainbat proiektu garatu ditugu bi teknologiekin, eta aurreikusten dugu, batera edo bereizita, askotan erabiltzen jarraituko ditugula agentzian ditugun kasuistika desberdinei erantzuteko. Gainera, Strapik aukera ematen digu bere gainean garatzeko eta bere funtzionalitateak zabaltzeko gure beharretara egokitzeko, CMS boteretsua benetan izanik.

Nerea: Egia esan, oso esperientzia atsegina izaten ari da, bi teknologien erraztasun eta aldakortasunagatik. Oso gogobetekoa da lehen begiratuan lortzeko zailak izan daitezkeen emaitzak lortzea, baina Strapik eta Astrok erraz eta azkar konpontzen dituzte. Soluzio handia da frontend developers-entzat, aplikazioetarako APIren bat sortu behar dutenentzat.

Zein proiektu motatan da ideia ona horiek erabiltzea? Zeinetan ez da?

Igor: Konbinazio hori noiz erabili baloratzeko, faktore asko hartu beharko genituzke kontuan. Adibidez, Astroren kasuan, helburua bezeroan exekutatuko den SPA aplikazio bat garatzea bada, ez nuke erabiliko. Bestalde, Strapiren kasuan, CMS “developer first” ere badenez, edukia kudeatuko duen pertsonaren ezagutza-maila baloratuko luke, askotan erabakigarria baita Strapirengana makurtzeko edo WordPress bezalako beste CMS batzuk hautatzerakoan, zentzu horretan askoz ere finkatuagoak.

Nerea: Galdera korapilatsua da, baina uste dut edukiz aberatsak diren webguneetan erabiliko nukeela Astro, oraintxe baita bere abantaila lehiakorrena: webgune estatiko ultra-azkarrak sortzea, JavaScript gutxiago bidaliz konpilazioaren unean eta dena HTML estatiko bihurtuz. Azken horrek mesede handia egiten dio SEOari, eta, beraz, landing komertzialetarako edo posizionamendua landuko den webgunetarako aukera ona izango litzateke.

Zer eduki-kudeaketa maila ahalbidetzen du Strapik? Erraza al da administratzen?

Igor: Edukien kudeaketari dagokionez, ez dugu mugarik jartzen. Strapi-k datuen arkitektura oso osoa sortzeko gaitasuna ematen digu, interfazearen bidez, “plug & play”, baina interesgarriena da askoz aurreratuagoa eta kustomizatuagoa egin dezakegula, OMZ zabalduz eta kasuistika bakoitzerako endpoint espezifikoak gaituz. Gainera, Strapik rol-sistema bat du, erabiltzaile bakoitzak ikus eta edita ditzakeen eremuak edo erakundeak pertsonalizatzeko aukera ematen diguna.

Nerea: Uste dut kudeaketa mailan, eta Strapi integratu dugun proiektuetan aurkitu dugunean oinarrituta, ez dugula inolako mugarik aurkitu. Izan ere, Strapik malgutasun eta pertsonalizazio handia ahalbidetzen du garapenean.

Zer iritzi du Googlek honetaz guztiaz? Zer moduz SEOarekin?

Igor: Hasiera batean, tresna hauek ez lukete inolako murrizketarik izango SEOri dagokionez; izan ere, zenbait alderditan lagun diezaguketen Astro-pluginak daude, hala nola sitemap bat sortzeko, goiburuak kudeatzeko eta abar. Konpiladorea bera ere gai da guri ohartarazteko kasuren batean irudi baten alt gisa osatu beharreko atributurik badagoen. Bestalde, Strapik ere ez luke horri buruzko mugarik izango; izan ere, WordPressekoak bezain ezagunak ez izan arren, pluginen bat du posizionamendu organikoarekin lotutako edukiak kudeatzeko. Hala ere, alderdi horretan garrantzitsuena da kontuan hartzea SEO tekniko bat aplikatu behar dugula eta entitateetan zenbait eremu gaitu behar ditugula komunikazio-taldeak horiek kudeatu ahal izateko.

Astro + Strapi erabiliz garatzen duzuenean, zerbait faltan botatzen duzue?

Igor: Nire aldetik, Astro hobetu nahiko nuke SSG (Server Side Render) moduan exekutatzen denean. Irudiak kudeatzeko pluginak, Sharpen oinarritutakoak, irudiak optimizatzeko aukera ematen digu, hainbat bereizmen eta formatutarako. Funtzionalitate erabilgarria da benetan, baina gabezia bat du: ez da gai irudi optimizatuak sortzeko bezeroaren aldeko edukiak hidratatzen direnean. Horren arrazoia da konpiladorea ez dela gai eduki estatikoa sortu ondoren errenderizatuko diren irudi posible guztiak asmatzeko. Benetako proiektu batean arazo hori konpontzeko, Sharp zuzenean erabili dugu proiektuko irudi guztiak deskargatzeko eta optimizatzeko, bezeroaren aldean modu estatikoan zein dinamikoan errenderizatu ahal izateko.

Nerea: Oraingoz ez, baina badakit asko geratzen zaidala ezagutzeko eta ikasteko, bai Strapirengandik, bai Astrorengandik.

Glosategia

  • Framework: Framework bat, dela JS, dela beste edozein programazio-lengoaiakoa, garapenerako tresna bat da, lana arintzeko aukera ematen diguna, bestela adhoc edo 0-tik sortu beharko genituzkeen inplementazio eta zeregin asko ebatziz.
  • JavaScript: JavaScript programazio-lengoaia edo scripting multiplataforma da. Oro har, nabigatzaileak interpreta ditzakeen programak idazteko gaitasunagatik da ezaguna. Gaur egun, ekosistema digitalaren aplikazio ugaritan erabiltzen da.
  • Hidratazioa: Osagai batek, bere definizioaz gain, haren edukia kargatzeko aukera ematen duten parametroak izan ditzake. Osagai baten edukia kargatzeko ekintzari hidratazioa esaten diogu.
  • Gune estatikoa: HTML, CSS eta JavaScript bidez modu estatikoan zerbitzatzen den gunea da. Gune horren edukiaren hidratazioa konpilazio garaian egiten da, eta, beraz, zerbitzaria aurrez sortutako fitxategiak zerbitzatzeaz baino ez da arduratuko.
  • Backend: Backend garapenak zerbitzariaren aldeko softwarean lan egitea esan nahi du, normalean erabiltzaileak ikusten ez dituen alderdietan zentratzen dena. Backend garatzaileek webguneak behar bezala funtzionatzen duela ziurtatzen dute, datu-baseetan, logikan, APIn eta abarretan zentratuz.
  • Frontend: Frontend web-garapena webgune baten erabiltzaile-interfaze grafikoaren garapena da. HTML, CSS eta Javascript bidez, edo framework desberdinak erabiliz, frontend garatzailea arduratzen da proiektu bati interaktibitatea emateaz.