Talks 2024

React has been through some major changes in its 11-year run. From classes to hooks, from the client to the server, some folks feel like they don’t recognize it anymore. I think if we look a bit closer we’ll see that the heart of React has never been more stable, and it’s still all about component composition. In this talk we’ll explore how newer features like Suspense and server components build upon familiar core concepts, offering a more composable way to build across the stack.

In this talk, we explore the application of React Server Components (RSC) to elevate the functionality and efficiency of forms. We will touch upon the core principles of RSC and their benefits, such as improved load times and streamlined server-side processing. Additionally, we’ll learn the latest advancements in React 19 and the introduction of multiple new hooks.

Attendees will gain insights into practical strategies for integrating RSC into forms, focusing on enhancing user experience and reducing front-end complexities.

As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience. The good news is you _can_ learn how to debug effectively, and there are several key techniques and tools you can use for debugging JS and React apps.

In this talk, we'll look at:

- Core principles and steps for approaching debugging - How to use both print logging and GUI debugging tools effectively - Specific tips for debugging JS code - Approaches and techniques for debugging React components and Redux logic

State machines turn tangled UI logic into something you can draw, read and reason about. Starting from the core vocabulary (states, transitions, events, guards, actions, context and actors), this talk live-codes an autocomplete search box with XState and TypeScript, designing the machine visually in the Stately VS Code editor and then wiring up callback actors for searching and keyboard navigation. It closes with the trade-offs: local reasoning about logic, simpler declarative React components and diagrams non-developers can review, against a real learning curve.

Astro 4 has been out for a while and brought some amazing new features with it. Even more recently, we announced and presented Astro db and Astro Studio. An SQL platform for Astro developers. In this talk, we’ll take a look at some of the newly released features in the wider Astro universe, and how 2023 was such a crazy and amazing year for Astro.

We'll dive deeper into some Astro concepts, like Islands architecture, view transitions, and how they changed the future of website development.

Of course, we'll do some live coding and have some fun. After that, let's take a look at what’s coming next for Astro.

Accessibility is the result of an inclusive process, not a checklist, and AI can help or hurt along the way. This talk looks at disability as context-dependent, inclusive language and team practices, and how bias and "data deserts" in training sets affect AI tools. It then maps which WCAG 2.2 criteria still require manual testing and shows where GitHub Copilot can genuinely assist, such as alt text and reviewing code, while stressing that developers remain responsible for verifying its output.

A static site is just a frozen snapshot of a server-rendered one, so React Server Components work there too. Comparing Next.js getStaticProps and Gatsby's useStaticQuery with async server components, this talk shows component-level, build-time data fetching with dynamic props, zero-JS processing like Shiki syntax highlighting, and how to enable it with Next.js static export.

tRPC gives you type-safe remote procedure calls with autocompletion from server to client, and its core trick is the JavaScript Proxy. This talk explains how tRPC builds its typed client with proxies and recreates the pattern on top of Meteor methods, showing how to bring end-to-end type safety and in-editor documentation to an existing API.

Diagrams help you organise your thinking and communicate with technical and non-technical people alike. Using the planning of a team offsite as a running example, this talk introduces entity-relationship diagrams, state machines and sequence diagrams, and points to tools such as dbdiagram.io, Eraser, tldraw, Swimlanes.io and Stately for drawing them.

A simple to-do app shows how naive state that stores only the final result breaks down as requirements grow. This talk makes the case for modelling domain events (event sourcing) instead of squashing them into state, using Linear's custom sync engine as an example of a technical choice that becomes a product advantage, and encourages learning from solutions outside the JavaScript world.

Passwords have been leaking since the 1960s, and SMS or email codes are not much better. This talk explains passkeys, built on the FIDO standards and public-key cryptography, walks through the WebAuthn registration and login flows between authenticator, browser and relying party, and shows a live demo of passwordless sign-in.

Using a hardware controller for Chrome DevTools as a story, this talk looks at how to keep pet projects alive: scale ideas down instead of abandoning them, keep a graded backlog based on usefulness and joy, and accept that shipping and handling edge cases is the hardest part.

Slow, flaky end-to-end pipelines are expensive. This talk presents isolated integration testing with Playwright: running the application, a mocked GraphQL backend and even micro-frontends on the same machine as the tests, so suites run in merge request pipelines without deployments and can be reused against real environments by switching the URL.

React Three Fiber is a React renderer for Three.js that lets you build 3D scenes with components, props and state. This talk covers how it sits on top of WebGL, WebGPU and WebXR, walks through a basic interactive example, and surveys use cases such as product and data visualisation, digital twins and games, plus where to get 3D models.

Whenever you are receiving data for your APIs, or just reading it from some local storage, you can't assume anything. Sure you had your beautiful typescript typings, but at runtime they are gone. That's why people use tools like zod to ensure the incoming data is fine. But then you have to encode back the data to send or store. And thats additional work using other libs and code. And maybe now you need to also provide open api description for your API request body and update that as well. And that's other code as well. And maybe you need to version your request body to support multiple versions of the input? And that other code. And maybe your backend is not written in javascript and you need to keep updated definitions of two different languages.

Don't you agree this is a complete mess? Are we doomed?

Let's see together how @effect/schema is able to help with all of that with a single centralized point of defining your data schema's, and automatically provides functionalities such as encoding/decoding/parsing and even allows us to write custom interpreters to build tools that for example generates JSON schemas or custom code for your structures! We can even define models that accepts older versions of the structures and automatically updates them to the latest one!

All with a single centralized data schema definition.

Signals are everywhere outside React, but what exactly are they? This framework-agnostic talk explains pull, push and push-then-pull architectures, what makes a reactivity system fine-grained (efficient and glitch-free), and compares React and SolidJS re-execution side by side. It then digs into lazy versus eager signals, the diamond problem, scheduling, and why SolidJS chose an eager-by-default hybrid model.

Responsiveness is more than screen sizes: it means adapting to inputs, devices and user preferences. This talk covers rem-based and fluid typography with clamp(), choosing CSS units, breakpoints and media queries in rems, container queries, :focus-visible and :has() for keyboard users, the hover and pointer media queries for touch, reduced motion, and design-system-level patterns such as drawers on mobile. It finishes with a React overflow menu that measures available space in JavaScript.

React has quite the history. From React.createComponent to server components, React has evolved to be a mainstay in web development. But let's be honest, there's many un-use-ual things about React. In this talk, we'll revisit React's lifecycle from being a sprinkle of interactivity to wanting to be its own language, with plenty of puns, nostalgia, and a peek into the future of our favorite not-a-framework.

Explore the journey from chaos to clarity in building scalable software. We'll unravel fundamental React components, dissect common chaos-inducing practices, and progress to advanced patterns. Central to our discussion are tried-and-tested design patterns, providing blueprints for robust, scalable, and maintainable applications. By the session's close, you'll wield a comprehensive toolkit of design patterns and best practices, empowering you to transform unruly codebases into structured, scalable React applications. Join us on this transformative journey from zero to hero in software scalability within Javascript ecosystem.

In this talk, we'll explore how OCaml, with its robust type system, can be used alongside React to create type-safe web applications. We'll introduce Melange, a compiler that seamlessly compiles OCaml to idiomatic JavaScript, a comprehensive set of React bindings in ReasonReact, and demonstrate how to adopt this setup incrementally. Attendees will learn about the differences in developer experience between using React in OCaml and TypeScript. They'll also learn how to interface with JavaScript libraries using foreign function interfaces (FFI). We'll also cover testing strategies and essential tooling to streamline your development workflow. By the end of this session, you'll have a practical understanding of how to leverage OCaml and Melange to enhance type safety in your React projects.

Forms are at the core of web development, but working with them can also be challenging. As they get more complex, they become harder to write, maintain, and validate effectively.

Introducing a new way of writing forms, using Vest - a new breed of validation framework that changes the way we handle form validation using the declarative and expressive syntax and style of testing libraries.

We will cover the history of forms on the web, why it is so hard to validate them - and how to fix that. We will together step up our form validation game by taking a complex validation scenario and make it simple using Vest.

Different teams have different practices when it comes to code review. As a senior software engineer, working in the industry for over a decade, I have seen and experienced various code review processes. In this talk, I will share the best practices I have learned for conducting an effective code review. These practices will improve your code review process and contribute to your team's productivity, delivery, and quality of features.

This talk will explore patterns for dealing with debouncing, optimistic updates, concurrency and asynchronous requests in the context of building React applications. We'll look at some broken approaches to implementing these features. By the end of this talk, you'll be able to confidently write reliable code for complex asynchronous interactions.

A fast tour of what React 19 brings: how the React Compiler works and how to enable it, server components compared with classic SSR, actions and async transitions, useActionState and useFormStatus for forms, new resource-loading APIs, and how to upgrade, including removed APIs, codemods and the React 18.3 stepping stone.

Good mentoring is less about giving advice and more about asking questions. Drawing on the move from mentee to mentor, this talk describes the "advice monster" and contrasts leading, yes/no, closed, open-ended, follow-up and "dumb" questions, showing how each helps people find their own answers.

Built for a hackathon during the pandemic, this crowdsourced app helps people find scarce items and avoid queues in shops. The talk walks through the stack: a React Native app with Expo location, store data from the Yelp Fusion API, and a Prisma backend covering schemas, migrations and typed CRUD queries.

Modernising a legacy codebase still running React 15 and webpack 1 is a performance project in itself. This talk covers upgrading dependencies behind a feature flag using generated code and jscodeshift transforms, code splitting with lazy and Suspense, swapping in Preact for production builds, and module/nomodule differential serving, along with the bundle-size and Web Vitals gains.

Frontend developers do not need to know everything to have full-stack impact. This talk shows practical openings: automating commit and code-style checks in CI, using Renovate, reshaping APIs and adding backend caching instead of frontend workarounds, keeping types in sync with code generation or tRPC, and spotting security issues like unsanitised redirects.

Storybook makes it possible to catch accessibility issues component by component. Through a live demo, this talk uses the accessibility addon and axe-core with Playwright to find colour-contrast failures and nested interactive controls, inspect the accessibility tree and fix issues in isolation, while showing why automated checks still need manual testing.

Does TypeScript make your code run faster? This talk explains what types are, soundness versus completeness, and how a JavaScript engine like SpiderMonkey runs code using bytecode, inline caches and Baseline and Ion JIT compilers. Because TypeScript types do not guarantee runtime types, the engine cannot rely on them, though more predictable code still helps.

Meta-frameworks speed up shipping, but opinions can lock you in. This talk presents SolidStart as an unopinionated starter built on Vinxi, Vite and Nitro, and demos preloading, cached server functions, server actions and single-flight mutations that return updated data in one round trip.

Server-driven UI lets you ship new screens and features to a React Native app without a new release. Starting from Uprising, the app that controls a large LED art installation, this talk introduces Rise Tools: JSX defined on the server and rendered by native components on the client, connected over WebSockets. It covers state, query and view models, client-side actions such as navigation, adding Rise components to existing Expo Router or React Navigation apps, and npm create rise, ending with a live audience demo.

Inspired by nature, genetic algorithms have existed for decades and have been used to solve a variety of problems in software and hardware. When it comes to game development, it can be challenging to adapt content to players of varying skill levels. In this talk, we’ll experiment to see how genetic algorithms might be used in games that React developers can create with their everyday skills and creativity. See GAs in action as they attempt to solve problems, enhance player engagement, and continuously evolve game experiences.

In the world of software development, meeting deadlines is often considered the primary indicator of a project's success. Teams work hard to ensure timely delivery, celebrating their achievements once the project is completed. But is meeting deadlines truly enough to deem a project successful?

During my talk, I will explore the shortcuts often taken to achieve timely delivery, as well as their hidden costs. These shortcuts range from working excessive hours and compromising work-life balance to damaging team relationships and accruing technical debt. I would like to highlight the importance of comprehensive project management, emphasizing that success should be measured not just by the launch but by the entire process.