Astro: tutto quello che ti serve sapere su questo framework

Indice

Che cos'è Astro
Le caratteristiche uniche di Astro
Pro e contro
Quando utilizzare Astro e come lo utilizziamo noi

Astro js framework copertina

Nell'articolo “Svelte, Solid e Qwik: l'ascesa dei nuovi framework front-end” abbiamo parlato dei nuovi framework in ascesa per lo sviluppo frontend seguendo l’andamento di interesse presente sul sito The state of JS. Un altro strumento che sta diventando sempre più popolare è Astro, un generatore di siti web statici che consente di utilizzare JavaScript per la creazione di componenti web e la gestione della logica lato client che anche noi di DevInterface stiamo già usando.

Vediamo dunque in dettaglio di cosa si tratta e di come questo tool può aiutarvi.

Che cos'è Astro

Astro è un framework JavaScript per la generazione di siti web statici ed è stato creato da un programmatore di nome Fred K. Schott nel 2021. Schott ha sviluppato Astro.js come un framework per la costruzione di siti web veloci e sicuri utilizzando tecnologie come React e Vue.js. Il framework è stato sviluppato con l'obiettivo di semplificare la creazione di siti web statici, migliorare la velocità di caricamento delle pagine e fornire un'esperienza utente migliorata. Astro.js è un software open source ed è disponibile su GitHub.

Nonostante sia nato come framework JavaScript per siti web statici, Astro non nasce per essere in competizione con altri framework, ma è stato creato per lavorare con altri framework. Gli stessi creatori di Astro hanno chiarito che il framework non risponde a tutte le necessità di sviluppo frontend e che ci sono casi d’uso per i quali il tool non è adatto. Infatti si tratta di uno strumento che ha un target ben specifico: lo sviluppo di siti web incentrati sui contenuti.

Le caratteristiche uniche di Astro

1) Template language

Il template language Astro è un linguaggio di markup utilizzato per la creazione di pagine web statiche. L'obiettivo di questo progetto consiste nel rendere più immediato il processo di creazione di pagine web. Il sistema di markup utilizzato è molto semplice e basato su tag HTML anche se supporta l'utilizzo di variabili, cosi come loop e condizioni per creare pagine web dinamiche.

Una delle peculiarità del template language Astro è la capacità di generare miniature di immagini automaticamente e di creare gallerie fotografiche in modo rapido ed intuitivo. Inoltre, il template language di Astro è altamente customizzabile e supporta l'uso di CSS e JavaScript per creare pagine web esteticamente gradevoli e interattive.

2) Framework-agnostic

Una delle caratteristiche principali e punti di forza di Astro è la sua natura "framework agnostic", cioè la sua capacità di integrarsi e funzionare con altre librierie e framework JavaScript comunemente utilizzati nello sviluppo front-end.

Questo significa che gli sviluppatori possono comunque integrare Astro in una applicazione esistente basata su di un framework diverso (come ad esempio React) senza la necessità di dover modificare l'architettura del sito o di incorrere in problemi di compatibilità con librerie e framework pre esistenti ne di essere vincolati dalle scelte tecniche effettuate in precedenza.

In sintesi, la caratteristica "framework agnostic" di Astro offre maggiore flessibilità agli sviluppatori web e permette loro di sviluppare pagine web statiche ad alte prestazioni utilizzando gli strumenti di sviluppo che preferiscono, senza dover compromettere la qualità del proprio lavoro o aggiungere un'eccessiva complessità.

3) Prestazioni lato client

Astro è stato progettato con l'obiettivo di offrire prestazioni elevate, sia lato client che lato server. Per quanto riguarda le prestazioni lato client, Astro utilizza tecniche di rendering avanzate quali l'estrazione statica dei componenti e il pre-fetching delle risorse come le immagini i file JavaScript, sempre al fine di migliorare l'esperienza utente.

Ad esempio, quando si utilizza Astro, i componenti vengono estratti staticamente, il che significa che vengono generati in modo asincrono prima dell'esecuzione del codice JavaScript. Questo approcio migliora considerevolmente il tempo di caricamento delle pagine poichè i componenti vengono caricati in modo indipendente dal codice JavaScript e possono essere memorizzati nella cache del browser per un recupero più rapido.

Astro supporta inoltre la generazione di pagine statiche: queste possono essere pre-generate durante il processo di compilazione e servite come file HTML statici, senza la necessità di eseguire codice JavaScript lato client. Questo aumenta considerevolmente le prestazioni lato client, in quanto i file HTML statici possono essere serviti più rapidamente a beneficio dell'utente.

Pro e contro

Ci sono diversi pro nell'utilizzo di Astro come piattaforma di sviluppo web:

Utilizzando le parole degli autori: "L'obiettivo di Astro è di essere accessibile a tutti gli sviluppatori web". Il framework è infatti di facile setup e utilizzo, è orientato verso un design API server-first e non include alcun runtime JS.
Fornisce un insieme di tool completo che permette di coprire tutte le necesità degli sviluppatori.
Include il routing basato su file, il recupero dei dati, la gestione delle risorse e molto altro.
È possibile utilizzare Astro congiuntamente ad altri framework popolari (React, Preact, Svelte, Vue e molti altri) senza impattarne il funzionamento ne rendere lo sviluppo più complesso.
Inoltre Astro offre anche il supporto per Markdown.

Come con qualsiasi tecnologia, ci sono anche alcuni contro nell'utilizzo di Astro come piattaforma di sviluppo web:

Per creare progetti particolarmente complessi o interattivi come dashboard di amministrazione o social network, probabilmente Astro non è il framework ideale. Astro nasce e si concentra per lo sviluppo di siti web ricchi di immagini e contenuti statici.
Il numero di risorse, strumenti e funzionalità disponibili sicuramente non può ancora competere con framework più famosi e assodati come React, almeno per il momento, tuttavia la comunità che ruota attorno ad Astro è molto attiva ed in costante crescita ed in particolare
il canale Discord è ricco di informazioni e di sviluppatori disponibili ad aiutare e fornire suggerimenti e consigli.
Il futuro di Astro sembra solido e roseo ma solo il tempo potrà dirlo.

Quando utilizzare Astro e come lo utilizziamo noi

Astro può essere la scelta corretta per tutti gli sviluppatori web che cercano di creare pagine web statiche ad alte prestazioni. Tuttavia, ci sono alcuni casi in cui potrebbe essere meglio considerare alternative a Astro:

Progetti complessi: se il progetto che stai sviluppando è molto complesso e richiede molte funzionalità avanzate, Astro potrebbe non essere la scelta migliore. In questi casi, potrebbe essere meglio considerare piattaforme di sviluppo web più avanzate e con più funzionalità.
Progetti dinamici: se il progetto richiede una forte interazione dinamica tra l'utente e il server, ad esempio con un'applicazione web ad alta interattività, potrebbe essere meglio considerare alternative a Astro, in quanto Astro è orientato verso pagine web statiche.
Conoscenza pregressa: se sei già esperto in una specifica tecnologia o libreria, potrebbe essere più efficiente e conveniente continuare a utilizzare quella tecnologia o libreria, piuttosto che apprendere una nuova tecnologia come Astro.

In generale, Astro è una scelta ideale per la creazione di pagine web statiche ad alte prestazioni, ma potrebbe non essere la scelta migliore per progetti più complessi o dinamici, o se gli sviluppatori hanno già una conoscenza pregressa di una specifica tecnologia o libreria. Inoltre, è importante considerare la propria esperienza e le proprie esigenze specifiche prima di decidere se utilizzare Astro o alternative. Anche a DevInterface utilizziamo Astro, principalmente per lo sviluppo di landing page interne ricche di contenuti.