Astro - das neue Javascript Framework

Build faster websites with less client-side Javascript

---

Haben Sie schon von Astro, dem neuen JS-Framework gehört? Noch ein Framework werden Sie sich vielleicht denken. Ja, ein weiteres Framework. Aber dieses lohnt sich wirklich. Es wird vieles in der Frontend-Entwicklung ändern. Im Kern ist Astro ein Static Site Generator und ein Meta-Framework. Man kann es mit React, Vue, Svelte und Solid nutzen. Da ich nur mit React arbeite bleiben wir hier mal dabei. Ein Problem von React-Websites ist die Größe des JS-Bundles. Dies wird immer benötigt, selbst wenn es auf der Site nur UI-Elemente ohne State und Interaktivität gibt. Solche Elemente benötigen eigentlich nur HTML und CSS. Als Beispiel eine React Button Komponente.

function Button (props) {
  return (
    <div className="btn">
      <a href={props.url}>{props.text}</a>
    </div>
  )
}

Verwendet man diese Komponente in Astro wird Astro kein JS generieren, sondern nur HTML und CSS. So können große UI Design Systeme entwickelt werden, die wesentlich kleiner sind, als reine React UI's.

Solche Komponenten können aber noch einfacher mit Astro entwickelt werden.

<div class="btn">
  <a href="https://atro.build">Astro</a>
</div>

Diese Komponente muss lediglich im "components" Verzeichnis z.B. als "AstroButton.astro" Datei gespeichert werden. Diese kann dann, wie eine React-Komponente überall verwendet werden. <AstroButton /> Properties, wie wir sie von React kennen, sind natürlich auch möglich.

Was aber, wenn wir eine dynamische React-Komponente mit States benötigen? Nun wir müssen Astro einfach mitteilen, dass für diese Komponente JS zwingend erforderlich ist. Dafür gibt es folgende Möglichkeiten.

• <MyComponent client:load /> Wird beim page load importiert.

• <MyComponent client:idle /> Wird importiert, wenn der main thread frei ist. Vorsicht: wird noch nicht von allen Browsern unterstützt.

• <MyComponent client:visible /> Wird importiert, wenn die Komponente im sichtbaren Bereich ist.

• <MyComponent client:media={min-width:812px} /> Wird nur importiert, wenn die Breite des Browser Window mindestens 812px beträgt. Damit wird ein altes Problem des Responsive Designs endlich gelöst. Häufig wird nämlich HTML generiert, welches auf einem bestimmten Gerät überhaupt nicht benötigt wird. Bisher hat man solche Elemente mit CSS versteckt. Aber das HTML wurde trotzdem übertragen.

Astro verfügt über viele einzigartige Features, die es uns ermöglichen schnelle, schlanke React-Websites zu programmieren. Astro kommt nicht mit einer veralteten Template-Engine daher. Man entwickelt Komponenten und baut seine Templates mit HTML. Layout Templates werden wie Komponenten eingesetzt.

---
// src/pages/index.astroimport HomeLayout from '../layouts/HomeLayout.astro'
---
<HomeLayout title="Homepage">
<!--Dieser Bereich wird in der Layout Kompenente mit einem <slot/> erstellt.-->
  <h1>Hello, world!</h1>
  <p>This is my page content. It will be nested inside a layout.</p>
</HomeLayout>

Astro ist noch sehr jung. Ich bin gespannt was dem Entwicklerteam noch so alles einfällt. Hier ist eine umfangreiche Dokumentation, die mit Astro entwickelt wurde. Was noch fehlt ist die Integration mit einem Headless CMS. Aber ich denke, die Anbieter werden da bald etwas zur Verfügung stellen. Mal schauen wer Erster wird.