Talks 2023

React is and has fundamentally been a developer health tool. In this talk, we will dive deep into some of the niceties React delivers for us with live code, and understand why the common conventionality of React is to move closer to server-side applications.

SolidJS looks almost identical to React on the surface, but works very differently underneath. Starting from imperative, declarative and reactive programming, this talk explains signals, derived signals and createSignal, then walks through the classic footguns React developers hit: signals as getter functions, component functions that run only once, reading values outside JSX and destructuring props. It also covers effects, memos, control-flow components such as Show, Switch and For, stores, context and directives, and why fine-grained reactivity without a virtual DOM makes Solid so fast.

It's time to play your tests wright. Let's take a look at how to write good tests and cover some of the best practices for testing, choosing the right locators and more. Let's make testing easy and fun by generating tests on user actions. Then lets explore some cool tips and tricks to help you write better tests.

TypeScript can be extremely helpful in building reliable applications, but a lot of it's benefits are lost when parts of your application are not type safe. In this talk I'll give you all the knowledge you need to be able to ensure your entire application is type safe, from SQL databases, through GraphQL resolvers on the backend, to a GraphQL client on the frontend. I'll even cover how to deal with external REST APIs where there might be no way to automatically generate types.

Text Containers are one of the most widely used features when it comes to whiteboard, isn't it? In my talk, we will be diving into how these text containers work under the hood in Canvas and I will also be sharing my experience building text containers in Excalidraw (https://excalidraw.com/) - A virtual free Open-Source collaborative end-to-end encrypted canvas based editor for sketching hand-drawn diagrams.

While the technology goes further and further, web development tries to get closer to the user. CDNs and web servers are evolving, and they now offer us the possibility to execute server-side logic without depending on a unique data center located in a specific place in the world. Let’s present the concept of The Edge. We will see how it works, and we’ll talk about Edge Functions. We’ll discuss why the main hosting providers are introducing this technology, and why different JavaScript frameworks are modeling their approaches based on Edge computing.

A quick overview of tRPC and how it compares with REST, GraphQL and gRPC. A full-stack Next.js demo shows end-to-end type inference from server router to client, refactoring with instant compiler feedback, the TanStack Query integration and request batching with links, followed by the use cases where tRPC fits best.

Building React Native apps with Expo brings surprises that only show up on real devices. This lightning talk covers four of them: oversized Google Fonts bundles crashing Android builds, replacing localStorage with AsyncStorage, rendering CMS HTML with react-native-render-html, and the && conditional-rendering trap with non-boolean values.

React DevTools offers two tabs, Components and Profiler, that make re-render problems visible. After a tour of both, the talk walks through six common performance mistakes found with them, including components defined inside components, unstable initial state, state kept too high in the tree, and missing useMemo or React.memo on props and context values.

Breaking changes slow down a library's feedback loop because consumers postpone upgrading. This lightning talk shows how codemods can automate those migrations: how jscodeshift parses code into an abstract syntax tree, a codemod that swaps a breadcrumb Label component for a Link, how to run it, and how to unit test it with defineInlineTest.

A side project about maze generation becomes a tour of graph theory, grids and algorithms. The talk explains depth-first search, flattening a 2D grid into a single array with index math, and modelling the recursive backtracker as a statechart in XState, then demos an animated maze generator built with React, the Canvas API and sound.

Accessibility depends on context, so component libraries cannot anticipate every use case. This talk presents three patterns that give consumers more control: a tag prop to choose the semantic HTML element, extending props to accept ARIA attributes, and exposing the underlying DOM node with forwardRef. It closes by weighing that flexibility against the risk of misuse.

Which GraphQL client should you use? Using the State of GraphQL survey results, this talk compares the options: plain fetch, graphql-request, TanStack Query, Apollo Client, urql and graphql-hooks, looking at caching, extensibility and bundle size. It then explains why Relay, with its compiler, colocated fragments and normalized store, is often undervalued.

Our ecosystem can be overwhelming! First, we had the rise of SSR and SSG—and each had its own gigantic pile of frameworks and tools. Then partial hydration enabled us to hydrate only some of our components on the client, which we've seen in React Server Components.

But what about islands? Do they relate at all to Streaming SSR? Moreover, what is resumability, and why do I keep hearing about it? […] Oh, did anyone say rendering on the Edge?

Well… There are many approaches out there, and all of them argue that their philosophy is best. In this session, we’ll go over these architecture/rendering patterns, to help shed some light on how some are implemented and the concepts behind them.

How many times have you had to wait for your backend team to finish building the API so you can start your tasks? What if all you needed to move that task to in progress was the API contract? What if there was a library that did this for REST and GraphQL APIs and, at the same time, taking your tests to the next level? Join me and prepare to enhance your developer experience while learning all the battle-earned experiences of using one of my favorite libraries: Mock Service Worker.

Web forms are crucial for user interaction on the web, and to ensure our products provide an inclusive experience for all, we need to build them with accessibility in mind. In this talk, we'll dive into best practices and practical tips for crafting accessible forms that won't leave anyone behind

We’ll start by diving into what accessibility is and how assistive technology works on the web. With this foundation, we’ll go through common patterns in forms and how to implement them accessibly. We’ll talk about: labelling, providing instructions, errors and validation, testing, managing focus, and more – all backed by practical examples in React.

It’s been 10 years since a small team at Facebook pitched this wacky idea to the greater JavaScript community that ultimately changed the way we all write and think about software on the web. Its core proposition—that UI should be expressed as a function of state—has stood the test of time.

In the years since, we’ve seen continuous efforts to move to the next thing, with brilliant engineers shipping capable alternatives and new modes of thinking about UI. In this talk I’ll explain why I believe React is still the right bet, why its mental model remains a thing of beauty, and why it will continue to grow in a sea of frameworks for years to come.

Every application has some business logic that lives across multiple requests, sessions, and sometimes this logic may even take multiple days between mutiple interactions or actors before completing. Login workflows, Warehouse processes, wizards inside our applications, the examples are everywere. Is this just a backend problem? Not at all! Even in the frontend and in react applications we have workflows. And what happens if one of the steps fails? And if the process needs to be shutdown? In this talk well discover together and explore the different solutions to implement long running processes in JavaScript by using statecharts, event sourcing and generators and see pros and cons of each approach. I'm sure you'll go back home knowing how to identify long running processes, and various ways to implement those in your application.

Hydration forces today's frameworks to re-execute the application in the browser before it becomes interactive, which hurts time to interactive on slow networks and devices. This talk explains resumability as introduced by Qwik: serializing application state and closures into HTML, QRLs, the tiny Qwik loader and the optimizer's dollar-sign lazy-loading boundaries, so code downloads only on interaction. It also shows how to get started, how Qwik React (qwikify$) reuses existing React components, and what Qwik City adds for routing and layouts.

server-reason-react is an implementation of react-dom/server and some of React's internals in OCaml. Its purpose is to render HTML markup from the server for a Reason React application natively. This talk provides an overview of some of the concepts of the library, what it means to render React in OCaml, how we use it at Ahrefs.com, a benchmark against a Node equivalent, and the future of all of this.

Has your once-thriving digital garden become overgrown with weeds? Has your framework of choice changed from a suite of landscaping tools to a warehouse of industrial farming equipment? What if you're three versions behind? Do you upgrade and continue with complexity, or choose a new stack that meets your static site needs?

This talk will teach you to weed out site complexity with Astro, SolidJS, and MDX. Pair this with accessibility best practices, and breathe new life into your digital garden.

React has exploded in popularity thanks to the performance and unrivaled developer experience the virtual DOM and reconciliation could offer. But as our apps grew, we started pushing the boundaries of managing client state in a performant way. Recently Signals have caught attention and curious eyes of developers that wish by default fine-grained control of how their applications re-render based on user actions. Let's have a look at the difference and how to achieve similar results with each paradigm.

Microfrontends promise independent teams and deployments, but the composition technique matters. Based on a client project with Next.js, React and Vercel, this talk compares the Turborepo multi-zone approach, with its rewrites, dependency resolution and testing headaches, against Module Federation with webpack and Vite, including vertical versus horizontal splits and federated design systems.

Practical advice for growing faster as a junior engineer: treating mistakes and debugging as learning, understanding the business context behind a task, communicating clearly, asking for feedback, finding mentors, taking on challenges outside your comfort zone and staying consistent.

React apps can suffer from unnecessary re-renders, growing bundles and context updates that ripple through the tree. This lightning talk compares React with SolidJS, whose fine-grained reactivity runs components once and updates only what changed, and shows how migrating code from useState and map to createSignal and For, plus derived signals, memos and effects, can improve performance.

When a component library falls short and you must build your own, accessibility should come first. Focusing on screen readers, keyboard access and speech input, this talk walks through accessible markup for common components: breadcrumbs with nav, ordered lists and aria-current, toasts with live regions and role="status", and tabs with the tablist, tab and tabpanel roles.

Building a Chrome extension in React means working within the browser's extension model. Using a sample Gmail auto-reply and notes extension, this talk covers the Create React App setup, a Manifest V3 file, side panels, permissions, the background service worker, content scripts, message passing between them, and calling external APIs with fetch without CORS errors.

What does it really take to make money with a side project? Through a series of apps, from a meetup site and a crypto portfolio tracker to a picture-guessing game, this talk discusses acquisition costs, maintenance burden, ethical choices about monetization, piracy, and real advertising and revenue numbers, ending with why you should build what you enjoy.

Code review is demanding, unrewarding and full of soft-skill traps. Using a story of a junior's pull request about a banner flag stored in cookies, localStorage and useSyncExternalStore, this talk maps the motivations behind reviews, from code protection, revenge and showing off to duty, knowledge sharing, growth and empathy, and how to give and receive feedback constructively.

Managing state is complicated. Humans are even more complicated. As developers, it's our job to deliver seamless and intuitive user experiences, but the sheer complexity of human behavior and the real world can make this a daunting task. In this talk, we'll explore a radical new approach to app development where language models (LLMs) and reinforcement learning (RL) can be used to handle app logic in a more intelligent and human-centric way. We're bringing artificial intelligence to state management in ways that go much, much further than existing methods. You will learn how you can leverage AI in your existing code to create the best UX possible, and peer into the future of AI and the path to AGI.

Ever got frustrated typing the `as` prop in React components? How about this in combination with `forwardRef`? To put it short: It's not easy. Let's delve into strategies for constructing Compound Components, Polymorphic Components, and Components wrapped in forwardRef, while avoiding the use of type casts and ensure precise TypeScript typings.

You've no doubt heard the terms "imperative" and "declarative" before, and you probably know that developers strongly prefer the latter whenever possible. But just how clear are you on what these really mean, when it comes to writing lines of code in your app? Most of us probably just wing it or feel "I know it when I see it."

Debates have raged for decades on this topic. In this talk, I'll drive straight into the eye of the storm and try to sift through what it all means for our apps. We'll look at how these concepts play out in a variety of webdev technologies, from HTML, to CSS, to JS, to (yes!) React... and more along the way. I hope you've brought your raincoat!