React Day Berlin 2024

Introduction to ESLint's new flat config format and see how it can bring new possibilities and enhancements to your development workflow and experience.

React Query is a popular library for managing asynchronous state—most often state returned from data fetching. Its popularity has grown significantly over the past few years, with nearly 20% of all React applications now using it.
In this talk, maintainer Dominik will explore the other side—the less favorable aspects of React Query and situations where it may not be the best fit. No library is perfect; every choice involves trade-offs. By the end of this talk, you'll have a better understanding of React Query's limitations and why it remains a compelling choice despite them.

Building an emulator seems daunting, and you don't know where to start? Well you came to the right talk! I'll cover the essential concepts of emulation, and go through the code of an emulator I created. By the end, you will hopefully be inspired to embark on your own emulation projects and bring retro hardware back to life!

This is the full story behind "Make Real", tldraw's viral AI experiment that lets you turn your low fidelity drawing into a functional website. It's half startup rollercoaster ride and half moral tale about betting on React — as Make Real was only possible because of the ability to put any React component onto tldraw's canvas.

Here's the full behind-the-scenes perspective, and everything we learned along the way.

Twitter influencers would have you believe that if you just use the semantic html tag for elements instead of a div, your components will be accessible. but there's a lot more that goes into it!
Let's zoom in on one component from GitHub (one that you've probably used before!) and look at all the accessibility considerations involved and interesting challenges in implementing them.

The talk will introduce you to the React Compiler, its architecture, the rules for using it, and the React 19 code base. We will learn the power of app optimizations by including React Compiler in an existing application. Lastly, we will get into the internals of the React compiler's compilation phases using the playground, and a few tips and tricks around it.

In this talk we'll break down key Generative AI concepts like Vector Search and Vector Embeddings and how can React Developers leverage them with technologies like LangChainJS to build intuitive AI powered apps. We will discuss different AI enabled search experiences like vector and hybrid search approaches, exploring how each method works, their advantages and disadvantages, and practical use cases.

The talk will break down what can be overly complex concepts into practical takeaways for our everyday work as React/JavaScript developers. By the end of the session you'll have a better understanding of when and how to use different search techniques to optimize your user experience. Most importantly you will also learn how as a React developer we use can use these search techniques using open source tooling and libraries including some powerful search engines written in TS/JS and create AI powered applications in React. 

I used to be a hip-hop artist with an album under Universal Music, songs on MTV, a Nike deal, and a track on PlayStation’s SingStar. But after a while, I realized that being an artist wasn’t my true calling. As an introvert, I decided to explore a new direction in life.
In this talk, I'll share how hip-hop has shaped my journey into the world of design and coding. Although I don’t see myself as a developer in the traditional sense, the DIY culture of hip-hop encouraged me to give coding a shot. I’ll talk about how this culture inspired my creativity and led me to work on a few React.js projects. Plus, I’ll give you a sneak peek into these projects, sharing a bit about the creative process and how I figured things out along the way.

When it comes to testing library code, the (usually amazing!) "Testing Library" approach quickly hits its limitations: We often need to test hot code paths to ensure additional guarantees, such as a specific order of DOM changes or a particular number of renders.
As soon as we start adding Suspense to the picture, it even gets almost philosophical:
How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render?
How do we know which parts of the Component tree rerendered?
In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.
After testing this approach internally for a year, we have released it in a library that we want to present to the world.
I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:
How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.
We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.

When discussing frontend performance, there are usually two topics: Lighthouse scores, and rerenders. But when working on applications that deal with large amounts of data and pagination is not an option, entirely different categories of optimizations become necessary.

Through the case study of Axiom's trace viewer, we will examine the solutions that keep your application running (and running fast!) each time your data size grows by an order of magnitude. 

Web security is crucial in a constantly evolving environment where potential threats are always present. To better understand this concept, we can imagine our web application as a garden or a home that needs to be protected from possible attacks. We can draw parallels with the popular game "Plants vs. Zombies," which aims to safeguard your garden from intruders.

Our automated tests function as diligent guardians whose primary objective is to identify and address potential vulnerabilities, much like the diverse plant arsenal in the game. Instead of framing the security process as a never-ending fight, we will explore how automated tests act as defenders against possible issues, whether they are zombies or intruders. Next to an overview of tools you can utilize, we emphasize the importance of fundamental testing types, such as unit or end-to-end tests, in securing your digital garden.

This is my draft slide deck: https://speakerdeck.com/leichteckig/plants-vs-thieves-automated-tests-in-the-world-of-web-security. I'm thinking about replacing the code snippets with videos or live coding.

After my session, the Attendees will better understand the tools to choose from. However, there are other focuses than this - I'd like to highlight how to ensure web security by using fundamental testing types like unit or End-To-End tests to keep the maintenance and learning curve low. A nice side effect will be the showcase of common security threats by seeing the tests used to catch them. 
- The attendee will learn an overview of the tools you choose from
- The Attendee will explore options to use test automation to improve web security without the need for new dependencies

This talk is rather framework-agnostic. However, Testing and Security are highly relevant topics for the React community, as both secure a high-quality application and protect users and features. Security is essential, especially nowadays. My talk combines Security and Testing. Both can be daunting, too, so I'd love to help the viewers build their applications securely. 

Are our UI tests a chore, or do they help us move faster? Let’s examine what makes testing great and not so great. We’ll focus on test strategies that help us code with confidence and clarity, and where they can cost us time and energy. The secret to good testing lies in how it shapes our developer experience. Do our tests give us useful feedback in a timely manner? How quickly can we tell what is wrong when a test suite fails? Do they document our features and explain our past decisions? We’ll answer these questions with better tests that give us joy.

Web and Mobile are getting closer and closer in the React ecosystem. With the launch of Expo Router and React Strict DOM in the last year, the message is clear: Web and mobile can no longer be separated. The React Core Team and community have been working silently in the background on this project, and there have been RFCs to bring Web APIs to Native, and make the RN event loop closer to the web.This is great for developers - suddenly React devs can “learn once, write once, and run anywhere”, and can target web, iOS, and Android (and even more) from a single codebase. You might be thinking: is this just a pipe dream, and will the reality live up to the expectation of “writing once” for every platform? In this talk, we’ll share our real-world experiences of building universal React apps from a single codebase. We’ll look at the libraries and tools, cover some of the real-world challenges, and share with you a <List /> of what you can and can’t share across different platforms.  

In this talk, we explore the application of React Server Components (RSC) to elevate the functionality and efficiency of forms. We will touch upon the core principles of RSC and their specific benefits for form development, such as improved load times and streamlined server-side processing. Additionally, we’ll learn the latest advancements in React 19 and the introduction of multiple new hooks.Attendees will gain insights into practical strategies for integrating RSC into forms, focusing on enhancing user experience and reducing front-end complexities.

A history of how code transformation has affected the industry. And how it led to changes in how we write CSS

Our quest to make our product faster and more performant forced us to reevaluate our state management solution. Unfortunately more than once: in the span of two years we migrated from Redux to Zustand to Jotai then back to Zustand (this time with some fancy tricks) and then finally to a custom solution. 
Should you do the same to figure out which library fits your use case best? Is a custom solution really necessary? Probably not, and to prevent you from making the same mistakes we did I want to tell you what we found really matters, as well as some important things we learned during this painful journey.

Achieving high-performance reactivity in React without compromising the developer experience has always been a key challenge. When building real-time applications designed to display hundreds of millions of rows without noticeable lag, fine-grained reactivity is essential. But when I started my journey at Pigment, neither Recoil, Jotai, nor Zustand were mature enough, and React Compiler was not yet a thing. Let's explore together how we managed to ingest, display, and update huge datasets seamlessly without sacrificing the developer or the user experience.

Evaluating the performance of React applications is hard! OpenTelemetry (or OTel) can provide tracing capabilities to identify bottlenecks. But when it comes to performance metrics, client instrumentation is currently under development. In this talk, I will share how to instrument a React application with OTel for tracing and how a RUM agent (in this case, Elastic's) can be used to collect page load and metrics for diagnosing slowness in production applications.

Performance optimization is key to user satisfaction in any mobile application, especially those built with React Native. This talk dives into common performance pitfalls in React Native apps and provides practical techniques for diagnosing and resolving these issues. We'll explore tools and methods for performance monitoring, efficient rendering techniques, and optimizing JavaScript thread utilization. Additionally, the session will cover advanced topics such as memory management, the use of Hermes JavaScript engine, and strategies for smooth animations and transitions.

Do you love standards but hatehatehate the DX of web components? Me too.

As a reformed skeptic of Web Components due to my DX concerns, I encountered an interesting challenge at SuperTokens: creating a UI library that supports all the frameworks and remains future-proof. After some research, I discovered that SolidJS compiles to Web Components, offering a familiar, React-like developer experience - exactly what was needed to convert me into a believer. After a couple of rounds of experimentation, I fell in love with web components.

This talk will share insights from our journey towards adopting Web Components for our next-gen authentication UI library at SuperTokens and why web components are a great idea that's here to stay.

Everyone has heard of feature flags: boolean switches in your code that you can flip at runtime for different users, environments, etc. But they are just one part of a much broader best practice called “application configuration”. Big tech companies like Meta and Google have internal tools for structured, type-safe app configuration that help them accelerate development of products and backend services. This talk dives into what app configuration is and how it can empower your whole team to move faster, including your nontechnical colleagues.

Signals have recently become a popular concept. Their ideas are based on the functional reactive programming (FRP) approach, which has been leveraged in the industry for a while. I would like to share how someone can build an architecture based on signals and React and how we have used FRP at Grammarly for quite some time. The talk aims to showcase the foundational principles of observables and how to structure applications based on FRP ideas.

Maybe you don't know what React Flight is, but you probably heard something about React Server Components instead.
Do you want to understand how RSCs work? My advice is to start from the new communication protocol behind it, whose name is, guess what, React Flight.

In this talk I will show, step by step, how this protocol enables some of the most interesting RSC features (SSG, SSR, streaming content, server and client components, etc.), at the same time revealing some unexpected surprises: for example, did you know that you can use RSC without a server?

Does your React app serve a global audience, but is only available in English? Let's change that. In this talk, I'll show you how i18n can become an automatic part of your CI/CD workflow, enabling your team, regardless of size, to deliver your React app in over 100 different languages without any extra effort.

I’ve done https://fframes.studio/ — it is an open source video creation framework in Rust, but the previewer of the video generated content is implemented in React and allows to render 120fps video rendering using Rescript and Rust (compiled to wasm).

In this presentation l’ll show how make these languages best friends and make them superpower react for unbelievable performance.

Join me for an exploration into the core principles of building CLI tools that developers adore. Drawing from my extensive experience as a former fullstack developer and current lead product manager at Wix CLI, this talk will provide actionable insights into creating CLI tools that seamlessly integrate into developers' workflows. From intuitive design and robust functionality to prioritizing developer experience and fostering community engagement, I'll share essential strategies for crafting CLI tools that go beyond utility to become indispensable assets. Whether you're a seasoned developer or a product manager, this session will arm you with the knowledge needed to engineer CLI tools that resonate with users and stand the test of time.

This talk dives into Critical CSS as a method to enhance web performance and user experience. It covers what critical CSS is and best practices for effective implementation.

Ever wondered how to truly connect and collaborate with designers? Want to learn the best strategies for clear and effective communication? Curious about how to get designers to deliver exactly what you need? Discover how to refine your communication skills, integrate designers seamlessly into your workflows, and create a harmonious, productive environment for future projects. This talk aims to be your ultimate guide to mastering the art of working with designers – don’t miss it!

Website performance is paramount, and effective caching strategies can make a significant difference. In this talk, we will dive deep into frontend caching techniques specifically tailored for React applications. Learn how to control the caching of both static resources and dynamic data requests, understand where and for how long these resources are cached, and explore various layers of caching from the server to the client. By the end of this session, you'll have the knowledge to implement robust caching strategies that enhance the speed and efficiency of your React applications.

Discover the untapped potential of Abstract Syntax Trees (ASTs) in this transformative session. Learn how we achieved a remarkable 16% reduction in our bundle size by inlining constant objects directly into the referencing code, eliminating the need for large files in the output. This method even outperforms Terser's tree shaking used by Webpack.

We will cover:

* Introduction to ASTs: What they are and why they’re invaluable.
* Overcoming AST Challenges: How to navigate the difficulties of working with ASTs.
* Best Practices: Proven techniques for effective AST utilization.
* Avoiding Pitfalls: A secret tip to prevent common mistakes.

ASTs are everywhere, and their applications are vast. This session will empower you with the knowledge and confidence to transform your code, revealing when and how to use ASTs for remarkable results.

Join me for an inspiring journey into the world of ASTs and unlock their potential to revolutionize your coding practices!