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.

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, 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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.

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!

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.

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.

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.

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!

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, 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.

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.

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.

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.

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.

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.

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!

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.

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.

React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching 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.

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. I'm Sierra Coleman, and welcome to my talk. Today, we'll explore four key aspects of this approach: systematic gathering and analysis of user feedback, competitive analysis, using analytics tools like Looker, and the transformative role of AI in improving search match relevance. As a result, we saw dramatic improvements in the relevance ratings from our users, directly driven by user feedback. Competitive analysis helps us position ourselves uniquely and aligned to user demands. Looker and similar tools transform raw data into actionable insights, allowing us to make informed design decisions, segment users, identify bottlenecks, and have real-time visibility into product health. Integrating user feedback and data insights informs AI strategies to enhance search match relevance. AI techniques like embeddings, semantic search, and real-time scoring help improve search accuracy. Embrace these insights to enhance user experiences and drive success.

Hey there! I'm Andy O'Neill from WebLitica LLC. Let me introduce you to game-changing personal automations that can supercharge your productivity using Make, an automation tool. Make, a direct competitor of Zapier, can automate your work, connect to over a thousand apps, and easily scale your automations. One example is a daily briefing bot that helps you stay updated without overwhelming your brain with information. I've created my own AI personal assistant, also known as Jarvis, which summarizes a LinkedIn RSS feed, provides weather updates, and delivers the information as an audio file via Slack. You can use an RSS feed to get updates while commuting. One of my automations is a LinkedIn connection accelerator that generates personalized connection requests. Automate meeting notes with AI. This automation grabs and formats meeting notes, determines meeting duration, and adds them to Evernote. Automate voice-to-Evernote with your phone. Use an audio recording app to capture brilliant ideas on the go. Sync the recording to Dropbox, use ChatGPT to write the information, and save it to Evernote. Automate the transformation of emails into tasks in Monday. Content Curation for LinkedIn: Automate the process of generating and scheduling LinkedIn posts by watching an RSS feed. Unsubby Digest: Receive a daily summary of newsletters and manage email subscriptions more effectively. Save time and stay organized with this automated email summary. Automate faceless video creation for YouTube Shorts using an RSS feed and the Placid AI platform. Automatically generate a ranked list of candidates tailored to your needs with TapFlow. Automate capturing software recommendations to your second brain with a dedicated Slack channel. Save time by automating SEO optimized blog post generation. Get a free account with Make using the QR code. Start with the core plan for a free month. Take the Make Academy training to learn the basics. Join the co-build collective for business automation coaching. Get one-on-one help with your make automations. Connect and book a call at weblitica.com. Join the community and get started with Make.

Hello and welcome to the Productivity Conference! In this talk, Bożej Abel, CEO and founder of Lendingy, discusses the use of no-code programmatic pages for SEO and SEM. He presents two case studies, one about Lendingy and the other about the STS Gaming Group. The first case study focuses on generating leads by using programmatic pages to compare Lendingy with other solutions. The second case study explores how the STS Gaming Group leverages programmatic pages for real-time marketing of sports events. Both case studies highlight the benefits of using programmatic pages to automate and streamline marketing efforts.

Hi, and thank you for joining me today to learn about using AI to level up your marketing content. AI is important to marketers because it helps us do more. It benefits both low and high-performing marketers, leveling the playing field and boosting performance. Prompting effectively is crucial for creating quality content. Custom AI models can enhance content beyond commercial chat bots. To create good content with AI, follow the prompt framework and use specific prompts that follow best practices. Personalize content with GPTs by creating a marketing leader persona and training GPTs with specific instructions. AI can play a role in creating various types of content. These tools are changing our job and leaders prioritize hiring people with AI skills.

Hey, everybody. I'm Leo Goldfarb, a managing partner at albato.com. We're a no code integration and automation platform with 800+ out of the box API integrations. Our flagship product, albato embedded, is geared towards SaaS companies. Instead of burdening your team with developing integrations, you can embed our white labeled integrations in your SaaS. Our outreach is targeted mainly at B2B SaaS companies. We explore leveraging AI to boost outreach performance. Cold outreach has become increasingly hard, and some techniques that used to work are no longer effective. Let's dive right in and see the positive outcomes of our efforts, thanks to AI in our outreach. Even a reply like this is always better than no reply. We believe in making our messages meaningful and valuable to grab people's attention. There's a never-ending dilemma in cold outreach: personalized outreach or outreach at scale. With the help of AI, we can personalize at scale. Every outreach relies on high-quality prospect lists, impactful data points, and killer messages. The first pillar of outreach is high quality prospect lists. Gathering impactful data points helps prequalify leads. The spearhead of outreach is a killer message. The reply rate for this campaign was around 20%. After implementing AI in outreach, we focused on personalized and on-point messaging. We addressed the problem with integrations via Zapier and emphasized the need for native integrations. We leverage chat GPT to generate personalized messages and specific use cases for sense park customers. The campaign involves extensive personalization, including basic, buyer persona, and dynamic value propositions. We used an outreach dataset filled with AI-generated data points, including company details and integration use cases. We pulled customer reviews from G2 and used AI to identify the most common and critical problems with integrations. Chat GPT is good at determining review sentiment and identifying reviews mentioning integrations. However, it struggles with aggregating data and identifying hidden patterns. Chat TPT is better without setting hard boundaries, allowing it to be creative and provide convincing results. AI is effective at identifying isolated ICP criteria but struggles with complex composite ICPs. We attempted to use LinkedIn social activity as a conversation starter for sales, but the generated messages were off and dubious. To incorporate AI into our cold messages, we feed our prospect list to open AI via API. We train and tweak the language model through iterations until we're satisfied with the outputs. The AI-generated data points are then uploaded to our outreach automation tool, enabling hyper-personalized AI messages. We also offer white label, embeddable integrations for SaaS companies to provide seamless experiences within their platforms.

Welcome to my talk on methodologies for implementing the write no code tech stack. Today, we'll discuss choosing the right tools for your tech stack, process improvement methodologies, and give examples of no code tools for marketing teams. Consider user experience, budget, timelines, integration possibilities, customer support, and external expertise when choosing tools. Process improvement methodologies include lean management, continuous improvement cycle, brainstorming, process mapping, 5W1H, Lean management, the Deming cycle, Jodoka, and Kaizen. Total quality management is user focused, process centered, promotes integrated systems, is strategic, and systematic. Solver has its own automation methodology with four steps: identifying, executing, and continuous improvement through quality control and assessment. Some adaptable no-code tools for marketing teams are SmartSuite, ClickUp, and Zapier. ClickUp is a project management tool with different entities and lists for organizing content. Zapier is a no-code automation workflow builder that connects to thousands of cloud-based tools. Attend the workshop on December 10th to learn about Zapier's AI capabilities and tool integrations.

Hi all and welcome to my quick demonstration on how you can master AI content with automations for SEO. The wrong way to do AI-powered search engine optimization is by leaving everything to AI, which can lead to hallucination in content and regurgitation of existing information. Additionally, the lack of experience and expertise in AI can be a limitation. However, with the right approach and a little bit of research, automation can still be effective, as shown by the success of AI-generated content in ranking for certain queries like gaming laptop temperatures. And all this stuff is as a result from AI generated content. We can maximize it by following three steps: finding frequently asked questions, answering them with an AI writing tool, and checking and uploading the content. This approach can yield great results in the right niche. So, I've Googled gaming laptop temperatures and found the most frequently asked questions. One easy way is to scroll down to the people also asked section on Google. Another approach is to use the free tool called Also Asked. With machine AI, we can turn these questions into blog posts and generate traffic for our website that sells PC gear, gaming PCs, and cooling fans. We'll target gamers aged 25 to 40 looking for the best gaming gear. Instead of using a keyword, we'll paste the questions from the Also Asked section, making sure to vary them up a bit. Let's quickly write a cluster of interlinked blog posts using Machine.ai. Configure the settings, select the cluster of articles, and write them. Machine.ai allows direct publishing to WordPress, but it's recommended to publish as a draft for editing. The generated articles are ready to go, answering user search intent. Ensure your niche does not fall under your money or your life. Use AI and automations as an extension of your writing. Capture your ideas using an automation with Slack and transcribe them with Whisper. Use Perplexity to search for blog topics and generate well-structured content with a pre-trained GPT. Organize everything in a Google Sheet and publish wherever you want. All ideas are fleshed out using AI. Customize the output in HTML, markdown, or email format. Test a quick HTML preview to see the written blog post with interlinked information. Easily generate images and learn to use Slack and Make for automation.

Today's Talk discusses the effective use of Gen AI in marketing while prioritizing safety, ethics, and compliance. Challenges of using generative AI include data breaches, intellectual property theft, compliance violations, and damage to brand reputation. Best practices for implementing generative AI include secure data retrieval, masking techniques for sensitive information, and toxicity checking. Strategies for safe and secure usage of Gen AI involve implementing a sensitivity layer for data protection and developing a secure user interface. Additionally, ethics training, continuous education, and prioritizing ethical AI use cases are crucial for successful implementation.

Hi, my name is Phil Blayken. I am the head of Enterprise Innovation at Zapier, and I'm super excited today to talk to you about going from scrappy to scaled in no-code operations here at ProductivityConf. The rise of the ops hero starts with automating tasks using no-code tools like Zapier or Airtable, but it can lead to chaos if not managed properly. Proper documentation is crucial in no-code systems to avoid errors and ensure consistency. Effective management includes implementing monitoring tools and workflows, having clear accountability, and linking error resolutions to relevant documentation. Showcasing success stories and ROI helps to communicate the importance of your work and gain more resources. Selling pain instead of benefits can overcome resistance and help grow your career in ops using no code and automation.

The Talk focuses on using AI tools for seamless collaboration across teams. AI serves as a translator between different teams, helping to overcome language barriers and jargon. Chat GPT prompts are used for effective communication and task tracking. Custom prompts are saved for mid-conversation use. Powerful tools like Chachi Petit and Arc Browser enhance quick communication and collaboration. Reflect generates AI-generated summaries and action items for messages, aiding in organization and prioritization.

Welcome to Accelerating Value with HubSpot's deployment process and team structure. HubSpot is a leading growth platform that empowers businesses of all sizes to scale and succeed in the digital age. HubSpot's customer-centric approach focuses on value delivery, prioritizing the user experience, and building trust through consistent interactions. The front-end tech stack includes TypeScript, React, Redux, Styled Components, and GraphQL. HubSpot utilizes various developer tools to streamline workflows and reduce the technical burden on engineers. The testing philosophy at HubSpot emphasizes comprehensive testing, with a focus on unit, integration, and acceptance testing. HubSpot prioritizes customer-centricity, fosters innovation with small teams, and enhances developer efficiency with custom tooling.

At Evinced, the mission is to make the web more accessible for everyone. Accessibility issues are common despite intentions. Today's Talk focuses on coding in an accessible way using TDD to catch defects early. Unit tests can be written to ensure accessibility requirements are met. Testing Library provides utilities for testing accessibility. The ATDD approach allows continuous creation of tests for compliance. Unit testing is valuable for complex components. Advanced has developed an SDK called the Unit Tester for automating accessibility tests.

I'm excited to talk about React UI accessibility on TV. Enact is a React-based framework designed for TV UI components. Keyboard navigation is the minimum requirement for accessibility. The Enact framework has a module called Spotlight for TV remote direction keys. All attributes and roles are supported in JSX. Practical cases include reading a Dingbae font icon with no text, handling range widgets, alert popups, and virtual components. Testing on actual devices is important. Useful tools for accessibility development include custom message announcements, static analysis with JSX A11y, and accessibility testing with Chrome DevTools.

Hi everyone and welcome to my talk about the women in the history of computer science. I want to pay tribute to women who have done fantastic work in computer science. The history of computer science begins in 1840 with Ada Lovelace, who invented the concept behind the analytical engine and provided the first algorithms. Women played a significant role in early computing, such as the programmers of the ENIAC. Grace Hopper made significant contributions to the field, including the development of COBOL. Women have made significant contributions to artificial intelligence, such as Karen Spike Jones and her development of the TF-IDF method. It is important to highlight women in the tech field and provide role models for young girls. The talk aims to inspire and encourage.

Today's Talk discusses type-safe app configuration and its benefits. It explores how app configuration can accelerate software development using the example of a SaaS company called Potion. The Talk highlights the use of feature flags to control app discounts and the advantages of decoupling discount control from the engineering team. It also covers the ability to run A-B tests, personalize discount messaging, and optimize for upgrades using an AI loop. The Talk emphasizes the flexibility of the app configuration system, allowing for managing multiple overlapping discounts and controlling various aspects of the app. Lastly, it mentions the necessary components of building a flexible app configuration system and how Hypertune offers these features.

This talk covers seven steps to secure React apps, including dependency management, validation, secrets management, code exposure, content security, security implementation, and additional security measures. It emphasizes the importance of understanding dependencies and risks, using tools like NPM Audit and Socker.dev. It also highlights the need for dependency validation and package namespace, as well as input validation using libraries like Zod and Valobot. Secrets should be managed using tools like .env and a secrets manager, while code exposure can be minimized by separating server-side and client-side code. Content security policies and tools like Next Safe and Helmet are recommended for implementation. Additional measures include deep code analysis, code execution monitoring, and strict content security policies.

We're going to talk about making React work in Chrome extensions. We started building Chrome extensions during our freshman year and have learned a lot along the way. Chrome extensions have two parts: the content script and the background script. Our story begins before React, and we created the UT Registration Plus extension to simplify class registration. We initially built the extension using HTML strings and then tried using jQuery, resulting in unmaintainable code. When building Octoshop, we chose React for its support and package system, but integrating it with Ibotta's Vue extension led to a messy codebase. We centralized our code and managed Chrome's state using React portal and hooks, improving maintainability.

Let's talk about writing your first Vip plugin. VIT, rollup, and Vip plugin are important tools in front-end development. Rollup is a bundler that can bundle JavaScript files into a single file. VIT goes through all the plugins and transforms files to JS modules. VIT and rollup have similar plugin architectures, allowing the use of existing rollup plugins in VIT. I'll discuss three plugin properties: resolve ID, load function, and more. Let's take a deeper look at the transform function. The resolve ID function determines the ID of the file or module, and the load function reads the file or module and returns its content. The transform function actually transforms the file or module into something else. For example, it can modify the code depending on the file extension. We can transform the result object into code by using object keys and map. This allows us to extract specific data and include it in the output. By making the code flexible, we can add additional information like 'built at' and utilize it for various purposes, such as displaying branch name or commit hash during deployment. You can implement various functionalities in the Vip plugin, such as reading Markdown files, implementing file-based routing, and creating domain-specific languages.

Welcome to Beyond 1.0, a talk about scaling and maintaining design systems. A design system is a collection of reusable components, principles, constraints, and best practices governed by clear standards. We have expanded our design system over six and a half years to include over 70 components and support over 50 developers. To maintain a maintainable code base for your design system, enforce a singular code style across your entire code base through a linter. Use Next.js for a comprehensive and custom design system documentation site built with Markdown. We've improved our design system documentation by using react.gen typescript to dynamically parse out component props, allowing for more interactive and maintainable documentation.

Welcome to the session on communicating technical information to non-technical audiences. Today, we will explore how to apply your existing communication skills to share technical jargon. Understanding your audience through asking questions, making observations, and doing research is key to successful communication. When communicating with non-technical audiences, consider their baseline knowledge and avoid making assumptions. Use jargon when it is understood by all and explain unfamiliar terms when necessary. Analogies and stories can be effective in explaining complex concepts. Visual aids and experiences can enhance presentations. Clarify the purpose of communication to avoid misunderstandings. Utilize resources like written communication, podcasts, and videos to educate team members. Include others in technical conversations to learn and build something bigger. Effective communication requires context and understanding. Utilize the course 'Technical Communication for Non-Technical Audiences' on Pluralsight for further guidance.

I'm Richard Kerrigan and I'll show you how to add multilingual support to your React apps. We need a way to support other languages on our websites and web apps without affecting team productivity. We'll explore a low-cost solution using AI and automation. When my team started tackling this problem, we looked at Azure and found the Azure AI Translator service, which offers both ad-hoc text translation and document translation. Key features include language support for over 100 languages and dialects, a generous free tier, Neural Machine Translation for accuracy, and the ability to use custom glossaries. Designing workflow for translating JSON content at runtime or incorporating translation process into CICD workflow for HTML or Markdown files. Exploring how to translate HTML files within a CICD pipeline. Translation service and storage account setup. Function app building and deployment. Configuring translation to Spanish with a glossary in CSV format for file translation. Sending a request to the translator and receiving the translated file. Discussing the problem of websites not offering content in additional languages. Highlighting the benefits of Azure AI Translator and its alternatives. Showcasing different versions of the app for translating JSON, HTML, and markdown content. Checking the progress of the workflow, deployment of Azure resources and function, and translation of markdown files. Quick explanation of infrastructure as code and deployment options. Changing languages shows translated title and excerpt while maintaining original formatting.

We'll be going over the use cases of Node.js native add-ons and how they are written with NodeAPI. ABI stability allows swapping out older versions of a library for newer ones without recompiling the rest of the app. Node API enables the use of the latest Hermes regardless of React Native Windows. NativeScript is a library for calling native APIs from JavaScript, eliminating the need for dealing with native code. To initialize the addon in React Native, we modified the approach by auto-linking the native script XC framework. We can read the battery level using inline JavaScript and make view changes like setting the background color. React Native reanimated can be used to work on the UI thread. Support for Node.js native add-ons and completion of the official ABI stable Hermes API would open up the ecosystem.

Hello, everyone. I'm Hina from Expedia Group. This talk is about making Expedia flights faster. We will focus on performance initiatives on the Flight Search page, including prefetching and preemptive search. Monitoring is crucial with custom metrics like page usable time and non-supply overhead. Prefetching fetches JS bundles beforehand for faster CDN path retrieval, while preemptive search predicts Flight Search responses before the user lands on the page. The page performance improved up to 50% on both web and native. Preemptive search and microqueries were implemented to improve path and performance. Async loading and loaded query optimization resulted in an 8% improvement. Micro-front-end architecture improved bundle size and component reusability, leading to significant performance gains.

Hi everyone! I'm Rohit, a founding engineer at Tria. We are working on bringing the world to Web3 using names. My talk is about gaining performance and taking runtime to build time. There is an upward trend in libraries towards build time optimization, especially in React. Build time optimization improves performance, reduces bundle size, and provides more predictable software. Babel is a free and open source JavaScript transpiler that allows leveraging latest JavaScript features and moving computationally heavy logic from runtime to build time. Building a Babel plugin involves checking for a style prop inside an HTML tag and searching for aliases or token values. The visitor pattern is used to define the JSX type of node and access its path and attributes. The plugin can be customized for different utilities by defining aliases and tokens in a config file. Helpful resources for understanding and building custom Babel plugins include the Babel handbook, Babel docs, astexplorer.net, and the speaker's Twitter account.

Hello, React Summit. Welcome to this talk, a retrospective on four years in the making of our React Native video player. We will cover what went well, what didn't go well, and the lessons learned. We used React Native Video 5.2.1 and custom components to optimize the player. Streaming HLS, subtitles, and transcripts worked well. iOS performance was good, but the Android player and background audio management caused issues. Different media players and syncing audio players were challenges. Managing dependencies and versions was difficult. Upgrading React Native Video to version 6.4 improved stability and added notification features. Future updates will include DLL support and player-control separation.

My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.

Hi, welcome to Shining Offline. I'll share how using the offline first approach saved us in the mobile urban lighting system. We'll discuss Kismet, the Bayless system, and the transition to a progressive web app. The system handled work orders, but the manual process caused unnecessary effort. In 2015, we built a native iOS app, but faced challenges with updates and communication. Eventually, we convinced the client to switch to a progressive web app. The new PWA's design improves usability and uses maps and services from the city's own infrastructure. Implementing the offline-first principle addressed many issues, and providing offline maps required using MapLibreGL app protocol. Offline communication with the iOS app endpoint and managing conflicts were also discussed. Offline-first requires significant effort but leads to user satisfaction. iPads are the devices of choice.

Hello and namaste, New York. I'm excited to talk about building scalable multi-tenant applications with Next.js. We'll cover what multi-tenancy is, its advantages, key considerations, and how Next.js aids in development. Before starting multi-tenancy, let's understand what a tenant is. In multi-tenant architecture, all tenants share the same app but have different access, roles, and permissions. Easy maintenance, efficiency, scalability, and cost-effectiveness are some of the benefits of multi-tenancy. However, challenges include scalability, isolation, security, and customization. Next.js allows for easy organization of different domains and paths. Dynamic routing in Next.js enables the customization of layouts for each tenant, ensuring a personalized look and feel. Next.js API routing allows for isolating data fetching for different tenants. Middleware can handle request validation and provide features like authentication, authorization, server-side redirects, conditional redirects, and data isolation. Next.js offers scalability through caching, a component-based and modular approach, load balancing, serverless functions and platforms, and different types of rendering. Next.js continues to evolve and is a popular choice for multi-tenant architecture.

Hey, everybody, I'm Graham, and I'm really excited to give you a talk today on feature flagging with React server components. We're going to give examples of how you can deploy feature flags in your application, and how feature flagging interacts with React's rendering strategies. Feature flags are conditional logic that allows you to control the state of a feature independent from the code deploy. This separation of code deployments from feature releases is critical for large product organizations. It enables frequent commits without exposing changes to users, conditional release of features, and easy rollback in case of unexpected bugs. Using FeatureFlag gives you a kill switch where you can turn off your feature. It allows you to do A-B testing and measure the impact of new features. You conditionally release the feature to different sets of users, allowing you to control for externalities and changes to your product. A FeatureFlag is used to get the state and conditionally show a component. The flag state can be stored in a file or using environment variables. However, environment variables have limitations in terms of complexity. A more complex example uses growth book syntax, allowing for advanced control over feature rollout. Building your own system can be tricky, but feature flagging platforms offer fully-featured solutions with two main advantages. Feature flagging applications have a nice UI for controlling feature releases and an SDK that integrates with the code. React poses complications in using feature flags due to its rendering strategies. Static site generators like Next.js have limitations in user targeting and require redeploy for updates. Client components are not async, requiring the use of React primitives. These approaches have their own challenges in implementing feature flags. To initialize the SDK, instantiate the SDK outside of the app and use a user effect hook to download the feature flag payload and update the user data on the SDK. The growth book provider builds context for evaluating feature flags, allowing components to easily access feature flag states. However, there may be a slight flicker in the UX due to the time it takes to initialize the SDK and download the feature flag state. Network optimization can help reduce flickering, but the client's network connection is beyond your control. There are some workarounds for flickering, like showing a loading spinner while rendering in the background. Using feature flags for SEO is not ideal as the initial HTML payload doesn't include all the contents. Server components in React 19 provide an async solution without the need for complicated useEffect and state. react.cache allows caching expensive operations scoped to the current request. The getSdk function call retrieves the value of the feature flag from the cache, providing faster subsequent calls. Our SDK has its own in-memory cache. Dynamic rendering can be expensive in terms of requests, rendering, network calls, and running React on the service side. It can also be slow, and tracking events may be challenging. The server-client hybrid approach combines the advantages of the previous strategies without the downsides. By making the outer app a server component and caching the feature flag payload, we can achieve no-flicker client-side feature flagging. The client component can use the UseMemo hook and the initSync method with the payload already in memory. Passing the SDK instance and wrapping the main app in a provider allows us to have the best of both worlds. Although it may be slightly more complex to set up, using Next.js with React server components offers a cool and modern approach to feature flagging with high performance.

Welcome to the session on microfrontends. Microfrontends allow for independent implementations and local development. It is possible to develop and integrate microfrontends locally using an emulator and achieve automatic updates. Fine-tuning modules and user experience can be done using a discovery service. Rules can be created in the discovery service to selectively load microfrontends for specific browsers. AI can be leveraged to generate AI-enhanced variants and compare them with the original implementation. Microfrontends are highly portable and can be used in different applications. Code isolation and enhanced performance are important considerations in microfrontends. The benefits of microfrontends include improvements in file name changes and performance overhead. The Netflix application is a case study for microfrontends. Overall, microfrontends offer various benefits and opportunities for architectural discussions.

Hi, my name is Kirill and I have a little obsession with UI components. Let's talk React, specifically React 19 Server Components. I will show you how to build a polymorphic data table using server components. We explore mixing server and client components and applying the composition pattern. We discuss polymorphic components and separating client logic to render custom components without breaking client functionality. The component can be used in different environments, morphing into server or client components accordingly. This talk focuses on building a polymorphic component with minimal bundle size and access to both server and client APIs.

Hey, React Summit! Today I want to share my thoughts on creating a generic React application using TypeScript. I'll discuss the Type Build concept, generic application routing, and provide an example. What is the type build? It is a test that uses the characteristics or properties of an object to determine its type. Duck typing brings flexibility and simplicity, allowing for loose coupling and shorter code. Type guards are used to implement duck typing in TypeScript, enabling custom logic to determine the type of an object. This approach ensures type safety and better error checking. We use a switcher component to render components based on the CMP variable type. When working with React, create components as you would for any application. Use routers for dynamic routes with IDs to handle different pages. The outlet receives the valid page ID from the parents and uses a map to render components based on type. The object result can be seen in the next slide. Create a menu in your application with valid pages. This is an extensible approach for handling complex forms. Find the sample app on my GitHub.

Thank you for joining my session on untangling your dependencies. I encountered errors when trying to update dependencies in the project, leading to a tangled mess of issues. Managing dependencies can be like working with a ball of yarn, trying to knit a project. I'll share my favorite practices for managing dependencies and provide some background about myself. Leonardo da Vinci said, 'art is never finished, only abandoned,' and this applies to software as well. I'll share tricks and tips for managing complex dependency management systems and understanding different types of dependencies. Working with dependencies often comes with challenges, especially when using React Native. Examples of tools that assist with managing dependencies include yarn upgrade interactive, NPM check updates, and React Native upgrade helper. When encountering issues, breaking them down into smaller chunks helps find solutions. To tackle dependency issues, focus on one platform at a time and choose the right tools. Tools like NPM why and Clip can help identify unnecessary dependencies and unused files. Monorepos and tools like Yarn workspaces and npm shrinkwrap are useful for managing monorepos. Bleeding edge branches and dependency updates allow for incremental and broken commits. Regular updates are recommended to stay aligned with platform changes.

Thank you for coming to React Summit! I wanted to create clarity around React Hooks and provide tools for troubleshooting React issues. Functional components in React are different from class components in terms of their lifecycle. Understanding the creation and destruction of objects in JavaScript is crucial to comprehend the behavior of functional components. Creating functions and objects that are not used can lead to memory waste and system resource consumption. Storing references to variables can keep them in memory, so it's crucial to ensure there is a direct path from window to the variable. This talk discusses creating objects and storing them in React components using useState and useMemo. It emphasizes the importance of using useCallback in cases where a callback is going into a component with a large state tree to avoid unnecessary renders. The talk also explores different approaches to handling data retrieval and update in React components, highlighting the use of useRef as a solution to access and update data in server-side data sources. Overall, the talk provides insights and tools for troubleshooting issues in React functional components.

Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.

I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.

My goal with this talk was to answer the question of why we have another test runner. The talk breaks down the history of web testing into three chunks: the click-through era, browser war one, and browser war two. It discusses the motivations behind browser test runners and node test runners, highlighting Karma as the first node-based runner that gained popularity. The rise of node-based test runners like Ava, Tape, Mocha, and Jest is attributed to their stability and ease of use compared to Karma. Jest faced challenges with module loading and transpiling, but its non-opinionated abstraction made it a suitable choice. The shift towards environment-aware runners like VTest allows for safer testing and aligns with the need for transpilation across different environments. Lastly, the talk touches on the future of test tooling and the implications of AI on testing.

Hello, JS Nation! Today, I'll show you how I created gamified karaoke using Web Speech API. The Web Speech API has two parts: speech recognition and speech to text. It was originally built for karaoke but can also be used for forms and dictation. There are some quirks with the speech recognition API, such as limited microphone input and variation in implementation and privacy concerns across browsers. The speaker demonstrates how to implement speech recognition in a karaoke application and tests its error matching capabilities. Other interesting points include voice interface design considerations and the value of engaging in fun and unproductive side projects.

Hello, everyone. Today we are going to explore AI-powered end-to-end testing. Unlike unit tests, UI testing has a huge layer of obstructions between the source code and the rendered UI. The source code includes HTML, CSS, and TypeScript, which are transpiled into JavaScript and bundled with tools like Webpack. AI can generate tests effectively for standard websites or blogs, but it may struggle with niche applications behind strict authorization or on-premise tools. AI-powered end-to-end testing for complex scenarios requires our guidance. We use meaningful data test IDs and follow the page objects model pattern. Additionally, we rely on useful tools like the end-to-end test helper in-browser extension and the continue IDE extension. Now, let's proceed to the demo, where we will create tests for the Pokemon application, including the ability to filter by name or type. We will navigate to the Pokemon details page and use our extension to manage settings and prompts. Additionally, we will create the details page object together and generate the test file. The Pokemon details page has 105 elements. We can view the elements for debugging purposes, including page object name, Pokemon details page, and system message. We will copy the page object and save it to a file. We need to make it exportable. Then, we will use the extension to create an end-to-end test and pass the context. I will use all the open files, including the page objects and the test case itself. I will send them to EI along with the predefined prompt. There is a system message and additional information we need to be aware of. The test runs successfully, and that concludes this part.

Hi there. I'm Teodor, a web developer building Proxima, an open source analytics platform. In June 2021, a wildfire burned down a huge area near my house in Athens. I had an idea to build a low-cost, open, and accessible device to monitor and alert authorities of fire outbreaks. JavaScript is event-driven and perfect for IoT applications. DeviceScript is a versatile framework for writing code targeting IoT development boards. We can expand device functionality by adding sensors for temperature, humidity, gas, and flames. We can establish a mesh network using Painless Mess for wider coverage. LoRa can be used for off-grid emergency setups. AI and ML techniques can be applied for failure forecasting and running inference on the device. The VALS BME 688 gas sensor can improve detection accuracy. USC team is working on a model to predict high wildfire danger areas. Innovation thrives at the intersection of ideas and technology.

I'll speak today about the Temporal proposal, which adds modern date and time handling to JavaScript. Temporal is an API that'll be available in browsers soon and will add a built-in library for dates and times, avoiding the need for external libraries like Moment. It offers strong typing with different types for different data, such as calendar dates with or without time. Temporal objects are immutable and designed to work with JavaScript's internationalization facilities. It addresses deficiencies in the global Date object and introduces types like instant and plain types for accurate representation of time and dates across time zones. With the old Date, representing a date without a time can be problematic, especially in time zones where midnight is skipped due to daylight saving time. Temporal introduces types like PlainDate, PlainTime, PlainYearMonth, PlainMonthDay, and ZonedDateTime to accurately represent different scenarios. Additionally, there is a type called Duration for arithmetic operations and unit conversion. Now that I've introduced you to the cast of characters in Temporal, it's time to show how to accomplish a programming task. We'll start with an easy task: getting the current time as a timestamp in milliseconds using the instant type. To convert between Temporal types, you can either drop or add information. The toZonedDateTime method is used for conversion and requires adding a time zone and a time. Although Temporal objects are immutable, you can create new objects with replaced components using the with method. Migrating from the old Date object to Temporal offers a more reliable solution and avoids potential bugs. Check out the documentation for more details and enjoy using Temporal in your codebase!

Hi, everyone! My name is Yash Varma, and I'm a software engineer and computer researcher. I'm an open telemetry enthusiast, working on creating a vendor-neutral observability framework. Today's talk is titled as Observability Matters, this time for frontend. We'll cover the evolution of ZEP, the understanding of observability, current state of front-end monitoring tools, core essence of front-end observability, and front-end observability direction. Observability is about understanding what's happening inside the system based on its internal behavior or output. Front-end developers often lack observability compared to back end developers. Synthetic monitoring and real user monitoring are two common tools used by frontend developers. Front-end observability allows us to understand application performance for different users and situations, connecting the dots and gaining insight into core web vitals and user sessions. It's time to adopt observability as a culture and break down silos between front-end and back-end to better understand the entire user experience.

Hi, I'm Ben, the CEO of Freestyle. We're building Cloud State, a JavaScript runtime that allows you to write your entire application in TypeScript. We believe that bringing all the layers into TypeScript natively can greatly improve team efficiency. By marking a class as 'at cloud state', it becomes persistent and can be deployed without a SQL database. Connecting to the front end is as simple as accessing the functions directly. CloudState enables the sharing of back-end data infrastructure as packages, eliminating the need for web servers and endpoints. Freestyle chat is an open-source chat solution that can be easily integrated into applications. Cloud State has the potential to transform databases like Node.js did to servers, making development better for JavaScript users.

Expect Type is a library for type-level testing in TypeScript. It allows you to write tests for your types, ensuring that they stay what you want them to be as your code base evolves. The library supports a wide range of TypeScript features, including type guards, advanced features, and generic type testing. It also integrates with various test frameworks, including VTest. Best practices include testing only helpful things, making generics specific, and running tests as part of CI pipelines. Understanding error messages and fixing type errors are important aspects of using the library.

In this talk, the speaker introduces web workers and discusses how they can handle large processing on the client side. Examples, benchmarks, and tradeoffs are provided. The benefits of using web workers are discussed, and a demo project using VanillaJS and the live server extension of VS Code is showcased. The speaker demonstrates how to use web workers to prevent the main thread from getting blocked during large operations. The process of creating a web worker file and moving functions to it is explained. The speaker also shows how to handle messages and perform operations with web workers. The final remarks include contact information and an invitation to check out the speaker's YouTube channel for React courses and articles.

Hello, everyone. My name is Pachi, and I'm a frontend developer passionate about open source and how it can enhance careers. Contributing to open source not only improves coding skills but also enhances soft skills. Open source provides opportunities to learn, improve coding skills, and gain visibility through networking. To be successful in open source, create a GitHub page with your picture and contact information. Build connections and advance your career through open source. Choose projects you like and that match your career goals. Contribute consistently over time and document your contributions. Utilize LinkedIn for sharing contributions and learning. Open source is a bridge of opportunities for career growth.

Hello, everyone. My name is Tero Piirainen, a software engineer from Helsinki, Finland. I'm introducing a new UX framework for the web called Nue. It provides better tooling, code basis, and resulting websites compared to established frameworks like Next.js or Beat or Astro. Nue is incredibly fast, 100 times faster than Next.js, with improved hot reloading times. Simplicity is a key advantage of Nue, offering instant browser reactions to saved files and quick updates with hot reloading. Nue emphasizes timeless skills and focuses on design engineering, transitioning from JavaScript to modern CSS. Gnu, a component of Nue, focuses on CSS and offers small and fast websites with built-in turbo-linking and view transition motion effects. Overall, Nue and Gnu provide a simpler, faster, and more flexible development experience with a focus on user experience and design engineering.

In this talk, we explore advanced mathematics and data analysis with JavaScript, comparing its speed with Python and R. We discuss the role of WebAssembly and cases where plain JavaScript falls short. We introduce Standard Lib, a fundamental library for numerical computation on the web, similar to NumPy or SciPy in Python. We delve into the speed and performance of JavaScript, highlighting its performance compared to Python and R for different array sizes. We also discuss the performance of WebAssembly and native add-ons. Finally, we discuss the features of Standard Lib, including fancy indexing, blast operations, and its integration with Google Sheets.

Welcome to a session about micro-frontends and security. This Talk discusses the vulnerabilities in micro-frontend systems, including injections, insecure design, and security misconfiguration. It also explores identification and authentication flaws, and suggests mitigation strategies like using session cookies and secure HTTP channels. The Talk highlights the importance of implementing a gateway for enhanced security and addresses concerns about insecure design. It emphasizes integrity verification of JavaScript files and the prevention of code injection. The use of environment variables and configuration mismanagement is also discussed, along with the importance of vulnerability scanning and testing. The Talk concludes by emphasizing the need for authenticity and monitoring in micro-frontend development.

Hi everyone, my name is Anselm and today I'd like to tell you about LocalThirst, a crazy new way to build apps. The traditional technologies are not made for the advanced features that users expect. Local first infrastructure simplifies the app development stack by allowing app-specific parts without a complex stack. Building apps with CRDTs enable real-time multiplayer, cross-device sync, offline support, and auto-merging of conflicts. Public key cryptography simplifies sharing, complex permissions, and enables end-to-end encryption. Local first frameworks like Jazz combine permissions, local first user identity, and cryptography. Managing schema changes in local first apps can be challenging but can be managed with patterns and caution. Backend workers in Local First work the same way as front-end workers, and Jazz allows precise access control for server workers. Jazz enables easy offline-first and local-first user experiences and is used for various apps like Invoice Rater, Learn Anything, and Succulent. Start building local-first apps with Jazz at jazz.tools.

Hello and welcome to this talk about scaling accessibility. The web was created with accessibility in mind, we just need to utilize it to create accessible web applications. Digital accessibility is about creating applications that are accessible for everyone, regardless of disability. WCAG stands for Web Content Accessibility Guidelines, which provide a baseline for web accessibility. To scale up accessibility, an organization-wide approach is crucial, including management support, a person with final responsibility for accessibility, and inclusion of accessibility in all processes. Collaboration and consistent design elements are key to preventing the release of inaccessible features. Internal researching, testing, and monitoring are essential to ensure accessibility. Challenges with WCAG requirements and audits exist, as not all issues are shown and sample sizes can lead to missed issues. Auditing and fixing in a cycle doesn't work for larger organizations, so accessibility should be checked in every step. An accessibility certificate and the feedback loop help build knowledge within teams and ensure ongoing accessibility. The talk concludes with a summary of previous topics and an invitation for further discussion.

In this talk, you'll learn about the problem with internationalizing software and how the Lake Exchange Control System solves it. Internationalizing software involves adapting it for different markets and demographics, which includes design, translations, and currencies. The goal is to enable any software company to go global in a day. The challenge lies in the coordination required among developers, designers, translators, and other stakeholders. The current process involves a complex pipeline and manual processes for translation hand-off. The key to solving this challenge is an interoperable file format and a change control system called Lix, which allows for collaboration and automation. Lix will have a public pre-release on December 16th, followed by the .inlang file specification in Q1 2025.

Using front-end features can be challenging. Model federation is an approach to implement micro frontends. Micro frontends can be built-in or use runtimes. Two micro frontends need to update together to ensure consistency. Other techniques for micro frontends include web components, system.js, iframes, and monorepos. Model federation in Webpack 5 decouples runtime from build tools, allowing flexibility in model loading. High availability and error boundaries are important for Model Federation. Full-federated sites enable fast development cycles and easy testing. Importing components from a federated model requires dynamic imports, dependency sharing, and performance considerations. Debugging tools like Medusa and the Model Federation plugin for Chrome help identify and resolve issues. Consistent styling can be achieved by using the same UI kit. Routing can be handled by a shell application or frameworks like Single SPA. Decoupling components using specific federated models and considering tradeoffs when designing application growth strategies. Determine if Microfrontends are necessary based on the need for independent modular components in a growing product.

Hi, I'm Tony Alisea, a developer with over 25 years of experience. CSS won in the 90s due to its separation of structure and presentation, cascade concept, and powerful selectors. JavaScript developers fell out of love with CSS when they started using frameworks to construct the DOM. Instead of looking at the DOM holistically, we began to think in terms of componentization. CSS has continued to grow and add extraordinary features, such as CSS nesting and cascade layers. CSS layers give more control over the layering of CSS styles. Container queries allow us to respond to the size of the container instead of the viewport. The has pseudo class enables selecting parent elements. CSS is now more component-friendly and improves the user experience.

Hello, JS Nation. I'm here to tell you about some interesting stuff I've been working on using SolidJS. SolidJS introduced fine-grain reactivity and signals six years ago, while other frameworks are now recognizing the value and incorporating similar concepts. Recently, server-side rendering and meta frameworks have gained attention, and SolidJS also has its own meta framework called Solid Start. In this talk, I'll discuss Solid Start and its role in shaping future frameworks. A meta-framework is important because it enables faster time to production, improved code quality, and other benefits. Solid Start is a non-opinionated way to start applications, allowing developers to choose their own path. It took three years to develop, going through two beta phases and major API rewrites. Solid Start is powered by Solid Router, Seroval, Solid, and Vinci. The application allows users to catch Pokemons, and the code uses Solid Router and File Routing for lazy loading components. Preloading data for components helps optimize fetching by eliminating network waterfalls. SOLIDSTART gives you the freedom to choose your path and is the shape of frameworks to come.

Hello, my name is Gabriel. I work at auction.com and I'm going to be talking about how we improved the performance of GraphQL resolvers for our GraphQL service. We had a problem with our subscription deployment, where we were experiencing a high number of restarts due to memory allocation failures. This prompted us to investigate and optimize the memory consumption of our resolvers. To assess the performance, we set up a local environment with Kafka, Graph, and a client that connected 4000 WebSockets to Graph. After running the test, we found that we were only able to process and distribute 16 messages to our clients. Yay. The memory consumption graph showed peaks and valleys as messages were delivered. Three distinct phases were observed: idle, Sockets connected with no messages, and messages being processed. We decided to optimize the context, which contains request-specific information and backend details. Since subscriptions primarily involve sending Kafka messages, we realized that the message itself often has all the necessary information. Therefore, we only create backends when a call is made to them. We optimized our backend creation process using the proxy object, which allows us to create backends lazily only when they are accessed. This resulted in less memory consumption without changing the code or the schema. The less memory consumption is evident in the second phase of the recording, where the plateau formed from having multiple contexts is significantly lower. Most of the savings were achieved by reducing temporary objects and using native iterators instead of Lodash calls for converting key names to Snakecase. All of a sudden, the performance increased by 18%, resulting in increased memory consumption. Upgrading to newer versions of GraphQL Redis subscriptions did not have a significant impact on memory usage. However, optimizing the conversion of key names to snake case by using memoization improved computational efficiency. Our performance significantly improved after implementing snake case. However, memory consumption remained high. To address the memory leak, we introduced auto-scaling and restarted the service every night. Additionally, we optimized the code generation process to improve memory consumption. We explored using heap snapshots in Google Dev tools to analyze and reduce memory consumption. By identifying unnecessary objects and removing them, we were able to free up memory and improve performance. We patched the location object to improve performance and reduce memory consumption. We also optimized data loaders to avoid N+1 queries and improve efficiency.

Hi, I'm Graham, co-founder of GrowthBook, and in this lightning talk, I'll cover experimentation-driven development. We'll explore how we build products today, the issue of knowing if our shipped products actually work, and the solution: experimentation-driven development. A-B testing is a controlled way of measuring the impact of changes on real users. It involves starting with a hypothesis, assigning users to different groups, exposing them to different variants, and tracking their behavior. Examples from Airbnb and Netflix show the varying success rates of A-B tests. On average, only one-third of tests are successful in moving the desired metrics. Without testing, you're just guessing. Common objections include relying on before and after data without controlled experiments. A-B testing helps control for variants and noise in data, allowing you to determine causation. User testing with small sample sizes may not provide accurate insights. Integrating A-B testing into the development process helps define hypotheses, track metrics, and iterate quickly. Use feature flags to easily test and roll out changes. Feature flags add safety by separating code deployment from feature release. A-B testing allows conditional feature release and provides statistical results. A-B testing replaces differences of opinion and celebrates learning from failures. Hypothesis testing is crucial for determining the success of a project. Experimentation driven development is easy and should be done on every project.

Today's Talk focuses on implementing virtual scrolling to improve performance and flexibility of lists. The process involves computing the height of the viewport, scroll position, and individual list item height. By rendering only the elements within the viewport, the initial page load and scrolling performance are enhanced. Various optimization techniques are discussed, including memoization, binary search, and delayed rendering. These techniques significantly improve scrolling performance and provide a better user experience. Additional techniques such as using skeletons, element pooling, and functional purity can further optimize rendering. Advanced techniques, like moving elements within the pool and using content visibility, yield substantial performance improvements. However, content visibility is better suited for large pages with few large sections. Overall, the Talk offers valuable insights into virtual scrolling and its limitations.

Today's Talk introduces WebAssembly (Wasm) and its versatility in supporting any language on any operating system. Wasm's history dates back to 2011 with Emscripten and NACL, and it has gained importance with the introduction of Wasi, the WebAssembly system interface. Wasm is supported by modern browsers and can be used with languages like C, C++, Rust, and Go. Popular applications like Figma, CapCut, and 1Password utilize Wasm for improved performance. Web Workers and shared array buffers eliminate the need for object serialization. The Talk also discusses the use of Keasley and Drizzle for interacting with SQL. Building and optimizing the application involves considerations of migrations, app readiness, suspense, optimistic UI, and debouncing inputs. Whisper, an open-source AI project, offers models for audio-to-text conversion and is implemented using whisper.cpp. Deployment options include Render, Netlify, Vercel, and Cloudflare, but using a cheap VPS provider with a file server can be a cost-effective alternative.

I'm Adam Klein, the CTO and co-founder of Cover with Double V, a swag store platform. We use computer vision to create cool effects with SVG filters. In this talk, I'll share two magic tricks and teach you how to create a green screen filter using SVG markup. I can apply different filters on text, images, and videos using HTML or SVG. SVG filters allow easy debugging and parameter manipulation. The displacement map is a simple primitive that displaces pixels based on the red and green values. The frosted glass effect is achieved by using the displacement map filter. The green screen filter selectively reduces the opacity of green pixels while keeping other pixels opaque. After experimenting with different values, I discovered a formula that effectively applies the green screen filter using SVG filters. SVG filters are widely used in production and are supported in all major browsers. They are highly performant, running on the GPU. Working with SVG filters requires creativity and experimentation to achieve desired effects.

I'm Zebe, a JavaScript developer with a focus on security. Let's talk about the risks of consuming NPM packages, particularly malicious ones. We explore how to obtain and run malware, as well as evaluate and analyze JavaScript malware in Node.js. Malware can be delivered as pre-compiled bytecode, and defenses involve tools like npm audit. Hardin JavaScript and Lafamote are security tools that protect JavaScript applications and dependencies. Lafamote puts each package in its own compartment and provides tooling to create access policies. It prevents stolen cookies and restricts access to sensitive globals. Limited time offer to help set up projects with Lafamote.

Today's Talk discussed the performance impact of generated JavaScript and the importance of bundle size in relation to page load speed and user experience. The use of a build process, minification, and avoiding unnecessary polyfills were highlighted as strategies to reduce bundle size. API design considerations, such as avoiding deeply nested object lookups and using functions and objects instead of classes, were discussed in relation to minification. The concepts of down-compilation and transpilation were explained, with a focus on the challenges and benefits they present. The Talk also emphasized the need to avoid using TypeScript enums and instead use string constants, as well as the importance of compressing code and tracking bundle size changes. Bundle analyzers were recommended for visualizing bundle contents and component connections.