Besuchen Sie uns auf der React Conference Live!

Neugierig, wie es ist, in der React-Abteilung von Social Brothers zu arbeiten? Wir halten es für wichtig, dass sich unsere Teams weiterentwickeln und die neuesten Trends und Entwicklungen kennen. Deshalb war unser Team vor einigen Wochen auf der React Conference Live in Amsterdam. 17 Experten erzählten ihnen mehr über das neu entwickelte React-Framework und die Techniken. Lesen Sie weiter, um mehr über diesen Tag zu erfahren. 

Guten Morgen 8:30 – 11:15

Wir begannen unseren Tag um 8.30 Uhr im Theater Amsterdam. Eine sehr schöne Lage, zentral in Amsterdam am Wasser gelegen. Bei der Ankunft standen bereits Kaffee, leckere Sandwiches und kostenlose Leckereien bereit. Nach einer Tasse Kaffee und einem leckeren Frühstück konnten wir gut gestärkt in den Tag starten, denn wir haben einen langen Tag von 9.00 bis 18.10 Uhr vor uns.

Nach einer kurzen Einführung in die Organisation eröffnete die erste Rednerin, Maggie Appleton, Lead Designer bei Hash, das Spiel. 

Sie sprach über die Rolle der Psychologie beim Programmieren und wie die Visualisierung von Logik im Code sehr dazu beitragen kann, ihn besser zu verstehen. Code ist für Computer gemacht, nicht unbedingt für Menschen. Menschen denken viel mehr in Zusammenhängen und Beispielen, während Computer in Buchstaben und Zahlen denken. Daraus haben wir eine Reihe von Tools entnommen, mit denen wir komplexe Logiken aus unseren Anwendungen visualisieren können, um unsere Projekte besser zu dokumentieren. Wir haben eine Reihe nützlicher Tools aus diesem Vortrag aufgenommen. In Zukunft wollen wir mit diesen Tools komplexe Logiken aus unseren Anwendungen visualisieren, um unsere Projekte besser dokumentieren zu können.

Als nächstes kam Debbie O'Brien, Head Developer Advocate bei Bit. Sie erzählte uns, wie sich die Entwicklungswelt von einer großen, umfassenden Codebasis zu schönen, kleinen Repositories durch Microservices entwickelt hat. Die Front-End-Entwicklung hinkt jedoch immer noch hinterher, sodass das Front-End immer noch mit riesigen Codebasen arbeitet, ohne die Möglichkeit, Ihr Projekt in kleine, eigenständige Mini-Projekte aufzuteilen. Lösungen dafür sind zum Beispiel Monorepos oder NPM-Bibliotheken, aber es fehlt noch an gutem Tooling, was diese Lösung wenig skalierbar macht. Die Lösung dafür: bit.dev. Ein Tool, mit dem Sie Teile Ihres Projekts einfach in einer NPM-Bibliothek veröffentlichen, separat pflegen und einen klaren Überblick über alle einzelnen Elemente/Komponenten in der Bibliothek haben. Dieses Tool wollen wir auch selbst anwenden. Die Tools können uns dabei unterstützen, ältere Projekte zu verbessern, ohne zu viel Wartungszeit in Anspruch zu nehmen. 

Als nächstes Sid Kshetrapal, Entwickler bei GitHub. Der Titel seines Vortrags? „Auf dem Grat zwischen Flexibilität und Konsistenz in Komponentenbibliotheken“. Was nichts anderes bedeutet, als wie entwickelt man Codestücke für ein Projekt, die einerseits für Konsistenz sorgen und andererseits dem Entwickler Freiräume für eigene Anpassungen lassen. Ein Problem, mit dem Entwickler jeden Tag konfrontiert sind. Als Beispiel verwendete er eine Fallstudie einer Refactor-Trajektorie eines Elements bei GitHub. Die folgenden Screenshots basieren alle auf derselben Komponente mit denselben Funktionen. eine Liste anzeigen, in der jedes Element in dieser Liste einen Text und/oder ein Symbol mit einer Aktion anzeigt, wenn Sie darauf klicken. Er konnte zeigen, wie das mit dem gleichen Bauteil möglich ist: sehr flexibel und dennoch durchgängig.

Nach diesem inhaltlichen Vortrag war Yann Braga, Softwareentwickler bei Chromatic, an der Reihe. Chromatic ist das Unternehmen hinter Storybook, dem Tool, mit dem wir unsere Komponenten in einer Art Handbuch dokumentieren und visualisieren. Yann erzählte uns, wie Storybook nicht nur für visuelle Tests, sondern auch für interaktive Tests verwendet werden kann. Sie können beispielsweise Interaktionstests in Storybook durchführen, bei denen Sie angeben, dass der Benutzer auf ein Dropdown klickt, und Sie dann erwarten, dass ein Untermenü angezeigt wird. Das Tolle an Storybook ist, dass Sie in einer Browserumgebung genau sehen können, worauf der Testagent klickt und wo es möglicherweise schief geht. Dies füllt wirklich die Lücke zwischen Unit-Tests und End-to-End-Tests und wir werden es sicherlich in unsere Projekte einbeziehen. 

Dann war Luc van Kampen, Frontend-Berater bei Passionate People, an der Reihe. Luc hat uns erzählt, wie Authentifizierung in der Zukunft des Internets aussehen könnte. Nach Web 1.0 und Web 2.0 steht das Web 3.0 vor der Tür, das sich vollständig um ein dezentrales Netzwerk dreht. Jeder Teilnehmer dieses Netzwerks ist auch ein Hoster dieses Netzwerks, im Gegensatz zum heutigen Web, wo Sie nur einen Hosting-Server haben. Dies eröffnet völlig andere Möglichkeiten für Dinge wie die Authentifizierung, sodass Sie möglicherweise nie wieder ein Passwort auf Websites eingeben müssen. Eine interessante Vision, aber im Moment noch zu vage, um sie in unsere Projekte aufzunehmen.

Runde zwei 11:50 – 13:30

Nach dem Kaffee kam Nader Dabit, Developer Relations bei Edge & Node. Er erzählte uns auch von Web 3.0 als der Zukunft des Internets, ging aber detaillierter auf die Tools und Stacks ein, die zur Entwicklung von Anwendungen darauf verwendet werden. React kann weiterhin für das Frontend verwendet werden, aber für die Kommunikation mit der Blockchain stehen völlig andere Tools zur Verfügung. Auch ein nettes und interessantes Gespräch, das wir in Zukunft mitnehmen werden, aber vorerst leider noch zu vage. 

Dann kam Simeon Griggs, Senior Solutions Engineer bei Sanity. Er erzählte uns von praktischen Anwendungsfällen des CMS Sanity und den Lektionen, die er beim Onboarding großer Marken wie Spotify gelernt hat. Er konzentrierte sich hauptsächlich auf die Übersetzung und Strukturierung von Inhalten. Übersetzungen sind beispielsweise auf Publikationsebene, aber auch auf Feldebene möglich. Er zeigte auch, wie Modelle innerhalb von Sanity konfiguriert werden und dass dies hauptsächlich über Code geschieht. Dies ist ein großer Vorteil für Entwickler, da Kunden keinen Zugriff auf die Konfigurationsoptionen haben. Endlich einen netten Einblick in dieses CMS bekommen, aber im Grunde war dieser Vortrag hauptsächlich ein Verkaufsgespräch. 

Nach Simoen war Aashima Ahiuja, Frontend-Entwicklerin bei Miro, an der Reihe. Sie erzählte uns, wie das serverseitige Rendern von React-Anwendungen mit Server Components, einem Tool, das von React erhältlich ist, einfacher wird. Einige Hintergrundinformationen: Das Rendern Ihrer React-Anwendung stellt sicher, dass Sie HTML direkt an den Benutzer zurückgeben, anstatt nur einen Haufen Javascript. Dies wiederum stellt sicher, dass Suchmaschinen wie Google die Website richtig indexieren können. Standardmäßig liefert React nur Javascript-Code, aber mit Tools wie NextJS kann dieser einfach auf dem Server gerendert werden. React Server Components reagieren darauf, weil der Entwickler jetzt genau angeben kann, welcher Code für den Server und welcher Code für den Client verwendet wird. Beispielsweise kann man ein Datum nur auf dem Server formatieren, was wiederum viel Javascript für den Client spart. Dieses Feature befindet sich zwar noch in der Alpha, aber der Mehrwert ist bereits enorm. Dies ist definitiv etwas, das wir in unsere Projekte einbeziehen werden.

Dann lag es an Ives van Hoorne, dem Schöpfer von CodeSandbox. Zunächst einige Hintergrundinformationen: CodeSandbox ist ein Tool, mit dem Sie ganz einfach kleine Teile des Codes teilen können, und die gesamte Umgebung wird für Sie eingerichtet. Ihr gesamtes React/NextJS-Paket wird von CodeSandbox installiert und gehostet, Sie müssen nur Code schreiben und freigeben. CodeSandbox Projects ist der Superlativ davon, wo Sie ganze Projekte auf CodeSandbox hosten können. So können Sie Projekte ganz einfach mit Kollegen teilen und gemeinsam programmieren – und das gleichzeitig. All dies über ein Webinterface, sodass Sie Ihren Code auch während der Zugfahrt auf Ihrem iPad einsehen und ändern können. Das Feature befindet sich noch in der geschlossenen Alpha, aber wir haben es geschafft, uns einen Platz auf der Liste der Tester zu sichern! Also werden wir dieses Tool bald ausprobieren.

Nach dem Mittagessen 14:30 – 15:55

Nach dem Mittagessen sprach Michael Jackson, Mitbegründer und CEO von Remix. Remix ist eine Bibliothek/Tool, mit dem man React einfach auf dem Server rendern kann, so wie es zum Beispiel NextJS macht. Er erzählte uns von dem Designprinzip hinter diesem Tool und warum es das Leben von Entwicklern so viel einfacher macht. Ein sehr substanzieller Vortrag, in dem wir tolle Einblicke in das Remix-Framework gewonnen haben. Unser Toolset ist ziemlich solide, sodass wir in absehbarer Zeit nicht darauf umsteigen werden, aber es hat uns gute Einblicke für die Zukunft gegeben. 

Danach war es an Medha Dawoud, Front-End-Beraterin bei Passionate People. Er zeigte uns einige einfache und schnelle Leistungsgewinne in React. Er zeigte auch, welche Tools verfügbar sind, um dies transparent zu machen. Die größten Leistungssteigerungen ergaben sich aus der Auswahl von Bibliotheken, die kleiner als die Alternativen sind. Hier ist es wichtig, immer die kleinstmögliche Option zu wählen, damit die Downloadgröße der Javascript-Datei so gering wie möglich bleibt. Andere Möglichkeiten zur Verbesserung der Leistung sind Techniken, mit denen nur Elemente gerendert werden, die derzeit auf Ihrem Bildschirm sichtbar sind. Normalerweise rendern Browser eine ganze Seite, aber das ist Zeitverschwendung, wenn Sie nur einen kleinen Teil in Ihrem Fenster sehen. Schließlich zeigte Medhat, wie Sie Ihren Code in separate kleine Dateien statt in eine große aufteilen können. Dadurch wird sichergestellt, dass Sie nur den Code herunterladen, den Sie benötigen, und nicht alles auf einmal.

Den letzten Vortrag vor der Pause hielt Anuradha Kumari, Front-End-Beraterin von Passionate People. Wie können Sie Websites verbessern, indem Sie an Barrierefreiheit denken? Das Beispiel, das sie uns gegeben hat, sorgt dafür, dass Screenreader die Sprache Ihrer Website leichter erkennen und daher leichter vorlesen können. Ein guter Einblick, aber nicht sehr tief.

Finalrunden nach der Nachmittagspause 16:30 – 18:10

Zeit für Roy Derks, Developer Experience bei Hackteam, wwo wir mehr über die „Back-End für Front-End“-Prinzipien erfahren haben. Hier macht man ein kleines Backend, das speziell für ein Frontend gedacht ist (ein Backend ist normalerweise sehr breit aufgestellt). Damit können Sie ein Stück Logik aus dem Frontend entfernen und eine dafür maßgeschneiderte API erstellen. Sie lösen eine schlechte Schnittstelle der API für Ihre spezifische Website. Der Nachteil ist, dass Sie noch ein Stück Logik schreiben müssen, um dies zu ermöglichen, damit Sie das Problem tatsächlich um einen Schritt verschieben. Ein Backend ist für diese Art von Logik jedoch viel besser geeignet als ein Frontend, also insgesamt ein nützlicher Vortrag, den wir sicherlich in unsere Projekte einbeziehen werden.

Fukuzaki, Developer Relations Engineer bei Storyblok, gab neue Einblicke, wie ihr CMS zum Übersetzen von Inhalten verwendet werden kann. Wieder war es ein bisschen ein Verkaufsgespräch, nur mit dem Unterschied, dass wir Storyblok schon lange auf unserem Radar haben, wegen der großartigen Funktionalität, die dieses CMS bietet. Was zu einem kurzen Workshop über das CMS unseres Interesses führte. 

Der vorletzte des Tages war Dwane Hemming, Javascript Developer Advocate bei Vonage. Er erzählte uns von Webkomponenten. Dies wird seit langem als die Zukunft der Webentwicklung angesehen, da es dafür sorgt, dass man komponentenbasiert im Browser arbeiten kann, was normalerweise nur mit Frameworks wie React möglich ist. Er konzentrierte sich auf den aktuellen Stand von Web Components und wie es mit React zusammenarbeiten kann, aber insbesondere auch, wie es verbessert werden kann. Fazit, es ist schlecht in Kombination mit Frameworks wie React zu verwenden. Schade, denn das macht es für uns unbrauchbar. Es bietet jedoch großartige Einblicke, wie wir diese Technologie möglicherweise eines Tages übernehmen können.

Als allerletzter Redner hörten wir Nikhil Sharma, SDE Design Systems bei Postman, zu. Wie können Sie die UX von React-Anwendungen einfach verbessern, indem Sie Loader-Indications auf effiziente Weise verwenden. Das klingt einfach, aber das Zeigen des Status der Anwendung für den Benutzer ist einer der wichtigsten UX-Teile. Darüber hinaus möchten Sie auch die Gesamtladezeit Ihrer Anwendung so gering wie möglich halten, wofür Sie auch Techniken haben. Nikhil konzentrierte sich hauptsächlich auf das neueste Update von React und welche Funktionen darin enthalten sind, um diese Probleme zu lösen.

Mit diesem Vortrag ging ein toller, lehrreicher Tag voller Informationen zu Ende. Im Theater wurde eine kleine Afterparty organisiert, aber unser Team ging, um Amsterdam für eine Weile zu genießen. Alles in allem ein toller Tag und wir freuen uns schon jetzt auf nächstes Jahr!