Name: React Day Berlin 2024
Start: 2024-12-13T12:00:00.000Z
End: 2024-12-16T20:00:00.000Z

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

ESLint One for All Made Easy

Anthony Fu

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.

React Query - The Bad Parts

Dominik Dorfmeister

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!

Build an Emulator in JavaScript

Sara Vieira

Building a Game Boy Emulator in JavaScript

Learn widely used React patterns, including HOCs, Compound Components, Provider Patterns, Functions as Child, and Portals, to write cleaner, more efficient code and create scalable, maintainable applications.Overview In this workshop, viewers will learn about key React patterns that can make their code more efficient, readable, and maintainable. We'll introduce each pattern, explain how it works, and demonstrate practical examples. By the end of the session, participants will have a solid understanding of how to use these patterns in their projects.Learning GoalsHOCs Compound Components Provider Patterns Functions as Child Portals Modularity Maintainability Real-world Application.

React Patterns Made Simple 

Adrian Hajdin

React Server Components in AI Applications

Tejas Kumar

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.

Make Real: Tldraw’s Accidental AI Play

Steve Ruiz

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.

Case Study: Building Accessible Reusable React Components at GitHub

Siddharth Kshetrapal

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.

React Compiler - The Missing Piece for Optimizing React Applications

 Tapas Adhikary

In this 2-days workshop you will finally understand mocking in JavaScript. You are going to look at the mental models behind mocking as a tool, as well as practice various mocking techniques you need in your day-to-day testing life.

Mocking Techniques in Vitest (remote)

Artem Zakharchenko

Today, most of the AI applications send data to LLM cloud providers like OpenAI, raising privacy concerns. This workshop an alternative and privacy focused way to build AI applications by running LLMs locally with Ollama that keep everything local on your computer. This approach allows to avoid sending sensitive information to external servers. The workshop also highlights LangChain's ability to create versatile AI agents capable of handling tasks autonomously by creating embeddings for the data. So come learn how can you build the next gen, privacy focused React application powered by Local LLMs. The workshop covers the following topics: 1.Overview of cloud-based LLMs privacy issues and the importance of running Local LLM inferencing. 2.Detailed insights into generating embeddings with tools like Ollama and demonstrating how LangChain agents can perform tasks such as document summarisation and API interactions, all while maintaining data privacy in a NextJS / React application. 3.Discovering practical use-cases for this approach.

Build Privacy focused React Applications with Ollama, NextJS/React and LangChainJS

Shivay Lamba

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.

Decoding Vector Search and Embeddings for React Developers

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.

From Hip-Hop to Code

Elizabet Oliveira

In this workshop we’ll dive into the latest advancements in React and best practices for building modern React apps. We’ll take a look at modern NextJS and Remix along with React’s new “React Server Components”. We’ll also talk about improving the data-fetching strategies of your SPAs along with options for migrating your SPA to modern React Router. Learn how to prevent data-fetching waterfalls and also leverage modern caching strategies. Learn modern strategies for performance and data streaming. Learn React Server Components and how they differ from traditional SSR in React. Learn new ways of managing form data with React Server Components. Understand how to better use transitions and optimistic UI for better user experiences. Understand your React architecture and rendering options: SSR, CSR, RSC, SPA and MPA. Explore differences between NextJS and Remix.

Advanced React Workshop: What's New in React (remote)

Brad Westfall

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.

Beyond React Testing Library: Testing React Libraries (and library-like code)

Lenz Weber-Tronic

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.

How to Show 10 Million of Something: Frontend Performance Beyond Memoization

Christopher Ehrlich

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.

Plants vs Thieves: Automated Tests in the World of Web Security

Ramona Schwering

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.

Testing Our Way to a Better Developer Experience

Will Klein

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 &lt;List /&gt; of what you can and can’t share across different platforms.

The Age of Universal React: What’s the Catch?

Mo Khazali

Anisha Malde

The web is capable of way more than we might think. During this workshop, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

Astro: All Hands On

Elian Van Cutsem

The web is capable of way more than we might think. During this talk, we'll explore some lesser known parts of the web. Did you know you can control the web via webHID or send and receive notes to devices via webMIDI? In this interactive talk we might make some music together, by controlling synthesisers and exploring the wide range of strange web API's. All that in vanilla JavaScript, no frameworks needed.

Make the Web Weird Again

In this workshop, we will explore React's latest features: Server Components, Server Actions, and Forms. Gain insights into optimizing server-side rendering, enhancing application interactivity through Server Actions and React 19 hooks, and mastering form creation for robust data handling and validation. Designed for developers of all levels, this workshop provides practical skills to build scalable, performant web applications.

Hands-on React Server Components, Server Actions, and Forms

Aurora Scharff

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.

Enhancing Forms with React Server Components

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

Atomic Power: the Story of StyleX

Naman Goel

Code Less, Create More: AI-Driven App Development for React Devs.Join us for a workshop designed for React developers eager to harness the power of AI to streamline their app development process. In "Code Less, Create More," you'll learn how to build applications using the Cursor IDE with the power of AI and minimal manual coding.Explore how Cursor, an AI-enhanced code editor, revolutionizes your coding experience by seamlessly integrating with your existing workflow. Uncover its advanced capabilities: predicting your next edits, offering real-time code suggestions, and comprehending your project's architecture. This allows you to channel your energy into creativity and innovation rather than grappling with syntax and repetitive tasks.We'll guide you through initializing a Next.js project, demonstrating how to utilize AI tools to efficiently craft dynamic, responsive applications. By the workshop's conclusion, you'll possess the skills to construct sophisticated software with reduced coding effort, empowering you to become a more productive and innovative developer.Whether you're a seasoned React developer or new to AI-assisted coding, this workshop will equip you with the knowledge and tools to elevate your development projects to the next level.

 Production-ready Next.js App with Cursor AI

Maurice de Beijer

Did you ever need a hamburger menu icon and you you looked out for one in an icon library? Actually, it's only a few lines of code with <a href="https://svg-tutorial.com/">SVG.</a> And SVGs combined with React open up a whole new world. You can generate diagram, graphics or animation, make an interactive game or app. Let's walk through the basics of the syntax.

How to Code Images in React with SVG

Hunor Márton Borbély

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.

From Redux to Zustand to Jotai to Zustand to Custom: Our State Management Horror Story

Giulio Zausa‮ 

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.

Fine-Grained Reactivity Without Any Compiler

Nicolas Dubien

Everywhere we look we see examples of leveraging AI technologies not just while building software, but in our web applications too. While developers want to embrace new shiny technologies, tech leaders raise concerns about the risk of exposing their data for training, alongside other accuracy issues such as source hallucination. Using vector search alongside LLMs can ground applications to a known source, and allow the generation of domain-specific responses. In this talk, I'll show how to combine Elasticsearch and Langchain in serverless applications to build a grounded RAG application and show results in a simple React UI.

Grounding AI Applications with React, JavaScript, Langchain and Elasticsearch

Carly Richmond

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.

Evaluating React Application Performance with a Sip of RUM

React 19 and the Compiler for the Rest of Us

Johannes Goslar

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.

From Lag to Lightning: Boosting React Native Performance

Sweta Tanwar

What does a well-designed component API look like? Do you often find yourself forking components instead of extending them? Should you use props, hooks, or composition? In this lightning talk, I'll address common pitfalls in component design and share insights from my experience as a maintainer of Shopify's open-source framework, Hydrogen, and from building scalable design systems at Personio. By the end, I'll present a framework I use for iterating on and creating effective APIs.

Little Bits of Iterative Component Design

Daniel Rios Pavia

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.

Future-Proof Your UI: Building With Web Components

Darko Bozhinovski

We’ll explore the latest in web performance, examining how sites fare in speed and efficiency. Discover the impact of performance optimisations and the innovations driving the fastest web experiences today. From lazy loading to efficient rendering, we'll uncover what sets high-performing sites apart in the ever-evolving digital landscape. We'll also turn our attention to the web’s environmental impact, discussing the growing awareness of its carbon footprint and the steps being taken toward more sustainable practices. Alongside this, we’ll delve into the adoption of cutting-edge technologies like HTTP/3, Progressive Web Apps (PWAs), and modern JavaScript frameworks. These advancements are reshaping web development and promising a more efficient, eco-friendly future. Join us to understand how these trends are driving both performance and sustainability in the web world.

The State of the Web: Key Insights From the HTTP Almanac 2024

Burak Güneli

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.

Type-Safe App Configuration: A Powerful, Emerging Way to Accelerate Product Development

Miraan Tabrez

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.

Building Web Applications with Signals at Grammarly 

Oleksii Levzhynskyi

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?

Meet React Flight and Become a Rsc Expert

Mauro Bartolomeoli

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.

How I Support Over 100 Languages in My React app...and You Can Too!

Richard Carrigan

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.

React via Rust and Rescript: Why and How?

Dmitry Kovalenko

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.

CLI Magic: Crafting Developer Joy in Command Line Tools

Noa Goldman

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.

Critical CSS

Sergey Labuts

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!

How to Train Your Designer?

Dora Makszy

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.

Mastering Cache Control: Optimizing Performance for React Applications

Yael Balla

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!

The Superpower of Asts: How We Saved 16% on Our Bundle Size

Omri Lavi

React Day Berlin

Take part in the exploration of the React universe! Focusing on in-depth talks, hands-on workshops, and developing new opportunities, this must-attend <a href="https://reactday.berlin/" target="_blank" rel="noopener noreferrer">React Conference in Berlin</a> provides space for everyone to make friends and collaborate on stellar apps.

React Day Berlin 2024

FocusReactive

Hygraph

Sentry

Porsche Digital

Grammarly

Porsche Digital is the technology unit of Porsche AG. We offer solutions that enrich the digital lives of our customers in and around the car.

Porsche Digital is the technology unit of Porsche AG

FocusReactive will help you architect, build, and lead technically advanced websites focusing on performance and scalability. Partners and <a href="https://focusreactive.com/next-js-expert-agency/" target="_blank" rel="noopener noreferrer">experts in Next.js/Vercel</a>, Storyblok, Sanity, Contentful, Shopify Hydrogen, and other Headless eCommerce platforms.Whether you seek <a href="https://focusreactive.com/headless-cms-expert-agency/" target="_blank" rel="noopener noreferrer">expert Headless CMS agency</a> services or an expert agency with deep experience with platforms like Headless <a href="https://focusreactive.com/react-cms/" target="_blank" rel="noopener noreferrer">React CMS</a> &amp; <a href="https://focusreactive.com/nextjs-cms/" target="_blank" rel="noopener noreferrer">NextJS CMS</a>, FocusReactive is the one to help you scale.

As a special perk, we're offering a complimentary&nbsp;<a href="https://focusreactive.com/nextjs-performance-audit/" target="_blank" rel="noopener noreferrer">NextJS audit</a> designed to pinpoint areas for optimization, improve performance, and ensure you're following the best practices for SEO and security.&nbsp; Our expert team will closely examine your implementation, provide actionable insights, and help you leverage the full power of NextJS.

Free NextJS Performance and SEO Best Practices Audit

Next.js, Headless CMS and eCommerce expert agency

React Day Berlin 2024

Build apps, not walls