Short Bio

swyx is an Infinite Builder working on Developer Experience at Netlify. In his free time he helps people Learn in Public at and /r/reactjs.

Selected prior talks:

React Rally: React NYC: React Boston:


Getting started with React + TypeScript

TypeScript is increasingly being adopted in React apps at scale, from AirBnb to Shopify to Atlassian. In this live coding talk, we walk through best practices and introduce everything you need to know to get started, WITHOUT getting lost in arcane generic type logic!

A Skeptic's Intro to the JAMStack

A delightful exploration of how JavaScript web apps, serverless APIs, the static-site renaissance, and Git-centric workflows are enabling a whole new architecture, from a fellow skeptic wary of marketing acronyms.

Abstract (Detailed description of your presentation, including key audience takeaways)

The JAMStack stands for JavaScript, APIs, and Markup, and at first glance it seems a truism - of course everyone uses that, right? What kind of stack is that? At its core, however, it describes a new architecture for web apps and sites that is at the confluence of multiple trends in serverless, JavaScript frameworks, static site generators, and Git-centric workflows.

Over the past 20 years, the stack of web apps has slowly shifted from fully server-side driven (LAMP) to a "full stack" straddling front-end and back-end (MEAN). Thanks to furious innovation in JavaScript and serverless technologies in the last 5 years, the stack has shifted even further forward to empower front-end developers to be responsible for fully dynamic web app experiences on par with mobile apps. JavaScript frameworks like React have arisen to make writing compenentized web apps much easier. Their ability to statically render and rehydrate have allowed a new generation of static site generators like Gatsby and Vuepress to offer dynamic and fast experiences previously not possible for static sites. On the backend, the proliferation of the third party API economy and the launch of AWS Lambdas and other serverless functionality make it ever easier to build without a monolithic server. This allows a clear decoupling between front-end and back-end, and a fundamental re-examining of the application delivery architectures as a direct result. By leaning on serverless functions and static-building, we can use a Git-centric workflow to eliminate a lot of the complexity inherent in today's architectures, with direct implications for reliability, security, performance, and simplified caching. Finally, we can unlock new possibilities with the new JAMstack architecture, like deploy previews and atomic deploys.

Who is this presentation for?

CTOs, VP Engs, Web App Team Leads

What's the takeaway for the audience?

  • JAMStack is shorthand for a fundamental rethinking of web architecture taking advantage of latest technologies in serverless and JavaScript.

Getting started with React + TypeScript


Learning from 100,000 React Developers

React communities exist in many spaces online, and they don't all overlap. In this talk we explore statistics and quotes from /r/reactjs, answering burning questions everybody wants to know: What technologies are people interested in? What do beginners struggle with? What are companies hiring for?

At present growth rates, /r/reactjs will surpass 100,000 subscribers in April, and I feel React Amsterdam would be the perfect place to celebrate this benchmark and reflect on our learnings and what the broader community can take away from it.

Talk structure:

  • Why do people like discussing React on Reddit?
  • The recent history of React in 2018 and 2019
  • Projects that React beginners can try
  • What do beginners struggle with? A visualization
  • Unresolved debates in React
  • What are the biggest library and blogpost launches?
  • What are companies hiring for?
  • Dark Matter Devs and why we all need to participate more in the online discussion

STAR Apps: Design Systems, TypeScript, Apollo GraphQL, and React

A new front-end stack is emerging. They involve building Design Systems for visual consistency, using TypeScript for internal consistency, Apollo GraphQL for data manipulation, and server- or statically-rendered React for data representation. In this talk we explore how these trends fit together, and why leading product teams from AirBnb to the New York Times are embracing them.

Talk structure:

  • Introducing and defining Design Systems and the tools used
  • Introducing TypeScript and why teams have embraced it for large React apps
  • Introducing Apollo and why it has become the leading GraphQL client for React
  • Discussing server-side (Next.js) vs static (Gatsby) React and React is growing at ~70% annually
  • Exploring combinations:
    • Design Systems + React: React-sketchapp, Framer X
    • GraphQL + React: Discussing the componentization of Data
    • TypeScript + React: Documentation, and static checking vs proptypes
  • Inviting the audience to explore how these trends are expressions of a deeper underlying desire for better tooling that matches the needs of product engineering teams.

JAMStack Jumpstart: Gatsby + Netlify

There is a lot of developer and investment interest in JAMStack technologies: from the serverless movement to new authentication models to continuous atomic deployment to the static site generator renaissance. But with so many new terms and options, it is hard for people to figure out where to start.

This workshop will teach developers to set up a simple but state of the art Gatsby and Netlify stack, which lets people create blazing fast sites and apps with React and GraphQL, backed up by a continuous deployment and serverless platform complete with authentication and CMS. It has never been easier to get a great Lighthouse score, or to deploy complex, secure webapps for free.


Hooked on Change

React Hooks are finally here! Nothing's changed, yet everything's changed. Hooks don't unlock any new capability in React, so what's the big fuss? In this talk we introduce the Hooks API, explore the wonderful world of custom hooks, and finally discussed how your APIs and tools can also be Optimized for Change.

5 reasons:

  • Hooks represent the React team's vision of the future
  • There is a lot of FUD around Hooks from people who don't see the benefits
  • The concept of Hooks have a broader applicability even outside React; they may even be adopted in Vue
  • Custom Hooks make injecting and refactoring any functionality easy
  • Library authors and app architects alike can draw broad API design lessons from Hooks, and apply it in many other contexts


JAM Stack: The Total Victory of JavaScript

A lot has happened in the five years since Val Karpov coined the MEAN stack to describe "Full Stack" Javascript stacks. React rose to dominance, AWS Lambda started the Serverless movement, and Static Site Generators came back in a big way. What is driving this new stack of Javascript, APIs, and Markup? This is the story of how a JAM Stack cynic finally turned into a believer.

I can Babel Macros (and So Can You!)

Babel macros are a new way to solve DX and UX tradeoffs by metaprogramming to write code the way that is best for you while delivering code that is best for the user. Case in point: JSX - but why stop there? In this talk we explore how I wrote babel-blade to solve the double declaration problem in clientside GraphQL libraries, and how to get started writing your first babel macro!

The Dawn of Hybrid Site Generators

There is a sea change afoot in the worlds of frontend frameworks and static site generators: the two have gotten married! React has Gatsby and React-Static, Vue has VuePress, even Svelte has Sapper. What’s going on? In this talk we explore how the UX bar has been raised for making fast, full-featured sites on the JAMStack, and how new tools are meeting that bar!

JS at the Edge of the World

Want to live life on the Edge? Lambda functions open a world of possibilities for running on-demand, server-side code without having to run a dedicated server. It's been 4 years - What have people been using them for? In this talk we explore how people are pushing the frontiers of serverless Node.js to do everything from making slackbots to taking money for your next great side project!

React Suspense For The Rest of Us

Even if you don't work with React, you're likely to have come across a React dev super excited about the new Suspense feature in React. What is it? Why are people so hyped? Should I care? This talk is an introduction for anyone who feels out of the loop - walking through the history of the idea and the general UI problems it solves. We will approach this in a framework-agnostic way, so that you can see if the Suspense design pattern might make sense in your next project!

Reacting Ahead of Time

What's faster than O(1)? Step changes in performance and scalability come from paradigm changes rather than incremental optimizations. The inexorable march forward in "table stakes" product requirements has forced developers to explore ways to push computation from client to server, from runtime to buildtime, from fat SPAs to code-split frameworks. Cutting edge UX is exploring how to prefetch and cache resources intelligently, trading off memory usage for compute time. Lastly, DX has also been pushed forward with fascinating ideas from hot reloading to GraphQL. Where is all this taking us?

Learning React in Public

Developers are used to the idea of constant learning, especially in the fast moving Javascript ecosystem. But how often do we take a step back from learning to consider -how- we learn? In this talk we explore how Learning in Public can accelerate your career, bring value to your professional network, and ultimately make you a better developer, with examples all drawn from personal experience with React.

Learning in Public

Developers are used to the idea of constant learning, especially in the fast moving Javascript ecosystem. But how often do we take a step back from learning to consider -how- we learn? In this talk we explore how Learning in Public can accelerate your career, bring value to your professional network, and ultimately make you a better developer, with examples all drawn from personal experience.

Using the React DevTools Profiler at Netlify

How can the new React DevTools Profiler help you identify and fix performance issues in your app? In this lightning talk we go through a real life example diving into the Netlify production app to solve longstanding performance issues, and end with a quick checklist of things you can try on your app!

React Suspense Workers

React Suspense doesn't work without a caching layer, so every Suspense library has built one - except in service workers! In this talk we go through what React Suspense is, then explore a prototype of how "Suspense Workers" could be useful in future Concurrent React apps.

The Rise of Immer in React

Immer is one of the most successful open source launches in 2018, and has found particular favor in the React community. What problems does it solve, and why does it fit React's design principles so well?

Atomic React Deploys

React's logo is an atom. The component philosophy encourages Atomic design. What if our app deployments were atomic too? A backend that is never out of sync with your frontend - pipe dream or reality?

Better Docs with Docz

We all know good documentation is important for adoption and developer experience - isn't it worth investing in tooling to make it easier? Docz burst onto the scene this year as a fantastic new way to make great documentation for your React libraries with MDX. Let's take it out for a spin!