Webframework Astro 1.0 verspricht schnellere Websites

Astro ist in Version 1.0 erschienen. Das laut eigener Bezeichnung "all-in-one"-Webframework steht unter MIT-Lizenz, lässt sich mit Frontend-Tools wie React, Vue, Svelte und Tailwind CSS nutzen, und legt den Fokus auf das Entwickeln schnellerer Websites. Der Schritt zur Version 1.0 soll die Bereitschaft des Astro-Teams zu künftiger API-Stabilität und produktivem Einsatz des Tools symbolisieren und geht mit dem Launch einer neuen Projekt-Website einher.

Komponenten als Inseln

Zwar erst vor 16 Monaten entstanden, hat Astro bereits von unterschiedlichen Seiten Aufmerksamkeit auf sich gezogen: Im Januar dieses Jahres hob die Studie JavaScript Rising Stars 2021 Astro als bemerkenswertes Projekt hervor, und im diesjährigen State of JavaScript erreichte Astro im Backend-Framework-Ranking den zweiten Platz. Auf GitHub weist das Projekt derzeit über 14.500 Sterne auf.

Das Webframework verfolgt den Ansatz sogenannter Astro Islands beziehungsweise Component Islands. Damit ist gemeint, dass Astro das User Interface (UI) auf der Webseite in kleinere, isolierte Komponenten extrahiert. Diese interaktiven UI-Komponenten existieren auf einer ansonsten statischen HTML-Seite. Auf einer Seite können sich mehrere Astro Islands befinden, die jeweils isoliert rendern.

Zum Rendern der Inseln lassen sich UI-Frameworks wie React, Svelte oder Vue nutzen, und auch eine Kombination der Frameworks ist möglich. Ungenutzten JavaScript-Code ersetzt Astro durch leichtgewichtigeres HTML, was zu kürzeren Ladezeiten und einer verkürzten Time to Interactive (TTI) führen soll. Die Dokumentation zu Astro Islands bietet weitergehende Informationen.

Neuerungen in Version 1.0 für Vite.js und Bildoptimierung

Unter der Haube setzt Astro auf das Entwicklungs- und Build-Werkzeug Vite.js als Build-Engine. Vite.js ist kürzlich in Version 3.0 erschienen und in Astro 1.0 in der neuesten Version enthalten. Zu den damit einhergehenden Neuerungen zählen der Wechsel des Standard-Server-Ports zu 5173 und das Lauschen des Preview-Servers an Port 4173, um Konflikte mit anderen Tools zu vermeiden. Für die Bildoptimierung stehen in Astro 1.0 neue <Image /> und <Picture />-Komponenten bereit. Dabei ist zu beachten, dass die Integration von @astrojs/image derzeit noch als experimentell gilt und sich nur in Node.js-Umgebungen nutzen lässt. Eine Erweiterung des Supports auf die Node.js-Alternative Deno ist bereits geplant.

Zudem lassen sich für weitere Funktionen entweder bestehende Community-Packages installieren oder eigene erstellen. Beispielsweise stehen Integrationen für Frameworks, Performance und SEO oder Accessibility bereit.

Alle Neuerungen in Astro 1.0 sind einem Blogeintrag auf der neu gestarteten Astro-Website zu entnehmen.

(mai)