My Top React Techtalks of 2019
Tags: techtalks, javascript, react, ux
Published: 2019-12-14 16:46:49

Are you curious to know what happened in 2019 in the React world, that you should know about?

I watch _a lot_ of dev conference talks. They're a great way to learn new things and stay up-to-date in my career as a developer.

In 2019, there were 23 React conferences—with ~500 talks (~180 hours)—and I covered all of them, on [Hero35](https://hero35.com).

The following talks are the ones that I enjoyed the most, due to their fascinating content and/or high educational value, captivating delivery, and clear audio quality. I added a short description on each one.

## [1. Building mobile-first web animations in React](https://hero35.com/react-conf/2019/building-mobile-first-web-animations-in-react)
<a href="https://hero35.com/react-conf/2019/building-mobile-first-web-animations-in-react"><img src="https://i.ytimg.com/vi/laPsceJ4tTY/hqdefault.jpg"/>
</a>
Learn how to create smooth, performant animations and interactions, that look and feel native-like.


## [2. React is Fiction](https://hero35.com/react-conf/2019/react-is-fiction)
<a href="https://hero35.com/react-conf/2019/react-is-fiction"><img src="https://i.ytimg.com/vi/kqh4lz2Lkzs/hqdefault.jpg"/>
</a>
How many times have we used a design pattern, just because we’ve been conditioned to use it? Jenn gives a thought-provoking, interdisciplinary talk that questions our assumptions and challenges us to break the rules.


## [3. Using hooks and codegen](https://hero35.com/react-conf/2019/using-hooks-and-codegen)
<a href="https://hero35.com/react-conf/2019/using-hooks-and-codegen"><img src="https://i.ytimg.com/vi/cdsnzfJUqm0/hqdefault.jpg"/>
</a>
Tejas gives a compelling, real-world, case study of how TypeScript and GraphQL helped his company overcome issues with legacy code, iterate faster, and provide more value to their users.


## [4. Let's Program Like It's 1999](https://hero35.com/react-conf/2019/lets-program-like-its-1999)
<a href="https://hero35.com/react-conf/2019/lets-program-like-its-1999"><img src="https://i.ytimg.com/vi/vG8WpLr6y_U/hqdefault.jpg"/>
</a>
As the web turns 30, Lee takes us back to its inflection point in 1999, with PHP and the LAMP stack, followed by a journey of the abstractions, syntax, and mental models that brought us here.


## [5. Building the new Facebook with React and Relay - Part B](https://hero35.com/react-conf/2019/building-the-new-facebook-with-react-and-relay-part-b)
<a href="https://hero35.com/react-conf/2019/building-the-new-facebook-with-react-and-relay-part-b"><img src="https://i.ytimg.com/vi/KT3XKDBZW7M/hqdefault.jpg"/>
</a>
How does app performance look at scale? Ashley dives deep into the details of how they rebuilt Facebook.com and achieved super-fast rendering times and network transfers.


## [6. Building a Custom React Renderer](https://hero35.com/react-conf/2019/building-a-custom-react-renderer)
<a href="https://hero35.com/react-conf/2019/building-a-custom-react-renderer"><img src="https://i.ytimg.com/vi/CGpMlWVcHok/hqdefault.jpg"/>
</a>
It is important to understand the abstractions that we use (watch “Requisite React”). This is a deep dive into React’s architecture. Watch Sophie build a simple version of React DOM.


## [7. Accessibility is a marathon, not a sprint](https://hero35.com/react-conf/2019/accessibility-is-a-marathon-not-a-sprint)
<a href="https://hero35.com/react-conf/2019/accessibility-is-a-marathon-not-a-sprint"><img src="https://i.ytimg.com/vi/ONSD-t4gBb8/hqdefault.jpg"/>
</a>
Learn how to get started with accessibility, with common tools, patterns and starter-tips. Brittany explains how our users actually need a11y more than we think, and shows how to make it part of our regular workflow.


## [8. React, Collaborate and Listen](https://hero35.com/react-india/2019/react-collaborate-and-listen)
<a href="https://hero35.com/react-india/2019/react-collaborate-and-listen"><img src="https://i.ytimg.com/vi/KYdy0VK-nbc/hqdefault.jpg"/>
</a>
Inspiring talk about the web as a platform, React and its community, their future, and inclusivity.


## [9. Building the Dark Mode of Your Dreams with Color Science](https://hero35.com/react-boston/2019/building-the-dark-mode-of-your-dreams-with-color-science)
<a href="https://hero35.com/react-boston/2019/building-the-dark-mode-of-your-dreams-with-color-science"><img src="https://i.ytimg.com/vi/UbTZ9qSqimo/hqdefault.jpg"/>
</a>
Information-rich talk on color science, with practical examples on how to design a dark mode.


## [10. Sacré Bleu! The Trials of Internationalising Your ẨṔṔŁîÇåŤḯṏÑ�](https://hero35.com/react-boston/2019/sacr-bleu-the-trials-of-internationalising-your-)
<a href="https://hero35.com/react-boston/2019/sacr-bleu-the-trials-of-internationalising-your-"><img src="https://i.ytimg.com/vi/sqk1wGw6BeE/hqdefault.jpg"/>
</a>
Everything you didn't know you wanted to know about internationalization. Design your app to be language, region, and culture independent.


## [11. Saving the Web 16 Milliseconds at a Time](https://hero35.com/react-boston/2019/saving-the-web-16-milliseconds-at-a-time)
<a href="https://hero35.com/react-boston/2019/saving-the-web-16-milliseconds-at-a-time"><img src="https://i.ytimg.com/vi/UGRNoYuEDLk/hqdefault.jpg"/>
</a>
This talk is all about performance, after the initial page load. Learn cool tips about animations, accordions, and more.


## [12. A Guided Tour of React Hooks](https://hero35.com/react-boston/2019/a-guided-tour-of-react-hooks)
<a href="https://hero35.com/react-boston/2019/a-guided-tour-of-react-hooks"><img src="https://i.ytimg.com/vi/ApIiM8pL-kI/hqdefault.jpg"/>
</a>
Excellent introduction to Hooks, for beginners.


## [13. Foundations of Design Systems](https://hero35.com/react-boston/2019/foundations-of-design-systems)
<a href="https://hero35.com/react-boston/2019/foundations-of-design-systems"><img src="https://i.ytimg.com/vi/pXb2jA43A6k/hqdefault.jpg"/>
</a>
Comprehensive talk on design systems. Learn what they are and what it takes to build one.


## [14. Navigating the Hype-Driven Frontend Development World](https://hero35.com/react-live/2019/navigating-the-hype-driven-frontend-development-world)
<a href="https://hero35.com/react-live/2019/navigating-the-hype-driven-frontend-development-world"><img src="https://i.ytimg.com/vi/usH0QXrbfGg/hqdefault.jpg"/>
</a>
FOMO. Fear-Of-Missing-Out. New libraries, JS features, framework versions… the list goes on and on. Kitze talks about pragmatism into the fast-paced world of app development.


## [15. Animating an SVG cat with React.js](https://hero35.com/react-live/2019/animating-an-svg-cat-with-reactjs)
<a href="https://hero35.com/react-live/2019/animating-an-svg-cat-with-reactjs"><img src="https://i.ytimg.com/vi/7bw56feIdh4/hqdefault.jpg"/>
</a>
SVG components are powerful. Elizabet shows how to prepare an SVG in Sketch, convert it to a JSX React component, and animate it with Framer Motion. It's surprisingly simple.


## [16. State Management with React Hooks](https://hero35.com/react-live/2019/state-management-with-react-hooks)
<a href="https://hero35.com/react-live/2019/state-management-with-react-hooks"><img src="https://i.ytimg.com/vi/-yj23RtyT-E/hqdefault.jpg"/>
</a>
See how React state management has evolved over the years. Learn how to build an accessible To-Do app with useReducer(), useState(), and React Context to manage state.


## [17. Human React](https://hero35.com/react-rally/2019/human-react)
<a href="https://hero35.com/react-rally/2019/human-react"><img src="https://i.ytimg.com/vi/sZPxFKRTW94/hqdefault.jpg"/>
</a>
React is a great tool. But what really matters are the people that use our apps and the ways we can enrich their lives. React is also a large community that we need to fight to keep it welcoming, diverse, and inclusive.


## [18. Weaving Tapestries of Code](https://hero35.com/react-rally/2019/weaving-tapestries-of-code)
<a href="https://hero35.com/react-rally/2019/weaving-tapestries-of-code"><img src="https://i.ytimg.com/vi/M5tyaBBqKIw/hqdefault.jpg"/>
</a>
Jen takes us on a ‪fascinating‬ journey though computer science's history and pre-history. Learn how weaving helped kick-start the computing revolution.


## [19. Off Balance: Interactive Storytelling with React](https://hero35.com/react-rally/2019/off-balance-interactive-storytelling-with-react)
<a href="https://hero35.com/react-rally/2019/off-balance-interactive-storytelling-with-react"><img src="https://i.ytimg.com/vi/CqQX_pIAJug/hqdefault.jpg"/>
</a>
This is an advanced talk about SVGs, shapes, animations and orchestration. It is also a talk about architecture, abstractions and building tools that open up new possibilities.


## [20. Frontend Application Bundles: The Docker of Frontend](https://hero35.com/react-rally/2019/frontend-application-bundles-the-docker-of-frontend)
<a href="https://hero35.com/react-rally/2019/frontend-application-bundles-the-docker-of-frontend"><img src="https://i.ytimg.com/vi/9WaqB90kWwc/hqdefault.jpg"/>
</a>
Glen gives a fascinating talk on container technology and how that translates to the frontend.


## [21. TypeScript: Seeing Past the Hype](https://hero35.com/react-loop/2019/typescript-seeing-past-the-hype)
<a href="https://hero35.com/react-loop/2019/typescript-seeing-past-the-hype"><img src="https://i.ytimg.com/vi/veXkJq0Z2Qk/hqdefault.jpg"/>
</a>
Matthew shows concrete, pragmatic, examples of how TypeScript can help us write better code, refactor easily and avoid errors. He also shows the pain points of learning, and using TypeScript.


## [22. Scheduling is the Future](https://hero35.com/reacteurope/2019/scheduling-is-the-future)
<a href="https://hero35.com/reacteurope/2019/scheduling-is-the-future"><img src="https://i.ytimg.com/vi/Iyrf52cwxQI/hqdefault.jpg"/>
</a>
Raw speed is good, but not enough. A scheduler allows us to improve the perceived performance of our apps, despite its overhead. 


## [23. The Untouchable Web](https://hero35.com/react-finland/2019/the-untouchable-web)
<a href="https://hero35.com/react-finland/2019/the-untouchable-web"><img src="https://i.ytimg.com/vi/LhKglxQT4sU/hqdefault.jpg"/>
</a>
Rick demonstrates the difficulties of providing consistent interactions across platforms, and discusses where React Native space is headed.


## [24. Mind Reading with Adaptive and Intelligent UIs in React](https://hero35.com/react-finland/2019/mind-reading-with-adaptive-and-intelligent-uis-in-react)
<a href="https://hero35.com/react-finland/2019/mind-reading-with-adaptive-and-intelligent-uis-in-react"><img src="https://i.ytimg.com/vi/ppvi09LIUnU/hqdefault.jpg"/>
</a>
What if you could predict user behavior? Smart UIs help understand your users, and adapt the experience around their personal needs.


## [25. MobX - The Journey](https://hero35.com/react-finland/2019/mobx-the-journey)
<a href="https://hero35.com/react-finland/2019/mobx-the-journey"><img src="https://i.ytimg.com/vi/MIh1qSHi_Fc/hqdefault.jpg"/>
</a>
The creator of MobX talks about his journey with the library and open source, reactive programming, client-side state management and learning new things.


## [26. Requisite React](https://hero35.com/react-amsterdam/2019/requisite-react)
<a href="https://hero35.com/react-amsterdam/2019/requisite-react"><img src="https://i.ytimg.com/vi/tO8qHlr6Wqg/hqdefault.jpg"/>
</a>
Kent talks about how important it is to understand the abstractions that we use (Hooks, Suspense, JSX, etc), if we want to level up our abilities, speed and skills. 


## [27. Independent deployment of the frontend with Docker and Kubernetes](https://hero35.com/js-kongress/2019/independent-deployment-of-the-frontend-with-docker-and-kubernetes)
<a href="https://hero35.com/js-kongress/2019/independent-deployment-of-the-frontend-with-docker-and-kubernetes"><img src="https://i.ytimg.com/vi/ZuzSEQGE9qM/hqdefault.jpg"/>
</a>
A real-life use case for micro-frontends and motivation for adopting them.

<hr/>

I share my favourite talks on [Twitter](http://twitter.com/mavropalias) and [Facebook](https://www.facebook.com/kostas.mavropalias.9).

What is your favourite React talk of the year?