Webframework: Astro 3.0 unterstützt View Transition API
Die unter anderem bei Mozilla noch als experimentell bezeichnete View Transition API hat ihren Weg in die neue Hauptversion des Frameworks Astro gefunden.
(Bild: Pete Birkinshaw / Flickr / cc-by-2.0)
- Frank-Michael Schlede
Das Erstellen animierter Übergänge zwischen verschiedenen DOM-Zuständen mit gleichzeitiger Aktualisierung des DOM-Inhalts in einem einzigen Schritt war bisher nur innerhalb von JavaScript-Single-Page-Anwendungen möglich. Mit der aktuell vorgestellten Version 3.0 des Webframeworks Astro erhalten Entwickler und Entwicklerinnen nun Möglichkeiten, mit Hilfe der neuen View Transitions API die Elemente einer Webseite nicht nur einzublenden und zu morphen, sondern auch zustandsabhängige Elemente über die Seitennavigation hinweg aufrechtzuerhalten.
Dritte Hauptversion mit einer Reihe von Verbesserungen
Erst im Januar hatte das Entwicklerteam hinter dem Webframework die zweite Hauptversion ihrer Software veröffentlicht. Jetzt stellen sie in einem sehr ausführlichen Blogeintrag bereits das Release 3.0 von Astro vor. Neben der Unterstützung der View Transition API bietet diese Version aber noch weitere Verbesserungen. Dazu gehören:
- eine stabile Bildoptimierung,
- schnelleres Rendering, wodurch Astro-Komponenten zwischen 30 und 75 Prozent schneller gerendert werden sollen,
- Verbesserungen beim Server-Side Rendering für Serverless bietet neue Möglichkeiten zur Verbindung mit einer Hosting-Plattform,
- Fast Refresh-Unterstützung für React und Preact sowie
- eine optimierte Build-Ausgabe, die saubereres und leistungsfähigeres HTML bieten soll.
Die Veranstalter iX und dpunkt.verlag richten am 30. November 2023 den Advanced Angular Day aus: ein Deep-Dive für Angular-Entwickler und -Entwicklerinnen. Angular-Expertinnen und -Experten zeigen in sieben Online-Vorträgen, wie Entwickler das Optimum aus Angular herausholen können und wie moderne Webentwicklung mit dem Framework Anwendung besser macht. Am 04. Dezember zeigt zudem ein Workshop, der ebenfalls online stattfindet, wie Angulars neuesten Features bei der Entwicklung moderner Architekturen helfen.
Bessere Browser-Übergangseffekte zwischen Seiten
Bei View Transitions handelt es sich um eine Reihe neuer Plattform-APIs, die native Browser-Übergangseffekte zwischen Seiten ermöglichen. Das war bisher aber den Single Page Applications (SPAs) vorbehalten. Laut den Aussagen des Entwicklerteams auf der Webseite ist Astro 3.0 das erste Webframework, das diese Technik in den Mainstream bringt. Weiterhin betonen sie, dass der Einsatz der Transitions einfach sei. Mit nur zwei Zeilen Code können demnach Entwickler und Entwicklerinnen zu ihrer Website eine Überblendanimation hinzufügen. Wer es selbst ausprobieren möchte, muss nur die Komponente ViewTransitions importieren und das <head>-Element einer beliebigen Seite einfügen.
Astro 3.0 ist jetzt auf npm verfügbar. Wer Astro 3.0 im Browser ausführen möchte, kann dies direkt auf der Webseite tun. Mittels des folgenden Befehls in einem Terminal können Entwickler und Entwicklerinnen auch direkt ein neues Projekt mit Astro 3.0 starten:
npm create astro@latest
Wer hingegen ein bestehendes Projekt auf Astro 3.0 upgraden möchte, findet alle Details für jede Änderung in der Upgrade-Anleitung. Der Blogeintrag listet alle Neuerungen und Veränderungen detailliert auf.
(fms)
