Perché Astro?

Astro è un web framework completo per la creazione di siti web veloci e incentrati sul contenuto.

Perché scegliere Astro rispetto ad un altro web framework? Ecco cinque principi di progettazioni fondamentali per spiegare perché abbiamo creato Astro, i problemi che si propone di risolvere e perché Astro potrebbe essere la scelta migliore per il tuo progetto o il tuo team.

Astro è…

1. Orientato al contenuto: Astro è stato progettato per siti web ricchi di contenuti.
2. Server-first: I siti web sono più veloci quando renderizzano l’HTML sul server.
3. Veloce per default: Dovrebbe essere impossibile creare un sito web lento con Astro.
4. Facile da usare: Non devi essere un esperto per creare qualcosa con Astro.
5. Completo, ma flessibile: Oltre 100+ integrazioni Astro tra cui scegliere.

Orientato al contenuto

Astro è stato progettato per la creazione di siti web ricchi di contenuti. Ciò include la maggior parte dei siti di marketing, siti di pubblicazione, siti di documentazione, blog, portfolio e alcuni siti di e-commerce.

Al contrario, la maggior parte dei moderni web framework sono progettati per la creazione di applicazioni web. Questi framework funzionano meglio per la creazione di esperienze più complesse simili a quelle delle applicazioni nel browser: dashboard di amministrazione con accesso, caselle di posta, social networks, liste di attività e persino applicazioni simili a quelle native come Figma e Ping.

Questa è una delle differenze più importanti da comprendere su Astro. L’attenzione unica di Astro al contenuto consente ad Astro di effettuare compromessi e offrire caratteristiche di prestazioni imbattibili che non avrebbero senso da implementare per web framework orientati alle applicazioni.

Consiglio

Se il tuo progetto rientra nella seconda categoria “applicazione”, Astro potrebbe non essere la scelta giusta per il tuo progetto… e va bene così! Dai un’occhiata a Next.js per un’alternativa più orientata alle applicazioni rispetto ad Astro.

Server-first

Astro sfrutta il rendering lato server il più possibile rispetto al rendering lato client. Questo è lo stesso approccio che i tradizionali framework lato server come PHP, WordPress, Laravel, Ruby on Rails, ecc. hanno utilizzato per decenni. Ma non è necessario imparare un secondo linguaggio lato server per sfruttarlo. Con Astro, tutto è ancora solo HTML, CSS e JavaScript (o TypeScript, se preferisci).

Questo approccio si contrappone ad altri web framework JavaScript moderni come Next.js, SvelteKit, Nuxt, Remix e altri. Questi framework richiedono il rendering lato client di tutto il tuo sito web e includono il rendering lato server principalmente per affrontare problemi di prestazioni. Questo approccio è stato definito Single Page App (SPA), in contrasto con l’approccio Multi Page App (MPA) di Astro.

Il modello SPA ha i suoi vantaggi. Tuttavia, ciò comporta un maggiore livello di complessità e compromessi sulle prestazioni. Questi compromessi danneggiano le prestazioni delle pagine, comprese le metriche critiche come il Time to Interactive (TTI), il che non ha molto senso per siti web orientati al contenuto in cui le prestazioni del primo caricamento sono essenziali.

Veloce per default

Buone prestazioni sono sempre importanti, ma sono particolarmente critiche per i siti web orientati al contenuto. È stato ampiamente dimostrato che le prestazioni scadenti comportano una perdita di coinvolgimento, conversioni e denaro. Ad esempio:

• Ogni 100 ms più veloce → 1% in più di conversioni (Mobify, guadagni +380.000 dollari/anno)
• 50% più veloce → 12% in più di vendite (AutoAnything)
• 20% più veloce → 10% in più di conversioni (Furniture Village)
• 40% più veloce → 15% in più di iscrizioni (Pinterest)
• 850 ms più veloce → 7% in più di conversioni (COOK)
• Ogni 1 secondo più lento → 10% in meno di utenti (BBC)

In molti web framework è facile creare un sito web che sembra ottimo durante lo sviluppo, ma che si carica lentamente una volta distribuito. Spesso il colpevole è JavaScript, poiché i telefoni degli utenti e i dispositivi meno potenti raramente corrispondono alla velocità di un computer portatile dello sviluppatore.

La magia di Astro sta nel modo in cui combina i due valori spiegati sopra: un’attenzione al contenuto con un’architettura MPA orientata al server, unendo questi due approcci in manieria ottimale e offrire funzionalità che altri framework non possono offrire. Il risultato sono prestazioni web straordinarie per ogni sito web, direttamente dalla confezione. Il nostro obiettivo: Dovrebbe essere quasi impossibile creare un sito web lento con Astro.

Un sito web Astro può caricarsi più velocemente del 40% con il 90% in meno di JavaScript rispetto allo stesso sito costruito con il web framework React più utilizzato. Ma non fidarti delle nostre parole: guarda questo video in cui Ryan Carniato (creatore di Solid.js e Marko) rimane senza parole di fronte alle prestazioni di Astro.

Facile da usare

L’obiettivo di Astro è essere accessibile a ogni sviluppatore web. Astro è stato progettato per sembrare familiare e accessibile indipendentemente dal livello di competenza o dall’esperienza passata nello sviluppo web.

Abbiamo iniziato assicurandoci che tu possa utilizzare qualsiasi linguaggio di componenti UI che già conosci. React, Preact, Svelte, Vue, Solid, Lit e diversi altri sono tutti supportati per la creazione di nuovi componenti UI in un progetto Astro.

Volevamo anche assicurarci che Astro avesse un ottimo linguaggio di componenti incorporato. Per farlo, abbiamo creato il nostro linguaggio di interfaccia utente .astro. È fortemente influenzato da HTML: qualsiasi frammento valido di HTML è già un componente Astro valido! Ma combina anche alcune delle nostre funzionalità preferite prese in prestito da altri linguaggi di componenti, come le espressioni JSX (React) e l’ambito CSS per impostazione predefinita (Svelte e Vue). Questa somiglianza con HTML semplifica anche l’utilizzo di miglioramenti progressivi e modelli di accessibilità comuni senza alcun sovraccarico.

Astro è stato progettato per essere meno complesso rispetto ad altri framework e linguaggi di interfaccia utente. Uno dei motivi principali è che Astro è stato progettato per il rendering sul server, non nel browser. Ciò significa che non devi preoccuparti di: hooks (React), stale closures (di nuovo, React), refs (Vue), observables (Svelte), atoms, selectors, reactions, o derivations. Non c’è reattività sul server, quindi tutta quella complessità svanisce.

Uno dei nostri detti preferiti è: aggiungi complessità solo se ne hai bisogno Abbiamo progettato Astro per ridurre al minimo la “complessità richiesta” dall’esperienza dello sviluppatore, specialmente quando ti avvicini per la prima volta. Puoi creare un esempio di “Ciao, mondo” in Astro con solo HTML e CSS. Poi, quando hai bisogno di creare qualcosa di più potente, puoi raggiungere incrementalmente nuove funzionalità e API man mano che procedi.

Completo, ma flessibile

Astro è un framework web completo che include tutto il necessario per creare un sito web. Astro include una sintassi di componenti, routing basato su file, gestione delle risorse, processo di compilazione, bundle, ottimizzazioni, recupero dei dati e altro ancora. Puoi creare ottimi siti web senza mai uscire dall’insieme di funzionalità di base di Astro.

Se hai bisogno di maggiore controllo, puoi estendere Astro con oltre 100+ integrazioni come React, Svelte, Vue, Tailwind CSS, MDX, e altro ancora. Connetti il tuo CMS preferito (EN) o effettua il deploy sul tuo host preferito (EN) con un singolo comando.

Astro è agnostico rispetto all’UI, il che significa che puoi Portare il Tuo Framework UI. React, Preact, Solid, Svelte, Vue e Lit sono tutti ufficialmente supportati in Astro. Puoi persino combinare diversi framework sulla stessa pagina, rendendo le future migrazioni più facili e evitando il blocco su un singolo framework.