Per què Astro?
Pel desenvolupament d'aquest portfoli he utilitzat el Framework Astro en la seva versió 4.1.2, on gràcies a la seva simplicitat amb l'ús dels llenguatges més comuns (HTML, CSS i JS) i amb el suport d'eines complementaries més enfocades en la reactivitat com React en determinades situacions, m'ha ajudat a un desenvolupament ràpid i efectiu.
L'elecció d'escollir Astro no ha sigut per un tema de coneixement sinó per un tema de raó d'ús en un SPA (Single Page Application) sense un ús d'un BackEnd. Això m'ha suposat un repte d'aprenentatge d'una eina nova que ha sigut emocionant i desafiant.
També he escollit Astro pels següents beneficis que aporta:
Rendiment
La velocitat de càrrega d'inici ràpida de Astro és un factor clau en una SPA, i això ho aconsegueix gràcies a una renderització en el servidor en comptes d'una renderització en el navegador del client.
De fet, Astro es capaç de generar pàgines estàtiques amb un ús zero de JavaScript i, per tant, una carga rapidíssima on és l'usuari el responsable d'afegir-hi interactivitat a la web mitjançant components de Frameworks complementaris que es carreguin en el costat del client.
En resum, Astro es basa en una pàgina estàtica mitjançant 'components reactius' (anomenats per la gent de Astro com 'Astro Islands') i això li permet una experiència al usuari de manera fluida i agradable.
SEO
Un altre aspecte important és la capacitat de posicionament SEO que tenen les webs dissenyades amb Astro. Per què? Doncs perquè Astro al generar pàgines estàtiques (HTML) durant la compilació, permet als motors de cerca indexar i rastrejar el contingut de manera eficient evitant en gran mesura l'execució d'arxius JavaScript que demorin la carga.
I això es resumeix amb un enfoc que li dona Astro basat en l'optimització d'eficiència del pes total de la pàgina per tal d'una millor experiència d'usuari i, alhora, influir positivament en la classificació del SEO.
A més a més, hi ha 2 factors que durant el desenvolupament ajuden a un millor posicionament SEO:
La facilitat de crear pàgines mitjançant URLs amigables
La compatibilitat d'inserció de Metadades en cada una de les pàgines de forma independent.
UI-agnòstic
Astro és agnòstic a altres eines de desenvolupament web, però, què vol dir ser agnòstic?
Ser agnòstic en el món de la programació significa que no es limita a un ús concret d'eines o tecnologies especifiques, sinó que està obert en el seu ús per proporcionar al usuari una manera flexible de treballar segons les seves necessitats i preferències que millor s'adaptin.
I això és el que Astro ofereix mitjançant, a més a més, una integració realment senzilla i sorprenent d'eines que tot desenvolupador ha manejat almenys alguna vegada, com per exemple:
Escalabilitat
El fet que Astro sigui un Framework ben senzill d'utilitzar, permet una escalabilitat fàcil que ajuda a una millor experiència en el desenvolupament en equips de treball.
L'ús de components reutilitzables com arquitectura facilita la gestió de projectes grans on els components son desenvolupats de manera independent. A més, amb l'optimització dels propis components separant els estàtics dels dinàmics (Astro Islands), permet una eficiència de recursos en aquelles webs amb una gran quantitat de contingut sense haver de perdre rendiment.
També, des de Astro 4.0, s'afegeix una eina de desenvolupament com es 'Astro Dev Toolbar' que permet inspeccionar de manera visual la pàgina que estàs desenvolupament (Astro Islands, Testing, Accessibilty problems...)
Internacionalització
També amb Astro 4.0 i endavant, s'ha incorporat de manera nativa la llibreria de i18n que permet fer les traduccions de forma fàcil i intuïtiva en la configuració del projecte. Permeten un enrutament dinàmic segons l'idioma i una gestió de les traduccions mitjançant un arxius JSON.
Transicions
Les transicions és una de les característiques més sorprenents que es va introduir a partir d'Astro 3, i no només pel seu fàcil ús sinó també pel seu impacte en la web permeten:
- Animar la navegació entre diferents pàgines
- Compatibilitat entre dispositius i tamanys de pantalla
- Personalització de diversos tipos de transicions adaptan-se a l'estil de la pàgina web
La seva implementació es realitza mitjançant afegint en cada component (o en el seu Layout), un component anomenat <View Transitions /> i d'aquesta manera, si 2 components estàn situats en pàgines diferents, s'hi realitzarà una transició.
Resultat
I aquest és el resultat final d'utilitzar Astro: 😁
