React Norway Konferenz 2022

In diesem Beitrag teile ich meine Erfahrungen auf der React Norway in der gemütlichen Stadt Larvik, 140 km von der Hauptstadt Oslo entfernt. Dies ist definitiv kein technischer Beitrag (nur ein bisschen ;) ), sondern ein Überblick über die Konferenzerfahrung.

Ich wünsche Ihnen viel Spaß damit!

Der Kauf der Tickets über die Website war einfach und problemlos, alles war auf Englisch (es war die einzige Option).

Ich reiste einen Tag früher an, weil die Veranstaltung um 8 Uhr morgens beginnen würde, so dass die Anreise aus den Niederlanden ein Problem sein könnte.

Zeitplan

• 8:00 - 9:00 Anmeldung + Kaffeebeginn
• 9:00 - Begrüßungsrede
• 9:30 - eCommerce mit dem visuellen Web gestalten
• 10:00 - Optimistisches Netz
• 10:30 - Pause & Netzwerken + Mini-Workshop
• 11:00 - Teilweise Hydratisierung in Astro und Next.js
• 11:30 - Client-seitige Code-Generierung mit OpenAPI
• 12:00 - Mittagspause
• 13:00 - Nachhaltige Komponenten ♻️
• 13:30 - React Shorts
• 14:00 - Der Weg zum Intl.MessageFormat
• 14:30 - Eine praktische Einführung in die Web-Verschlüsselung
• 15:00 - Pause & Netzwerken
• 15:30 - Erstellung menschengerechter Dokumentation mit React
• 16:00 - Auf Wiedersehen, useEffect
• 16:30 - Auf Wiedersehen React Day Norwegen, Hallo React Day New York
• 17:00 - MOOW-SHOW
• 18:00 - BBQ + Party

8:00 - 9:00 Anmeldung + Kaffeebeginn

Als ich im Farris Bad Hotel ankam, sah ich als ersten Eindruck ein riesiges Banner der Veranstaltung mit schönen Illustrationen und die Hotelhalle hat einen erstaunlichen Blick auf den Strand. Wir erhielten ein weißes Schild und die Organisatoren trugen ein blaues Schild und ein blaues Standardhemd.

Wenn Sie die Treppe hinuntergehen, können Sie Ihren Kaffee trinken und etwas Obst essen (aber kein Brot oder Snacks).

9:00 - Begrüßungsrede

Beim Betreten des Theaters konnten wir sofort die drei großen Bildschirme sehen. Schöne Stühle mit Tischen, auf denen Sie Ihren Laptop und Ihren Kaffee abstellen können :)

Der Raum war zu 90% gefüllt (etwa 100 Personen), so dass ich glaube, dass sie ein wenig zu spät kamen, um auf Nachzügler zu warten, aber der erste Vortrag war erst für 9:30 Uhr angesetzt, so dass ich glaube, dass sie ein wenig Flexibilität hatten.

Die Einführungen wurden von zwei Mitarbeitern von Crystallize (glaube ich) gemacht und man konnte spüren, dass sie nervös waren und ein kleines Problem mit der Mikrofonlautstärke beeinträchtigte ein wenig den ersten Eindruck, aber danach lief alles gut.

Sie schlugen den Zuhörern vor, einen QR-Code zu scannen, um Fragen zu senden oder unter slido.com/ mit dem Tag #reactnorway einzugeben. Es war ein bisschen schnell, so dass ich nicht sicher bin, ob alle in der Lage waren, den Code zu scannen, aber es war ein nettes Tool, um Fragen anonym zu teilen und die Fragen nach jeder Präsentation für das Publikum sichtbar zu machen.

Der CTO von Crystallize erläuterte die Veranstaltung und zeigte einige Beispiele aus seinem eigenen Unternehmen. Anhand der maßgeschneiderten Illustrationen aus der Präsentation wurde deutlich, dass sie ein Auge für Design und einen designorientierten Ansatz haben.

Die Art, wie Crystallize die Entwicklung sieht:

Verwenden Sie Boilerplate zum Starten und Erstellen, dann Open-Source

Wenn das nicht dokumentiert ist, existiert es nicht.

Klar, konsistent und automatisiert

Er hat die Sponsoren kurz vorgestellt.

9:30 eCommerce mit dem visuellen Web einbinden

Colby Fayock von Cloudnary begann mit einem angenehmen Vortrag darüber, wie man das traditionelle E-Commerce-Erlebnis verbessern kann. Mit der Einbettung von Videos anstelle von statischen Bildern, virtueller Realität und 3D zeigte er viele großartige Beispiele und wie sich dies auf die Erfahrung der Entwickler auswirkt, indem er ein Beispiel für eine technische Lösung für jedes Problem zeigte.

Responsive Image Breakpoints Generator v2.0 Astro-Bildergalerie netlify.app/

Außerdem eine Live-Demo zur Bereitstellung der Astro-Bildergalerie mit Netlify und zur Überprüfung der Bildgrößen und nach der Verwendung eines Cloudnary-Plugins innerhalb von Netlify zur automatischen Reduzierung der Bildgrößen, das das beste Format (JPG, WebP, AVI) dynamisch basierend auf dem Browser des Benutzers anbietet.

Der Sprecher sprach in einem ultraschnellen Modus, der Sie nicht mit langsamer Sprache ermüdete, aber andererseits dazu führte, dass Sie einige Teile verpassten. Sie haben aber auch eine tolle Zusammenfassung am Ende gemacht, um die wichtigsten Punkte zusammenzufassen.

9:50 - Kurzer Vortrag (10 Minuten Redezeit)

Einer der Hauptredner präsentierte Beispiele, wie man:

• Bitten Sie das Entwicklungsteam um eine Fehlerbehebung mit folgenden Schritten
• Beantragen Sie eine neue Funktion für das Team
• Teamübergreifendes Wissen Auf den ersten Blick konnte man deutlich sehen, wie nervös er war, aber die Präsentation war großartig.

10:00 - Optimistisches Netz

Atila Fassina von Xata benutzte sein Handy, um die Folien auf seinem Laptop zu steuern, und ging dabei ein wenig selbstbewusst über die Bühne. führte in das Thema Benutzeroberfläche x Benutzererfahrung ein, um die Zugänglichkeit für den Benutzer zu bestimmen, wenn Wasserfall-Inhalte die Erfahrung blockieren.

Er erläuterte, wie einige Fehlerabläufe ablaufen und wie Zustandsautomaten Ihnen dabei helfen können und wie Remix das mit Funktionen wie transparent handhabt:

• useLoaderData
• useTransition
• useActionData
• useFetcher
• useFetchers
• useFormAction
• useSubmit

*Dies sind Remix-Funktionen und nicht React 18

Er hat auch eine Live-Demo gezeigt, in der er useLoaderData und useActionData implementiert hat, um Daten aus einer lokalen Datenbank zu holen. Dabei hat er Remix verwendet, um optimistische Aufrufe zu erstellen, bei denen Remix Ihre Daten und Fehler automatisch und reibungslos verarbeitet.

10:30 - Pause & Netzwerken

Sie bieten Ihnen die Möglichkeit, Kontakte zu anderen Teilnehmern zu knüpfen. Neben dieser Pause gab es auch einen Mini-Workshop darüber, wie man Remix-Anwendungen mit Crystallize einsetzt.

Teilweise Hydratisierung in Astro und Next.js (Es gab eine 10-minütige Verzögerung)

Hakon Krough - Head of Engineering von Crystallize - wirkt sehr selbstbewusst, beginnt mit einem kleinen Witz und spricht in einem guten Tempo. Er erklärt, was Hydratation ist und wie sie sich auf die Leistung des Benutzers auswirkt, indem er eine einfache Anwendung mit einer Taste zeigt, bei der die Leistung standardmäßig nicht gut ist und wie man das Problem lösen kann.

Code-Beispiel

11:36 - Client-seitige Codegenerierung mit OpenAPI (6 Min. Verzögerung)

Johannes Brodwall von Sopra Steria begann selbstbewusst, indem er sagte, dass er der Mann zwischen dem Publikum und dem Mittagessen sei. Im Gegensatz zu seinem Vorredner hielt er auch eine kabelgebundene Maus in der Hand und betonte, dass der Code ohne Dokumentation nicht existiert. Er zeigte, wie Sie die OPEN API nutzen und Quellcode generieren können, um die Typsicherheit zu verbessern, indem Sie automatisch Type-Script-Schnittstellen und Fetch-Funktionen erstellen und so eine starke Verbindung zwischen Frontend und Backend schaffen. Erstellung eines Plugins zur Erweiterung des Standardverhaltens von Code-Gen: GitHub OpenAPI Generator Typescript-API abrufen. Ein großartiges Extra ist, dass auch die Mock-Funktion generiert wird, die Sie in Ihre Frontend-Tests einbauen können.

12:06 - Mittagspause (6 min. Verzögerung)

Schöne Gegend mit einer großen Auswahl an Lebensmitteln.

13:04 - Präsentation des nächsten Themas (sie vergaßen zu klatschen, das war ein bisschen seltsam) 13:05 - Nachhaltige Komponenten ♻️ Wir sprachen darüber, wie Komponenten wachsen und brechen können, über die Strategie, die eine chaotische Eigenschaftsverwaltung schafft, und darüber, wie man APIs entwirft, die stabil, benutzerfreundlich und umfangreich sind. Sie sollten sich selten ändern, sich auf vorhersehbare Art und Weise ändern, intuitiv, konsistent, gut dokumentiert und einfach sein und wie sie mit React zusammenhängen. 13:30 - React Shorts Jede Präsentation hat nur etwa 8 Minuten 13:30 - Rasmus Rimestad sprach über Dienstprogramme mit Typescript wie Pick, Partial 13:38 - Adnreas Storeund Madsen - Die verborgenen Kräfte von Typescript erschließen 13:46 - The Road to Intl.MessageFormat (begann 14 Minuten früher, wahrscheinlich weil sie nicht genug Kurzvorträge hatten) Eemeli Aro zeigte, wie Mozilla an einem Standard zur Erstellung von Lokalisierungen mit .mf-Dateien arbeitet. GitHub - tc39/proposal-intl-messageformat 14:18 - Unerwartete Pause & Netzwerken (?) ‍♂️ 14:33 - Der nächste Redner 14:33 - Eine praktische Einführung in die Webverschlüsselung Benedicte Raae erklärt das Warum, die Einführung und wie man mit Webverschlüsselung arbeitet und erklärt auch ein wenig, warum private Daten und verschlüsselte Daten zusammenhängen. 15:04 - Eine weitere Pause & Netzwerken 15:15 - React Shorts 15:23 - Fredrik Jensen - Wie man ein CLI baut - erklärt, wie man Libs wie yargs, chalk, prompt verwendet. Außerdem fügen wir das Skript "run": zur package.json hinzu, um es standardmäßig als CLI laufen zu lassen 15:20 - Rob Walker - Visuelle Regressionstests für React Native mit react-native-owl auf einfache Weise mit einem Bildvergleich. 15:31 - Erstellen von menschengerechter Dokumentation mit React Tejas Kumar beschrieb in einer sehr souveränen und schnellen Art und Weise, wie Entwickler Dokumentationen schreiben und was sie tun, um dies zu ändern, um es schnell, aktuell und zuverlässig zu machen und Markdown und next-js zu verwenden, indem sie Auto-Slugs als Eigenschaften verwenden, um die Dateien zu lesen und jedes Markdown-Tag in eine Komponente zu parsen. 16:00 - Auf Wiedersehen, useEffect David Khourshid sprach darüber, wie komplex der useEffect-Haken ist, der seinen Vorgänger (didMount, didUpdate, willUnmount) nicht repräsentiert, und über die Probleme von Endlosschleifen und unsinnigen Zustandsaktualisierungen, die dieser Haken verursachen kann. Wir zeigen, dass Aktionseffekte in Zustandsübergänge (oder State Handler) eingefügt werden sollten useEEffect -> effectHandlers 16:36 - Auf Wiedersehen React Day Norwegen, Hallo React Day New York Nur externe Kommentare und Erwähnung der Veranstaltung in New York. Unten im Außenbereich gab es etwas zu essen und zu trinken und wir tauschten einige Erfahrungen aus :) 17:00 - MOOW SHOW 18:00 - BBQ + Party   Abschließende Gedanken: Jeder nutzte pagespeed.we.dev, um über Performance-Probleme und deren Lösung zu sprechen. Es könnte eine gute Idee für eine Frontend-App sein, Pagespeed in Ihre Pipeline einzubauen, um eine gute Performance Ihrer App zu gewährleisten. 30 Minuten scheinen eine perfekte Zeit für einen Redner zu sein. Alle Redner benutzten ein drahtloses Mikrofon in der Nähe ihres Mundes, so dass sie mehr Freiheit hatten, durch die Bühne und ihre Hände zu gehen. Einige Redner hatten ihre eigene kleine Platte auf der Leinwand und andere nicht. Das Licht im Publikum war immer eingeschaltet, ich bin mir nicht sicher, ob das gut ist, weil die Leute dazu neigen, nicht einzuschlafen, oder ob es schlecht ist, weil es die Sicht auf die Leinwand erschwert, vielleicht wäre ein weicheres Licht im Publikum die beste Option. Ich habe eine Möglichkeit vermisst, alle Präsentationen im Voraus abzurufen, wie z.B. ein Repository github.com/react-norway, in dem ich alle Präsentationen finden würde, ohne während der Präsentation Fotos machen zu müssen oder mich an jede einzelne zu erinnern. Das würde auch den späteren Austausch mit meinen Kollegen in meinem Unternehmen erleichtern. Einige Mikrofone fielen von Zeit zu Zeit aus und verringerten die Erfahrung. Jemand, der zwischen den Vorträgen eine gute Energie hat, um den nächsten Redner zu präsentieren, ist wichtig. Letztendlich war es eine großartige Konferenz mit einer tollen Atmosphäre und einer atemberaubenden Aussicht vom Strand aus, die zwar teuer war (Hotel und Essen), sich aber auf jeden Fall gelohnt hat.