Talks from our events
React Summit 2025
React Summit 2025
Jun 13 - 17, 2025
JSNation 2025
JSNation 2025
Jun 12 - 16, 2025
Node Congress 2025
Node Congress 2025
Apr 17, 2025
Productivity Conf for Devs and Tech Leaders
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
React Day Berlin 2024
React Day Berlin 2024
Dec 13 - 16, 2024
React Summit US 2024
React Summit US 2024
Nov 18 - 22, 2024
JSNation US 2024
JSNation US 2024
Nov 18 - 21, 2024
React Advanced 2024
React Advanced 2024
Oct 25 - 29, 2024
TechLead Conference 2024
TechLead Conference 2024
Jun 15 - 19, 2024
React Summit 2024
React Summit 2024
Jun 14 - 18, 2024
C3 Dev Festival 2024
C3 Dev Festival 2024
Jun 14 - 15, 2024
JSNation 2024
JSNation 2024
Jun 13 - 17, 2024
Latest
All talks
How to Become a Staff Engineer
React Summit 2025React Summit 2025
32 min
How to Become a Staff Engineer
The speaker provides insights on transitioning to a staff engineer role, emphasizing the key pillars of technical excellence, organizational impact, and mentorship. They discuss challenges faced in leading projects at Slack and misconceptions in staff engineer development, highlighting the importance of networking and self-promotion. Strategies for advancing to staff engineer level, promotion to senior staff engineer, and selecting strategic projects for career progression are outlined. The talk also covers career advancement strategies, navigating responsibilities as a staff engineer, deciding on the staff engineering path, and considerations in career decisions within engineering.
a11y & Interactive Canvases
JSNation 2025JSNation 2025
28 min
a11y & Interactive Canvases
Oli's talk delves into the importance of accessibility and interactive canvases, comparing SVG and canvas rendering for chart components. The discussion includes enhancing SVG elements with ARIA attributes for better screen reader interpretation, implementing accessible canvas using proxy elements, and showcasing interactive elements with focus visibility. The talk also explores dynamic focus indicators, AI integration for screen readers, and the optimization of canvas over SVG for performance. Considerations for EU accessibility testing, direct screen reader APIs, and image-to-speech conversion using TransformersJS are discussed.
Configurational Dependencies in pnpm
JSNation 2025JSNation 2025
25 min
Configurational Dependencies in pnpm
Introduced new feature in PNPM v10 called config dependency, allowing custom plugins. Centralizing configuration and dependencies management. Early installation of limited config dependencies in PNPM. Trusted dependencies for lifecycle scripts in PNPM. Versatility of pmpm hooks in configuration. Example of a config dependency for fixing type script issues. Discussion on project sustainability, security, contributors, and hiring prospects. Comparison of migration tools, hosting preferences, and package version restrictions.
Server Components Wars: PHP Strikes Back
React Summit 2025React Summit 2025
6 min
Server Components Wars: PHP Strikes Back
Edoardo, a senior dev rel at Storyblok, delves into server components' intricacies, urging a better understanding. The evolution from PHP to React marked a shift in web development paradigms, emphasizing server-side rendering and dynamic client interactions. Facebook transitioned from PHP to React, introducing XHP subset. Isomorphic JavaScript and server-side rendering emerged with data requests and content rendering. React server components enable server-side rendering with data fetched from DBMS or CMS, emphasizing patterns for seamless transitions to new frameworks.
From Architecture to Adoption: Engineering & Scaling a Modern LMS with React
React Summit 2025React Summit 2025
28 min
From Architecture to Adoption: Engineering & Scaling a Modern LMS with React
The speaker highlights challenges in online learning platforms and the necessity for a developer-centric platform. Insights on building a specialized platform with real-world case studies are shared. MDX is discussed for creating flexible content and organizing content pieces into reusable modules. The platform architecture involves a monorepo with TurboRepo managing a stack of technologies. Strategies for enhancing user engagement, user retention through streaks, and key takeaways like scalable architecture, strategic rendering, and user-focused development are emphasized. Performance optimization techniques such as React Server Components and asset optimization with WebP are mentioned. Strategies for privacy-aware metrics tracking, user learning metrics, and avoiding server-side rendering for better performance are also covered.
Your Frontend’s Best Friend - How to Ship Fast in 2025
React Summit 2025React Summit 2025
20 min
Your Frontend’s Best Friend - How to Ship Fast in 2025
The Talk delves into enhancing success rates in software projects through focusing on iteration velocity and observability. Discussions revolve around the advantages of utilizing full stack web frameworks like Next.js and Remix for efficient software development and improved code sharing. The integration of TurboStream, BFF, and Model Context Protocol (MCP) in full stack development is explored. Vercel and Cloudflare's innovative solutions for integrating MCP servers into Next.js applications are highlighted, simplifying code sharing and enabling diverse front-end experiences.
Supercharge Your Debugging With the New Features in Chrome Devtools
JSNation 2025JSNation 2025
29 min
Supercharge Your Debugging With the New Features in Chrome Devtools
Barry Pollard
Ewa Gasperowicz
2 authors
Eva and Bari introduce the complexity of web development and emphasize the evolving nature of DevTools, discussing productivity gains through new features. The talk covers performance debugging enhancements and user-friendly changes in the performance panel. Live metrics screen offers real-time insights, integrating real user data for performance comparison. Configuring DevTools for accurate user emulation and leveraging performance trace capabilities for debugging. Enhancing user experience with AI insights and visual assistance, setting up AI workspace in DevTools. Addressing data privacy concerns and AI usage control. Chrome DevTools API and Gemini model enhancements, AI features specific to Chrome, web sockets throttling, and AI agent probing in performance context.
Frontend’s Lost Decade and the Performance Inequality Gap
JSNation 2025JSNation 2025
32 min
Frontend’s Lost Decade and the Performance Inequality Gap
Top Content
Alex Russell's journey from engineering to product management, the focus on improving web experiences, and optimizing software for end-user success. Considerations include device performance, web diversity, and API constraints. Challenges of web platforms encompass hardware and network limitations, prioritizing user experience. Understanding the impact of Moore's Law on device performance and adapting browsers for efficiency. Emphasis on code optimization, user-focused development, and quality in web UI. Addressing challenges in PWA success, developer learning, and balancing frameworks with platform understanding.
T3Boy: Making Accurate Game Boy Emulation Accessible with Next.js and WASM
React Summit 2025React Summit 2025
21 min
T3Boy: Making Accurate Game Boy Emulation Accessible with Next.js and WASM
Travis TI Kevin83 McGeehan, senior software engineer, ambassador for Task Videos, React Native specialist, task record holder in Pokemon Yellow Glitchless, TAS verification process for console input validation. Mickey Mouse $61 billion in merchandise sales, Pokemon RPGs, speedrunning concept, different categories, TASing in emulators, TAS records on TASvideos.org, TASbot mascot. TAS verification, controller interfaces, TASbot mascot, T3 Boy accessibility challenges, TAS videos preservation, Kolmogorov complexity in emulation accuracy. Qt for emulator front ends, WebAssembly benefits, T3 Boy website integration with emulation cores, T3 stack integration for game saves, custom pointer events API, T3 Boy interface overview. Integrating WASM module into Next.js boilerplate, Global function declaration in TypeScript, Important functions like cwrap for WebAssembly interaction. Cwrap function for JavaScript module interaction, Pointer concept in lower-level languages, Memory management with malloc, heapuate, and free. Loading BIOS and Memory Management, Handling Individual Values, Using Add Function for Callbacks, Quirks with Web Audio API and Resampling Limitations. Utilizing Pointer Events API, Cloud Saving Feature with Discord Auth, T3Boy Emulator, and WebAssembly Integration in React.
Bundlers: A Deep Dive into Modern JavaScript Build Tools
JSNation 2025JSNation 2025
20 min
Bundlers: A Deep Dive into Modern JavaScript Build Tools
Edoardo, DevRel at Storyblok, explains the importance of JavaScript bundlers and discusses Storyblok's migration to Vite. Challenges with old JavaScript applications are illustrated, emphasizing issues with global variables and dependency control. Optimizing JavaScript module loading through ES modules is discussed, highlighting browser compatibility and performance concerns. The process of creating and structuring JavaScript bundles is detailed, focusing on dependency graphs and module organization. Techniques for managing bundle execution, utilizing abstract syntax trees for code parsing, and implementing optimization strategies are explored, with a specific emphasis on Vite, hot module replacement, and development enhancements.
Featured
Trending today
Deploy Everywhere with Expo Router
React Summit 2025React Summit 2025
26 min
Deploy Everywhere with Expo Router
Innovating ExpoGo (formerly Exponent) for rapid mobile prototyping with custom native code support and instant deployment. Revolutionizing native app development with Continuous Native Generation (CNG) for enhanced speed and access to new features. Empowering React framework with Expo for web, enabling universal apps with SEO benefits and advanced CSS tools. Innovating navigation with Expo Router for seamless file-based routing and native API integration. Streamlining app deployment with Expo for efficient full stack development and user onboarding.
How to React Compiler
React Summit 2025React Summit 2025
20 min
How to React Compiler
Introduction to React compiler, differences from React 19, installation of Babel plug-in React compiler, specifying target React versions, and how React compiler detects and processes component dependencies. Configuring React compiler settings, exploring default options and configurations, utilizing React compiler playground website for configurations, dealing with JSX markup re-computation. React compiler feature for extracting JSX from array map callbacks, limitations of enable function outlining, enabling JSX outlining for separate functions. Function memoization in React compiler, React compiler beta stage, potential errors with React compiler. React compiler error: memorization preservation, hidden messages, validation settings. React compiler: validation tools, hooks treatment, memorization challenges. Changing hooks to functions for React compiler optimization. React Compiler usage considerations and potential optimizations.
React Compiler Internals
React Summit 2025React Summit 2025
23 min
React Compiler Internals
Introduction to React Compiler, its benefits, and the problem of memoization in React. Performance issues due to stateful components in React, solution with React.memo and use memo, and the benefits of React compiler in automating memoization. Compiler's transformation into high-level intermediate representation provides a clearer understanding of code operations and data flow, addressing the issues with unique identifiers for variables in complex scenarios. Compiler ensures each variable is assigned exactly once through single static assignment, resolving issues with variable values based on code paths and introducing unique names for assignments. Effects describe how operations interact with data, ensuring safe caching with types like read, store, capture, mutate, and freeze effects. The compiler understands operations but needs to identify values that change between renders for React, leading to the reactive analysis phase to determine reactive values in the component. Variables marked as reactive for potential changes between renders are optimized for caching. Compiler identifies dependencies to group operations for efficient caching. Scopes are established to cache related variables together and ensure efficient rendering and performance improvement in the final JavaScript code. Compiler sets up cache slots for dependencies and outputs to optimize performance. Scopes work independently to recalculate based on changes, ensuring efficient memoization. React Compiler streamlines memoization, providing automatic correct optimizations without manual burden, paving the way for performance-focused code.
Out Of Order Streaming (The Secret Powering Modern React)
React Summit US 2024React Summit US 2024
29 min
Out Of Order Streaming (The Secret Powering Modern React)
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.
SPA to SSR and Everything in Between
React Summit 2025React Summit 2025
29 min
SPA to SSR and Everything in Between
React's transformative impact, community support, and server-side evolution highlighted. Exciting developments from static site generators like Next.js and Gatsby to server-side rendering evolution, including React Fiber, Hooks, and server components. The pressure on servers in 2020 led to the announcement of server components, a complex but transformative idea. New challenges arise with weaving server and client, requiring adaptation and file organization. Evaluation of React server components' worth based on server-side needs and bundle issues. SPAs are prevalent and valued, despite the focus on client-side apps. TanStack Router offers unparalleled URL state management and type safety, enhancing SPA development. Exciting developments ahead with the DaVinci release, supported by sponsors for TAN stack's full-time commitment and core contributors.
The New Defaults of the Modern Web
JSNation 2025JSNation 2025
10 min
The New Defaults of the Modern Web
The speaker reflects on past experiences developing various websites, highlighting challenges faced in achieving visually unique sites with similar functionalities. They discuss hacks used in web development, the evolution of CSS and web APIs, and express a desire for modern web defaults. Challenges with mobile viewport height on touch devices are described, along with the evolution of hacks into simpler CSS solutions. The evolution of scroll behavior, scroll snapping challenges, and scrolling interception techniques are also discussed. The text covers animation challenges, transitioning to promise-based animations, and the use of frameworks for animations and view transitions in web development.
The State of Node.js 2025
JSNation 2025JSNation 2025
30 min
The State of Node.js 2025
The speaker covers a wide range of topics related to Node.js, including its resilience, popularity, and significance in the tech ecosystem. They discuss Node.js version support, organization activity, development updates, enhancements, and security updates. Node.js relies heavily on volunteers for governance and contribution. The speaker introduces an application server for Node.js enabling PHP integration. Insights are shared on Node.js downloads, infrastructure challenges, software maintenance, and the importance of update schedules for security.
Frontend’s Lost Decade and the Performance Inequality Gap
JSNation 2025JSNation 2025
32 min
Frontend’s Lost Decade and the Performance Inequality Gap
Top Content
Alex Russell's journey from engineering to product management, the focus on improving web experiences, and optimizing software for end-user success. Considerations include device performance, web diversity, and API constraints. Challenges of web platforms encompass hardware and network limitations, prioritizing user experience. Understanding the impact of Moore's Law on device performance and adapting browsers for efficiency. Emphasis on code optimization, user-focused development, and quality in web UI. Addressing challenges in PWA success, developer learning, and balancing frameworks with platform understanding.
Lynx: Unlock Native for More
React Summit 2025React Summit 2025
32 min
Lynx: Unlock Native for More
Shen's first English talk at a conference introducing Lynx project with viral success, Lynx leveraging web technologies for multi-platform development, bridging web strengths with native capabilities, enhancing development capabilities with native UI elements, instant rendering, MTS enabling man-thread scripting and CSS support, exploration of Tailwind integration, embracing Haskell in Lynx for cross-platform thinking.
From Architecture to Adoption: Engineering & Scaling a Modern LMS with React
React Summit 2025React Summit 2025
28 min
From Architecture to Adoption: Engineering & Scaling a Modern LMS with React
The speaker highlights challenges in online learning platforms and the necessity for a developer-centric platform. Insights on building a specialized platform with real-world case studies are shared. MDX is discussed for creating flexible content and organizing content pieces into reusable modules. The platform architecture involves a monorepo with TurboRepo managing a stack of technologies. Strategies for enhancing user engagement, user retention through streaks, and key takeaways like scalable architecture, strategic rendering, and user-focused development are emphasized. Performance optimization techniques such as React Server Components and asset optimization with WebP are mentioned. Strategies for privacy-aware metrics tracking, user learning metrics, and avoiding server-side rendering for better performance are also covered.
Short takes
Aligning Patterns Across Design and Development
React Summit US 2024React Summit US 2024
8 min
Aligning Patterns Across Design and Development
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.
Simplifying Analytics in React Apps
React Summit US 2024React Summit US 2024
7 min
Simplifying Analytics in React Apps
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.
No Dependencies, No Problem: Streaming AI Over the Phone
JSNation 2025JSNation 2025
6 min
No Dependencies, No Problem: Streaming AI Over the Phone
Marius from Twilio demonstrates building AI agents for phone calls, addressing latency issues by leveraging Twilio's infrastructure and third-party providers like 11 Labs and Google Cloud. Configuration includes WebSocket integration for message handling, static responses, and text-to-speech with 11 Labs. AI integration involves GPT4 or mini model for conversation history storage. A live demo showcases an AI voice assistant with instant responses and latency improvements.
React for Good: Creating Inclusive, Secure, and Scalable Applications in Emerging Markets
React Summit 2025React Summit 2025
5 min
React for Good: Creating Inclusive, Secure, and Scalable Applications in Emerging Markets
Inosency Andembera, React developer, discusses using React for building scalable, secure, and inclusive applications for emerging markets like Malawi and Africa. Addressing challenges of Internet connectivity, device limitations, security concerns, and inclusivity for first-time Internet users. Utilizing React for performance, security, and inclusion in emerging markets through code splitting, lazy loading, authentication, input validation, multiple language support, and simple UIs. Highlighting React's features in enhancing inclusion by addressing challenges in emerging markets, such as limited digital literacy, creating simple UIs, supporting multiple languages, internationalization, step-by-step UIs, and semantic HTML for accessibility. Zunga, a financial platform in Malawi, showcases React's benefits in addressing financial service gaps, scalability, offline support, and security enhancements.
Next.js Adapters: Build Once, Deploy Everywhere
React Summit 2025React Summit 2025
7 min
Next.js Adapters: Build Once, Deploy Everywhere
Hello, React Summit. Excited to talk about Next.js adapters. Evolution towards adapter solutions to simplify deployment complexities. Minimalist adapter interface for customization and structured output handling. Key hooks and configurations for platform-specific optimizations. Partners collaboration for enhanced experiences in Next.js deployments. Simplified, platform-agnostic deployments for better developer experience.
It’s Not Magic: Elevate Auth Security with PKCE Best Practices
Node Congress 2025Node Congress 2025
5 min
It’s Not Magic: Elevate Auth Security with PKCE Best Practices
The talk discusses the need to enhance auth security with Pixie Best Practices and the limitations of current standards like OAuth 2 and OpenID Connect. It introduces Pixie as an added layer of security over the authorization code flow and explains how it prevents code injection. Pixie enhances security by connecting client requests with responses from the authorization server, preventing cross-site request forgery attacks. It is recommended for public clients and will be required for all clients in the upcoming OAuth 2.1 spec. The talk also highlights the benefits of Pixie for enhancing security in web apps. Learn more about Pixie and best practices at FusionAuth, where Kim Meida, Senior Director of Developer Relations, provides developer-first auth and auth APIs.
Divide and Conquer? - Exploring the 'JS0' and 'JSSugar' Proposal for JavaScript Evolution
JSNation 2025JSNation 2025
5 min
Divide and Conquer? - Exploring the 'JS0' and 'JSSugar' Proposal for JavaScript Evolution
JS 0 and JS Sugar proposal for JavaScript evolution. Complexity abstraction to engines. Splitting language into JS0 and JSugar. Lessons learned from developers' concerns and users' preferences. Involvement in shaping JavaScript ecosystem.
Improve Your Presentation Skills by Scripting Your Live Coding Demos to Perfection
React Summit 2025React Summit 2025
8 min
Improve Your Presentation Skills by Scripting Your Live Coding Demos to Perfection
Elio's tips for perfect live coding: Minimize distractions, prepare well with light themes and larger fonts, adjust cursor style, avoid hover panels. Stay focused on one application during presentations. Changing settings for clarity, stressing the importance of tools like Demo Time for scripted presentations within Visual Studio Code, eliminating context switching between applications, and facilitating audience interaction with shared repositories. Exploring actions in Demo Time: creating code, opening files, highlighting code, and executing VS Code commands for a cleaner presentation. Utilizing Slides for Markdown presentations within Demo Time.
WinterTC and How Standards Help Developers
Node Congress 2025Node Congress 2025
5 min
WinterTC and How Standards Help Developers
WinterTC is working on standardizing JS runtimes to avoid vendor lock-in and provide a universal API. This involves defining which web APIs should be included, such as URL and WebAssembly. The goal is to create a definitive list of APIs for server-side JS runtimes.
Auth: Build vs Open Source vs Buy
JSNation 2025JSNation 2025
7 min
Auth: Build vs Open Source vs Buy
Authentication is crucial for system security, with options including building, buying, or using open source. Modern security complexities are addressed by purchasing systems with enterprise-level security features. Cost considerations in authentication highlight maintenance and scaling costs, with buying solutions providing peace of mind and predictable costs.
Popular
JavaScript
Temporal: Modern Dates and Times in JavaScript
JSNation US 2024JSNation US 2024
22 min
Temporal: Modern Dates and Times in JavaScript
I'll speak today about the Temporal proposal, which adds modern date and time handling to JavaScript. Temporal is an API that'll be available in browsers soon and will add a built-in library for dates and times, avoiding the need for external libraries like Moment. It offers strong typing with different types for different data, such as calendar dates with or without time. Temporal objects are immutable and designed to work with JavaScript's internationalization facilities. It addresses deficiencies in the global Date object and introduces types like instant and plain types for accurate representation of time and dates across time zones. With the old Date, representing a date without a time can be problematic, especially in time zones where midnight is skipped due to daylight saving time. Temporal introduces types like PlainDate, PlainTime, PlainYearMonth, PlainMonthDay, and ZonedDateTime to accurately represent different scenarios. Additionally, there is a type called Duration for arithmetic operations and unit conversion. Now that I've introduced you to the cast of characters in Temporal, it's time to show how to accomplish a programming task. We'll start with an easy task: getting the current time as a timestamp in milliseconds using the instant type. To convert between Temporal types, you can either drop or add information. The toZonedDateTime method is used for conversion and requires adding a time zone and a time. Although Temporal objects are immutable, you can create new objects with replaced components using the with method. Migrating from the old Date object to Temporal offers a more reliable solution and avoids potential bugs. Check out the documentation for more details and enjoy using Temporal in your codebase!
10 Years of Best of JS
JSNation 2025JSNation 2025
28 min
10 Years of Best of JS
Michael discusses the evolution of JavaScript from its early days to modern server-side capabilities, the impact of jQuery, Node.js, and single-page applications with popular libraries like Backbone and AngularJS. The emergence of UI libraries like React, Vue.js, and Angular, alongside meta frameworks like Next.js, Remix, Veltkit, and Solid with server components. The Best of JS project tracks JavaScript project trends, filters out deprecated projects, and monitors GitHub stars for maintenance. The importance of maintaining project relevance, adding new projects continuously, and classifying projects under meaningful tags. The evolution of TypeScript, tool releases like Deno and Burn, styling evolution from CSS to headless components, and the impact of Tailwind CSS. Analysis of CSS optimization, CLI ecosystem, tooling trends, emerging tools, and JavaScript development trends over the past decade.
React
Evaluating React Application Performance with a Sip of RUM
React Day Berlin 2024React Day Berlin 2024
10 min
Evaluating React Application Performance with a Sip of RUM
Hello, everybody. How are we all doing? I'm going to talk about Rome, OpenTelemetry, and identifying performance bottlenecks and issues in React applications. The pillars of observability are logs and metrics. Logs are structured messages that warn, indicate, or error. Metrics include throughput, latency, custom and core web vitals. Traces allow us to see through the pathway of our application and identify bottlenecks. One common open standard for collecting these signals is open telemetry. React's client instrumentation is experimental and mostly unspecified. The open telemetry demo provides an example of front-end tracing in React, giving you a unique service name and basic metrics. The demo shows an HTTP POST request with the pathway and timing. The open telemetry project is still working on core web vital metrics and other enhancements. Real user monitoring (RUM) fills the gaps in open telemetry, capturing missing information. In conclusion, we discussed the importance of capturing logs, metrics, and traces and provided resources for further exploration.
The State of React and the Community in 2025
React Summit 2025React Summit 2025
29 min
The State of React and the Community in 2025
Mark Erickson discusses the state of React in 2025, React community debates on React's direction and misconceptions, React's shift towards client-side frameworks and SSR emphasis, React's feature development process at Meta and Vercel, controversy around Vercel's server components involvement, tight relationship between React and Next, React team's emphasis on frameworks for app performance, critique of React's heavy-handed framework recommendation, React team's delay in adding VEET as a recommended tool, challenges with server components' origins and communication, no official signals support planned for React 19, social media impact on React development decisions, React community diversity and server components usage insights, React's evolving black box concept and tradeoffs discussed.
React Query - The Bad Parts
React Day Berlin 2024React Day Berlin 2024
30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.
Out Of Order Streaming (The Secret Powering Modern React)
React Summit US 2024React Summit US 2024
29 min
Out Of Order Streaming (The Secret Powering Modern React)
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.
How to React Compiler
React Summit 2025React Summit 2025
20 min
How to React Compiler
Introduction to React compiler, differences from React 19, installation of Babel plug-in React compiler, specifying target React versions, and how React compiler detects and processes component dependencies. Configuring React compiler settings, exploring default options and configurations, utilizing React compiler playground website for configurations, dealing with JSX markup re-computation. React compiler feature for extracting JSX from array map callbacks, limitations of enable function outlining, enabling JSX outlining for separate functions. Function memoization in React compiler, React compiler beta stage, potential errors with React compiler. React compiler error: memorization preservation, hidden messages, validation settings. React compiler: validation tools, hooks treatment, memorization challenges. Changing hooks to functions for React compiler optimization. React Compiler usage considerations and potential optimizations.
Our Own React Global State Manager in Less Than 50 Lines of Code
React Summit 2025React Summit 2025
26 min
Our Own React Global State Manager in Less Than 50 Lines of Code
Speaker delves into global state management in React, mentioning Redux and alternatives like React context. Creating a global state manager in under 50 lines of code with React context, highlighting challenges with performance and React specificity. Building a custom hook named user store for state management, implementing state and API for store, handling partial state updates efficiently. Managing listeners for state changes, setting up custom hooks and selectors, and subscribing to external stores. Demonstrating optimization in state management and preventing unnecessary button re-renders. Discussion on Redux, Signals, debugging, and various global state management choices like Zestand and Redux toolkit.
Tanstack Start - A Client-Side First Full-Stack React Framework
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - A Client-Side First Full-Stack React Framework
Top Content
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.
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
React Summit US 2024React Summit US 2024
12 min
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
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.
Everything You Thought You Knew About React Functional Components Is Wrong
React Summit US 2024React Summit US 2024
22 min
Everything You Thought You Knew About React Functional Components Is Wrong
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.
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
React Advanced 2024React Advanced 2024
12 min
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
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.
Node.js
Run TypeScript Natively in Node.js
JSNation 2025JSNation 2025
28 min
Run TypeScript Natively in Node.js
Discussion on TypeScript adoption in Node.js, typescript's popularity, challenges in integrating TypeScript with Node.js due to versioning differences, introducing strip types to remove non-JavaScript syntax, leveraging the SWC library through Amaro for efficient code execution, Node.js support for TypeScript with experimental strip types, enabling transform types and source maps by default, TypeScript evolution with new flags for type checking, TypeScript ESM code evaluation in Node, issues with TypeScript and JavaScript syntax ambiguity, collaboration between Node.js and TypeScript teams, recommendations on using TypeStripping for production projects, comparison of performance between TS Node and Node for TypeScripting, handling type definitions and runtime checking in TypeScript using Zod.
What's in a Node.js Bug – A Case Study
Node Congress 2025Node Congress 2025
23 min
What's in a Node.js Bug – A Case Study
I'm going to talk about character encodings, specifically a Node.js bug related to UTF-8. Two popular encodings are UTF8 and UTF16. The bug was discovered in August 2024 and was traced to a specific pull request in the Node.js core repository. The bug is caused by an incorrect implementation of the fast write string method. Lessons learned include the importance of naming conventions and thorough testing beyond coverage analysis.
Running Java in Node.js with WebAssembly
Node Congress 2025Node Congress 2025
19 min
Running Java in Node.js with WebAssembly
Hello, everyone. Welcome to my talk on running Java in Node.js with WebAssembly. Many organisations have a lot of Java code, and as they adopt newer technologies such as Node.js or CloudFloat workers, maintaining interoperability with this existing code becomes important. WebAssembly is a stack machine-based thing, like the JVM, but with a different instruction set. It improves over Asm.js with a new binary format and supports streaming compilation, SIMD, and 64-bit integers. Compiling Java code to WebAssembly involves converting JVM instructions, handling local slots, recovering if statements, and understanding control flow. Short circuit conditionals and loops are important to consider in the conversion process. Additionally, memory allocation, object creation, and program memory are key concepts. Overall, this talk explores the challenges and techniques involved in running Java in Node.js with WebAssembly.
Make Hono work on Node.js
Node Congress 2025Node Congress 2025
15 min
Make Hono work on Node.js
Today's Talk is about making Hono work on Node.js. Hono is a backend for web frameworks that supports TypeScript. It started as a Cloudflare workers framework and now supports multiple runtimes. The Node.js adapter allows Hono applications to run in Node.js by converting Node.js APIs into web standard APIs. Benchmark tests show that Hono is faster than Express but slower in some core areas. The Node.js adapter has been widely used and has undergone performance improvements. Overall, adding Node.js support to Hono has been successful in reaching more users and improving quality.
The Path to Native TypeScript
Node Congress 2025Node Congress 2025
24 min
The Path to Native TypeScript
Today's Talk discusses the integration of TypeScript in Node.js. The path to native TypeScript in Node.js is explored, including the history of user requests for native support. Implementing TypeScript in Node.js poses challenges due to differences in stability guarantees and tool compatibility. TypeStripping is a transpilation-focused implementation that removes non-JavaScript features, making it stable across TypeScript versions. The Amaro package, built on SWC, provides compatibility and speed for type stripping. Experimental Strip Types and Transform Types flags enable erasable TypeScript features. TypeScript has limitations such as namespace and enum support in JavaScript and code migration issues. TypeScript Import Types and Syntax Detection are ongoing developments. Ambiguity in syntax between JavaScript and TypeScript is addressed with an erasable syntax only flag. Future steps include bug fixing, performance improvements, and upcoming Node.js releases.
The Alleged ‘End’ of Node.js Is Much Ado About Nothing
Node Congress 2025Node Congress 2025
26 min
The Alleged ‘End’ of Node.js Is Much Ado About Nothing
Hello, welcome to Node Congress 2025. Node is not dead and will remain popular for a long time. Node has a large number of downloads across different platforms. Despite known vulnerabilities, older versions of Node are still widely used. Node.js is an active and thriving project with a strong focus on security. Recent updates have introduced new features and improvements, including ESM support, stable threads, and web platform compatibility. Node is governed by the OpenJS Foundation and maintained by collaborators. Consensus-seeking is important for the project's development. Start contributing and be part of the future of Node.js.
The State of Node.js 2025
JSNation 2025JSNation 2025
30 min
The State of Node.js 2025
The speaker covers a wide range of topics related to Node.js, including its resilience, popularity, and significance in the tech ecosystem. They discuss Node.js version support, organization activity, development updates, enhancements, and security updates. Node.js relies heavily on volunteers for governance and contribution. The speaker introduces an application server for Node.js enabling PHP integration. Insights are shared on Node.js downloads, infrastructure challenges, software maintenance, and the importance of update schedules for security.
NodeJS & AI: Building Smarter Applications
Node Congress 2025Node Congress 2025
19 min
NodeJS & AI: Building Smarter Applications
Today's Talk explored combining Node.js and artificial intelligence to build smart applications. Two types of models, closed and open source, were discussed, with closed models accessed via an API and open source models hosted locally or on the cloud. The use of RAC (Retrieve of Method Generation) to enhance models was explained, along with the process of obtaining data and improving retrieval performance. Chunking, embedding, and vector databases were introduced as techniques for organizing and transforming data. The Talk also covered data retrieval using semantic search and the generation of human-readable answers using models. The concept of enhancing models with agents was discussed, focusing on how agents break down complex goals and utilize external functions. The use of tools and the React pattern in implementing agents was highlighted. Lastly, the Talk touched on implementing agent patterns and enhancing LLMs, with demos and code available for further exploration.
Speeding Up Your Node Sever With Rust
JSNation 2025JSNation 2025
21 min
Speeding Up Your Node Sever With Rust
Talk on improving Node server efficiency with Rust. Node's ease of use but inefficiency for some tasks. Example of a slow express server handling high scores inefficiently. Native modules in Rust provide a safer alternative to C for improving efficiency. Rust empowers developers to build reliable and efficient software, with strong static typing and immutability by default. Rust's result and option enums handle error and value absence cases. The ownership system in Rust ensures safe memory management without manual intervention. The importance of ownership in Rust for memory management and error prevention. Writing native modules in Rust with NAPI for easier project creation and code integration. Exploring the efficiency gains of using Rust's native modules for faster performance and reduced risks in development.
What We All Pretend to Know: The Differences Between the JS Engine & JS Runtime
JSNation 2025JSNation 2025
11 min
What We All Pretend to Know: The Differences Between the JS Engine & JS Runtime
Karina Ionkina
Samiul Huque
2 authors
The talk delves into the intricacies of JavaScript engine and runtime, emphasizing the importance of understanding execution processes for effective development and debugging. It discusses how JavaScript engines optimize code through parsing, abstract syntax trees, and byte code execution. Strategies for optimizing code include maintaining type stability, using type-stable arrays, and consistent object shapes to avoid deoptimization. Recommendations for enhancing JavaScript execution involve ensuring input type consistency, using type-stable arrays, and understanding the event loop's role in code execution across different runtimes and engines.
Testing
Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise
JSNation US 2024JSNation US 2024
22 min
Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise
Watch video: Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise
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.
Advanced Playwright Techniques for Flawless Testing
JSNation US 2024JSNation US 2024
20 min
Advanced Playwright Techniques for Flawless Testing
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.
Beyond React Testing Library: Testing React Libraries (and library-like code)
React Advanced 2024React Advanced 2024
33 min
Beyond React Testing Library: Testing React Libraries (and library-like code)
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.
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
JSNation US 2024JSNation US 2024
10 min
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
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.
Accessibility Granted: Building Inclusive Components One Test at a Time
React Summit US 2024React Summit US 2024
18 min
Accessibility Granted: Building Inclusive Components One Test at a Time
Watch video: Accessibility Granted: Building Inclusive Components One Test at a Time
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.
At the Top of the Pyramid: Playwright Testing at Scale
React Summit 2025React Summit 2025
25 min
At the Top of the Pyramid: Playwright Testing at Scale
Introduction to Playwright as an end-to-end testing tool with easy installation and code generation. Features include visual comparisons, API testing, and best-in-class developer experience. Playwright offers AI capabilities, practical testing tools, and innovative testing strategies. Challenges in testing specialized domains are addressed, along with best practices for test dependencies and readability. Optimizing testing efficiency through parallelism, code organization, and network cache usage. The discussion also covers test performance enhancement, managing workers, optimizing dependencies, stability of test functions, and the use of Playwright sharding in CI/CD runs.
Maestro & Expo: Crafting the Future of Efficient e2e Testing
React Advanced 2024React Advanced 2024
20 min
Maestro & Expo: Crafting the Future of Efficient e2e Testing
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.
Testing the Waters With Deno
JSNation 2025JSNation 2025
24 min
Testing the Waters With Deno
Today's discussion delves into testing in Deno, emphasizing its simplicity and built-in tooling. Deno offers a seamless testing experience for developers, allowing tests to be written in TypeScript without extensive setup. The platform supports BDD-style testing, provides various assertion types, advanced features like code coverage and snapshot testing, and allows for filtering tests based on keywords. Additionally, Deno facilitates component testing, dependency mocking, and migration of test suites from Jest to Deno with minimal changes.
The 2025 State of JavaScript Testing
JSNation 2025JSNation 2025
24 min
The 2025 State of JavaScript Testing
The talk delves into JavaScript testing challenges, company testing practices diversity, and the evolution of testing tools. It explores the transition to user-centric testing, browser-based component testing, and advancements in AI testing tools. The evolving landscape includes Playwright's features and comprehensive testing solutions. Future trends discuss network mocking, AI testing advancements, and the role of AI in JavaScript testing practices.
Validating the Web: The Evolution of Form Validation
React Summit 2025React Summit 2025
20 min
Validating the Web: The Evolution of Form Validation
Exploring the evolution of web forms from HTML2 to Web 3.0 and the crucial role of form validation in application development. The importance of form validation, challenges, and the need for better approaches. Introducing VEST as a flexible validation tool inspired by unit testing frameworks. Highlighting VEST's logic separation, asynchronous validation, and advanced features like caching. Discussing warning states, user guidance, and the impact of form validation on user experience and application success.
Upcoming events

Subscribe to the top JS conferences

and grow in-depth as engineer with insights from library authors and core teams

Learn more
TechLead Conference 2025: AI in Orgs logo
TechLead Conference 2025: AI in Orgs
Sep 18 - 19, 2025
AI Coding Summit logo
AI Coding Summit
October, 2025
JSNation US 2025 logo
JSNation US 2025
New York, Nov 17 - 20, 2025
React Summit US 2025 logo
React Summit US 2025
New York, Nov 18 - 21, 2025
React Advanced 2025 logo
React Advanced 2025
London, Nov 27 - Dec 1, 2025
React Advanced Canada 2026 logo
React Advanced Canada 2026
Toronto, Mar 24 - 26, 2026
Node Congress 2026 logo
Node Congress 2026
April, 2026