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:
React Rally Talks
- sfc in react
- wheres wa11y
- serverless server side rendering
Turning the Static Dynamic
One of the most beautiful things about the JAMstack is how you can progressively add functionality to a static site just like you would add visual components. In particular, often want to add authentication and serverless functions to make our sites more and more dynamic... and, of course, authenticated serverless functions! In this talk we discuss the why and the how of the blurring line between static and dynamic, and show how to do it with React, Gatsby, and Netlify!
Let's Put Everything-In-JS
6 years ago, React put HTML-in-JS. More recently, CSS-in-JS has become as popular as it has been controversial. What if... we just skipped ahead and took this to its logical conclusion? An exploration of the absolutely insane, totally illogical, standards-bending future of Single File Components that might just be possible.
This talk is takes things to a humorous extreme in order to prove a point. We recap a brief history of JSX, how CSS-in-JS APIs have evolved (despite much controversy), and then discusses how we are starting to include everything from explicit types (TypeScript) and data dependencies (GraphQL, React-Redux), to documentation (JSDoc? MDX?), tests, serverless functions, and anything else we can colocate together with a component. Ultimately, we will demonstrate this in a live demo of a webpack plugin finally bringing Single File Components to React.
- In the Beginning: JS-in-HTML
- JSX: HTML-in-JS
- Tailwind: CSS-in-HTML
- Aphrodite, Radium, Styled-Components, Emotion: CSS-in-JS
- Colocation vs Separation of Concerns
- How Vue Single File Components Work
- Why Vue users love SFCs
- an exploration of the vue-loader source code
- Why doesn't React have SFCs?
- A Modest React SFC Proposal
- Resolving the CSS-in-JS vs CSS Modules debate
- Adding GraphQL
- Adding React-Redux
- Adding MDX
- Adding Tests
- Adding literally anything else webpack runs
From helping beginners and discussing developer experience with friends who use Vue, it is abundantly clear that Vue's Single File Components are a helpful convention in creating Vue apps. While React is wonderfully unopinionated about project structure, we don't have to completely reject all structure and convention.
I've been doing some research recently on bringing Vue's Single File Components to React, and concluded that most people are still too unambitious when it comes to the possibilities. For one thing, having an easy, standard interface for switching between static CSS Modules to more dynamic CSS-in-JS solutions like styled-components, will help resolve a lot of performance and standards-compliance criticisms often leveled at the React community. For another, colocating documentation alongside components help ensure that information that needs to be updated together always stays together.
Reusable Time Travel with React Hooks and Immer
Learn how and why to make a
useTimeTravel React hook that we can use to make Tolerant User Interfaces - and a discussion about how custom hooks open the doors to reusable behavior that make great UX so much easier to write!
What Humans Can Learn from Machine Learning
Over the last half century, we've taught Machines to speak, move, react, see, think, and now to teach themselves. Is it game over for Humans? On the contrary, because we're now able to see and adjust the variables of learning, we've learned a great deal about how to learn. In this talk, we explore five tricks of general computational learning algorithms and how we can apply them in our own learning!
Hi Organizers! I write and think a lot about Learning and Meta-Learning topics, and one of my top requested topics is always Learning How To Learn. I also do Machine Learning on the side and I think nobody has really tried to meld the two disciplines together and draw lessons from one to the other. I have an outline that I am very excited about, including:
- the alpha parameter
- optimality in the face of an impossibly large search space
- generalize > memorize by using a testing set
- epsilon exhaustion and Probably Approximately Correct learning
Would love to have the chance to introduce these ideas in a way that will be engaging for the audience regardless of whether or not they know Machine Learning.
- You will learn about how the alpha parameter can help accelerate your learning, or overshoot
- You will learn about epsilon exhaustion and Probably Approximately Correct learning (this is a real ML term!)
- You will learn about Simulated Annealing and the best way to search a possible solution space while converging on schedule
- You will learn to apply the difference between Supervised and Unsupervised Learning and why generalization is more important than memorization
You Gotta Love JAMStack
JAMStack, Serverless, Devops, Frontend
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, Beginners who want to learn about shifts in web architecture
What's the takeaway for the audience?
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, with one theme: constraints that scale. 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.
This will be a high-level architecture, patterns, and tooling talk, that will tie together multiple disparate trends and hopefully present a convincing thesis: that we are at a beginning of a movement that is leading large tech companies to invest heavily in front-end technologies that impose constraints that allow teams to collaborate and ship at scale.
Having these opinions allow us to build a React-based framework that bake in these opinions, and that is something I hope to demo as React's answer to the outstanding work that has been done by the Vue CLI/UI team.
- 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 why React is still 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
- Introducing a React-based framework and CLI that ties in all these patterns as a proof of concept
- 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.
Sometimes it can be hard to find method among the madness of all the different trendy technologies in web development. Old hands are rightfully cynical and fatigued with hot new things. However, some trends, like React, do end up "winning" and persisting over many years, making them very worthwhile investments. Much like we invest in stocks and real estate, it is worth developing an investment thesis around open source technologies and architectures, in order to have a framework for deciding what to invest in and build on.
As a former investment analyst, I hope to bring that market analysis perspective to developers who may not view the open source world through this lens, and hopefully explain why these trends may come together in a "superframework" that covers Design Systems, TypeScript, ApolloGraphQL, and React, or something that looks like it. My personal involvement is having worked on an app that uses all these technologies and seeing the benefits of a cohesive philosophy around consistency and data, as well as having taken stock of what multiple large tech companies are reporting they invest in.
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.
- 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
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
This is a "soft skills" talk unlike any other - it cuts to the heart of how developers of every level learn, grow, build, and market themselves.
- What is Learning in Public?
- Who Learns in Public? Exploring Career Philosophies of leaders in our industry
- Sarah Drasner: Interdisciplinary blends
- Kent C Dodds: Consume, Build, Teach
- Julia Evans: B0rk
- Chris Coyier: Workgin in Public
- Lin Clark: Code Cartoons
- Cory House: Becoming an Outlier
- Max Stoiber: React-Boilerplate
- Why Learn in Public?
- Giving back to others
- Helping your future self
- Being a sounding board, helping experts with your beginner's mind
- How to Learn in Public
- Keeping your Identity small
- Brad Frost & the concept of Learning Exhaust
- Practicing the non-tech part of a career tech
- Twitter: some advice
- "How to Win Friends and Influence People: Online Edition"
I have been writing and thinking about learning philosophy as I myself learned React and entered the industry without formal computer science qualifications, a situation I believe many React developers share. This has been some of my best and most well received writing, and I would like to earnestly include and share this "career hack" with fellow React developers who may be interested in meta-learning algorithms like this.
Learning in Public
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.
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!