swyx is an Infinite Builder working on Developer Experience at Netlify. In his free time he helps people Learn in Public at Egghead.io and /r/reactjs.
Selected prior talks:
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
Abstract (Detailed description of your presentation, including key audience takeaways)
Who is this presentation for?
CTOs, VP Engs, Web App Team Leads
What's the takeaway for the audience?
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.
- 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.
- 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.
- Info on JAMstack: https://jamstack.org/
- VC interest in JAMStack:
- Developer interest in JAMStack:
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.
- 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
- React Rally: https://www.youtube.com/watch?v=nyFHR0dDZo0
- Hooks and Concurrent React: https://youtu.be/vhWaMPQhMLQ
- Info on Hooks: https://reactjs.org/hooks
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
Learning in Public
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!