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.

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.

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.

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 plain date, plain time, plain year month, plain month day, and zone date time 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 two zone date time 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.

Today's Talk explores modern and secure streaming on the web, covering topics such as segmentation, media source extensions, dash protocol, and encryption/decryption with encrypted media extensions. The MP4 format is discussed, including atom structure and fragmentation. The use of the MPEG-DASH streaming protocol to fragment files and create a dash manifest is explained. Content protection and playback are handled through media source extensions, decryption components, and the creation of decryption keys. A demo is conducted to showcase the preparation, encryption, and playback of encrypted content. The importance of segmentation, media source extensions, encryption, and digital rights management in ensuring smooth and secure content distribution is emphasized.

Hello everyone. I'd like to start off by telling you a story about a guy named Dan. He's a mechanic and his job is fixing spaceships. Dan is a metaphor for all of us developers. Let's talk about monorepos as you've probably guessed from the title. I'll start off by talking about polyrepos, what they do well, but also where they fall short. Then I'll talk about monorepos and what issues they solve, as well as why you need good monorepo tooling, especially at scale. A Monorepo is a single repository containing multiple distinct projects with well-defined relationships. It allows teams to work together in a unified manner. Monorepos help with velocity, safety, and mobility. Monorepos can be adopted incrementally and good tooling can help with running tests. CI time is now coupled to the size of the change made, rather than the size of the monorepo. By generating a task graph from the project graph, we can optimize the build process by parallelizing and scheduling tasks. NX offers a solution by distributing tasks across multiple agents, allowing for time and cost optimization. Visit monorepo.tools or nx.dev to learn more and achieve focus and contentment like Dan.

Building a component library involves making various decisions such as using a JavaScript framework, considering accessibility in testing, and using a monorepo. Building a component library allows for faster interface creation and consistent visual language. Making the wrong choice can lead to owning the complexity of interactions. Offloading the complexity to an open-source library can be beneficial. Exporting as a single package or scoped packages have their advantages and disadvantages. Setting up a specific workflow and repo structure is important for publishing components. It is recommended to publish as ESM and avoid bundling the library. Leveraging browser capabilities and using fundamental tools like CSS and TypeScript can be beneficial.

Hello everybody, I'm Giammi. Today, I would like to share with you a case study about how quantifying accessibility played a crucial role in improving the accessibility of our products at Stack Overflow. We started our journey by setting clear accessibility targets based on WCAG guidelines and adopted the Advanced Perceptual Contrast Algorithm to address color contrast. We established a way to measure accessibility progress using automated tools and manual scores. Our focus was on the design system and we rolled out improvements such as a new color palette. Key learnings include the importance of setting clear targets and measuring product accessibility for motivation and visibility. Accessibility work is ongoing and should be integrated early in the development process. Thank you for listening.

Hello, I'm Vitor Norton, a developer advocate at SuperViz. I'm passionate about connecting people, highly dependent on my productivity tools, and love the idea of working anywhere in the world. Working remotely is a top priority, but we also don't want to feel alone. Let's explore some examples of companies that have addressed this issue: Gather Town, Miro, and Microsoft Teams. Collaborative components enable real-time collaboration by synchronizing participants' actions. The mouse pointers component utilizes a room concept to synchronize mouse positions. Channels and WebSockets are used for real-time data synchronization. CR-DTS is a conflict-free data-related type used to handle counter conflicts in collaborative environments.

Today's Talk introduces Graphi, a declarative dataflow programming environment for AI. It emphasizes the importance of asynchronous APIs and deep programming environments in the era of AI. The JavaScript version of OpenAPI enables easier handling of multiple asynchronous calls. Declarative dataflow programming improves efficiency and async/await simplifies calling asynchronous API functions. To further optimize asynchronous programming, a dataflow approach is recommended. Graphi allows building conversational graphs and handling cyclic dataflow. It offers advantages like parallelism, resultability, and scalability. Graphi introduces new concepts like nested graphs and distributed computing. It is an open-source project actively being improved and welcomes contributions.

RedwoodJS is a productive JavaScript TypeScript framework that uses code mods to help users upgrade and ensure they have the latest features and security updates. The speaker developed a CLI called Codemodder, using OpenAI's excellent documentation and SDK. They experimented with reinforcement techniques to improve AI understanding and generated test case descriptions. The AI's creativity control parameter didn't work well for programming, so the speaker asked the AI to generate other possible inputs and let the user verify them. Verifying the code mod is done through static code analysis tools like ESLint and TypeScript compiler. Iterating between generating and testing, the speaker often ends up with an error-free code mod. Automating the evaluation process and following standard research and experimentation rules is key to improving the output. Settling for 'good enough' and measuring the impact of changes through error count is important. Collaboration with the AI using available tools, iterating, and aiming for objective performance evaluation is recommended. Codebots are great for developer experience but time-consuming to write. The speaker encourages using an AI framework with good documentation, iterating quickly, and using clear prompts. The temperature setting is not necessary for code-related outputs. Connecting with the speaker and getting inspired to build AI-powered developer tools is also mentioned.

Hi, I'm Jerdot, a technical lead at AWS Safegate. Today, I'll discuss event-driven architecture and the potentials of real-time event-driven systems in JavaScript. We'll explore JavaScript runtimes, the event loop, and the queues involved. Event-driven architecture involves producing, detecting, consuming, and reacting to events. It is used in microservices, IoT systems, and real-time data processing. Tools like event emitters and WebSockets are used to simplify building event-driven applications. Connection management is crucial, and RabbitMQ and MQTT are popular message brokers. Performance optimization can be achieved by using high-performing message brokers, deploying producers and brokers close together, and considering fault tolerance. Message processing should include storing messages until successfully processed, handling events multiple times with unintended side effects, and using automatic retries and dead letter queues for transient failures.

Hi, everyone. My name is Debbie O'Brien, Principal Technical PM at Microsoft. I'm focusing on Playwright, a reliable end-to-end testing tool for modern web apps. It works on any browser and platform, has powerful tooling, and tests run fast. Advanced techniques include UI mode, HTML reports, and trace viewer. Use annotations in Playwright to enhance reporting and test organization. Mocking API responses and external links is possible with Playwright. You can also test date and time by setting a fixed fake time. Playwright offers CLI test options and has a vibrant community. Join the Playwright Discord server and follow the important docs and YouTube channel for more information.

Today's Talk explores the concept of Retrieval Augmented Generation (RAG) and its application in building chatbots. RAG involves giving language models more context by retrieving relevant data. This is achieved by creating vectors for each talk and using cosine similarity to compare them. The talk emphasizes the limitations of word-based vectors and the benefits of using embedding models and vector databases. By replacing word-based models with vector search, content can be sorted and retrieved more efficiently. RAG, along with large language models and AI, has the potential to enhance scalability and unleash new possibilities.

We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Leadership is the key to building influence. Understanding the bigger picture and the impact of your work is crucial. Recognizing and appreciating the efforts of team members fosters a positive environment. Leaders should understand their strengths and weaknesses. Emotional intelligence and effective communication are important skills. Building influence in remote positions requires intentional relationship building. When giving feedback, create a safe environment and deliver it thoughtfully. Focus on resolution before discussing the reasons in urgent situations. Maintaining a professional distance while building team spirit is important.

In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.

Hello React Summit! Senior software engineer building educational experiences at NewZella. Passionate about helping people get involved with open source. Creative coding journey started on Neopets. Have a CodePen with examples in p5.js, svg.js, and CSS. Talk is about p5.js and React, building an application to generate a grid pattern. Incorporating user inputs into the creative process using p5.js and React. Art exhibit at the Wellcome Museum inspired by generative art. True shade tiles and the 10 print algorithm inspired the pattern in our example. p5.js is a JavaScript library for creative coding, accessible to different backgrounds. Order is important in p5.js. React is better at managing complex state. Use the p5.js React wrapper to simplify integration. Use p5.js in instance mode to avoid naming collisions. Instance mode is safer and helpful as the project grows. Use destructuring to get values from input. Lerp color function creates color gradients. Use random seed for consistent random numbers in animations. Struggling with making the Canvas mobile-friendly. Animating P5.js sketches without relying on CSS. Optimizing canvas elements. P5.js and WebGL for 3D rendering. Conclusion and appreciation.

Today's Talk focused on using refs and profiling Agigrid in React. The speaker shared their experience with optimizing custom cell components and performance, including using memo and leveraging the React compiler. They also discussed improving performance with manual style updates and refactoring the use of useEffect. The speaker highlighted the use of ref callbacks, which can be implemented with useLayoutEffect. React 19 introduces changes to the ref callback approach. The Talk touched on using React DevTools and CSS variables for monitoring renders. It also discussed the compatibility of Azure Grid with React and the trade-offs between using React components and vanilla JavaScript. The speaker emphasized the importance of considering the DX improvements and the complexity of not seeing a React component tree in the dev tools. The Talk concluded with a mention of AG Grid features, handling refs at various levels, and the recommendation to consult with Stephen for technical questions and application architecture.

I'm Jake, a developer advocate at Figma, and today I'll be discussing aligning patterns between design and development. Collaboration between designers and developers requires recognizing our different perspectives. The goal is to close the gap between design and development, but this is often aspirational. The optimal path between design and development is somewhere in between, depending on factors like friction or waves. By recognizing each other's areas of resistance, we can find ways to make collaboration more effective. Figma's Code Connect fills the gap between Figma component logic and code logic by allowing teams to publish code-based informed component code snippets. CodeConnect currently supports HTML, Web Components, Angular, Vue, React, SwiftUI, and Jetpack Compose, and seeks to support more languages.

Monorepos are single repositories containing multiple distinct projects with well-defined relationships. Relationships in code are based on distance, where code in different files is the closest relationship. By importing code from one file to another, dependencies are established, allowing for changes in one file to immediately impact the other. This enables fast iteration and development. When we separate code into packages or APIs, it increases the distance between code pieces, making it slower to understand the impact of changes. However, when multiple projects are combined in a monorepo, the relationships between them are reduced, enabling faster development. Monorepos make relationships explicit and provide tools to understand their impact. To learn more, visit monorepo.tools or nx.dev for information on managing monorepos with NX.

I'm presenting on simplifying analytics in React apps. We want to build embedded analytics for developers using common languages like JavaScript and TypeScript. By reducing backend complexity, developers can prioritize building dynamic data-rich UIs. BI platforms didn't deliver the customization required, so we aim to use React to create a powerful SDK. The SDK involves constructing a semantic layer, building reusable components in React, and doing cool things with it. We simplify the data model and generate a TypeScript representation. Sisense provides APIs for authentication, row-level security, and customization. We can now build React components directly off the generated model. The data model called datasource enables simple UI and eliminates the need for front-end engineers to write SQL API calls. We built a near-production-ready application using a React template and Sisense as the backend. With the simplified system and a semantic layer, we can now use large language models for chatbot-driven visualizations and dashboard layouts. This framework enables faster development and alternative methods for generating interactive React objects.

I'm Firas, an experienced open source developer with a focus on web security. JavaScript security is challenging due to the concept of dependency hell and the reliance on open source dependencies. Vulnerable and outdated components pose a risk, and recent examples highlight the dangers in NPM. Malicious packages can remain undetected for a long time, and current tools for JavaScript security are inadequate. The speaker started Socket as a company after an interesting NPM attack in 2017. The hazards of installing unverified code are discussed, and the impact of AI on security is explored. Socket aims to address the noise problem in security alerting by focusing on the most severe vulnerabilities.

Hi, everyone. I'm Chris, the CTO at Nock. We help product teams power user-centric cross-channel notification experiences. Today, I'll talk about extending the abilities of our in-app messaging and how you can power any kind of in-app messaging using our platform. We optimize for flexibility, customization, and a shallow learning curve. Our pre-built React components include a banner, modal, card, and notification feed. All of this comes out-of-the-box, supporting light mode and dark mode. Easily show modals and announcements with no additional code. Own the rendered components for performance and customization. Build custom components with minimal code. Use hooks for fetching data and real-time updates. Noc provides a schema for strong data integrity.

My name is Tom, the head of developer experience at Convex. Convex is a sync engine written in Rust that includes database, file storage, and full text search. It can be self-hosted and allows you to write Convex code alongside your other code. It runs in a V8 isolate on the same machine as your data, making it fast. Convex uses web sockets for interaction and offers optimizations like optimistic updates. It is widely used and can handle real-time data. Convex aims to remove development burdens and focuses on scalability. It offers smooth concurrency and reduces friction in development. Convex for Startups is a program that offers perks like free access and aims to attract interesting applications.

AI will revolutionize UI through the use of tools. Building recommendation systems for video games using AI libraries and data. Integrating Tansec Start to control server functions and override Fetch. Implementing RAG and using a vector database for response generation. Potential problems with context and data requests. Requesting tools and upgrading system context. Trying simulation games and using multiple steps for data retrieval. Client-side tool handling and tool request handling on the UI. Exploring Ollama application and direct post to AI. Giving AI tools and accessing data. AI evolution and the Tiny Troop project. Handling large databases and local models. RAG limitations and contextualized information. RAG live data retrieval and AI instruction. Exploring VectorDB and embeddings. Jack's thoughts on VectorDB and applause for presentation.

Today's Talk focused on React 19 and its features, APIs, changes, and optimizations. The speaker emphasized the importance of migrating apps and building with React 19. They discussed the high-level features of React 19, including TypeScript emphasis and the testing library philosophy. The Talk also covered the APIs and integration of React 19, as well as the changes and type safety it brings. The speaker highlighted the improvements in useReducer types and the use of TypeScript. They introduced useActionState for migrating code and the useOptimistic hook for maintaining state immediacy. Real-time updates, action functions outside components, and the benefits of using the 'use' prefix in React were also discussed. The Talk touched on upgrade considerations, the role of RSEs and server actions in React, and the current state of RSC development. Overall, the Talk provided valuable insights into the new features and enhancements in React 19 and their impact on the development process.

I'm here with the Poimandris Open Source Dev Collective, and I'm going to show you how to make a game with React using patterns you know and probably a lot you don't. We'll use React, React 3 Fiber, Kota, and Triplex. Cota is a nimble state solution that creates a local database for efficient updates. Spawn entities with specific traits and update them accordingly. Learn about composable behavior in Kota and how to update entities every frame. Enhance the visual appearance of the game by adding a HiFi view, materials, lights, and post-processing for bloom. Understand the concepts of creating games in React, dynamically spawning entities, and giving them behavior. Learn about testing strategy, compatibility with React Native, and the advantages of using React for game development, including wider accessibility and quicker iteration.

Hi folks, in this Talk we learn about React and Chrome DevTools. We explore the new AI Assistant panel in DevTools that helps with UI tweaking. React DevTools now supports Gemini AI model for error fixing. Extensibility is important and React DevTools has features like highlight updates and server components. We also learn about server logging in the browser console and toggling suspense fallbacks. Browser DevTools allow experimenting with local overrides and improving color contrast. Advanced features include overriding headers, network panel customization, and performance tooling. We also discuss Core Web Vitals, optimizing pages, and debugging UI with DevTools. There are fun tips for enhancing animations and logging workflow. The Talk ends with Q&A and sharing/removing features based on user feedback.

Let's start diving into the presentation on AI and accessibility. AI is a simulation of human intelligence by machines, and this presentation will focus on narrow AI. Generative AI has achieved great things in accessibility, and AI advancements have improved various applications for people with disabilities. OpenAI's newest model allows blind people to access AI through Be My Eyes. Challenges with AI include bias and accuracy. AI can be a useful tool in improving accessibility, but it has limitations and risks. Advocating for AI ethics and accessibility, collecting data, and addressing specific accessibility concerns are important. Khan Academy is working on improving accessibility in education.

React 19 introduces new features such as React Compiler and React Actions, which optimize code and provide better performance. The useOptimistic hook allows for optimistically updating UI, while the UseFormStatus hook tracks loading states and enables button disabling. The introduction of the 'action' attribute simplifies form handling and data retrieval. React 19 eliminates the need for useMemo and useCallback thanks to the React Compiler. The stability of React 19 has been observed in side projects without major issues.

Today's talk is about what it's like to be an open-source library maintainer, with examples and suggestions from the speaker's experience. Maintainers have various roles and responsibilities, including providing support for users and managing documentation. Setting boundaries, prioritizing documentation, and designing APIs are important aspects of being a maintainer. Release management and compatibility are challenging, requiring careful consideration of patch releases and breaking changes. The speaker shares an example of marking a method as deprecated in Redux and providing a migration path for users. Compensation for maintainers is a debated topic, and code mods can help with code migration. Maintainers often face challenges but can have a significant impact on the ecosystem and people's careers. Supporting open source developers is greatly appreciated.

I'm the second-best TypeScript YouTuber. I'm giving a talk on streaming in React and the benefits it brings to applications. Streaming allows for faster perceived loading times by sending partial HTML to the browser, rendering it and waiting for the rest to complete. Server-side loading can cause delays, but this can be improved by caching HTML on a CDN. Streaming HTML in a different order has been a challenge, but there are JavaScript solutions. Optimizing HTML streaming with Suspense and dynamic I.O. can further improve loading times. Using suspense in client-side rendering and addressing challenges with Next.js React model are interesting patterns. Caching can now be done at a more granular level, improving SEO and reducing load on the host server. Rendering on the server is not a big penalty compared to multiple API requests. Thank you all.

Today's Talk is about porting to Rust, specifically the experience of porting Turbo Repo, a build system for JavaScript, from Go to Rust. The speaker discusses the challenges faced during the porting process, such as file permission code discrepancies and issues with Alpine Linux. They explain the approach taken, including using a Rust shim and porting individual Go dependencies to Rust. The Talk also covers the limitations and challenges encountered during the porting process, as well as the benefits of leveraging the Rust ecosystem. The speaker discusses the considerations of rewriting versus porting and the importance of institutional knowledge. They also touch on the performance impact of the porting process and the improvements achieved by moving to a fully Rust implementation.

Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.

The Talk explores the parallels between web security and horror movies, highlighting the real-world impact of security issues. OWASP is introduced as a helpful team that ranks security risks. Broken access control is identified as a major risk, and best practices for access control are discussed. Cryptographic failures are compared to the movie Hellraiser, emphasizing the importance of encryption. Surviving security issues involves encrypting sensitive data, input validation, and using secure protocols. Injection attacks and defense strategies are illustrated through the movie Alien. The importance of monitoring and updating dependencies is emphasized. Code testing is crucial for security. Social engineering and favorite horror movies are briefly mentioned. Testing tools and the importance of taking action are highlighted. Overall, the Talk provides valuable insights into web security through the lens of horror movies.

In this talk, the speaker explores how auto-complete can be implemented in different ways across various frameworks and libraries such as React, Vue, Angular, preact, Svelte, solid, and HTMX. The speaker discusses the different approaches to handling state and updating it in each framework. They also cover topics like debouncing user input, making API calls, and list rendering. The talk concludes with considerations for choosing a front-end framework and the speaker's personal preference for Svelte and Vue. They also mention the benefits of using web components to reduce boilerplate code. Overall, the talk aims to showcase alternative ways of developing applications beyond just React and encourage developers to explore and experiment with different frameworks.

Hi, everybody. I'm a software engineer sharing five ways to make your thinking visible in engineering collaboration. One of the most effective strategies is asking facilitative questions, which show interest not only in the answer but also in the thinking process behind it. The SAIL framework is effective for collaborating in groups, involving sharing the plan, asking questions, generating ideas, and learning. Knowing your audience and their background knowledge is crucial. The ladder of feedback is a five-step process to provide constructive feedback without making the receiver feel attacked. Making thinking visible in engineering collaboration leads to greater understanding, more collaboration, and growth for the team.

What if I told you that this scene or game is entirely done with Vue components? I'm presenting Trace.js, a library to bring 3D to Vue applications. In the setup syntax of Vue, we import the TraceCampos component and add it with a prop called window size. By adding a light to the scene, we can create our first 3D renderer. The post processing library for TresCS was launched, allowing developers to easily add effects like glow to their 3D scenes. TresCS allows you to build impressive scenes with minimal code. Let's quickly demo some galaxies using view components.

Micro-frontends break down a large frontend into smaller, independently deployable pieces. This approach improves scalability, team autonomy, and code maintenance. Two primary ways to implement micro-frontends are build time and run time. Module federation, introduced in Webpack 5, allows for dynamic real-time updates across teams. Challenges in implementing micro-frontends include getting type safety with TypeScript and testing at runtime. Module federation 2.0 introduced type extraction and manifest updates. Full site federation allows testing the whole app. Micro frontends involve trade-offs, so choose what benefits you the most.

Today's talk focused on the use of REST in JavaScript and the challenges and benefits it presents. The presenter discussed benchmarking the performance of different parsers, with TypeScript consistently outperforming others. Understanding the benchmark results involved analyzing parse time, serialization, and deserialization time. JavaScript parsers had slower performance with concurrent parsing due to JavaScript's single-thread nature. The talk also touched on performance optimization techniques, such as avoiding serialization and utilizing multiple CPU cores. The event-based model with a tree sync was suggested as a way to optimize FFI. Overall, the talk provided valuable insights into the use and optimization of REST in JavaScript.

As a child, the speaker was fascinated with space and finding direction. Svelte is an HTML-first approach to web development that simplifies tasks and offers efficient reactivity. The speaker reflects on Svelte's growth, goals, and design philosophy. Svelte aims to fix broken software and prioritize user focus. The future direction includes error boundaries, better debugging, and AI's role. Building open source software is challenging, and Rust's impact is discussed. The speaker values framework diversity and highlights the advancements and challenges faced by web development.

I'll be talking about standardizing signals in TC39. Immediate mode wipes out the whole screen and writes a new one, while retained mode changes only what is necessary. Signals represent a cell of data that can change over time. The correct solution is to topologically sort dependencies and evaluate them in a coherent order. Standard signals allow for code sharing across frameworks and the creation of reusable infrastructure. The signal API is designed to be wrapped by different frameworks. Standards can achieve more portability and reduce the need to lock into specific ecosystems. The API includes a watcher, a set of signals being observed, with a synchronous callback made when the first member becomes potentially dirty. The speaker discusses how signals relate to state management libraries in React and mentions the potential for signals to become a web standard in the future.

MacroMedia Flash revolutionized web development by allowing easy creation of animations. Web animations evolved from meta tags to keyframe animations and JavaScript animations. View transitions provide a better solution by creating animated transitions between DOM states. Advanced view transitions allow for tracking changes in the DOM and achieving powerful features like animating elements with display:none. The web animations approach uses the flip animation technique to reveal information. Astro is a project that embraces view transitions and offers built-in support. React has good support for view transitions. View transitions are currently supported in most major browsers. CSS animations and shape transitions can be easily integrated to customize animation behavior.

Today's Talk focused on the importance of optimizing web vitals and performance for both user experience and the environment. The Internet's carbon footprint is significant, with page weight being a key factor. By reducing page weight and improving core web vital scores, developers can contribute to reducing CO2 emissions. The Talk highlighted how optimizing web vitals improved the loading performance, interactivity, and visual stability of a web application. It also discussed the importance of NextPaint interaction and profiling to enhance the NextPaint score. The Talk emphasized the connection between performance optimization and reducing the carbon footprint of web applications. Various tools and practices were recommended to measure and reduce the carbon footprint, including asset optimization, green hosting providers, and content delivery networks. The Talk also mentioned the need for AI regulations and the role of corporations in prioritizing sustainability. Overall, the Talk provided valuable insights into the intersection of performance and sustainability in software development.

Hi, I'm Mariko from Chrome Developer Relations Team. Let's dive into the talk, leveling up JavaScript. I sat down and learned JavaScript. I sat down and learned ES6 again. TC39 has published a new version of JavaScript spec every year. I want to focus on the parts of JavaScript that got updates recently. So ArrayFlat creates a new flattened array. You can also pass a depth argument to flatten nested arrays. Another method, copyToReserve, creates a reversed copy of an array. There's also copy to sort, which creates a sorted copy of an array. Another useful method is array to spliced, which allows you to remove and add items to a copied array. Lastly, the array at method returns an item at a given index. Array at accepts negative numbers for reverse order lookup. Find last iterates in reverse order and returns the item or index. Copy to change the value at a given index with a function. Object group by allows grouping and creating a new object by type. JavaScript intl allows for word segmentation in different languages, improving readability. It also includes features like data type format, number format, and plural rules for locale-based results. Staying up to date on web features is challenging due to time-consuming research and potential errors in implementation. Baseline provides clear information on web platform features supported by major browsers, ensuring compatibility without issues. Baseline provides two levels of support: newly available and widely available. By aligning your project to Baseline, you can confidently avoid browser compatibility issues. You can use Baseline to keep up with what's new on the web by installing the Baseline widget. Websites and dashboards like feature explorer and web starters.dev have been released. The project roadmap includes developer tooling and integrating Baseline into linters and actions. Check the RAM archive insights page for user data based on Baseline years. We are planning for more tools next year, including linting and AI integration.

For those who have not heard of Rspack, it's a 1:1 port of Webpack to Rust.But, did you know that rspack is actually the 4th iteration of native bundlers our team has designed, and it originally started out as a plugin for esbuild. In its development, we have rewritten esbuild & rollup in rust, taken apart parcel to understand it better, and overall have reviewed every bundler on the market during the development of rspack before finally picking the webpack api design for the project as it is known today.
In this talk I will share the behind the scenes of its creation, why we built it, what the future for rspack looks like, and our own experience + business data we have gathered with it in supermassive projects at ByteDance.

HTMX is a hypermedia-oriented front-end library that enhances HTML as a hypermedia. It generalizes the concept of hypermedia controls in HTML, allowing any element to become a hypermedia control. HTMX provides practical attributes like HX swap and HX indicator. The active search demo showcases the dynamic behavior achievable with HTMX. HTMX allows developers to build web applications without writing a ton of JavaScript. It works well for traditional web apps but may not be suitable for offline functionality or fast interactions. HTMX can be integrated with JSX and various backend stacks, and TypeScript can be used alongside HTMX.

We asked co-sponsors to present React, an essential framework for web and mobile developers. TypeScript improves the development experience. Let's talk about the neglected topic of JavaScript leaks and how Chrome handles them. Leaks are easy to create, even for good developers. We crashed browsers due to memory leaks. Solution: fully reload the page after soft navigations. Today we have tools to fix leaks. The first step is admitting you have a problem. Use the reporting API to collect data on memory leaks. If you have a problem, it's not just a single leak. Debug and take memory snapshots. Load the page, perform an action, go back. Compare snapshots to find leaks. Use Memlab by Facebook to identify leaked objects. Memlab tells us memory is used, leaks are everywhere. Chrome extension helps with exporting actions to scenario.js file. 50 users already. Fixing memory leaks involves finding and nullifying unused objects. Spot the leak in a simple React component that adds event listeners. Removing the component leaves the listeners behind. In session two, adding a set interval creates additional listeners. Debugging with Memlab and using non-minified code and named functions helps identify the leaks. Solution: add a component. In React, frameworks provide ways to clean up after components are removed. Spotting a leak in uppercase spelling of mount. Hooks offer use effect to handle cleanup. A use effect allows you to return a function for cleanup. Spot the weird memory leak caused by console logs. Try the reporting API, check your framework, use null, and find your first leak. Memory leaks may be more significant on a mobile browser due to limited available memory. Differentiating between leaked memory and growing global state can be determined by the app's architecture. Checking for memory leaks on mobile can be done using dev tools and manual inspection or by using Puppeteer and the developer tools protocol for emulation. The lack of naming and bindings for anonymous functions in a codemark plugin is a potential area for improvement. Neglect and the excessive amount of JavaScript are common culprits for poor web performance. Facebook's experience with redesigning their website highlighted the need for tools to address the performance bottleneck caused by JavaScript. Throttling the CPU can be effective. Developers should set objects to null when they are no longer needed, allowing the garbage collector to clean up. Chrome DevTools provides options for detecting console log memory objects. WeakRefs and WeakMaps can be useful for cleaning up memory leaks. Integration with tools like MemLab can help regression test releases for memory leaks. We are still early in memory leaks tooling. Raising awareness about the problem is important. Lighthouse scores are not the sole indicator of a fast website. Additional testing and familiarity with Core Web Vitals are recommended.

AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.

Hey, we'll discuss scaling fast and engineering lessons learned in the last 15 years of tech startups. Scaling involves three things: business, team, and tech. Business scalability relies on sales and customer acquisition costs. Engineering is a tool the business uses. Scaling the team is vital as tech problems are often people problems. Team structure affects architecture and product development process. Organize teams based on purpose, not technology. Spend less time being blocked by other teams. Ship features without getting blocked. Own your own mess. Focus on product engineering partnership. Build faster using feedback cycles. Build appropriate solutions for your use case. Let go of ego and experiment with different approaches. Engineers own their own mess. Avoid work in progress. Finish the work and focus on fixing it later. Have a conversation before writing code. Scaling the tech is easier than you think. Pick an off the shelf design. Save innovation for core parts. Pick existing solutions. Focus on solving the problem. Don't waste time trying to predict future scale. Scale will surprise you. Do what works for your business. Push back on unnecessary complexity. Understand the cost of ideas. Modify the situation to fit existing design. Architecture is like a dependency graph on your code. Reduce architectural complexity by organizing code based on what it does. Use vertical models and avoid creating excessive dependencies. On the client, use vertical modules. On the back end, consider a service-oriented architecture. Start with a monolith and transition to microservices if necessary. Use folders instead of microservices when you have a small team. Use vertical models and contract or type-driven development to define clear APIs and interfaces. Avoid highly interconnected code and duplication. Focus on data structures to avoid complexity and the need for translation layers. Building translation layers can lead to slow user experience. Vertical teams aligned with vertical code allow for fast problem-solving, full control of features, and efficient data handling. Understanding the entire domain enables faster development with fewer bugs.

Hello, everybody. Today, I'm going to talk about how I solved actual challenges in React using only CSS. One of the main packages I maintain is EmojiPicker React, with hundreds of thousands of weekly downloads. It has all the features you'd expect from an EmojiPicker, but the search capability was slow. I managed to fix it using CSS. Let me show you how. The search functionality relies on global state and requires updating each emoji individually, resulting in excessive DOM work. Virtualization or virtual scrolling is not a viable solution due to the non-uniform emoji list. By examining the DOM, I discovered that each emoji had an area label with search-related information. This led me to investigate further and implement a solution from scratch. We create a new component called CSS search, which takes a value as a string. If the value is empty, we return null. We remove all emojis from the emoji list if there are search results. Emojis that match the search term are displayed. Performance is instantaneous. Empty categories are removed using the CSS has attribute. The CSS not and has selectors are used to remove empty categories. A counter is used to display the count of emojis found. By using flexbox and order, we can position the after element at the beginning of the list. CSS nesting allows us to nest everything under the emoji list, simplifying the structure. The performance of the search is still very fast. I created the flareup package, a CSS in JS library specifically for NPM packages. Flareup solves compatibility issues and works on SSR and CSR. Emoji-picker-react uses flareup to render emojis without JavaScript. Flareup places a style element on the DOM, making it easy to use.

Welcome to my talk at React Advanced 2024, How to Increase Your Impact as a Staff Engineer. In this presentation, I will give actionable tips on increasing your influence as a staff developer. Staff engineers have responsibilities such as identifying inefficiencies, performing background tasks, and balancing sprint work with staff-eng tasks. They also share knowledge through documentation and mentorship, and drive high-impact projects. Staff engineers ensure high-quality code through testing, advocacy for best practices, and innovation. To build influence, lead by example, be a mentor, and prioritize documentation and project management. Strategic thinking and problem-solving are crucial for staff engineers. Broadening expertise, showcasing work, and having public visibility are important for career growth and recognition. Open sourcing code and public engagement are valuable for staff engineers. Thank you for attending the talk!

Welcome to React Advanced London. Today's agenda: what is bun? Features, benchmark, demo, key takeaways. Bun provides a better developer experience, faster CI, and decreased app file size. Building bun on top of Zig prioritizes performance, stability, and compatibility. Install bun with npm or download the binary from the official website. Bun is a comprehensive development toolkit with a fast and efficient package manager. Learn how to benchmark CLI commands using Hyperfine with flags. Compare different package managers. Bond is fast and provides a few features in its package manager: install, add, remove, update, link. Test the bond test runner against vtest and jest using hyperfine. Discover the features supported by the test runner and the importance of bundling in JavaScript applications. Learn about the main.js code, the performance comparison of different bundlers, and the features offered by Bun, including loaders and macros. Explore macros in Bonn and how to optimize the code by including the type macro. Discover the benefits of Bonn, such as reducing CPU usage and fast installation of node dependencies.

Hello everyone. My name is Szymon Chmal and I am a Senior React Native Developer at CallStack. Today I'm going to introduce you to ASTRA, a powerful tool in modern web development that optimizes content delivery while providing the flexibility of modern JavaScript frameworks. ASTRA allows you to create blazing fast static websites without needing any JavaScript by default. It's perfect for sites that are mostly static but have a few interactive features. ASTRA is trusted by industry leaders like Microsoft and Porsche. It's built with content-driven pages in mind and supports integration with popular UI libraries like React, Vue, and Tailwind. ASTRA keeps things simple with file-based routing.

End-to-end testing is important for catching hard-to-find bugs, but it can be complex and time-consuming. The speaker shares their journey at YOLO apps and how they addressed these issues using Maestro, a newer testing tool. Maestro allows interaction with all aspects of the app and offers a web interface for building tests. It also provides features like auto retry and test videos for troubleshooting. The speaker also discusses automating CI/CD using Expo and EAS, which simplified the app build and distribution process. They demonstrate how EAS and MySQL Cloud can be used for reporting and investigation. The power of end-to-end testing is showcased, with a fast CI/CD time and free tests and EAS updates. Maestro has some limitations, but it offers easy test writing and 100 free tests per month, with additional tests available at a cost.

Welcome to my talk on long frames and INP, understanding the post-load performance. The rail model introduced in 2015 provides recommendations for responsiveness and organizing JavaScript work around user input. Metrics like FCP, FMP, and LCP measure visual completeness, while metrics like first interactive and CPU idle assess CPU idleness. Total blocking time measures the impact of long tasks on page responsiveness, and TTI assesses when the browser can respond to interactions reliably. INP is a user-centric responsiveness metric that encompasses all potential causes of slow interactions. The long animation frame API improves attribution and helps pinpoint performance problems. Tools like Vercel toolbar and trace viewer on PerfLab can visualize interaction to next paint. INP and long animation frames provide valuable insights for improving web experiences.

Expo pre-build demystified. This talk covers what Expo pre-build is, introduces templates, shows how to build custom templates, and incorporates continuous nature generation. Pre-build templates provide the native folders needed for Android and iOS. The Expo Pre-build process involves generating Android and iOS folders, merging files, and running config plugins or mods. Sharing templates through local tables or GitHub repositories is possible. Continuous native generation ensures native projects stay up to date. Prebuild helps achieve this workflow by updating the bare minimum template along with the expo SDK. Manual modifications can be preserved through expo-config plugins and source control of iOS and Android folders.

In this Talk, Deepanshu discusses the concept of server-driven UI (SDUI) and its benefits. SDUI shifts the responsibility of determining the UI from the client to the server, enabling dynamic changes without touching client-side code. React's component-based architecture makes it a natural fit for SDUI, allowing for flexibility and real-time control. The server sends a schema that guides the UI structure, and React components dynamically render the UI based on the schema. SDUI enables real-time updates, personalized experiences, and enhances the user experience. However, it also presents challenges such as increased server load and managing state. Examples of companies using SDUI include Airbnb, Spotify, Netflix, and Amazon.

Hi, I'm Tom and I want to talk about rendering data that may disagree when using SQL queries. It's important to consider whether these queries are in the same transaction or separate transactions, as this affects data rendering. Implementing transactions can ensure atomic data queries and avoid inconsistencies. Managing data consistency in React can be challenging, especially with rich clients and live updates. React Query offers ways to handle data invalidation logic. Asynchronous data fetching in React can lead to inconsistent data between requests.

Let me walk you through introducing design system into mature codebase loosely based on Clio. Mature codebase challenges: inconsistent components and styling, multiple color palettes, and inconsistent design patterns. Working in siloed squads led to difficult maintenance, slow onboarding, and disjointed user experience. Design system squad realized the need for a plan and data to guide them. We need data to guide us. A React scanner library enabled us to crawl through the code base and understand the components used. Technologies like GitHub Actions, Redshift, and Count were used to store and query the data. The script involved running a scanner, configuring it, and sending the data to Redshift via Fivetran. ReaRscanner provided the pattern for processing data. We collected and sorted data on component usage and imports to identify pain points and track trends. Collaboration was a challenge, so we engaged teams through surveys, office hours, and extensive documentation. Our goal is to achieve over 60% adoption of the design system. We worked on keeping a single source of truth in our design system. Zero Height is our platform for storing component documentation, integrating tools like storybook and Figma, and ensuring alignment across design and code. Design systems are more than components and tokens; they create a shared language and process that facilitate teamwork and alignment.

I'm Gil, a performance architect at Wix. Today, I'll explain how we use code splitting to improve website performance. Code splitting breaks down JavaScript into smaller chunks or React components, loading them only when needed. This reduces JavaScript size and improves user experience. We measure performance using Core Web Vitals, focusing on INP scores, which evaluate interactivity. Reducing JavaScript improves INP. Our INP scores have significantly improved, thanks to our code splitting techniques. Let's dive into the code splitting strategies we use, starting with dynamic import and React Lazy. Let's move on to a more advanced example: conditionally loading components on page load, not on user interactions. We fetch the comments data and render the comment section only if there are any comments. This method is supported in React 18 and works for server-side rendering (SSR). React components can be loaded dynamically on scroll or hover interactions with suspense. If the components are already rendered with SSR, we just need to download and hydrate them. This is only possible with the new suspense in server-side rendering (SSR). We use react-lazy with dynamic imports to render the component when it enters the viewport. I created a download on viewport wrapper that creates a ref and uses the intersection observer to resolve a promise when the component enters the viewport. I use the viewport and a wrapper that calls a function called use, which is implemented using the suspense API from React. This function is used to manage the promise and render the components only after it's resolved. The suspense component handles this promise. We moved props calculation to the server side and fetched them in the React component. This approach simplifies the process and can be implemented using the dynamic API in Next.js. By conditionally rendering components and calculating props on the server side, we can significantly reduce the amount of JavaScript code loaded in the client side, resulting in improved performance.

Today I want to talk about why React should not adopt signals. By adopting signals in React, we can automatically track dependencies for effects and memos, leading to more efficient component rendering. Accessing specific parts of the JSX that read signals allows for fine-grained reactivity across component boundaries. Adopting signals in React requires migrating to single execution components, which only update specific parts of the application. This can become complex when dealing with components that read from different signals. In contrast, React assumes everything can change and enforces this assumption through linters and compilers, leading to more robust code and easier updates. If you're interested in signals in React or need performance improvements, let's chat!

Today we're going to talk about best practices for using Tailwind CSS. Tailwind CSS is a popular and controversial tool. It balloons within developers into two opposing camps. For some tasks, Tailwind is extremely cool. After working with Tailwind for a long time, I have identified two main requirements where Tailwind is suitable, and without them, it's better to choose an alternative tool. The first requirement is the project must have a design system. The second requirement for using Tailwind CSS is that your project must have a component approach. If you have a design system and a component approach, then Tailwind CSS may be a nice option for you. Instead of specifying the same margin at the top or the bottom, you can specify only a vertical one. Second rule while working with Tailwind is group design tokens and name them semantically. Rule number three, keep class ordering. The next advice for using Tailwind will be useful not only for Tailwind, but also when working with any content tools, monitor the bundle size and try to optimize it. The last rule for Tailwind, use sets of style variants to avoid problems when overriding classes. Instead of passing classes arbitrarily via props, define a set of variants for the component. Use fewer utility classes, group design tokens, and name them semantically. Keep class ordering, minimize your build size, and use sets of style variants. Remember that Tailwind CSS is a useful tool, but not the only solution for all projects.

Hi there. I want to talk about content editable websites and the importance of understanding the content model of a web page. Separating the content from its presentation is the key thought behind this talk. But if we're looking at the content itself, we're actually focusing on what those things are, not what they happen to be rendered into. The outcome of this talk is to break the cycle of content management systems being used to house data for what it looks like. Instead, we should focus on explicit curation versus content-driven experiences, moving away from explicitly curated experiences towards content-driven experiences. Let's put this into practice and build a website. Components aren't bad, but we need to think about the props that go into them. The problem arises when the content structure is modified to match the appearance instead of prioritizing the content itself. Let's correct these mistakes and prioritize the content over the components. Modeling the content structure instead of specific components allows for flexibility and a better content editing experience. Prioritizing content over components ensures a more relatable authoring experience and longer-lasting designs. Start thinking about content early and have conversations before diving into design and development.

Welcome to Securing Server on the Red Applications in the Context of Next.js talk. Next.js brings new challenges for front-end developers with its server-side rendering technologies. We need to consider security in Next.js applications and address the common vulnerabilities listed in the OWASP top 10. Server-side request forgery (SSRF) is a common vulnerability that allows attackers to exploit the server's privileges. Security logging and monitoring failures are critical, as proper setup is necessary to detect attacks. Being cautious with npm packages, addressing identification and authentication failures, and updating vulnerable components are crucial for application security. Database seeding, security headers, and permissions policies are important for application security. It's important to reduce the criticality of an attack, check strict transport security header, and prevent security issues by following best practices. Understanding CSRF vulnerability, image injection vulnerability, and cryptographic failures is important. Broken access control can result in unauthorized access and should be mitigated. Thank you for watching this talk and stay safe!

Welcome to Turning It Up to 11 at React Advanced. Hydrogen, an eCommerce framework built on top of Remix, focuses on efficient data loading. Loading data in parallel using promise.all is four times faster than loading in a waterfall manner. Split promise.all into two when handling data dependencies. Caching static data can significantly improve page load time. Optimize product pages by reducing awaits and prioritizing essential content. Use suspense boundaries and skeleton UI for optimal data loading. Place non-blocking requests before primary data request for better performance. Remix client cache handles caching automatically. Consider data dependencies and prioritize critical content.

Welcome to React Advanced 2024. Gerald Miller and Alessia Bellisario discuss the pairing of GraphQL and server components and its advantages. GraphQL combined with server components has been widely adopted, allowing for initial rendering on the server and optimizing performance. React Server Components introduce a new primitive for rendering on the server and executing server-only code. GraphQL serves as a unifying layer between microservices. Data fetching in client components involves setting up an Apollo Client instance and provider. Best practices include separating data, avoiding overlap between server and client components, and using the preload query component. Optimize network requests in React using suspense boundaries and avoiding multiple requests. Fragments in GraphQL help optimize data fetching for UI components. Use fragments and the defer directive to stream data incrementally. Add suspense boundaries, useSuspenseFragment hook, and deferred directives to optimize data fetching in React components. Combine React server components and GraphQL for streaming multi-part responses and enhancing user experiences.

In this Talk, the speaker discusses how to build smart user interfaces using React and AI. They explore using AI to enhance data interaction in a table component and demonstrate how AI can be used to pre-fill calendar slots in a booking engine. The speaker also explains how to create dynamic UIs with React by adjusting language prompts and specifying UI elements. They introduce LangChain, an open-source framework for building language model applications, and explain how it can be used to generate UIs. The speaker concludes by discussing how JSON data can be used to generate UIs and provides documentation and examples for building UI components.

In this talk, observability in React web applications is discussed, covering Rome agents, open telemetry, and synthetic monitoring. The importance of logs, metrics, and traces in tracking application behavior and identifying issues is explained. The concept of a real user monitoring agent (rum agent) for JavaScript applications is introduced. Instrumenting the rum agent and React applications is explained, along with the caution to be mindful of the bundle size. Traces, open telemetry, and instrumentation are explored, including how Core Web Vitals, traces, and open telemetry can provide insights and enable auto-instrumentation. Synthetic monitoring using Playwright tests and the process of converting tests into monitors with configuration is covered. Finally, running and monitoring definitions in production is discussed, highlighting the ability to evaluate user behavior, simulate activities, and address issues proactively.

Hi, I'm Mark Erickson, and today I'm very happy to talk to you about designing effective documentation, lessons I've learned writing the Redux docs. We'll discuss organizational techniques, practical tips, writing tutorials, and useful documentation tools. Redux offers learning-oriented tutorials and goal-oriented how-to guides. Other documentation categories include reference guides, explanations, readme files, FAQ pages, and release notes. Tips for organizing and writing documentation: consider the target reader, assume prerequisite knowledge, repeat information, cover topics in multiple areas. Writing tutorials for libraries in TypeScript presents challenges but can be tackled with TypeScript-first approach and keeping examples up-to-date. Engaging tutorials involve interactive exercises, diagrams, and formatting, and should be reviewed and improved based on feedback. Overall, documentation is valuable and worth the effort.

Today we will discuss React server components with AI and how to build a better search experience using them. We will learn how to make a Next.js app AI-enabled using the Vercel AI SDK. The Vercel AI SDK's streamUI function with the GPT 4.0 model will be used to make suggestions interactive. We will explore the use of history and conversation in AI and how to continue the conversation and read the result. The concept of generative UI with the vector database will be introduced, along with querying the database for movies. We will process user queries and return movies based on them. The power of React server components in enhancing UI will be demonstrated. In summary, the Talk covers vector embeddings, natural language search, and generative UI.

Is React really dying? React is dead. Let's take a look at the numbers. Svelte is getting 1.5 million downloads per week. Angular is pulling 3.5. Probably not a competitor with React. React dwarfs everything with 25 million downloads a week. React is incredibly popular with 4 million users and developers. Despite some criticism, a survey shows that 71% of respondents liked React, while only 28% didn't. React's flexibility and options can be overwhelming for beginners. React's complexity has increased, causing confusion for beginners. Memory management, overcomplicated architecture, and innovation fatigue are common challenges in React. React 19 is delayed due to suspense issues. React server components are a favorite innovation. Qwik's hydration model is cool. Qwik is amazing, and it would be cool to see something like it for React. AI can help you get 80% there, but you still need an actual developer to tweak and clean up the code. Tab AI keeps your workflow going. React's popularity is undeniable. The momentum behind React is strong, and it's unlikely to fade away anytime soon.

Redwood Studio is a companion app for building full-stack JavaScript, TypeScript web applications. It offers features like OpenTelemetry monitoring, GraphQL tools, Prisma ORM integration, SSR preview, and React Server components (RSC) cache support. The Render Routes feature provides a graph of components visible on a page, helping users understand the rendering locations. The RSC payload and analysis feature allows for analyzing the timeline and responses received by the app. The payload and the rendered output can be mapped together to understand component size and structure. Redwood aims to be a full-stack framework that simplifies development and supports both current GraphQL users and beginners. It also emphasizes the flexibility and power of React Server components. Redwood aspires to be the Laravel or Ruby on Rails of JavaScript, offering quick project setup and high productivity.

Welcome to the talk on Microfrontends and Betamax. The speaker shares their experience of accidentally building a plugin SDK for microfrontends. They discuss the goals and bootstrapping process, emphasizing the importance of adaptability and separation of concerns. The use of behavior subjects and portal rendering is explained, along with the composition and resilience of microfrontends. The speaker demonstrates rendering REC.js within AngularJS and highlights the challenges of handling communication and deployment. They also discuss managing breaking changes, local development, testing, and shared dependencies. The talk concludes with a humorous anecdote and contact information for further engagement.

Hi everyone, I want to share a story about my experience as a junior developer working with a client who had strict technical standards. They required high performance for web and mobile apps, but lacked a measurable way to determine performance. To address this, I created a tool called Flashlight, similar to Lighthouse, that measures mobile app performance. Flashlight provides performance scores and can run end-to-end tests to explore the app. The speaker's dream is to have an easy way to determine app performance without extensive testing. Using AI to automate the tedious task of exploring an app is the speaker's proposal. The speaker explains that the repository for the app exploration tool is open source and will be shared later. The tool requires commands to be run, such as logging in and performing a search. The AI tool helps identify performance issues, suggests using React DevTools for debugging, and recommends using FlashList instead of FlatList in React Native. The AI can continue after errors occur, and controlling the AI's completion of goals can be achieved by adding a human or another AI agent manager into the loop. AI in end-to-end testing is gaining popularity, with companies launching AI-based testing tools. The goal is to automate app exploration using AI and ensure quality checks for performance, accessibility, and security. AI can help QA engineers by automating repetitive tasks and allowing them to focus on more important aspects. The cost of performing one test case using the 4.0 Mini model is usually less than one cent. AI testing with Flashlight is still experimental, but the non-AI part is reliable. Future improvements include running on CI and easy iteration on multiple projects.

I'm going to be talking about modern databases in the React ecosystem. The development work used to be simple, with front-end and backend developers working separately. However, with the rise of Node.js and full stack frameworks like Next.js, the ecosystem has evolved. Now, front-end developers are often writing back-end code, and databases have become a crucial component. In this talk, we'll explore the modern solutions and their strengths when it comes to databases. We'll discuss the changes in the databases world and how React and other frameworks have made accessing databases easier. Serverless databases simplify the complexity of managing databases, but there are considerations like vendor lock-in and limited customization options. AI databases with vector functionality provide deeper searches on unstructured data. Multimodal databases like SurrealDB allow for different kinds of data in one storage. Tools like Prisma, Drizzle, and EdgeDB provide good type safety and ease of use. EdgeDB is a graph relational database that combines SQL and GraphQL, making querying relations easier. Database selection is not permanent, and it's important to consider user needs and stay informed about modern trends. Early adoption of cutting-edge databases comes with risks, but also full-time support. Using the best tool for the job is crucial, and trying new tricks for specific data is recommended.

This talk focuses on building a fast and accessible website for all users, highlighting the importance of performance and user experience optimization. It emphasizes the need for adaptive implementation to cater to different devices and user conditions. The talk also discusses the factors beyond the developer's control, such as screen size, browsers, devices, internet connection, and sitting position. It highlights the significance of optimizing image components for various devices and the role of browser support and rendering engines. The speaker discusses the use of future APIs and the challenges of browser compatibility, as well as optimizing image formats and bundler compatibility. The talk provides insights on controlling bundler and device compatibility, optimizing CPU usage, internet connection, and JavaScript form submission. It concludes with a proposal to respond with save data instead of effective type for limited internet connections and recommends using React with adaptive hooks for better user experiences. Overall, the talk covers essential aspects of building a fast and accessible website.

Today's talk is called Beyond Testing Library, Testing React Libraries and Library-like Code. The speaker, Lenz Liebertronik, discusses the special requirements for testing libraries, including minimizing re-renders, avoiding tearing, and rendering components granularly. They highlight scenarios where React Testing Library falls short and introduce the Testing Library React render stream as a solution. The speaker demonstrates how to test hooks, multiple hooks, and assert re-renders using different techniques. They caution about potential issues with React upgrades, test-only components, ACT batching, and Suspense boundaries. The speaker shares real-world usage of the render stream library and discusses the limitations of correlating renders with DOM commits. They emphasize the importance of testing libraries and gradually optimizing code. They also mention the benefits of using the testing library and conclude with gratitude and a Dutch lesson.

My name is Mark Dalglish and I'm here to discuss how ReactRouter became a framework. Remix is built on ReactRouter and heavily relies on it. Remix feels like a framework because it has a CLI, manages the dev and build lifecycle, and has strong opinions about the file system structure. Remix embraced Vite as a plugin, allowing developers to integrate it seamlessly into their existing Vite setup. The shift to Vite led to a change in the philosophy of Remix Vite, enabling frameworks to orchestrate all the environment builds and make the framework as a plugin pattern first class. React Router is merging with Remix to make all the build time framework features available to React Router consumers. React Router is now officially a framework as well as a library. The move to integrate Remix into React Router is driven by the exploration of the next generation of Remix. React Router V7 simplifies by dropping the React Native layer and allows flexibility for consumers to use it as a library or as a framework with additional architectural features provided by plugins. The focus is on betting on Vite in the long term, and React Router plans to support React Server components. Thank you to Mark for answering the questions.

A software engineer from AGGrid discusses profiling and optimization in React DevTools and Chrome DevTools. The React DevTools allow for analyzing and optimizing renders, and can help improve Core Web Vitals. Chrome DevTools provide in-depth performance analysis and optimization options. The engineer shares specific strategies for optimizing rendering, animation, and layout thrashing. They also discuss performance profiling and benchmark testing, as well as testing tools and the performance testing process. The speaker emphasizes the importance of exploring resources and metrics in Chrome DevTools.

I'm Daisuke Kato, an open source developer. I've developed React libraries like Zest, Jota, and Valsio. Now, I'm working on a new React framework, Waku. It's a team project that started a year and a half ago. Recently, we added support for server functions. This talk is about server functions and React Server Components (RSC), which allows running React on a server. RSC includes server components and functions and can render components at build time. It leverages serialization provided by a React library. Server components are an extension that allows rendering on the server and merging with client components. Let's explore the implementation with code. RSC allows the use of server and client components. The server serializes the client component into the RST payload. A client reference acts like a URL and is used to retrieve the actual client component. Creating a client reference involves code transformation. Server functions allow the client component to call a function on the server. Server function and client component are both functions that need to be serializable. Creating server references has multiple ways. The framework transforms user code for different situations. Waku now supports server functions. Supporting server function is a challenging task, but we've done it. Thank you for your talk.

I'm going to be speaking about concurrency within React and how you can use it to improve performance within your applications. Concurrency is crucial for optimizing responsiveness and ensuring a good user experience in complex applications. React breaks up the rendering process into render and commit phases, allowing interruption of the render phase for prioritizing user interactions. React's task scheduler handles tasks in small chunks, ensuring a fluid user experience and responsiveness. High-priority tasks include user interactions, while lower priority tasks involve fetching data or rendering long lists. React introduced new hooks, useTransition and useDeferredValue, for handling state update priorities. The deferred value hook allows for deferring the updates of non-critical UI values, while Suspense for Data Fetching improves the performance of data fetching in React applications. Concurrency is useful for handling real-time search inputs, seamless tab or component switching, rendering large lists, and animating transitions. However, there are drawbacks to concurrency, such as potential delays in non-urgent updates and limited benefits for expensive components. Concurrency may add CPU strain and requires an understanding of React's background behavior for effective debugging. Use suspense on parent level components for data fetching. Performance profiling can help test the effectiveness of transition hooks.

I'm going over the new event loop in React Native, which is one of the more interesting parts of the new architecture. The new architecture includes the JSI for synchronous communication between layers, new Native modules for type safety and code sharing, and the Fabric renderer for prioritized rendering and support for modern React 18 features. The React Native event loop works differently from the previous architecture, executing tasks and updating rendering. The React Native team can now schedule JavaScript code within React components to execute at specific times, allowing for control over the execution schedule. React Native can now prioritize rendering urgent events, resulting in a more synchronized and flicker-free UI. The goal of the new event loop specification is to align React Native more closely with the web, providing capabilities and behaviors similar to the web. Migrating to the new React Native architecture aims to minimize fundamental changes for existing codebases and ensure proper support from library maintainers.

I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!

tldraw is a canvas and a whiteboard SDK that can be integrated into React apps. It allows for high-performance rendering using the DOM and React. tldraw's canvas is powerful and can be enhanced with Vision models for image creation and AI utilization. It enables easy iteration and updating of designs based on annotations. tldraw can be used to create UIs, complex applications, interactive things, calculators, ASCII art, and more. It explores the use of AI on the canvas and can generate images, code, flowcharts, and content. tldraw focuses on performance optimization, AI model exploration, security, usability, and accessibility. The Talk also discusses the business model, future plans, and the vision of building a plugin community for the canvas.

I'm super excited to be here today, giving my first live talk at an in-person conference. Dominik, the maintainer of React Query, walks through the API design decisions, including success stories, trade-offs, and mistakes. Tener Linsley designed React Query's medium-sized query API to be minimal, intuitive, powerful, and flexible. Major versions in open source require marketing efforts, but not primarily for adding new features. TypeScript is crucial for building projects and managing user demands in open source can be challenging. The addition of the max pages option improved performance and avoided unnecessary refetches. Inversion of control gives users flexibility, but mistakes can happen in API design. Open source requires time management and feedback from users. API design is influenced by typing ease and good TypeScript support. Getting involved in open source involves trial and error and joining community platforms like TanStack Discord. Dominik's journey started during the pandemic and he can be found on Twitter, TanStack Discord, and his blog.

Today's Talk covers creating videos with React, including using Puppeteer and FFmpeg to build videos frame by frame. The ReMotion library offers advantages such as declarative and reusable components, versioning, and automation. The Talk also demonstrates building a video with ReMotion, embedding previews in React, and customization options. It explores rendering at scale with ReMotion's Lambda or Docker options and the rendering process using Lambdas.

In this Talk, the speaker discusses how to enhance animation in React apps and optimize animation in browsers. They explain the browser's animation pipeline and the importance of avoiding frame drops. The speaker compares CSS and JavaScript animations, highlighting the benefits of using the requestAnimationFrame API. They also discuss combining CSS and JavaScript animations using the Web Animation API. The Talk concludes with tips on avoiding redundant calculations and provides additional resources for further learning.

React Jam is an event that showcases the awesomeness of using React for game development, with options for DOM-based, 2D, and 3D games. React offers development tools and optimizations for game development, along with a supportive open-source community. Participating in React Jam and creating games with React can improve skills and provide opportunities to showcase programming abilities.

In this talk, the speaker introduces using React Native with Expo to build mobile applications as well as web output. They explore the features of Expo Router, including file-based routing and CSS support. Expo Router also allows for universal links and web layouts, making it possible to build for different platforms from a single code base. The talk covers SEO, meta information, and API routes with Expo Router, and mentions the use of monorepositories with Next and Expo or React Native. The speaker discusses the future of Expo Router, including the upcoming Version 4 and the potential use of ReactStrictDOM and React Server Components. They also highlight the benefits of bringing Tailwind-CSS to React Native.

Chandra Carney discusses accessibility in 2024, highlighting the importance of equal access for disabled people and the evolving view of disabilities as civil rights. The talk covers the global accessibility standard WCAG, with versions 2.0, 2.1, and 2.2, and the European standard EN 301549. Updates to laws such as the ADA in the US and the Web Accessibility Directive and European Accessibility Act in the EU are also discussed. The EU reinforces the importance of inclusion and holds businesses accountable for accessibility. Proactive accessibility is emphasized as a requirement and everyone's responsibility.

Today, we explore server-driven UI in React Native, which allows for scalable and complex UIs without incurring tech debt. Project Lightspeed simplifies UI definition and reduces code duplication. Server-driven UI, used by industry giants like Shopify and Airbnb, enables flexibility and platform consistency. Additionally, Evan Bacon's talk at ReactConf introduces the vision of universal React server components in server-driven UI.

Nested Interactive Elements in Nightmare Accessibility can cause issues with screen readers and other assistive tools, making it difficult for users to interact with websites. Mitigation strategies include unnesting elements, using CSS overlay, and being cautious when modifying roles. It is recommended to involve users of assistive tools in focus groups and share solutions online.

Welcome to the talk, Art & Entropy, Introducing Chaos in Your Front-End. Chaos engineering is a practice invented by Netflix in 2011 to observe how a system reacts to intentional disturbance. Applying chaos engineering to the frontend is experimental but necessary, as a broken frontend can negatively impact the user experience. Intentional perturbations in the frontend can be induced through various areas such as HTTP requests with slow 3G network or unstable Wi-Fi. Tools like chaos frontend toolkits can be used to experiment with chaos engineering in the frontend and embrace breakage as part of the application's story.

Today's presentation is about full stack development using the new Oracle 23 AI database and Parse Platform. Parse Server simplifies mobile development by providing a flexible backend solution. The new Oracle 23 AI database container offers benefits like JSON support and pluggable database administration. The Parse Server storage adapter allows for easier management and testing of APIs. The stack also includes features like GraphQL, custom Oracle code execution, message queues, and Oracle Spatial for geofencing and trucking applications.

Visual Regression Tests are like unit or integration tests but focus on the visual part, allowing developers and QA personnel to identify and address any changes. Challenges in detecting UI changes include elements that are not visible to the human eye and misalignment of elements. Use cases for Visual Regression Tests include testing design system components, responsive designs, and browser renderings. Building a Visual Regression Test Tool involves handling animations, network requests, and flakiness. Docker is the best solution for resolving visual regression issues, and finding the baseline for comparison can be challenging but is handled by the testing tool.

Today's Talk explores modern front-end frameworks React, SolidJS, and Quick. React's popularity is attributed to its component-based architecture and extensive ecosystem. SolidJS distinguishes itself with fine-grained reactivity, efficient memory usage, and developer-friendly API. Quick (QUIC) stands out for its fast load times, resumability, server-side rendering, and prioritization of developer experience. QUIC's on-demand loading feature improves initial page load time by deferring non-critical code execution.

This Talk introduces the concept of being a 'React bad boy' by ignoring best practices and optimizing React rendering. It explains how to avoid unnecessary rerenders using React.memo and React DevTools. It also covers advanced techniques like isolating state changes and lazy loading hooks. The Talk explores reducing component rerenders using Svelte stores and optimizing with swap stores in Redux. These techniques improve React performance without the need for major refactors or rewrites.

The Talk discusses the future of web frameworks, suggesting that DSLs will be the way forward. Wasp is introduced as a tool for generating code for client components, server functions, and database models. The benefits of DSLs in web development are highlighted, including simplifying complex tasks and enabling collaboration with AI. Wasp is praised for its ability to capture full-stack engineering tasks and has gained popularity in the web development community.

Today's Talk discusses empowering NX with AI and building an AI-powered documentation system. NX is a powerful build system with smart features like project graph analysis and dependency management. The AI features include an assistant for streamlined navigation of documentation, AI error explainer, and resource allocation optimization on NX Cloud. The AI-powered documentation system uses embeddings and vector matching to find relevant Docs, utilizing tools like OpenAI, GPT, Superbase, and Vercel's AI SDK.

In this talk, the speaker introduces CreateNextApp and CreateT3App as tools for quickly setting up Next.js projects. CreateT3App has a modular CLI that allows users to select specific technologies. The speaker also discusses E3env, which ensures control of environment variables, and T3 Turbo, a monorepo version of CreateT3App that offers flexibility for installation and deployment.

Hamza Hawi, a software engineer at the Autonomous Robotics Research Center, discusses the use of React and Leaflet in robotics. The research center utilizes a mixed fleet of robots and relies on React for mission planning software, while Leaflet is used for mapping and custom layers. Leaflet offers flexibility for different types of vehicles and supports the creation of custom layers like image and video overlays. Additionally, the talk mentions the use of video overlays for weather forecasts and optimizing joystick usage with a strategy design pattern.

This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.

I will talk about my recent project, Waku, and my React libraries - Rustand, Jotai, and Valisio. Waku is a React framework that depends heavily on React Server Components (RSC) and aims to make capabilities like code splitting, routing, data fetching, and SSR available to developers. It uses React components based on RSC for reusability and provides a fast experience with VIT, hot reload, and hot module replacement. Waku is under active development, aiming for V1 alpha and exploring Waku-specific features. Deploying Waku apps on Vercel is supported, and a plugin system is in consideration for extended support.

AI offers opportunities for React developers to code faster and automate tasks. Generative AI is a crucial area for developers to focus on. Working with AI APIs and RAGS can open up new possibilities for projects. Orchestration frameworks and tools like Lanchain and relevance help chain tasks together and work with different AI models. AI is a supplement to human capabilities and learning to code with AI can help developers push boundaries and become better.

Today's Talk explores the blurring boundaries of infrastructure design, driven by user involvement and evolving technology. User technical literacy and changing technology are reshaping the design landscape, blurring the lines between interface and infrastructure design. Privacy and user needs now play a crucial role in infrastructure design decisions. React's experimental APIs and common UX tools aid in designing infrastructure with user needs in mind. Identifying concerns and security vulnerabilities and collaborating with cross-functional partners are essential for robust infrastructure design.

MDEdit is a tool that converts Markdown into HTML and provides a what-you-get editor. Progressive web apps offer a comparable user experience on both desktop and mobile devices. The Service Worker allows web apps to remain functional even without an internet connection. The Persistent Storage and File Handling APIs enable web apps to store data and access files on the client's device. Project Fugu provides new APIs, including the Font Access API, to bridge the gap between native apps and web applications.