Was uns am React Day Berlin 2024 gefallen hat

Wieder einmal hat unser Team den Weg nach Berlin gefunden. Diesmal, um sich Hunderten von React-Entwicklern beim React Day Berlin anzuschließen. Unser Zug fuhr um 5:30 Uhr morgens in Dresden ab, aber das gab uns genügend Zeit, um im Team zu frühstücken und die anstehenden Vorträge zu besprechen. In diesem Artikel wollen wir die Vorträge vorstellen, die uns am besten gefallen haben, um verschiedene Aspekte zu zeigen, die uns als Teilnehmer einer großen Konferenz begeistert haben.

Die Keynote: React Server-Komponenten in KI-Anwendungen

In seinem Vortrag React Server Components in AI Applications zeigte Tejas Kumar, wie KI und React Server Components die Suche revolutionieren können. Anhand eines Filmbeispiels zeigte er, wie beschreibende Eingaben in KI-generierte Schlüsselwörter umgewandelt werden, um relevante Datenbanken abzufragen und dynamische Seiten zu rendern.

Ich finde diesen Ansatz vor allem für den kommerziellen Bereich interessant: Oft kennen wir nicht die richtigen Begriffe oder Übersetzungen, um ein Produkt zu finden. Mit der KI-gestützten Suche können Sprachbarrieren und Einschränkungen bei den Schlüsselwörtern überwunden werden.

Ein möglicher Kritikpunkt ist, dass KI-generierte Ergebnisse variieren können. Meiner Meinung nach ist dies jedoch kein Problem: Die Nutzer suchen in der Regel nicht nach einem bestimmten Ergebnis, sondern wollen eine Auswahl sehen, aus der sie das finden können, was sie brauchen. Solange die generierten Ergebnisse den Nutzern helfen, ist diese Funktion ein Erfolg.

Link zum Talk: https://gitnation.com/contents/react-server-components-in-ai-applications

Signals überall

Ich bin in unserem Büro der Fan von Signals, dem eigentlich alten, aber neuem Reaktivitäts-Baustein, der durch SolidJS populär wurde und möglicherweise auch bald direkt im Browser vergügbar ist. Ich glaube also nicht, dass jemand überrascht war, als ich auf einer React-Konferenz überall Signals sah. Nicolas Dubien sprach über fine-grained reactivity without the React compiler und zeigte uns, wie und warum sein Team im Wesentlichen seine eigene benutzerdefinierte Signals-Implementierung gebaut hatte. In der Zwischenzeit erläuterte Giulio Zausa die Reise durch unterschiedliche State-Management-Lösungen seines Unternehmens und landete schließlich bei etwas, das wiederum verdächtig nach Signals aussah. Und das alles habe ich gehört, ohne den Talk der direkt Signals im Titel hat zu besuchen!

In beiden Vorträgen ging es um mehr als nur um Signals, und ich war froh, dass ich beide besucht habe, aber ich finde es interessant zu sehen, wie sich Signals und signalähnliche Reaktivitätstools wie eine Form der konvergenten Evolution anfühlen, bei der wir immer wieder auf dieselben Ideen zurückkommen. Und auch wenn React einen anderen Ansatz für Reaktivität verfolgt, ist es klar, dass die Leistungsvorteile von feinkörnigen Updates und Re-Renderings nicht zu übersehen sind.

Das eigentliche Highlight von Signals kam aber erst, als alle Vorträge vorbei waren und wir uns auf dem Heimweg befanden. Wir saßen im Abteil unseres Zuges und sprachen darüber, wie Signals diese berüchtigte fine-grained reactivity ermöglichen und wie sie in Frameworks wie SolidJS verwendet werden. Ich liebe es, in einem Team zu arbeiten, das wissbegierig ist, das bereit ist, gute Fragen zu stellen, und das bereit ist, Themen wie diese über die Grundlagen hinaus zu erforschen.

Why not: Making an Emulator in JavaScript

Der Vortrag von Sara Vieira war etwas ganz Besonderes. Es war kein typischer Konferenzvortrag mit 100 Folien und Buzzwords. Stattdessen brachte Sara eine Energie mit, die sich eher wie die eines Freundes anfühlte, der einem seine skurrilen Wochenendprojekte zeigt, als wie eine formelle Keynote.

Und es war auch skurril! Sie präsentierte einen CHIP-8-Emulator, den sie komplett in JavaScript gebaut hat. Noch cooler: Da ihre Folien webbasiert waren, konnte sie das daraus resultierende Spiel direkt in die Folien einbetten und so ein nahtloses und interaktives Erlebnis für die Zuhörer schaffen.

Was am meisten auffiel, war, wie inspirierend der Vortrag war. Es ging nicht nur um technische Brillanz - sie erinnerte uns daran, warum wir überhaupt Konferenzen besuchen: um Inspiration und neue Ideen außerhalb unserer täglichen Arbeit zu finden.

Link zum Talk: https://gitnation.com/contents/building-a-game-boy-emulator-in-javascript

Glücklicher Zufall: Make Real: Tldraw's Accidental AI Play

Der Vortrag von Steve Ruiz war definitiv unterhaltsam.

Auf sehr spielerische Weise stellte er tldraw als eine Canvas-Web-App vor, die der asketische kleine Bruder von Miro sein könnte. Nachdem er einige sehr nützliche Funktionen gezeigt hatte (wie z.B. Pfeile, die ihre Länge an die Oberfläche eines rotierenden Ziels anpassen), zeigte er eine Funktion namens make real.

Dort zeichnete er zwei Boxen. Das linke war das Eingabefeld, das rechte das Ausgabefeld, oder das Feld realisieren. Alles, was in der Eingabebox gezogen oder gezeichnet wurde, wurde sofort mit Hilfe der generativen KI in etwas umgesetzt, das real aussieht (z. B. ein Delfin, der im Meer schwimmt, mit einer kleinen Insel im Hintergrund). Um noch mehr Spaß zu haben, änderte er das Ausgabefeld in Text und verknüpfte es mit einem Pfeil, und voilà, es gab eine Beschreibung dieses Bildes. Nach einigen Minuten gab es eine Abfolge von tldraw-Elementen, die Informationen aufnahmen, sie über KI auswerteten und sie an das nächste Element ausgaben, um das Eingabebild real zu machen und seine Coolness zu vergrößern (was in unserem Fall zu einem real aussehenden Delfin mit Sonnenbrille führte).

Es gab auch eine make real-Funktion, die React-Komponenten als Funktion des Eingabebildes oder der Skizze lieferte. Es war beeindruckend zu sehen, wie eine grobe Zeichnung einer einfachen Zeitschaltuhr mit einem Display und drei Tasten in eine umsetzbare React-Komponente übersetzt wurde, die tatsächlich wie erwartet funktionierte.

Und dann wurde es merkwürdig. Er erzählte uns, dass es eine große Überraschung war, dass es tatsächlich möglich war, einen Algorithmus aus tldraw-Elementen aufzubauen. Er benutzte Textfelder, um zu beschreiben, wie das Element seine Eingabe mithilfe von KI auswerten sollte. Dann wurden die Kästchen mit Hilfe von Pfeilskizzen logisch angeordnet. Außerdem wurden Notizen eingefügt, um die Logik des Algorithmus weiter zu beschreiben (z. B. eine for-Schleife). Das Ergebnis war ein Algorithmus, der eine Liste zufälliger Popsongs erstellte und dann das Ergebnis in drei Textbereiche sortierte: Liebeslieder, keine Liebeslieder, vielleicht ein Liebeslied.

An diesem Punkt begann ich zu verstehen, dass sehr unterschiedliche Bereiche der Strukturierung und Bewertung von Informationen wie visuelle Skizzen, geschriebener Code oder eine ausführliche Eingabeaufforderung tatsächlich nahtlos in einer symbiotischen Art und Weise zusammenarbeiten können, sodass wir die entsprechenden Stärken zur gleichen Zeit nutzen können.

Link zum Talk: https://gitnation.com/contents/make-real-tldraws-accidental-ai-play

Dinge bauen, die überhaupt nicht skalieren

In diesem Vortrag konfrontierte uns Michele mit einem alltäglichen Problem eines Softwareentwicklers:

Sie brauchen wirklich eine App für etwas, aber alle anderen Lösungen auf dem Markt sind entweder nicht gut genug oder überladen mit Logins, Paywalls, Berechtigungsanfragen oder Cookie-Bannern.

Was ist also die naheliegende Reaktion? Man baut es selbst. Aber es gibt ein bekanntes Problem bei der Entwicklung eigener Lösungen: Wir neigen immer dazu, unsere eigenen Lösungen zu weit zu denken. Wir fangen an, über Multiplattform, Optimierungen, Authentifizierung und viele andere Aspekte nachzudenken, obwohl wir letztendlich der einzige Nutzer sind, den die App jemals haben wird.

Dann zeigt er uns von ihm entwickelte Anwendungen, die überhaupt nicht skalierbar sind. Aber natürlich erfüllen sie ihren Zweck und sind sehr gut geeignete Lösungen für die Probleme. Er tat dies auf eine sehr humorvolle Art und Weise, weshalb es im Gedächtnis blieb.

Die wichtigste Erkenntnis dabei ist, dass wir in den meisten Fällen keine skalierende Lösung brauchen. Unsere App zu sehr zu durchdenken, ist demotivierend und zeitraubend. Oft ist es besser, sich zuerst zu überlegen, was man wirklich erreichen will, und die Komplexität erst nach und nach einzuführen, wenn sie tatsächlich benötigt wird.

Link zum Talk: https://gitnation.com/contents/build-things-that-dont-scale-at-all

Der Zustand des Webs: Die wichtigsten Erkenntnisse aus dem HTTP-Almanach 2024

Ich hörte einen Vortrag von Burak Güneli zum Thema The State of the Web: Key Insights From the HTTP Almanac 2024. Obwohl ich die Ausführungen des Referenten nicht ganz überzeugend fand, haben mich die von ihm präsentierten Informationen wirklich überrascht. Er hob hervor, wie viel Kohlenstoff jeder Website-Besuch ausstößt, und betonte, dass jeder Seitenaufruf zu diesem Fußabdruck beiträgt. Ich war überrascht, dass selbst eine so alltägliche Tätigkeit wie das Surfen im Internet einen messbaren ökologischen Fußabdruck hinterlassen kann.

Was mir wirklich auffiel, waren die relativ einfachen Schritte, die man unternehmen kann, um die Umweltauswirkungen einer Website zu verringern. Güneli erläuterte einfache Optimierungen wie das Einrichten von Caching-Headern, die Verwendung des srcset-Attributs für Bilder, die Anwendung von Lazy Loading, das Erkennen und Entfernen von ungenutzten CSS- oder anderen Dateien und die Komprimierung großer Daten mit gzip. Es war ermutigend zu sehen, dass Entwickler mit minimalen Anpassungen - die oft so einfach sind wie das Hinzufügen einiger Attribute oder das Optimieren von Konfigurationen - die Leistung ihrer Websites erheblich verbessern und deren Kohlenstoffemissionen verringern können.

Insgesamt hinterließ der Vortragsstil zwar keinen starken Eindruck, der Inhalt jedoch schon. Ich bin mir der versteckten Umweltkosten der alltäglichen Webnutzung bewusster geworden und bin motivierter, nachhaltige Best Practices in meiner eigenen Arbeit umzusetzen.

Link zum Talk: https://gitnation.com/contents/the-state-of-the-web-key-insights-from-the-http-almanac-2024

React Day @home

Leider war es mir dieses Jahr nicht möglich, persönlich am React Day teilzunehmen. So blieb mir nichts anderes übrig, als mit einer Tasse Tee und einer warmen Decke auf dem Sofa zu sitzen und die spannenden Vorträge zu verfolgen.

„Meine Konferenz“ begann um 13:50 Uhr mit einer kurzen Eröffnung und dann direkt mit dem sehr unterhaltsamen Vortrag von Sara Veira.

Generell waren die Benutzeroberfläche und der Zeitplan der „Fernkonferenz“ immer sehr übersichtlich und intuitiv. Ich konnte problemlos zwischen den zwei Tracks hin- und herspringen. Es war auch möglich, aus der Ferne Fragen zu stellen, aber leider nur bei der Hälfte der Vorträge.

Die Fernkonferenz begann am Nachmittag, um es für die internationalen Teilnehmer bequemer zu machen. Das bedeutete aber auch, dass nach der letzten Live-Präsentation die Präsentationen vom Vormittag wiederholt wurden. Das bedeutete natürlich, dass die Möglichkeit, Fragen zu stellen, verloren ging. Mein Konferenztag endete gegen 20:00 Uhr mit dem Vortrag von Nicolas Dubien über seine Lösung für Reactivity ohne Compiler. Abgesehen von zwei kleinen Unterbrechungen des Streams, die nach dem Neuladen der Seite behoben waren, lief alles technisch einwandfrei. Ich fand es gut, dass ich trotzdem an der Konferenz teilnehmen und die spannenden Vorträge verfolgen konnte. Ich hoffe, dass ich nächstes Jahr wieder live dabei sein kann.

Letzte Worte

Wir haben den React Day in Berlin sehr genossen, das frühe Aufstehen und der lange Arbeitstag haben sich mehr als gelohnt.

Einer der besten Aspekte, wenn man als Team auf Konferenzen und Veranstaltungen wie diese geht, ist zu sehen, wie sie Diskussionen und Ideen anregen. Vitalis schwärmte von KI und dem Tldraw-Vortrag, Jonathan sprach ausführlich über Signals, und wir alle diskutierten darüber, wie wir die Umweltverträglichkeit der esveo-Website verbessern könnten. Außerdem gab es an verschiedenen Stellen des Tages Zeit für den jährlichen Advent of Code sowie einige Typescript-Rätsel, bei denen unser Wissen auf die Probe gestellt wurde.

Alles in allem war dies eine großartige Gelegenheit, von einigen führenden React- und Frontend-Experten zu lernen, aber auch voneinander.