Ok, you still might want to watch the talks—they were quite good! But we’re all busy people, so I thought you all might appreciate my notes from all twenty-seven React Europe talks.
The notes should help you quickly get a sense of what each talk covered, so you can decide if you want to watch the full video or not.
I have exactly one hour, which talks should I watch?
That’s a very specific question, but I have an answer.
First you should watch
, as Dave McCabe presented an interesting new way of handling global scope in React apps Recoil: State Management for Today's React
, as Christopher Chedeau discussed the challenges him and his team solved building a really useful drawing app. Excalidraw: Cool JS Tricks Behind the Scenes
Technically, watching these two talks will take 81 minutes, but if you watch at 1.25 speed on YouTube you can get it done in an hour. 😉
Do you need to shamelessly plug anything before providing your useful notes?
What a convenient question!
We on the
KendoReact team held a virtual hackathon at the event, which led to a lot of awesome React apps built with our UI components. We wanted to give a special shout out to the winner, Steeven Regnault, as he built a fun little game using KendoReact and Recoil.
Ok, on to the talk notes. Enjoy! 🙂
State of React Animations Speaker: John Adetutu react-spring is a powerful way to create animations in React. react-spring has a series of hooks that allow you to separate your UI code from your animation logic. Check out this talk if you’re looking to add some more robust ways to configure animations in your React apps. VIDEO The Latest in Next.js 9.4 Speaker: Tim Neutkens Next.js is a React framework with a number of features to help you build React apps faster.
For example you can have a
pages directory, and files in that directory automatically become routes.
.env loading), redirects, Eslint integration, and React concurrent mode support.
Check out this talk if you’re curious about Next.js and want an introduction into what it can do for you. VIDEO Bringing WebGL to React Speaker: Paul Henschel react-three-fiber is a reconciler for three.js.
Essentially, the library allows you to work with three.js more easily by providing reusable components. He featured a bunch of examples that were pretty impressive. This one and this one were my favorites, and they’re worth trying for yourself. Check out this talk if you’ve been thinking of trying out WebGL, as react-three-fiber makes it a lot easier for React developers. VIDEO Gatsby’s Roadmap and its Future Speaker: Sidhartha Chatterjee Static sites have have become increasingly possible over the last few years. Gatsby allows you to build static sites using React that you can serve from a CDN. Some limitations of static sites are really big sites, and sites that update very frequently. Gatsby Flow helps solve the problem of large sites with incremental builds. Gatsby streaming builds is an upcoming service that helps sites that need to update frequently. Watch this talk if you’re interested in Gatsby, and some of the new services its working on. VIDEO Render Props are Not Dead Speaker: Erik Rasmussen Render props greatly simplified the process of managing state in React components. Render props killed higher-order components. ( https://twitter.com/mjackson/status/885910701520207872) Render props allow you to inject state without forcing a re-render of your entire component. Using hooks you have to create custom components every time to achieve this. This talk was one of my favorites as Erik is an amazing presenter. I’d say this one is worth watching for all React developers, but especially if you (like me) don’t understand render props well and want to learn more. VIDEO Rejecting bongo kittens, achieving 3D blooms, and other lessons learned Speaker: Josh Comeau Josh is an avid Beat Saber player, but hated the community-built UI for building custom tracks for the game. Three.js makes working with 3D user interfaces significantly easier, and react-three-fiber makes live even easier for React developers. https://bruno-simon.com/ is an awesome example of three.js in action. Check out this talk if you want to hear a fun story of building up a tool for a community. I enjoyed it. 🙂 VIDEO Beyond Responsive Design: Building Mobile-Optimized Websites in React Speaker: Alex Holachek Taps on mobile are not the same as clicks on desktop, and you can’t handle them the same. You can use
@media (pointer: fine) to limit active and hover states to non-touch devices.
npx create-react-native-app allows you to start a React Native app fast.
Expo Snack lets you code React Native apps in the browser. Expo has new tools to let you authenticate with multiple different providers. expo-html-elements helps you build elements that work across native and web apps. Expo is working on making their fast refresh work faster across web, iOS, and Android. Check out this talk if you’re looking for a deep dive into the tooling Expo offers for building universal React apps. VIDEO Speaker: Sanket Sahu Builder X is a browser-based design tool for helping you build React and React Native apps. Sanket talked about some of the challenges building the tool, like how they optimized performance, and how they implemented undo / redo. Check out the talk if you want to hear a story about building a design tool, and some of the challenges that Sanket’s team faced. VIDEO Hijacking CSS With TailwindCSS Speaker: Horacio Herrera Tailwind CSS is a utility-first CSS framework—basically it’s a whole bunch of CSS classes. 🙂 Tailwind makes CSS pseudo-class rules easy to apply, for example
Tailwind is built on top of PostCSS. PurgeCSS is a tool to remove unused CSS from your code, and there’s a plugin to make it work with PostCSS. Check out this talk if you’re looking for an introduction to Tailwind CSS, and to see if it’s a good fit for your apps. VIDEO Recoil: State Management for Today's React Speaker: David McCabe David’s team at Facebook hit some limits with state management, and they built a library to help solve them. The tool offers a flexible shared state, derived data and queries, and app-wide state observation. The name of the library is Recoil. Recoil makes it easy to store app-wide state, which makes it easier to do time-travel debugging, and to do things like easily sharing the app state through a URL. The tool is experimental for now and the team is looking for feedback. This talk is a must watch. Everyone needs state management in React, and Recoil is an interesting new approach for making state management easier. VIDEO Excalidraw: Cool JS Tricks Behind the Scenes Speaker: Christopher Chedeau Excalidraw is an app for drawing hand-drawn-like diagrams. Christopher did a pretty neat explanation of how they coded drawing lines with a bit of randomness so that they look hand drawn. Christopher also went over a number of the steps he took to make all data Excalidraw uses encrypted end to end. I really enjoyed this talk, as it was a fun story behind a useful tool. I’d recommend everyone check this one out. VIDEO Design System and Accessibility Speaker: Devon Govett Building a set of UI components to use throughout your company is a huge challenge, especially as you consider accessibility, internationalization, and so on. (A problem we’re very familiar with at KendoReact. 🙂 ) Devon covers a number of techniques his team used to solve some of these challenges, like dealing with UI challenges on mobile, and making components screen-reader friendly. Adobe is building a tool for making these things easier called React-Aria, and will be open sourcing it by the end of the month. Check out this talk if you’d like to hear how Adobe is addressing accessibility in a new tool they’re building. VIDEO Speaker: Michel Weststrate React Native offers an incredibly fast development experience. Flipper is an platform for debugging iOS, Android, and React Native apps. Flipper includes crash debugging. Flipper also works for native apps, so it also allows you to dig into the native components that make up your apps. Flipper is extensible, and has community-built plugins. You can also build app-specific plugins to meet your needs. Michel did several demos showing Flipper in action, and it was pretty impressive. The talk is definitely worth watching if you’re building React Native apps today. VIDEO Detecting the unexpected in React applications Speaker: Nicolas Dubien A race condition is the condition where the system’s behavior is dependent on a sequence of events in a specific order. Race conditions are a common source of bugs in web apps, and are difficult to test for. fast-check is a testing tool that can help you test for potential race condition issues in your code, by randomly reordering events. It looks like a pretty neat utility, and is worth checking out if you want to help protect against race conditions in your React apps. VIDEO Let’s Make Development Fast Again! Ives van Hoorne The average recompilation time in a React app is around ~2 seconds. Reducing your refresh cycle is a great way to make your team more productive. There are a new class of bundlers focused mainly on development, including Snowpack, Vite, and Sandpack. Sandpack is what CodeSandbox uses. Sandpack doesn’t do any concatenation, and does all of its reloading via the browser itself. React Fast Refresh allows you to reload your CSS and even components without refreshing your browser. The talk was interesting, and is worth checking out if you’re looking to speed up your development workflow. VIDEO Blitz.js & the Future of Fullstack Speaker: Brandon Bayer Blitz is a Rails-like framework for monolithic, full-stack React apps — built on Next.js Blitz does a lot for you out of the box, including ESLint, prettier, Husky hooks, and more. Blitz uses Prisma for databases, and integrates everything for you. Blitz is still in alpha, but it’s ready to test out today. The talk is worth checking out if want to take an early look at a full-stack, opinionated way to build React apps. VIDEO Learn React Hooks By Building An Auth Based To Do App Speaker: Luke Mwila Rule #1: Always use hooks at the top level of your React function. Rule #2: Don’t call hooks Custom hooks are a great way to share common logic across components in your applications. The code examples from the talk are available on GitHub. The talk is a great overview of the basic React hooks by seeing them in action. VIDEO Gamedev on React + WebGL Speaker: Korotaev Alexander PixiJS is the most popular WebGL renderer. react-pixi-fiber is a library that lets you use PixiJS in a React declarative style. SVG is great for WebGL use because it scales up while remaining high quality. React can be slow for game development. Avoid
setState() for animations, and use custom components for critical parts of your apps.
Well, those are all my notes. Let me know in the comments if you found this article useful, as I might replicate this for future events. 😉