December 8 - 12, 2023
React Day Berlin
Berlin & Online

React Day Berlin 2023

Build code, not walls

StoryblokHandsontableBonialAblyAuth0 by OktaFocusReactiveSentryReplay.io
Rethinking Bundling Strategies
32 min
Rethinking Bundling Strategies
We take a look at different challenges and decisions when bundling code for web applications. We look at how these are commonly solved and why we need to rethink them.
All Things Astro
28 min
All Things Astro
Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we’ll take a look at some of the newly released features in Astro 3, do some live coding and have some fun. We can take a look at what’s coming next in Astro 4 and there also might be a 'one more thing
Javascript Should Come With Batteries
30 min
Javascript Should Come With Batteries
Setting up JavaScript projects is no fun. Getting started involves installing and configuring node, tsc, prettier, eslint, a testing framework, a database driver, and more. Why is JavaScript not batteries included? In this talk we'll talk about how Deno fixes this, letting you focus on building stuff. We explore what benefits full tooling integration unlocks, and remember how fun it is to program if your tools help you, rather than requiring your babysitting.
Brace Your React, New Core Web Vitals are Coming
30 min
Brace Your React, New Core Web Vitals are Coming
In a few months, Google will DESTROY your React app......well, kinda. In March, Google is releasing a new Core Web Vital called Interaction to Next Paint (INP). It measures the speed of interactions – and every React site Ivan has seen so far had INP way in red. This is bad for any site that cares about SEO.In this talk, let’s learn how to prepare for the new Core Web Vital: how INP works, and how to improve it – both manually and with new React APIs like useTransition() and React Concurrency.
React Server Components
27 min
React Server Components
React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.
Exploring React Server Component Fundamentals
21 min
Exploring React Server Component Fundamentals
Top Content
I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.
React's Most Useful Types
21 min
React's Most Useful Types
Top Content
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Managing React State: 10 Years of Lessons Learned
16 min
Managing React State: 10 Years of Lessons Learned
Top Content
Managing React state is hard. Why? Because there are so many options to consider! Local state, reducers, custom hooks, context, and over a dozen third-party libraries. In this session, we’ll explore the lessons I’ve learned from managing complex state in React over the last seven years. I’ll share my strategy for categorizing React state including local, server, global, derived and many more. After this session, you’ll understand how to identify different types of state, where to declare state, and how to choose between these different options.
Building a Digital Sommelier on Top of ChatGPT and the OpenAI API
8 min
Building a Digital Sommelier on Top of ChatGPT and the OpenAI API
When treated as a platform, LLMs such as ChatGPT become powerful building blocks for custom, conversational agents. In this talk, we use the OpenAI API and Vercel AI SDK to build a digital sommelier that recommends the perfect wine.
Break the Race: Easy Race Condition Detection for React
31 min
Break the Race: Easy Race Condition Detection for React
Race conditions are among some of the most challenging to detect and reproduce issues. As such they pose a significant challenge in development notably in UI. In this talk, we explore how to detect race conditions by leveraging fuzzing techniques. We walk you through discovering the real problem of race conditions and how they impact user experience. We provide you tools and examples demonstrating how to easily detect them in your daily work thanks to tests relying on fuzzing. After that talk, we hope your React code will be race conditions free or at least that you will have the right tools to help you.
Challenges of Decomposing a Massive Front-End Using Micro-Frontends
28 min
Challenges of Decomposing a Massive Front-End Using Micro-Frontends
Our web UI application is pretty big - hundreds of people have been actively building it during the past eight years. We started facing scalability issues and technological limitations. We evaluated plenty of options and settled on micro-frontends. This evening we will discuss:- Differences between various micro-frontend architectures- Why we made this choice and if it's helpful for you- What we gained- What we sacrificed (yes, there are downsides)- What challenges are still ahead of us
Durable Objects - Everything Everywhere All At Once For Not Very Much Money
31 min
Durable Objects - Everything Everywhere All At Once For Not Very Much Money
Cloudflare's Durable Objects are a new JavaScript runtime that makes building stateful, on-demand backend servers on the edge as easy and cheap as serverless functions. By colocating compute and state, Durable Objects melt complexity at scale, and allow you to focus on building your product.In this fast-paced talk we'll live code a real-time backend from scratch, show how Durable Objects work, and explore how you can apply this versatile tool to a wide range of everyday engineering problems.
How to Automatically Consume APIs with React
7 min
How to Automatically Consume APIs with React
In this talk, I'll introduce the audience to the potential of OpenAPI in simplifying and enhancing the development process for React applications. I will demonstrate how OpenAPI can be harnessed to seamlessly autogenerate REST APIs, streamlining the consumption of data within React projects. With a keen focus on efficiency and reliability, attendees will gain valuable insights into implementing automated tests to ensure robustness and quality in their applications.
What's New in Redux Toolkit 2.0
8 min
What's New in Redux Toolkit 2.0
Redux Toolkit 2.0 is here! Find out what's changedand why, the work that's gone into repackaging the Redux libraries, an overview of new features and breaking changes, and a look at future plans.
A Nerdy Guide to the Web Trending Concepts
10 min
A Nerdy Guide to the Web Trending Concepts
What do S.H.I.E.L.D. and A.R.G.U.S. have in common with edge computing?How can Iron Man and Batman help you understand hydration, partial hydration, and resumability?What can the Watchers or the Monitors tell you about Reactivity?Join this adventure straight from the pages of a comic book as your favorite heroes and villains help you understand some of the most discussed topics on the web now.
Escape Security Flaws
7 min
Escape Security Flaws
An elevator pitch for security - yay! I know, security is often frustrating or even annoying. But we all work in tech and at some point, security always becomes a topic. Let's discover a real-world security flaw and what we can learn from it to prevent such incidents. It's gonna be fun, I promise. 
Bringing React Server Components to React Native
29 min
Bringing React Server Components to React Native
Top Content
React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!
Multiplayer Games with React Three Fiber and WebSockets
28 min
Multiplayer Games with React Three Fiber and WebSockets
Multiplayer games are the coolest: they bring us closer together, even when we’re battling it out. While you can’t build World of Warcraft in a weekend, you also don’t need a big AAA game studio production team to create a game that is fun and engaging. All you need is good old React with some Three.js and WebSocket magic sprinkled in! This talk walks you through creating a simple multiplayer game in the browser using React Three Fiber and Socket.IO. You will learn how to structure the game code, render an interactive 3D scene in the browser, and establish two-way communication between the client and server.
Superpowers of Browser's Web API
30 min
Superpowers of Browser's Web API
When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code.
In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀
All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers.
So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more! 
Preparing for Success: A Frontend Engineer's Guide to Tech Due Diligence
32 min
Preparing for Success: A Frontend Engineer's Guide to Tech Due Diligence
Imagine being a knight preparing for a jousting tournament, but your horse is more interested in the fair's hay bales than your impending duel. That's what prepping your tech department for an investment round or exit can feel like sometimes. This talk provides an in-depth look into the role of a frontend engineer, especially working with React, in preparing a tech department for an investment round or an exit. Through a unique lens of tech due diligence, the presentation uncovers the importance of good practices, solid architecture, efficient documentation, and more.
Crafting Pristine React: Best Practices for Maintainable Code
29 min
Crafting Pristine React: Best Practices for Maintainable Code
In the dynamic world of React, ensuring that your code remains clean and maintainable is paramount. Dive into a session that demystifies the intricacies of structuring your React projects, distinctly separating concerns, and adhering to best practices that stand the test of time. Drawing from real-world experiences and hands-on tips, this talk promises to arm you with the knowledge to elevate your React codebase to the zenith of clarity and efficiency.
Empathy Driven Development
29 min
Empathy Driven Development
Empathy-driven development empowers developers to create software that truly understands and serves users' needs. This talk explores practical techniques for integrating empathy into the development process, leading to more intuitive, user-friendly applications. Learn how cultivating empathy can foster collaboration, improve code quality, and ultimately enhance user satisfaction. Join us to unlock the transformative potential of empathy in your development journey.
How MDX is a game changer for your React Project's Documentation
28 min
How MDX is a game changer for your React Project's Documentation
Documentation is essential to any project and it can really "make it or break it".  However documentation is time consuming to draft and can sometimes be forgotten, or updates and amendments to it left behind as the project moves forward.  Additionally, creating your documentation with Markdown has its limitations, so you may not end up with the result you want or that your contributor needs. 
By using MDX you can combine Markdown with code and integrate it into your React project.  Documentation becomes a more streamlined and efficient process and dare I say it...fun. 
The day I broke React Native
30 min
The day I broke React Native
4th November 2022 - It was just a regular day for the "release crew" as we were approaching to prepare the first release candidate for React Native 0.71. Little did we know how an innocuous release could have triggered a domino effect resulting in failing builds for nearly every React Native developer out there.
With the wisdom of hindsight, we'll walk through what happened, what are our lessons learned and the lowlights of this incident. We'll have the opportunity to look through the internals of React Native, discover our incident-response culture, and learn how we're hardening our ecosystem to protect us against similar events in the future.  
Join me as we revive this incident, and don't miss this opportunity to gain insights, be inspired, and embrace the lessons learned from the day I broke React Native.
Hacking an e-Reader to Show My Tea Menu With JSX
7 min
Hacking an e-Reader to Show My Tea Menu With JSX
I wanted to have a tea menu to show guests and for my own reference. Turns out e-Readers use so little power and can render HTML! I'll share how to generate an e-book with all your drinks with React, JSX, and Deno, as well as rendering a custom cover page with SVG. Wow your friends by turning an old device into a smart home tea menu, and learn how to write your next book with React.
A Tale of the Flip Floppers. From Engineer to Manager and Back Again
7 min
A Tale of the Flip Floppers. From Engineer to Manager and Back Again
I've flip flopped between engineer and manager three times already. I'm quite aware that this is not an unusual thing to do. There's a heap of flip floppers out there! At Atlassian I'm in a new managers group. Interestingly there are many managers in the group that have previously been managers but joined Atlassian as an engineer.
So what's wrong with us? Why do we keep changing our role? Is it boredom? Are we crazy? I think there's actually method to the madness. Each time we make a change it's intentional and there's a purpose, and whilst some say it can hurt your career, I'd like to take you on a journey to explore why flip floppers are a very valuable breed!
The Anatomy of Webpack: A Deep Dive Into Its Architecture
15 min
The Anatomy of Webpack: A Deep Dive Into Its Architecture
Webpack is a powerful tool for building modern JavaScript applications, but its architecture can be complex and daunting for developers who are new to it. In this talk, we will dive into the inner workings of Webpack and explore how its various components work together to create a bundle.

By the end of this talk, you will have a comprehensive understanding of Webpack's architecture and its plugin system. You will be equipped with the knowledge to build complex applications using Webpack confidently.
Building Enterprise-grade GraphQL APIs with Domain-Driven Design and Clean Architecture
22 min
Building Enterprise-grade GraphQL APIs with Domain-Driven Design and Clean Architecture
In this talk, we will explore how to build scalable and maintainable GraphQL APIs for enterprise applications using Domain-Driven Design and Clean Architecture patterns. We will discuss the importance of modularizing your API around the business domain and better subdomain organization. We will briefly go through the main components of a GraphQL API, including resolvers, domain layer, and database layer and how we've evolved them to our new architecture.
Pushing Boundaries to the Edge
11 min
Pushing Boundaries to the Edge
While the technology goes further and further, web development tries to get closer to the user. CDNs and web servers are evolving, and they now offer us the possibility to execute server-side logic without depending on a unique data center located in a specific place in the world. Let’s present the concept of The Edge. We will see how it works, and we’ll talk about Edge Functions. We’ll discuss why the main hosting providers are introducing this technology, and why different JavaScript frameworks are modeling their approaches based on Edge computing.
Deconstructing Distributed Tracing
8 min
Deconstructing Distributed Tracing
Distributed tracing is a powerful technique that allows you to track the flow and timing of requests as they navigate through a system. By linking operations and requests between multiple services, distributed tracing provides valuable insights into app performance and helps identify bottlenecks. In this talk Lazar will explain the concept of Distributed Tracing by walking you through how monitoring tools build tracing solutions.
Local-first Apps with ElectricSQL and React
12 min
Local-first Apps with ElectricSQL and React
Local-first is a new paradigm for developing apps with instant reactivity, realtime multi-user and conflict-free offline built in. This talk shows how to develop local-first systems with React using ElectricSQL, a open source software platform from the inventors of CRDTs.
OpenAI in React: Integrating GPT-4 with Your React Application
11 min
OpenAI in React: Integrating GPT-4 with Your React Application
In this talk, attendees will learn how to integrate OpenAI's GPT-4 language model into their React applications, exploring practical use cases and implementation strategies to enhance user experience and create intelligent, interactive applications.
Virtual DOM: Back in Block
9 min
Virtual DOM: Back in Block
Is the Virtual DOM pure overhead? In this tech talk, Aiden Bai explores the performance implications of the Virtual DOM in frameworks like React and presents an alternative approach called the \"block virtual DOM.\" Aiden delves into the origins of the Virtual DOM, its purpose in addressing performance issues, and the process of diffing and reconciliation. The talk introduces the Block virtual DOM, which takes a different approach to diffing by using static analysis and dirty checking.
React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
10 min
React(ing) to WebRTC: Build Better Audio and Video Experiences with Daily React
What is WebRTC (Web Real-Time Communication), its main challenges, and how does the combination of React + Daily solve for them? We'll take a deep dive into specifics like React audio and video media elements and Daily React components and hooks. You'll even walk (or code?) out knowing how to build a video grid in just two minutes. 
Accelerating Design & Development Innovation with AI-driven Tools
21 min
Accelerating Design & Development Innovation with AI-driven Tools
Designers and developers work on different timelines—designers look to the future while developers build from what’s already been designed. They speak different languages and follow different processes. How can we bridge these gaps and build a more collaborative development process? In this talk, we will explore the integration of AI-driven tools and techniques to enhance design systems, fostering improved communication between cross-functional teams. By leveraging artificial intelligence, we can not only boost productivity and innovation but also create a more harmonious and efficient workflow for both designers and developers
Config Driven UI using ReactJS
7 min
Config Driven UI using ReactJS
We at Microsoft are rethinking the way we use ReactJS as frontend devs, traditional React UI Design patterns results in redundant code, making code maintainability cumbersome. By making UI Config driven we supercharged React components by making config file a single source of truth, The above approach made it easier to onboard new UI scenarios quickly and with minimal regression in the old UI Flows, resulting in a significant reduction in dev efforts, the best part is all the code was kept in Typescript only no XML or other declarative languages were used.
How the Shadow DOM has Got You Covered?
18 min
How the Shadow DOM has Got You Covered?
We learn about possibilities of what DOM can do but have you ever wondered what all possibilities Shadow DOM can have. Well, In this talk I will help you understand how the Shadow DOM has got you covered. We will further deep dive into how you can use React with Web Components.  
Let's build a TV Spatial Navigation
34 min
Let's build a TV Spatial Navigation
In this talk, I'll take you through my journey as I joined the team supporting our Smart TVs application and share my experience learning one of the most overlooked but essential pieces of functionality we have.
Applying Product Thinking Principles to your Design System
6 min
Applying Product Thinking Principles to your Design System
You've planted the seeds of your design system. Maybe you've built out a few components and set up a basic Storybook. But where do you go from here?
It can be easy to let your inner perfectionist take over and try to cover every scenario and edge case, especially when referencing established design systems. However, a more effective approach is to treat your design system as a product that grows and evolves with your users. Ultimately, its value lies in the problems it solves and the needs it meets.
In this talk, I’ll explore how to apply product thinking principles to your design system, interweaving examples from my own experience as a design system engineering lead.
How to Improve Your Web Application's Security Using Mozilla Observatory
9 min
How to Improve Your Web Application's Security Using Mozilla Observatory
In today's digital landscape, web application security is of paramount importance to protect sensitive user data and maintain user trust. The Mozilla Observatory is a powerful tool that can help developers assess the security posture of their web applications. In this talk we'll learn how to improve the security of web applications using the Mozilla Observatory. 
How Much RAM Is Your UseMemo Using? Let’s Profile It!
20 min
How Much RAM Is Your UseMemo Using? Let’s Profile It!
Memoize all the things!, is what most React guides will tell you, explaining how its memory cost is negligible compared to its performance benefits, but has anyone actually ever measured it? What about doing it in a complex React application with several thousands components? Turns out getting that answer is not simple at all, and requires delving into the complex world of Chrome Memory Profiling. This talk will explore the basics of heap profiling, moving on to more advanced tools and techniques for analysing memory usage in your React application, including how to profile it in your CI pipeline and answer your own optimisation questions by writing custom heap analyzers.
Mastering Mobile DevOps: Leveraging React Native for High Performance
8 min
Mastering Mobile DevOps: Leveraging React Native for High Performance
In the dynamic realm of software development, successful industry leaders share a common proficiency in four pivotal metrics: Deployment Frequency, Lead Time for Changes, Time to Restore Service, and Change Failure Rate. Yet, achieving high performance in these areas within the mobile world presents unique challenges. This talk delves into the depth of best practices and innovative technologies within React Native and mobile DevOps ecosystems, all aimed at our ultimate goal: the continuous delivery of value to our users.
Build Intelligence at the Edge - Machine Learning with React Native
13 min
Build Intelligence at the Edge - Machine Learning with React Native
Have you ever wondered if we can really build machine learning models in React, rather than in the mainstream languages like Python or R? Afterall, React is the most used language by the developers, according to a 2019 survey by Stack Overflow. Well, this sounds like a crazy idea, because React is not designed for high performance computing and neural networks are compute-intensive! But, wait a minute - we have libraries such as Onnx.js, Tensorflow.js to our rescue! In this talk, I’ll be delving deeper into the process of building and deploying machine learning applications using React.
To App or Not: When to Choose Native or Web
23 min
To App or Not: When to Choose Native or Web
In today's landscape, deciding between building a native app or a web app can significantly impact your project's success and user experience. As technology advances and user expectations continue to evolve, the decision-making process becomes increasingly complex. Let's dive into the key considerations that can help you determine what is right for you, a native app or a web app. We'll also look at real-world examples of apps and examine the reasons behind their choice of development approach.
Understanding Rendering Patterns
9 min
Understanding Rendering Patterns
React has exploded in popularity thanks to the performance and unrivaled developer experience the virtual DOM and reconciliation could offer. But as our apps grew, we started pushing the boundaries of managing client state in a performant way. Let's see how to achieve fine-grained reactivity and what resumability brings to the table.
The Future of Web Storage: Exploring Advanced Storage APIs
9 min
The Future of Web Storage: Exploring Advanced Storage APIs
Are you tired of relying on outdated web storage techniques? Join us as we explore the latest advancements in web storage and data management that will supercharge your web applications! In this presentation, we will dive into the world of advanced APIs such as IndexedDB, CacheStorage, FileSystem API, and more. We'll compare the benefits and limitations of each API, discussing their persistence, quota, security, and performance. We'll also explore real-world use cases and discuss web storage beyond local-storage and session-storage
Building a Better Micro-Frontend Framework That Enables Platform Freedom
28 min
Building a Better Micro-Frontend Framework That Enables Platform Freedom
A modern tooling experience usually involves a user journey on multiple mediums, including Web, VS Code, GitHub, etc. Writing custom code and components for each platform is not the most efficient approach, leading to code duplication and, most importantly, the risk of a lack of a cohesive experience.
Multiplying Architecture is a set of patterns, techniques, and libraries that, using micro frontends and some innovative backend services, allow for the re-use of the tooling component in different distribution mediums
Come to this talk to learn how we are able to enable multiple tooling teams across Red Hat to deliver the best native experience of UI components (s and Views) on VS Code, Web, and Desktop, and directly integrate them on GitHub(Chrome Extension) with minimal changes on their code base.
SOLIDify Your React Code
11 min
SOLIDify Your React Code
Writing a cleaner Code in React by following SOLID Principles
Hacking JSX: Building in Minecraft with React
7 min
Hacking JSX: Building in Minecraft with React
When combined with a custom rendering function, JSX can be used to quickly build a custom domain-specific markup language. I will show you how to approach this using the example of creating builds in Minecraft.
Daily Brush for Website Speed: Embrace the Performance Budget Ritual
13 min
Daily Brush for Website Speed: Embrace the Performance Budget Ritual
In this talk I will use the dental metaphor in order to introduce the performance budgets just like brushing teeth everyday to keep them clean and healthy you should do the same for your website by setting a performance budget and check it in every pull request in your pipelines, the target audience is mid-level to advanced, I will start by the example of the tooth decay and cleaning them then brushing them everyday as the dentist advice, then explain decay as the performance issue and performance budgeting is like the toothpaste and go from here with the different techniques that developers can do in order to prevent any loss in the performance wins they made.
How Do We Use React Native at Mattermost. Architecture and Design
18 min
How Do We Use React Native at Mattermost. Architecture and Design
At Mattermost we use React Native for our app. It is a fairly complex project with more than 100.000 lines of code, with plenty of challenges, like performance, reliability or offline support.
This talk will cover some of those challenges and several design decisions we have made so far to address them, along some other decisions to keep the code base readable and navigable.
CSS Only* Search: Improve React Filtering Performance with CSS!
11 min
CSS Only* Search: Improve React Filtering Performance with CSS!
Working on emoji-picker-react I encountered a challenge - filtering the list of 1800 emojis triggered a significant delay due to re-renders.Let's learn how I fixed this only using CSS!
WebAssembly and React: A New Era of High-Performance Web Applications
14 min
WebAssembly and React: A New Era of High-Performance Web Applications
Hold on, WebAssembly on the server?! I thought it was for browser!

In this talk, we'll explore the benefits of using low-level languages on the server-side, and the different possibilities that WebAssembly provides for building high-performance web applications. We'll dive into different providers for WebAssembly functions, as well as practical use cases for integrating WebAssembly with React.

By the end of this talk, you'll walk away with a deeper understanding of how server-side WebAssembly and React can be used together. You'll also gain practical insights into how to use low-level languages on the server-side, and tips for overcoming common challenges when integrating WebAssembly with React.
Type System React
21 min
Type System React
TypeScript's type system is incredibly powerful. It can represent bizarrely complex interdependent JavaScript types and comes with a Turing-complete set of logical conditions. But this is a React conference, right? Let's implement a primitive React purely in the type system. For fun!
WordPress-like Plugins, but for Next.js
Dec 12, 17:22
WordPress-like Plugins, but for Next.js
Join me on my journey of creating the Next.js WordPress-like Plugin System, an experiment that enhances Next.js applications by allowing easy installation and customization of plugins for features like Google Analytics, Social Login, and E-commerce. I'll showcase the unique features of the file-based plugin system, such as persistent storage per plugin, registration of components, routes, and functions, and a cross-plugin event system. The talk also shares the story of how and why I solved this problem to make developers' lives easier. Check out the experiment at https://github.com/gluestack/next-wordpress-plugins.