React Day Berlin 2024

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.

Hello everyone! I'm Anthony Fu, a coaching member of Vit, Vue, and Nuxt. Today, I'll share my findings and practices in exploring ESLink and its ecosystem. ESLink v9.0 released 7 months ago with the new FlatConfig, which simplifies plugin configuration and provides full control and customization in JavaScript. Migrate legacy config to FlatConfig with eslink-migrate-config CLI and use eslink-config-inspector for visualized step tool. Flag config utilities make config customization easier and allow project-aware configs. ESLink is a powerful AST toolkit and can be used as a formatter. Use ESLink for maintaining stylistic rules and customize it to fit your project's needs.

Good morning, React Day Berlin! Today we'll discuss the intersection of AI and React server components. AI engineering is like salt for React developers, enhancing product experiences. Generative UI uses AI to generate text and code, and we'll build a React app using server components with generative UI. AI can improve movie search by inferring context, and we'll build a collaborative movie search project. Implementing AI search involves creating an AI context and setting UI state. We can enhance the UI by adding a system prompt and creating an AI agent for rich UI. The generate function acts as a generator for the virtual DOM. Memory functionality and interactive movie components can enhance the UI further. The future possibilities include AI-generated UI for e-commerce and personalized recommendations. React server components and the intersection of AI and UI are essential for UI engineers. AI SDK is MIT licensed and available for further discussions.

Hello, everyone. Thank you for being here instead of the other talk. Emulation is when something pretends to be something else, like a computer pretending to be a PlayStation 1. There are two types of emulation: hardware emulation and software emulation. Software emulation is when the software mimics the behavior of a console. JavaScript is not the ideal language for emulation, but it can still be used. The speaker built an emulator for Chip 8, a simple console from the 70s, as a fun project. The emulator focuses on the screen and utilizes Canvas. The Chip 8 screen is small, measuring 64 by 32, and is monochrome. The CPU and memory are important components in emulation, and understanding hexadecimal notation and bitwise operators is crucial. The speaker explains the use of hexadecimal notation and bitwise operators in manipulating bytes. Creating a switch statement for instructions is an important step in the emulator development. The legality of emulation is discussed, along with advice on not providing ROMs or proprietary BIOS. Emulation projects can be complex, and reverse engineering consoles is mentioned. The speaker highlights the performance of JavaScript in emulating consoles. They also mention their availability for further questions and provide information on how to follow their work.

Hey, I'm Sid, and I work on the design systems team at GitHub. Let's talk about building accessible React components with a focus on screen readers. Use the correct HTML element for accessibility. For example, on GitHub, there are three tabs with options. These tabs are made using buttons. Let's see how a visually impaired person using a screen reader would access this website. What do they see? I'm going to enable the screen reader and walk you through what happens. When turning on the screen reader, it sets the context and tells you where you are. For example, on the React app, a button labeled 'Code' has focus and a menu popup. Inside the popup, there are several buttons with different labels. Something interesting happens. If I can't see the UI, I'm hearing buttons but no tabs. Screen readers cannot infer things like tabs from visual design. To provide this information, we can use the ARIA spec and its roles. By adding a role tab list to the div and role tab to each button, the semantics are conveyed. The role overrides HTML semantics. Screen reader identifies tabs, pronounces 'code spaces'. Default behavior of a tab is auto-focus. We can add aria-selected attribute to specify selection. Using React, I'm using an expression to set aria-selected based on the selected tab. The navigation into the tab panel is disorienting. There are separate groups for the tab list and tab panel, and there is a need for navigation between them. Use arrow keys to navigate within the widget. Remove tabs from the tab index, only the selected tab should be focusable. Implement arrow keys for navigation. Press tab to enter the tab panel. Press shift tab to go back up. Keyboard navigation is a common pattern extracted into a hook. Decide which keys to bind based on the widget type. Change selected tab on focus. Consider the ARIA authoring practices guide for keyboard interactions. Differentiate between instant and activated tabs. Follow the ARIA spec and use the APG as an informative resource. Screen readers may not always follow the ARIA authoring practices guide. Use correct HTML elements, add ARIA roles, properties, and states. Implement keyboard navigation. Use a GitHub example of notification settings with proper semantic elements. When selecting notification channels, the options are presented in a pop-up. The focus is on the first checkbox, indicating that it is the first option. The screen reader reads the status of each option. After selecting the desired option, the form can be submitted. The change is saved and the user is notified. The focus is recontextualized on the collapsed menu popup button. Not rendering the fourth option in certain conditions hides it from screen users. Removing the conditional and disabling the fourth checkbox until necessary eliminates this issue. Using IR disabled instead of disabled makes the element accessible for screen reader and keyboard users without affecting styling or click cancellation. You have to add your own class name and make sure it is disabled. It is accessible by keyboards. Voiceover on Mac uses 'dimmed' to signify IR disabled. Adding another span that requires at least one channel. Additional descriptions can be added using aria-describeby. SCREEN READER Only notify for failed workflows. Requires at least one channel to be selected. Dimmed unticked. Tick box. Now you know the label, why it is disabled, and that it's dimmed. And let's see if it's If I mean. Never. Menu popup collapsed. This flow seems more intuitive. You know all your options up ahead. One option was disabled, enabled something else, and it became enabled again. Much more clear. Feels like a better UI. We need to design with accessibility in mind. Accessibility isn't something that you can just sprinkle on in the end. We have to bring it way earlier in the stage. Be careful when disabling elements. Use RLDisabled. Short list of six things to consider. Links on my website. Follow me on Blue Sky.

Today's Talk is about Plux, a TypeScript application built with React and Three.js. The speaker discusses the challenges they faced with state management and their journey of switching libraries multiple times. They started with Redux but later introduced GSDAN, a faster and easier-to-maintain state management library. They optimized performance using selectors but realized it became a problem when dealing with documents with many nodes. They replaced Zustand with Jotite for better performance but encountered limitations and ultimately implemented a custom store, resulting in a significant improvement. The speaker emphasizes the importance of not locking into a solution and shares their timeline for the changes. They also mention considerations for state management, recognizing performance issues, and the possibility of open-sourcing their solution.

My name is Aurora, a web developer from Norway, demonstrating a practical example of working with forms and server components using React 19. The server function is created using the `useServer` directive and allows functions to be callable from the client. The form submission and validation are handled server-side using Prisma and a message schema with Zod. The useActionState hook is used for server-side logic and updating the client state. Client-side JavaScript is used for form behavior and preventing form reset. The form is progressively enhanced and can handle multiple submissions with feedback to the user. The talk also emphasizes the reusability of the pending pattern and creating custom client components. Optimistic updates are implemented using the useOptimistic hook. React 19 and server components offer a new option to create robust forms. Using server and client notations in production services should be done with caution due to potential data leakage. Endpoints and server functions should be handled securely. Other libraries like Conform and Vest.js offer options for optimizing forms with React 19.

Today's Talk focused on performance optimization in React apps, specifically in handling and rendering enormous amounts of data. The speaker discussed various techniques and tools to achieve better performance, such as optimizing data relay, rendering, data processing, memory usage, and denormalization. They also highlighted the importance of optimizing network performance, payload size, and request handling. The Talk emphasized the need to measure before optimizing, focus on bottlenecks, and make small improvements that actually benefit users. Overall, the Talk provided valuable insights and recommendations for improving performance in React apps.

Hi everyone. I'm Johnny, an application engineer who builds user-centric React 19 applications. Today, our goal is to help you reach production mountain with React 19. Let's start by gathering a crew and discussing the motives for installing the compiler. We'll revisit React rules and explore the compiler's impact on code. The React compiler translates from JavaScript to JavaScript and provides error reporting. It enables deeper levels of optimization and focuses on user experience. To upgrade to React 19, install the latest version and be aware of any compatibility issues. Check if any custom runtime code needs to be disabled. The React compiler can be used with versions 17 or 18 if you have runtime support. The compiler removes use memos and optimizes the initialization process based on static components. It provides granular reactivity and reduces rendering, making the application feel quicker. Follow React rules and conventions to ensure compatibility. Test custom hooks, be aware of the impact on build time, and address any unexpected issues like the removal of the global JSX namespace. Debugging tools and source mapping in Chrome are useful for understanding compiler output. Enjoy translating chants and exploring the possibilities of React 19!

Today's Talk introduces the React compiler and its optimizations in React 19. The compiler handles optimizations internally, allowing existing optimizations to coexist. React 19 also brings server components, enhanced hooks, improved reference handling, and asset loading optimization. The React compiler follows the same principles as a typical compiler, with a Babel plugin and ESLint plugin identifying optimizations. The compiler optimizes components by performing in-place updates and reducing unnecessary re-rendering. The React compiler playground helps understand the optimization process. Caching JSX and configuring the React compiler can further optimize specific components. The React compiler is compatible with React 18 and 17 with some configuration, but using React 19 is recommended. Connect with the speaker for more information and subscribe to their YouTube channel. Thank you for watching!

I'm Steve Ruiz, the founder and CEO of Tealdraw. TLDR is a canvas app in React that allows developers to build with their SDK. TLDR pays attention to details that enhance the canvas experience and can be used to interact with different elements. TLDR's demos showcase its versatility, but may not perform well on social media. TLDR's AI collaboration features allow users to quickly turn their drawings into AI-generated images. The Make Real project helps users create user interfaces by drawing and providing prompts, generating working prototypes. The system behind Make Real can handle complex interactions and ambitious projects. OpenAI integration and the Steel Draw Computer enable building workflows and multi-stage generations. The goal is to bring the Canvas from being specialized to a primitive for the web. Teal Draw is free for open source and non-commercial use, with options to purchase licenses for additional features.

In this talk, we'll explore what critical CSS is, when to use it or not, how to implement it effectively, and some common challenges and use cases. The critical rendering path is a sequence of steps the browser takes to convert HTML, CSS, and JavaScript into visible content on the screen. Time and CPU are crucial factors in rendering content quickly, especially for mobile devices. Critical CSS matters because the CSOM can't be built incrementally, and the order of CSS rules affects their specificity. There are two primary ways to add CSS to your HTML: inline styles using style tags or external stylesheets using link tags. Critical CSS aligns only the styles needed to render the above-default content, reducing the size of render-blocking styles. There are manual and automatic tools for identifying critical CSS. Critical CSS is commonly used for static websites with statically generated pages. Testing the effect of critical CSS can be done using Lighthouse, Chrome Performance tab, or WebPageTest.org. BISTIs requires some extra handling but offers better performance. Over-inlining CSS and wrong style order can cause issues with critical styles. Implement optimization at build time.

My talk is called Beyond Testing Library, Testing React Libraries or Library-like Code. We want to optimize code by minimizing re-renders, avoiding tearing, and ensuring granular rendering. React Testing Library may not always be the right tool for libraries or library-like code. We test for synchronous results, but there are cases where unwanted re-renders and inconsistencies can occur. We need to avoid flaky tests and bug propagation. The new Testing Library React Render Stream library simplifies testing by replacing complex wrappers and assertions. We test for multiple independent components and ensure correct re-rendering. We introduce Suspense and DOM snapshotting to test granular rendering. The final test provides increased confidence and meets all special requirements.

I'm here to talk about Rust and Rescript, languages in the React community that offer interesting possibilities. Writing React in different languages can improve performance and code correctness. TypeScript can be messy and has challenges in Material.UI, while Rescript offers better code quality and type safety. Rescript supports advanced React features and using functions for JavaScript APIs. The power of Rescript and WebAssembly lies in writing better React code and optimizing performance. Integrating SVG into React with Rust provides fast rendering and keeps the structure intact. Learning new languages can improve code quality. Re-script debugging and SVG performance are important considerations. React Server Components and beginner Rescript projects are discussed in the Q&A session.

My name is Mauro and I work for a company called Doubleloop in Italy. Today, I'm going to share my learning journey through puzzles and challenges related to React Server Components (RSC). RSC allows for server-side rendering and streaming of components. React flight, a protocol used to serialize and share rendering jobs, is a key feature of RSC. RSC can be used without a server, known as React Serverless Components. Using RSC, different types of content can be switched using the useState hook. RSC can be effectively used on a server by starting Node.js with a specific flag. Client-only components recognized by RSC can be executed on the client. React Streaming Components introduces the streaming concept and allows for continuous updates of the page. Advanced features of React Streaming Components include asynchronous rendering, suspense, and recursion. The React Strange Constraints challenge focuses on optimizing rendering by sending the initial page as HTML. The use of a proxy and RSE payload allows for client hydration of RSC. The possibility of using languages other than JavaScript, such as Rust, for server components is explored. RSC has the potential to become a language-agnostic protocol. The meaning of client-server roles in RSC can be extended. RSC offers streaming capabilities and the ability to balance server and client work. Infinite streaming is possible with server sockets. RSC hydration is believed to be faster than regular hydration. The Talk concludes by encouraging questions during the Q&A session.

Hello, I'm Dora Moxie, a UX designer with experience in software development. Training a designer benefits the whole development process, ensuring smooth delivery. Designers have a unique perspective and prioritize problems by involving engineers and testing solutions. Effective communication and documentation lead to faster delivery. Designers empathize with the customer and understand the problem and business requirements. Collaboration between designers and developers is crucial for solving problems. The product trio of product management, engineering, and design work together as equal partners. Collaboration and iterative design lead to learning, growth, and stronger solutions. Be open-minded and collaborate with designers and involve users to solve real problems and increase satisfaction.

My name is Nicolas, and today, I'm going to talk about Fine-Grain Reactivity without the compiler this time. React is reactive, but it re-renders unnecessary components. Fine-grained reactivity is achieved by updating specific elements instead of whole components. Pigment encountered reactivity problems while building real-time financial data boards. They created their own reactive system on top of React to achieve fine-grained reactivity. They used custom hooks like useShell, useComputed, and useWatch to integrate React with their reactive system. They also considered using native JavaScript for optimization but chose to preserve React. They use external libraries like Zestand for flexibility, and maintaining reactivity during React updates has not been a problem.

We're going to talk about the age of universal React, the next paradigm shift of React. Universal React is cross-platform and follows the principle of learn once, write once, and run anywhere. React Native is born as a declarative way to build iOS and Android apps. React Native components and APIs are implemented in an interoperable way with React DOM, powering a large part of Twitter's web platform. Code sharing in a universal React app maximizes code reuse, reduces duplication, and allows platform optimization. React Native for Web is the compatibility layer that enables universal development, handling translations between React Native and React Dom. Expo is the framework of choice for React Native, with Expo Router V3 completing the universal story. Challenges in achieving parity with React Native Core due to specific platform implementations. React Strict DOM prioritizes web, bringing web APIs to React Native. Taking a universal React approach can improve performance across platforms. React Native Web and React Strict DOM prioritize performance and accessibility.

Hello, welcome, everyone. Today, I'm going to talk about building web applications with signals in Grammarly. Signals are like values that can change over time and are used in Grammarly's editor for real-time updates. Signals can be implemented with React and are leveraged for state management and business logic. They enable functional reactive and declarative programming, allowing specific actions to be defined. Testing signals can be done using classical unit tests or marble tests. Signals are a perfect fit for Grammarly's domain and can be easily integrated with various libraries and frameworks. Handling cleanup and unsubscribing to signals can be done through the dispose method and React lifecycle. The main challenges in signal-driven systems are testing and debugging streams. Marble tests provide control over signal emission and combined states can be calculated using the view function. Grammarly is considering migrating to the signals proposal in the future. Thank you, Alexey!

I want to talk about the importance of testing and how it can improve the developer experience. Lack of tests can lead to issues and breakdowns in productivity. The challenges of using TDD and testing last are discussed, along with the benefits of writing tests early. Effective tests provide valuable feedback and save time. Prioritizing user-focused testing and using tests as documentation are recommended. Tests should resemble user behavior, and enhancing testing capabilities with linters and custom matchers is suggested. Advanced testing techniques can improve developer productivity.

Today we're going to talk about utilizing caching to optimize our web application performance. We will discuss caching data and resources outside of our React application, how to control and avoid caching problems, and the benefits of caching for improving web application loading times and reducing server load. We can cache static resources like images, media files, scripts, and CSS, as well as application data like the list of articles or posts. However, we need to be cautious with caching data that may become outdated. The service worker and browser cache can intercept network requests and load responses from their caches. Additionally, headers such as cache control and eTag can be used to control caching behavior. The CDN, a content delivery network, maintains cached resources globally and aims to deliver content efficiently. Different caching points store various types of content, improving performance and enabling offline functionality.

Welcome to my talk at React Day Berlin. Today, we'll discuss vector search and embeddings for React developers. Traditional search is broken, resulting in poor user experiences. Converting data into embeddings unlocks more accurate search, content recommendations, and document comparisons. Vector search measures the closeness or similarity of vectors using distances. In vector search, the closest relevant documents are found based on similarities between vectors. There are multiple ways to calculate the distance between data in vector search. Generative AI applications often deal with both textual and image data, making vector search useful. By converting queries and data into vectors, semantic meaning is considered, allowing for more accurate results. React and Next.js developers have access to a range of toolings, including BlankChain and AI SDK from Vercel. Retrieval augmented generation enhances search results by converting data into vectors and generating more coherent text. The user query is converted into a vector and matched using vector search, and the response is generated using the AISDK from Vercel.

Today, Elisabeth Oliveira shares her journey from being a hip-hop artist to becoming a design engineer. She highlights her experiences as an artist, including collaborations with Nike and Cristiano Ronaldo, but also the challenges of exploitation and cyberbullying. Transitioning into coding, she faced setbacks but found success as a coder in Dublin. She discusses her project, Cassette Tape, which automates illustrations and won the React Amsterdam award. Elisabeth also demonstrates her SVG audio player and performs a karaoke version of her song. She encourages combining passions with code and emphasizes the importance of open source. She concludes with insights on reconciling with hip-hop and starting projects. Overall, she shares her experiences in bridging the music and tech worlds.

Hello, everybody. How are we all doing? I'm going to talk about Rome, OpenTelemetry, and identifying performance bottlenecks and issues in React applications. The pillars of observability are logs and metrics. Logs are structured messages that warn, indicate, or error. Metrics include throughput, latency, custom and core web vitals. Traces allow us to see through the pathway of our application and identify bottlenecks. One common open standard for collecting these signals is open telemetry. React's client instrumentation is experimental and mostly unspecified. The open telemetry demo provides an example of front-end tracing in React, giving you a unique service name and basic metrics. The demo shows an HTTP POST request with the pathway and timing. The open telemetry project is still working on core web vital metrics and other enhancements. Real user monitoring (RUM) fills the gaps in open telemetry, capturing missing information. In conclusion, we discussed the importance of capturing logs, metrics, and traces and provided resources for further exploration.

Our story is about a super tool that reduces bundle size without changing code. It removes input statements, improves performance, and reduces bundle size. ASTs are used to optimize constant files by removing references and replacing with values. Bubble is a tool for code manipulation using ASTs. Manipulating code with Bubble paths allows for removing unnecessary variable declarations. Careful handling and testing are necessary when using AST tools. Guarding assumptions and writing exec tests are key practices. Completing the AST development lifecycle ensures correct code updates. ASTs are a powerful tool for software development.

Today, Darko discusses the use of web components to futureproof UIs and their compatibility with multiple frameworks. He addresses the challenges of web components and introduces the Solid Element tool for better developer experience. The demo showcases the usage of props and slots in web components and explores event handling. Darko also demonstrates how to integrate web components with React. He emphasizes that web components are not a silver bullet but are valuable for specific use cases and can be replaced with frameworks. He highlights the usefulness of web components for design systems and projects like SuperTokens. Web components are also suitable for widgets and leaf components.

I'm Richard Kerrigan, and I'm thrilled to be here today to show you how you can add multilingual support into your React apps. The problem we're trying to solve is that most websites, web apps, only publish content in one language, which is not convenient for users and is not inclusive for people for whom that language is not their primary language. We need a way to support other languages and dialects on our websites and web apps without adversely affecting our team's productivity. Now there are various ways we could approach solving the problem, depending on the resources we have available to us. But for the sake of this talk, let's assume that we don't have much budget to dedicate to this feature, nor do we have a team that can translate content for us. This is a fantastic use case for AI and automation. When my team started tackling this problem, we found the Azure AI translator service. It offers ad hoc text translation and document translation, with key features such as language support, cost-effectiveness, and accuracy. It also allows the use of custom glossaries to tweak the translation process. However, there are some limitations, such as compatibility with certain file types and the need for result validation and possible tweaking. Let's now focus on designing the workflow for translating content stored as JSON. Here's an example of how you could achieve this. We're taking the pieces of data that need to be translated and sending each piece through the translator. Then, we send the translated content as a response. For JSON content, the translation can be done at runtime in a React server component or an API route. For HTML or Markdown files, the translation can be incorporated into the CI-CD workflow, involving Azure Blob Storage, Azure Function App, and the app's source code files. Instead, we've moved the translation process to our GitHub Actions workflow. We provision the necessary resources in Azure, build and deploy the function app, and then perform the translation process. We configure the translation endpoint, specify the glossary for tweaking translations, and execute the translation. Once the translation is complete, we create a new blob in the output location. Our GitHub workflow ensures that all translations are done before proceeding to the next step, where we upload and download the artifact for deployment. This ensures that all content is translated and avoids errors for missing files. When setting up the translation process, it felt like magic. The pipeline for translating Markdown content is the same as for HTML content. The difference lies in how the metadata is handled. In HTML, the metadata is stored in the head of the file, while in Markdown, it is within the front matter section. When translating HTML files, the head needs to be translated as part of the process. For Markdown files, the metadata needs to be translated separately due to issues with Azure AI Translator. The translation function parses and translates the original files' metadata, then combines it with the translated files' content. The GitHub actions workflow provisions Azure resources, builds and deploys the function app, and runs the translation process for both HTML and Markdown files. The process is now deploying the ARM template that includes the necessary resources. We discussed the problem of limited language support on websites and web apps, the benefits of Azure AI Translator, and alternative solutions. We also explored different versions of the app for translating JSON, HTML, and markdown content without learning a new language. If interested, you can find more information and resources on GitHub and Azure AI Translator. The workflow is now deploying and translating the markdown files. It ensures all files are translated before deployment. Once the translation is complete, the files are put back into the repository. The deployment process guarantees the presence of all necessary resources. After a brief wait, the web app is ready to be viewed. The blog contains multiple posts. The metadata provides the title and excerpt for each post. The markdown is parsed into HTML for rendering. Formatting is preserved in different languages. Feel free to connect with me on LinkedIn or X.

Hello, I'm Naman and today I'm going to talk about atomic power and the story of StylX. CSS preprocessors like Sass and Less emerged to address challenges with CSS. In the evolution of CSS, there was a fork in the road with some moving towards CSS modules and others towards CSS in JS. Atomic CSS is about breaking styles into small, reusable pieces. Tailwind is a successful implementation of atomic styles. Stylix is a JavaScript compiler that generates atomic CSS and allows for defining styles once and reusing them. The speaker demonstrates the conversion of a design to Tailwind classes using Stylix. The TW function and parser in StyleX are discussed for defining constants and converting them into StyleX objects. Atomic CSS is a widely agreed concept and Tailwind can be used with StyleX. The React Strict DOM project is mentioned as a tool for writing UIs for web and React Native.

Hello, everyone. Today I'll talk about boosting React Native app performance. We'll explore optimization techniques, practical strategies, tools, and examples. Performance is crucial for mobile apps. Slow apps lead to frustration, abandonment, and revenue loss. We need to maintain 60 frames per second and overcome performance challenges. Let's understand the React Native architecture, legacy model, and the new architecture with JSI, fabric renderer, and turbo modules. Performance issues in React Native arise due to the single-threaded nature of JavaScript. The React Native bridge can be overwhelmed by large payloads, so using JSI for direct native communication is a more efficient solution. Profiling tools like Flipper, Chrome dev tools, React dev tools, Xcode instruments, and Android profiler help identify bottlenecks. Offloading heavy computations to web workers or JSI can improve JavaScript performance. Enable Hermes engine for improved performance. Optimize flatlist usage, delay non-urgent tasks, and prevent memory leaks for better app performance. Use initial numToRender and maxToRenderPerBatch props, memoize render item, and clean up side effects for optimized rendering. Preload and cache images, delegate gesture processing to the native thread, and continuously test the app under real-world conditions for smooth rendering and fluid UI.

Thank you all for welcoming me here. I am giving a remote talk on testing. The community here is warm and amazing. I hope Marin does well and we hope to see him soon. Six years ago, I joined a big tech company working on improving UX and UI. We released the UX improvement to 60 million users, but overlooked leveraging the design system. Recognizing the importance of the design system, I reached out to the design system manager to address the issue. I proposed solving meeting fatigue and defined my role as an internal developer advocate. Challenges in shipping code for developers and building credibility were discussed. The importance of fostering open communication, supporting users, and expanding workshops was emphasized. Continuing conversations through office hours and release demos improved adoption. Streamlining code updates and celebrating advocacy were key strategies. The speaker now runs a developer tools company called Tool Space.

My talk is about building things that don't scale. It starts with wanting to use a specific app and then deciding to build your own app. Building something that scales requires thinking about various factors like analytics, monetization, SEO, expansion, localization, and competition. Building fun and non-scalable apps can also be enjoyable. Examples include an app for automatically cropping screenshots and a private chat app. The use of Expo Go as a launcher for Expo apps and hosting servers for auto-updates is discussed. The creation of a Google calendar synchronizer using Expo Development Builds is also mentioned. The final takeaways are to think small, have fun with libraries but avoid using too many, and stay away from the app store for as long as possible. Visit the speaker's website for more information.

Hello everyone, and I'm so happy to see you here in React Day Berlin. This talk is on security and testing, two topics I'm passionate about. It's a wonderful allegory on web security using Plants vs. Zombies as inspiration. There are reasons to focus on testing as a line of defense. Learn your application and its vulnerabilities. Tests are the messenger, listen to them. Use OWASP's top 10 ranking to understand the most important security risks, including broken access control and cryptographic failure. Injection is a major security risk. Writing proper tests and using test cases can help mitigate this issue. To test for injection vulnerabilities, write negative tests that simulate extra injections in input fields. Test content security policies using Cypress. Implementing best practices and multiple defenses can keep attackers at bay. Automation is essential for detecting security issues in your app. Write test cases, use the features of test frameworks, and consider using different types of testing.

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.