Astro-Tutorial: Plug & Play-Webentwicklung​

Astro verbindet Welten.Jurik Peter | shutterstock.com Astro ist ein JavaScript-Meta-Framework, das Reactive-View-Technologien wie React und Svelte orchestriert. Von anderen Meta-Frameworks wie Next.js und Remix hebt sich Astro dabei dadurch ab, dass es eine Vielzahl von Reactive-Funktionen und -Komponenten in einer leistungsstarken Meta-Umgebung zusammenbringt. Dabei generiert Astro sämtlichen statischen Content (insofern möglich) auf dem Server und isoliert Reactive-Komponenten auf „Inseln“. Die statischen Inhalte sind SEO-freundlich und ohne JavaScript verpackt – die reaktiven Komponenten so optimiert, dass sie nur den JavaScript-Code senden, der erforderlich ist. Das Ergebnis ist ein optimiertes und strukturiertes Frontend, das das Beste aus beiden Welten vereint. In diesem Artikel entwickeln wir eine einfache Beispiel-Applikation mit Astro, die React und Svelte zusammenführt. Ein Grundlagen-Tutorial zu dem Meta-Framework finden Sie hier. Eine Webanwendung mit Astro entwickeln Ein neues Projekt aufzusetzen, gestaltet sich dank Astros Befehlszeilen-Tool denkbar einfach: $ npm create astro@latest astro-svelte-react In diesem Fall können Sie alle Standardeinstellungen akzeptieren. Weiterführende Informationen zum Setup-Prozess von Astro hält die Dokumentation bereit. Im nächsten Schritt wechseln wir in das neue Verzeichnis und fügen React und Svelte als Integrationen hinzu. Dieser werden in astro.config.mjs hinzugefügt: $ npx astro add react $ npx astro add svelte Basierend auf diesen überschaubaren Schritten hat Astro bereits eine Landingpage unter src/pages/index.astro erstellt. Wenn Sie einen Blick darauf werfen möchten, führen Sie die App im Development-Mode aus: $ npx astro dev Nun können wir damit loslegen, Anwendungscode zu schreiben. Wir starten mit zwei einfachen Komponenten in React und Svelte. Diese können mit Astro im Komponenten-Verzeichnis unter Verwendung ihrer nativen Dateitypen ohne Einschränkung vermischt und angepasst werden. Im ersten Schritt kümmern wir uns um eine Svelte-Counter-Komponente, die sich im components-Verzeichnis befindet: // src/components/SvelteCounter.svelte Count: {count} Increment Hierbei handelt es sich um standardmäßigen Svelte-Code, der einen simplen Counter realisiert, dessen Wert sich bei einem Klick erhöht. Das script-Element enthält den JavaScript- und Markup-Code mit unserem View Template und ermöglicht Zugriff auf die Variablen und Funktionen, die wir innerhalb des Skripts erstellt haben. Dieselbe Vorgehensweise lässt sich auf die React-Komponente anwenden: // src/components/ReactCounter.jsx import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increment ); } Die funktionale React-Komponente enthält einen Wert in useState und nutzt diesen, um eine Schaltfläche in JSX darzustellen. Wie eben bei Svelte erhöht sich auch hier der Wert, wenn der Button geklickt wird. Im nächsten Schritt führen wir die beiden Komponenten nun zusammen, indem wir src/pages/index.astro aktualisieren: --- import ReactCounter from '../components/ReactCounter.jsx'; import SvelteCounter from '../components/SvelteCounter.svelte'; --- Astro.js Demo Welcome to the InfoWorld Astro.js, Svelte, React Demo! React Counter Svelte Counter Die Syntax von Astro bringt ----Token (auch Script Fences genannt) zum Einsatz, um Code-Abschnitte zu kennzeichnen. Im View Template, das aus HTML besteht und Zugriff auf Komponenten und Code über spezielle Syntax-Erweiterungen bietet,  erstellen wir nun eine einfache Seite. Der für unsere Zwecke wichtigste Part sind dabei die beiden Komponentenreferenzen: Wenn wir die Seite nun besuchen, präsentieren sich unsere Komponenten Seite an Seite. Das mag nicht besonders beeindruckend erscheinen, ist aber auf technischer Ebene ein Wunderwerk. Schließlich stellen Svelte und React zwei völlig unterschiedliche Welten dar, die durch Astro nahtlos zusammengeführt werden. Wie reibungslos der gesamte Prozess dabei abläuft, ist besonders bemerkenswert. Falls Sie sich jetzt fragen, wie all das in der Praxis anwendbar ist: Stellen Sie sich vor, Sie haben bisher React verwendet, sich dann aber in Svelte verguckt – oder umgekehrt. Falls Sie für Ihre existierende Applikation das Framework wechseln möchten, fungiert Astro als eine Art „Superkraft“, wenn es darum geht, zu evaluieren, Prototypen zu erstellen und Anwendungen zu migrieren.   Noch wichtiger ist vielleicht die Fähigkeit von Astro, eine Vielzahl von Tools in einem gemeinsamen System zusammenzufassen. Im Astro-Universum werden Svelte und React wie Plugins behandelt. Client Directives Sie haben vielleicht die client:load-Attribute im obigen Codebeispiel bemerkt. Hierbei handelt es sich um Astro-Directives, mit dem sich das Verhalten der App auf verschiedene Arten feinabstimmen lässt. In diesem Fall teilt das Attribut der Engine mit, wann die Frontend-Komponente „bewässert“ werden soll – nämlich, sobald die Seite geladen wird. Astro ist im Grunde ein serverseitiges Framework – standardmäßig wird in Code-Klammern identifiziertes JavaScript entfernt. Im Wesentlichen will Astro alles auf dem Server rendern und den Clients ein vereinheitlichtes, optimiertes HTML-Only-Paket liefern. Weitere Informationen zu Client Directives finden Sie hier. Astros variabler Scope Wenn Sie Frontend-Interaktivität benötigen, können Sie diese wie wir mit einem Reactive-Framework oder mit Vanilla-JavaScript einrichten. In beiden Fällen arbeitet Astro Server-seitig. Das unterstreicht ein Blick auf den Support für Variablen, die in die HTML-Vorlagen eingefügt werden können. Ein Startwert in index.astro lässt sich zum Beispiel wie folgt erstellen: --- import ReactCounter from '../components/ReactCounter.jsx'; import SvelteCounter from '../components/SvelteCounter.svelte'; const startingValue = Math.floor(Math.random() * 100); --- // … This is on the server: {startingValue} Das sorgt dafür, dass der Zufallswert, der auf dem Server generiert wurde, auf der Client-Seite angezeigt wird. Würden wir diesen Wert auf dem Client verwenden wollen, könnten wir ihn als Parameter an die Komponenten übergeben. Dass die Svelte-Komponente einen Parameter akzeptiert, ließe sich wie folgt bewerkstelligen: Count: {count} Increment Beachten Sie im obenstehenden Code die Export-Syntax let startingValue. Das ist der Svelte-Jargon dafür, einen Übergabe-Parameter für das übergeordnete Element freizugeben. Um das auf der Indexseite zu nutzen, gehen Sie folgendermaßen vor: Auf identische Weise verfahren wir mit der React-Komponente: // index.astro // ReactCounter.jsx import { useState } from 'react'; export default function Counter(props) { const [count, setCount] = useState(props.startingValue); return ( Count: {count} setCount(count + 1)}>Increment ); } React nutzt das erste Argument der Funktionskomponente, um eingehende Eigenschaften zu verarbeiten. Die einfache Anordnung von Astro hat es in sich: Angenommen, wir möchten unseren startingValue von einem Remote-Server abrufen. Das können wir ganz einfach tun, während er dennoch auf dem Server bleibt. Und zwar so: --- import ReactCounter from '../components/ReactCounter.jsx'; import SvelteCounter from '../components/SvelteCounter.svelte'; const response = await fetch('https://www.random.org/integers/?num=1&min=0&max=100&col=1&base=10&format=plain'); const startingValue = await response.text(); --- This is on the server from a remote API: {startingValue} Natürlich spricht auch nichts dagegen, eine konventionelle fetch-Anweisung innerhalb des Svelte- oder React-Codes zu verwenden, um den Wert aus einem Client-seitigen API-Call zu erhalten. (fm) Sie wollen weitere interessante Beiträge zu diversen Themen aus der IT-Welt lesen? Unsere kostenlosen Newsletter liefern Ihnen alles, was IT-Profis wissen sollten – direkt in Ihre Inbox!