Talks 2022

Why do developers keep giving their work away for free? Drawing on years of open source projects and of building Sizzy, a browser for developers, this talk makes the case for solving your own problems and charging properly for what you build. The second half shows the other side: marketing to developers, hiring, customer support and the pressure of running a bootstrapped product, and why happiness doesn't depend on being number one.

What changes when a React web developer moves to React Native? This talk walks through the differences that catch people out: everything becoming a View, Text and TextInput instead of HTML tags, unitless dimensions, buttons that look different on iOS and Android, ScrollView, and crashes caused by rendering strings like 0 outside a Text component. It also covers the pain of upgrading React Native versions and dealing with differences between iOS and Android devices.

This talk introduces GraphQL and shows how it addresses over-fetching and under-fetching compared to a REST API, using the Star Wars API as an example. Through live coding in a Next.js app against the public Northwind GraphQL API, we'll set up Apollo Client and ApolloProvider, fetch data with the useQuery hook, pass variables to query a single product, and create, update and remove products with mutations.

Monorepos promise shared code and consistent standards, but they bring module resolution problems, build orchestration, slow CI, versioning and endless chores. This talk looks honestly at those costs first, then shows a setup that solves them once: pnpm workspaces, Turborepo for task pipelines and remote caching, Changesets for versioning and changelogs, Renovate for dependency updates, and GitHub Actions for releases and deployments.

Micro-frontends let autonomous teams own and deploy parts of an application independently. This talk explains horizontal and vertical splits, routing and composition, then demos a Next.js container with Turborepo that hosts separate React micro-frontends. It also shows how Prisma ORM can give each micro-frontend its own schema and direct database access, so teams can be independent end to end without waiting on a separate backend team.

React.memo, useMemo and useCallback are often added everywhere in the hope of better performance. This talk rebuilds useMemo and useCallback as custom hooks to show how memoization and shallow comparison really work, then looks at where they help, such as memoised child components and expensive table computations, and where they only add cost, such as wrapping primitives or cheap array operations. It closes with tools like why-did-you-render for finding unnecessary re-renders.

Fetching data with useEffect and local state means writing the same loading and error boilerplate again and again. This short talk shows how React Query simplifies it: the useQuery hook and query keys, mutations with query invalidation, the difference between server state and client state, and built-in features such as automatic retries, request deduplication, refetching on window focus and the devtools.

Learning Remix means learning the web platform: the Fetch API, HTML forms, FormData and URLs. This talk explains what Remix is (a compiler, a server-side HTTP handler, a server framework and a browser framework) and its philosophy of progressive enhancement. It then covers the fundamentals you need to start building: nested routing, loaders for data and actions for mutations, and how Remix handles race conditions, with a short comparison to Next.js.

A set of practical tips for web developers building their first React Native apps. The talk covers testing on real devices, styling with styled-components, using the native stack from React Navigation, caching with Apollo Client, removing console.log calls with a Babel plugin, rendering long lists with FlatList and Shopify's FlashList, handling offline states with NetInfo, and debugging with Flipper.

Error reporting and dashboards only tell you that users are suffering after the fact. This talk shows how to add observability to a React application with OpenTelemetry: traces, spans and context, setting up the web SDK and auto-instrumentation for clicks and fetch requests, and connecting frontend traces to the backend. With a demo app built on React Query and React Router, it shows instrumented versions of useQuery and useMutation and how to group a page's requests under a single span.

Every click is an interaction, but not every interaction is a click. This short talk looks at how to make clickable elements in React apps accessible: using real buttons and links, building a button component that renders a link when needed, aria-current for navigation and aria-pressed for toggle buttons, and why accessible dialogs are harder than they look. It also points to React Aria, eslint-plugin-jsx-a11y, axe-core and the native details element.

ReScript looks like JavaScript, compiles to readable JavaScript and has a strong type system with type inference. Using an appointment-booking app for a hospital as the running example, this talk shows how ReScript's fast builds, variants and pattern matching help catch problems early, how the compiler optimises the generated output, and how modelling and counting your states keeps complexity down. Along the way it argues for starting from your users' needs rather than from the technology.

Starting from a simple to-do app, this talk shows how asynchronous code written with promises keeps getting harder: sequential awaits, unbounded concurrency, limiting concurrency with workers, and interrupting work with AbortController. It then introduces Effect, a TypeScript library with a fiber-based runtime, and shows how its lazy effects, typed errors and dependencies, and built-in concurrency control, interruption and tracing solve the same problems more cleanly.

How do you keep a growing React application from turning into a tangle of layers that do too much? This talk applies Robert C. Martin's Clean Architecture to the frontend: domain entities, application use cases, and adapters for APIs, storage and third-party services, connected by the dependency rule. Using a simplified e-commerce cart and checkout in React and TypeScript, it shows how to structure a project, isolate business logic and keep it testable, and what trade-offs this brings.

Developers are rarely like their users: they have different devices, incomes, education and internet plans. This talk explains why that matters and how to get closer to real users through user research, interviews, surveys and personas, using examples from a fintech app. It finishes with a demo of validating ideas through feature flags and A/B testing, built with Firebase, Google Analytics and GrowthBook.

Type systems help you avoid runtime errors in your users' browsers. This talk introduces TypeScript as a typed superset of JavaScript and GraphQL as an API with its own type system, then combines them for end-to-end type safety. Using the GraphQL schema as the single source of truth, it shows how GraphQL Code Generator produces TypeScript types for queries and operations in a React app, so you no longer write and maintain those types by hand.

useEffect is not a lifecycle hook, and treating it like one leads to infinite loops, extra renders and effects that run twice in React 18 Strict Mode. This talk explains the synchronisation mental model behind useEffect and shows what to use instead: compute derived data during render, run fire-and-forget effects in event handlers, fetch data with render-as-you-fetch, keep one-off initialisation outside components, and model state transitions and effects with state machines.

What are fibers, and how do they let React schedule, pause and resume work? This talk explains fibers as stack frames for components and units of work, and shows how to inspect and manipulate the fiber tree, including a pattern-matching component built by reflecting on React elements. It then connects fibers to coroutines, continuations and algebraic effects, builds a small cooperative scheduler with generators, and relates it to Suspense, transitions and concurrent rendering in React 18.

Good UI and UX matter for end users, but also for the content editors who maintain a site. Starting from a real story of bad UX, this talk shows how to connect a Remix app to Storyblok, a headless CMS. Using the Storyblok React SDK, it covers storyblokInit, rendering dynamic components with StoryblokComponent, and enabling real-time visual editing with storyblokEditable, so editors can build and update pages without developer help.

How do you build a design system once and use it in both React and React Native? This talk follows the approach behind Razorpay's Blade design system. Using a Text component as the example, it compares separate platform teams with React Native Web, then shows how to share styles and APIs with platform-specific .web and .native files, test both platforms with Jest, configure Babel, Metro, webpack, ESLint and TypeScript, and bundle each platform separately with Rollup, including a single types bundle.

A quick tour of how JavaScript values end up as zeros and ones in memory. Starting from bits, bytes and memory addresses in RAM, this talk explains how V8 uses the stack and the heap, how primitives such as small integers and interned strings are stored, how objects are passed and modified by reference, and why that matters for props and state in React. It closes with how garbage collection uses mark-and-sweep to free memory you no longer need.

Static sites are fast, cheap, secure and easy to scale, but rebuilding every page for every content change doesn't scale. This short talk reviews static site generation, server-side rendering and client-side rendering in Next.js, then explains Incremental Static Regeneration, which regenerates individual pages in the background after deployment. A demo compares how each rendering strategy reacts when the content changes.

From IIFEs, CommonJS and AMD to Browserify and webpack, this talk traces how JavaScript bundling evolved and why big projects get slow feedback loops. It then explains how Vite takes advantage of native ES modules in the browser, with a dev server that serves modules on demand with fast hot module replacement, dependency pre-bundling with esbuild and production builds with Rollup. It finishes with how to add Vite to an existing React project, including plugins and environment variables.

Much technical content on the web still looks like printed paper, even though code examples change step by step. Taking the Build your own React tutorial as a case study, this talk shows patterns for more dynamic programming content: interactive widgets, live code editors, code tabs, spotlight and scrollytelling, always with a static fallback. It also covers tools to build them, including MDX, Sandpack, the StackBlitz SDK and Code Hike.

How do you let customers control their home heat pump from a web app? This short talk walks through the OAuth 2.0 authorization code flow used to connect a React app to a manufacturer's API: the roles of resource owner, authorization server and client, building the authorization URL, using the state parameter against CSRF, exchanging the code for an access token, and tools such as Requestly and ModHeader for testing the flow against production.

When should you build a domain-specific language instead of a complex rule-builder UI? Based on a DSL for supplier discounts and rebates at an e-commerce company, this talk explains the trade-offs of small languages without loops or recursion: easy to read, copy and sandbox, but you have to build the tooling. It then shows how to write one in TypeScript: a hand-written parser with clear error messages (compared with PEG.js), an abstract syntax tree and a simple interpreter.

Shopify's charts used to be inconsistent in style, accessibility and implementation. This talk explains how Polaris Viz, an open-source React chart library built with SVG and D3, made them consistent, with accessible charts that screen readers can read like tables, meaningful motion and themes. It then shows how the team shared code with React Native by moving constants, utilities, themes and D3 calculations into a platform-agnostic core package used by separate web and native packages.

State machines are becoming common on the frontend, but what does it take to run them on the backend and at the edge? This talk introduces pause states, timeouts and persisting a machine between stateless HTTP requests. Using XState's waitFor, a machine serialised into a cookie and Remix loaders, actions and form submissions, it builds a swag store checkout where routes map to states and the browser's back and forward buttons keep working.