422 Unprocessable Entity: Verdächtige Telefonnummer!
Je mehr Nutzer Sie bekommen, desto besser, richtig? Nun, das ist nicht immer wahr. Sicherlich möchten Sie Bots und betrügerische Benutzer von Ihrer App fernhalten. Dafür ist es üblich, einen zweiten Faktor hinzuzufügen und einen Bestätigungscode per SMS oder E‑Mail zu senden. Aber falsch gemacht, kann dies Ihr Kunden-Onboarding-Erlebnis beeinträchtigen und ein kostspieliger Fehler sein.
Nehmen Sie an dieser Session teil, um den Kompromiss zwischen Sicherheit, Kunden-Onboarding und Benutzererlebnis ein für alle Mal zu beenden. Lernen Sie, wie Sie ein sicheres Onboarding-Erlebnis bauen können, das Ihrer Benutzerakquise nicht schadet.
5 Antipatterns, die unsere React/GraphQL App verlangsamt haben (Und wie wir sie behoben haben)
In meiner Präsentation werden wir uns auf eine Reise durch fünf Antipattern begeben, die unsere React/GraphQL App ausgebremst haben. Jeder Abschnitt beleuchtet einen bestimmten Fehler, die damit verbundenen Schwierigkeiten und wie wir diese schließlich meistern konnten.
Struktur und Inhaltsverzeichnis:
Over-fetching Data:
Ich zeige auf, wie Over-fetching — das Anfordern von mehr Daten als notwendig — eine App ausbremst.
Under-fetching und Multiple Round Trips: Ich gehe auf das Thema Under-fetching ein, bei dem wir zu wenig Daten angefordert haben und mehrfache Requests. Dabei zeige ich, wie wir durch das präzise Definieren unserer Datenanforderungen in unseren Abfragen mehrfache Serveranfragen vermeiden konnten.
Zweckentfremdung von GraphQL-Subscriptions: Ich zeige auf, wie der unsachgemäße Gebrauch von GraphQL-Subscriptions zu einer Flut unnötiger Daten geführt hat.
Übermäßige Verwendung von GraphQL-Fragmenten: Ich bewerte den Effekt der übermäßigen Nutzung von GraphQL-Fragmenten und zeige auf, wie ein durchdachtes Design das Fragment Over-fetching verhindern konnte.
Fehlen von Optimistic UI-Updates: Ich beschreibe, wie durch die Implementierung von Optimistic UI-Updates die Reaktionszeit der UI verbessern konnten.
Visual Editing goes Headless: Content Management für Entwickler mit Storyblok
Das Headless-CMS Storyblok wagt eine mutige Innovation. Mit Visual Editing könnt ihr den Inhalt eurer Seite ändern und erhaltet schon während des Tippens eine Live-Preview eures Frontends — mit allen neuen Änderungen.
In diesem Talk möchte ich einige Erfahrungen im Umgang mit diesem mächtigen CMS teilen und versuchen, bei euch ein kleines bisschen Begeisterung für dieses spannende Tool zu wecken, das deutlich mehr ist als nur ein “stumpfes Content-Repository”.
Signal and Noise: What We Learned From Using Signals for the Last Year
Signals are a core primitive of reactivity, used by frameworks such as Vue, Preact, SolidJS, and most recently Angular. But what are they, how do they work, and how do we use them effectively?
We wrote a spreadsheet tool using signals to build not just the UI, but also the engine of the software. In doing so, we learned where signals work well, where they work poorly, and how to get the most out of them. In this talk, I’ll describe some of the best practices that we’ve picked up, and to give an idea of how signals might be used practically in your projects.
JavaScript Plattformen — eine Welt im Wandel
Node.js war lange Zeit die einzige Alternative, wenn es um serverseitiges JavaScript ging. In den letzten Jahren sind jedoch mit Deno und Bun ernstzunehmende Alternativen entstanden. Und auch Node als Plattform ist einem stetigen Wandel unterworfen. Einer der größten Wendepunkte in der Entwicklung von Node war die Integration des ECMAScript-Modulsystems, doch es gibt noch zahlreiche weitere Anpassungen, die zeigen, in welche Richtung die Entwicklung geht: die Integration der Web-Standards. In diesem Vortrag erfahren Sie mehr über die Gemeinsamkeiten und Unterschiede zwischen den Plattformen und lernen die wichtigsten Design- und Architekturpatterns von serverseitigem JavaScript am praktischen Beispiel kennen.
Was kommt nach den SPAs?
Sie kennen doch bestimmt das “Gesetz des Instruments”: Wer als Werkzeug nur ein modernes Frontend-Framework hat, löst jedes Problem mit einer Single Page-Applikation. So oder so ähnlich, nur halt mit Hammer und Nagel lautet es, beschreibt jedoch ganz gut die aktuelle Situation der JavaScript Welt. Auf nahezu jede Anforderung wird mit einer aufgeblähten, clientseitig gerenterten SPA geantwortet. Doch ist es schön langsam an der Zeit, dass wir uns fragen sollten: Ist das wirklich alles? Und die Antwort lautet ziemlich sicher “Nein”. Doch genau diesem Thema widmen wir uns und werfen einen Blick auf die Alternativen und da gibt es viele. Im React-Ökosystem findet aktuell ein kleiner Umbruch statt. Mit Server Side Rendering, Static Site Generation, Server Components und Frameworks wie Next verschiebt sich ein Teil der Arbeit in Richtung Server. Dieser Trend ist auch bei Vue, Svelte und Angular zu beobachten. Und genau das ist es, was die sogenannten Meta-Frameworks ausmacht. Uns als EntwicklerInnen gibt das mehr Flexibilität, um auf Anforderungen reagieren zu können. Sie müssen nicht mehr den kompletten Quellcode zum Client übertragen, haben bessere Caching-Möglichkeiten und auch die Suchmaschinen sind Ihnen dankbar.
Dieser Vortrag gibt Ihnen einen Überblick über die wichtigsten Features von Meta-Frameworks und wo und vor allem wie sie gewinnbringend eingesetzt werden können.
Die neue digitale Realität — 3D Web
Entdecken Sie die aufregende dritte Dimension im Web. Gemeinsam tauchen wir in die Möglichkeiten ein, die Ihnen Ihr Browser mit WebGL und WebGPU bietet. Erfahren Sie, wie Sie mithilfe von Bibliotheken wie Three.js die Gestaltung im Web revolutionieren und den Nutzenden Ihrer Applikation ein immersives Erlebnis bieten können.
Lernen Sie neue Muster und alte Bekannte in einer neuen Umgebung kennen. Erfahren Sie, wie Sie mit einer 3D-Szene interagieren und mit Animationen das Engagement der Nutzenden Ihrer Applikation vertiefen sowie die Benutzerführung verbessern können.
Den Höhepunkt bildet der Schritt in die erweiterte Realität im Browser mit der WebXR-Schnittstelle. Mit deren Hilfe können Sie beispielsweise virtuelle Objekte in der realen Welt verankern.
Atomic Design und Storybook: Die perfekte Kombination für effiziente UI-Entwicklung
Atomic Design ist ein Ansatz, Komponenten für eine Applikation strukturiert zu entwickeln.
Der Code bleibt dadurch gut separiert und übersichtlich. In Kombination mit Storybook bietet es Entwicklern die ideale Plattform, um Komponenten zu entwickeln, zu visualisieren, zu testen und zu dokumentieren. Nicht nur die Entwickler profitieren vom Storybook, auch viele andere Stakeholder wie Product Owner und UX-Designer können es nutzen.
Wir stellen in unserem Vortrag Atomic Design vor und zeigen, wie man es mit Storybook umsetzten kann. In Live-Demos zeigen wir automatisierte UI- und Accessibility-Tests in Storybook.
From Ugly Duckling to Beautiful Swan: My Journey with Tailwind CSS
In this speech, I will take the audience through my personal journey with Tailwind CSS – a journey that transformed my perspective from initial skepticism to an unwavering admiration. The proposal covers the initial negative impression I had, the reasons that compelled me to give it a chance, the aspects that made me fall in love with it, and practical insights on how to get started with Tailwind CSS while overcoming common cons often associated with its usage. In the end, the audience should feel inspired to give Tailwind a try and have the knowledge and tools to start using Tailwind effectively.
Micro Frontends mit Collage
Das Microservice-Pattern bringt viele Vorteile mit sich, die auch im Frontend sehr hilfreich sein können. Gerade in großen Projekten, in denen viele Applikationen entstehen und interagieren müssen. Hier stoßen viele Bibliotheken an ihre Grenzen. Diese richten sich oft an den one big frontend use case, sind teilweise nicht Framework agnostisch oder flexibel genug. Aus diesem Grund haben wir eine eigene OpenSource-Bibliothek entwickelt, die sich vor allem auf folgendes konzentriert:
- Frameworkagnostizität
— Scope Isolation
— Flexibilität
— Leichtgewichtigkeit
— einfach zu bedienen