(articolo redatto da Gaetano De Pascale)
Tra tutte le tecnologie che fanno parte delle galassie front end in questo articolo vogliamo parlarvi di Astro, un framework che sta piano piano catturando l’attenzione di tanti sviluppatori, soprattutto con alcune delle novità introdotte nella versione 3.0.
Un po’ di storia
Lo sviluppo web è una storia avvincente, un racconto di innovazione, evoluzione e sfide affrontate da milioni di sviluppatori in tutto il mondo. Parte con le prime pagine statiche ed arriva ai complessi mondi di applicazioni web interattive e reattive che oggi popolano la nostra realtà digitale.
Tutto inizia con HTML degli anni ’90, quando Internet stava muovendo i primi passi e le pagine web erano poco più che documenti statici. Questo linguaggio di markup è stato il fondamento su cui è stato costruito internet, una sorta di carta digitale in cui inserire testo e immagini. Ma ben presto, gli sviluppatori hanno capito che il web potrebbe essere molto più di una semplice raccolta di documenti.
Con l’arrivo di CSS (Cascading Style Sheets), il design delle pagine web è diventato più flessibile e dinamico. Questo ha permesso agli sviluppatori di separare la struttura (HTML) dalla presentazione (CSS), aprendo la strada a layout sofisticati e visivamente accattivanti.
Poi è arrivato JavaScript, un linguaggio di programmazione che ha trasformato le statiche pagine web in applicazioni interattive. JavaScript ha aperto la porta all’elaborazione lato client, consentendo alle pagine web di rispondere alle azioni degli utenti in tempo reale senza la necessità di ricaricare l’intera pagina.
Ma la storia non finisce qui, anzi questo è solo l’inizio. L’avvento dei framework JavaScript come Angular, React e Vue ha rivoluzionato il modo in cui vengono costruite le applicazioni web. Questi consentono agli sviluppatori di creare interfacce utente complesse e reattive in modo efficiente, ridefinendo il concetto di sviluppo front end.
Cos’è Astro?
Creato da Fred K. Schott, Astro è un framework front end open source progettato per creare applicazioni web incentrate sui contenuti ed altamente performanti. Invece di generare il markup HTML lato client, come fanno molte altre applicazioni front end, Astro genera il markup HTML lato server, offrendo prestazioni e velocità superiori.
Cominciamo ad esaminarne le caratteristiche principali:
- Orientato al contenuto
A differenza dei moderni web framework che sono progettati per la creazione di web app, Astro è stato pensato per la creazione di siti web ricchi di contenuti, questo lo rende spesso la scelta ideale per siti di marketing, blog, portfolio, documentazione e simili. - Server-First
Astro sfrutta il rendering lato server, rendendo più snello il caricamento dei contenuti sul client. - Veloce per default
Le prestazioni sono sempre importanti, ma particolarmente per siti web orientati ai contenuti. Un sito web realizzato con Astro può caricarsi più velocemente del 40% usando il 90% in meno di JavaScript rispetto allo stesso sito costruito con il più noto React. - Facile da usare
Astro si pone come obiettivo per essere accessibile a tutti indipendentemente dal livello di competenza o esperienza. - Completo ma flessibile
È un framework completo ma estendibile: è possibile, infatti, integrare all’interno di un sito realizzato con Astro componenti realizzati ad esempio con React, Svelte, Vue.
Astro Islands
Al cuore dell’innovazione di Astro si trova un concetto rivoluzionario noto come ‘Island’. Queste sono unità di rendering autonome, ognuna delle quali corrisponde a un componente o una pagina all’interno del tuo progetto. Possono essere pre-renderizzate in modo statico o generate dinamicamente, a seconda delle esigenze. Questo approccio permette, inoltre, una granularità straordinaria nella gestione delle risorse e della generazione del markup. In pratica, significa che puoi creare un sito web composto da diverse ‘Islands’, ognuna delle quali è ottimizzata per prestazioni e velocità. È come avere un arcipelago di pagine web altamente efficienti, ciascuna con la sua indipendenza e flessibilità.
Proviamo a semplificare con un esempio:
- Header:
è una componente che rappresenta la parte superiore della pagina web. Questa Island potrebbe contenere il logo del sito, il menu di navigazione principale, il campo di ricerca e altre informazioni globali. Poiché l’header è spesso costante su tutte le pagine di un sito, può essere pre-renderizzato in modo statico per garantire una risposta immediata agli utenti. - Menu:
è un altro componente autonomo che gestisce il menu di navigazione laterale o il pannello di controllo, se presente nel sito. Contiene collegamenti a diverse sezioni del sito o funzionalità specifiche, offrendo agli utenti un modo intuitivo per esplorare il contenuto. A seconda del contesto, il Menu Laterale potrebbe essere pre-renderizzato staticamente o generato dinamicamente. - Content:
L’Island del Contenuto Centrale rappresenta il nucleo delle pagine del sito. Qui si trova il contenuto principale, come testi, immagini, video e altri elementi. Questa Island è spesso la parte più dinamica del sito e può essere generata dinamicamente per consentire agli utenti di interagire con il contenuto. - Footer:
rappresenta la parte inferiore di ogni pagina web. Contiene informazioni come le coordinate dell’azienda, i link alle politiche sulla privacy o ai termini di servizio e altre informazioni di contatto. Poiché il footer è solitamente presente su tutte le pagine, può essere pre-renderizzato in modo statico per una distribuzione più rapida.
Sì, ma vi starete chiedendo e quindi, quali sono i vantaggi delle Island?
Il vantaggio più immediato è la performance: il tutto viene inviato al client solo come HTML statico mentre il Javascript viene caricato solo per i componenti che ne hanno bisogno. Inoltre il caricamento viene effettuato secondo priorità che possono essere definite in fase di programmazione tramite le Client Directives, ad esempio possiamo definire
<MyComponent client:… /> con :
- client:load (Priority: High) : da caricare il più presto possibile
- client:idle (Priority: Medium) : durante la fase di idle
- client:visible (Priority: Low) : solo quando il componente entra nel viewport
Struttura di un progetto Astro
Per cominciare a lavorare ad un progetto in Astro dobbiamo assicurarci di avere installa Node.js almeno alla versione v18.14.1. E lanciare il comando:
npm create astro@latest
La procedura ci guiderà alla generazione del nostro nuovo progetto.
Una volta terminata avremo questa struttura
- Public/ à file ed asset che non devono processati durante la fase di build
- Src/ à Qui andremo ad inserire la maggior parte dei sorgenti del progetto e può essere composto da queste sottodirectory:
- Pages/ à speciali componenti che costituiscono le pagine del sito: da questi viene anche costruito il routing
- Layouts/ à Astro components che definiscono la struttura base del sito
- Components/ à componenti utilizzabili in più pagine
- Styles/ à css che difiniscono lo stile del vostro sito
- Content/ à collezioni di file Markdown (.md) che costituiranno i contenuti delle pagine (questa directory può anche non essere utilizzata laddove si preferisca di inserire i contenuti in sottodirectory di pages)
- json à file di gestione delle dipendenze
- config.mjs à file di configurazione del progetto astro
Per conoscere meglio il framework e cominciare a muovere i primi passi nel mondo di Astro consigliamo di partire dal Getting started sul sito ufficiale, e poi magari cominciare a complicare il tutorial, integrandolo con le proprie esperienze (Es. integrare nel site così realizzato piccoli componenti in React / Svelte / Vue etc.. per comprenderne meglio le potenzialità).
Astro 3.0
Tra tutte le novità introdotte con Astro 3.0 (vi rimandiamo al link ufficiale per i dettagli) vogliamo segnalare il supporto alle View Transitions API. Queste sono delle api offerte dai browser per semplificare la creazione di transizioni fluide durante la navigazione dei siti web.
In questo modo tutto viene automatizzato importando ed integrando le funzionalità di Astro:
Conclusioni: vantaggi e svantaggi
Dopo averlo studiato, provato ed utilizzato ci siamo, però, fatti una domanda: consiglieremmo Astro per tutti i progetti front end?
Partendo dall’ovvio presupposto che la scelta di utilizzare un framework piuttosto che un altro dovrebbe essere basata sulle specifiche esigenze del progetto, cerchiamo di evidenziare i vantaggi e gli svantaggi che abbiamo riscontrato lasciando trarre a voi le conseguenze.
Pro
- Astro nasce per lo sviluppo di siti web incentrati sui contenuti; quindi, se è questo il tuo obiettivo Astro potrebbe essere una buona scelta.
- “L’obiettivo di Astro è di essere accessibile a tutti gli sviluppatori web“. È un framework di facile setup ed utilizzo, ed è adatto a tutti: se sei un principiante nello sviluppo front end o desideri un framework che consenta di iniziare rapidamente senza una curva di apprendimento ripida, Astro potrebbe essere una buona scelta.
- Uno dei principali vantaggi di Astro è la sua eccezionale velocità. Grazie alla generazione del markup lato server e al caricamento selettivo delle risorse, le pagine web create con Astro hanno tempi di caricamento estremamente brevi. Ciò migliora notevolmente l’esperienza dell’utente e può influenzare positivamente il posizionamento sui motori di ricerca.
- Astro è framework-agnostico, il che significa che puoi utilizzarlo con diverse librerie front end come React, Svelte o Vue. Questa flessibilità consente agli sviluppatori di utilizzare le proprie competenze esistenti senza dover imparare un nuovo framework.
- Grazie alla generazione del markup lato server, Astro è altamente indicizzabile dai motori di ricerca. Le pagine generate sono facilmente identificabili e migliorano la visibilità online.
Contro
- Astro nasce per lo sviluppo di siti web incentrati sui contenuti; quindi, se l’obiettivo del tuo progetto fosse un altro forse dovresti pensare ad altri framework.
- I framework più consolidati hanno una vasta gamma di librerie e plugin di terze parti. Se hai bisogno di accesso a una ricca ecologia di strumenti e risorse, potresti preferire uno di questi framework.
- Se il tuo progetto richiede una gestione complessa dello stato, ad esempio, un’applicazione web con numerosi componenti interconnessi che devono condividere dati in tempo reale, potresti trovare Astro meno adatto.
Se anche tu vuoi occuparti di importanti progetti di sviluppo software
dai un’occhiata alle nostre opportunità di lavoro e conosciamoci subito!
