React and JavaScript insights directly from framework authors and early adopters.
Upcoming events
JSNation 2025
JSNation 2025
Jun 12 - 16, 2025
React Summit 2025
React Summit 2025
Jun 13 - 17, 2025
Productivity Conf for Devs and Tech Leaders
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
Node Congress 2025
Node Congress 2025
Apr 17 - 18, 2025
C3 Dev Festival 2025
C3 Dev Festival 2025
June, 2025
TechLead Conference 2025
TechLead Conference 2025
June, 2025
React Advanced 2025
React Advanced 2025
October, 2025
JSNation US 2025
JSNation US 2025
November, 2025
React Summit US 2025
React Summit US 2025
November, 2025
TestJS Summit 2025
TestJS Summit 2025
November, 2025
Talks from our events
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
Vue.js Live 2024
Vue.js Live 2024
Apr 25 - 26, 2024
Node Congress 2024
Node Congress 2024
Apr 4 - 5, 2024
DevOps.js Conf 2024
DevOps.js Conf 2024
Feb 15 - 16, 2024
React Day Berlin 2023
React Day Berlin 2023
Dec 8 - 12, 2023
Articles
Top ideas
Trending today
React Patterns Made Simple
React Day Berlin 2024React Day Berlin 2024
62 min
React Patterns Made Simple
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Learn widely used React patterns, including HOCs, Compound Components, Provider Patterns, Functions as Child, and Portals, to write cleaner, more efficient code and create scalable, maintainable applications.Overview In this workshop, viewers will learn about key React patterns that can ma...
Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
Top Content
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.
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.
React Server Components in AI Applications
React Day Berlin 2024React Day Berlin 2024
33 min
React Server Components in AI Applications
Good morning, React Day Berlin! Today we'll discuss the intersection of AI and React server components. AI engineering is like salt for React developers, enhancing product experiences. Generative UI uses AI to generate text and code, and we'll build a React app using server components with generative UI. AI can improve movie search by inferring context, and we'll build a collaborative movie search project. Implementing AI search involves creating an AI context and setting UI state. We can enhance the UI by adding a system prompt and creating an AI agent for rich UI. The generate function acts as a generator for the virtual DOM. Memory functionality and interactive movie components can enhance the UI further. The future possibilities include AI-generated UI for e-commerce and personalized recommendations. React server components and the intersection of AI and UI are essential for UI engineers. AI SDK is MIT licensed and available for further discussions.
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to...
Deep Dive into Undici
Node Congress 2024Node Congress 2024
24 min
Deep Dive into Undici
Top Content
Undici is a modern HTTP client for Node.js that offers improved performance and advanced features. It supports HTTP 1.1 and recently added HTTP 2.0 support. Undici provides impressive performance, especially with Undici.Stream. It also supports HTTP 1.1 pipelining, which can significantly cut response time. Undici offers flexible connection management and dispatchers, as well as interceptors for customization. Undici v7 is coming with improved APIs and platformatic runtime for running multiple microservices in the same process.
React Query - The Bad Parts
React Day Berlin 2024React Day Berlin 2024
30 min
React Query - The Bad Parts
Top Content
React.js is a new language for JavaScript that provides a more efficient and flexible way to build user interfaces. It uses a virtual DOM and JSX syntax. React.js is compatible with TypeScript and has certain requirements, such as Node.js and npm installation and knowledge of HTML, CSS, and JavaScript.
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
Top Content
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.
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challeng...
How an RSC Framework Enables Server Actions
React Advanced 2024React Advanced 2024
25 min
How an RSC Framework Enables Server Actions
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.
Featured
Short takes
JSR – Next Generation JavaScript Registry
JSNation 2024JSNation 2024
6 min
JSR – Next Generation JavaScript Registry
JSR is a new JavaScript registry that supports TypeScript and offers additional features like GitHub Action integration, provenance attestations, and documentation generation. It provides a simple website with package search, documentation, and a gamified score. The process of publishing a new package in JSR involves creating a JSR.json file with package details and exports, using MPX JSR publish to publish the package, and approving authorization in the browser. However, documentation for the package is not automatically generated and needs to be manually added.
Solving i18n for React Server Components
React Summit 2024React Summit 2024
7 min
Solving i18n for React Server Components
The Talk discusses internationalization for server components and the challenge of loading translations efficiently. It suggests using import statements in JavaScript to optimize message loading and eliminate the need for namespaces. Tree shaking and tools like Paraglide.js can help minimize message delivery and simplify the process. Overall, the Talk emphasizes the importance of efficient internationalization practices in building multilingual apps.
Define the Relationship with Monorepos
React Summit US 2024React Summit US 2024
6 min
Define the Relationship with Monorepos
Watch video: Define the Relationship with Monorepos
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.
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
Vue.js Live 2024Vue.js Live 2024
8 min
Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner
Knowing JavaScript is essential for getting started with Vue. Understanding the fundamentals of Vue and building on individual concepts will help you develop more complex applications. Don't fall into the trap of building something too big as a starter project. Focus on the fundamentals and don't be swayed by industry standards or tricks posted online. Find a mentor to guide your Vue journey.
Cross-Framework Libraries with Native Experiences Using React
React Summit 2024React Summit 2024
7 min
Cross-Framework Libraries with Native Experiences Using React
The Talk discusses building cross-framework libraries using React to provide a superior experience for developers across different frameworks. The speaker explains the strategy of rendering React components internally and bridging them to different frameworks. They emphasize the importance of simplicity, understandability, and adherence to best practices in third-party libraries. The speaker also highlights the significance of creating a bridge layer and implementing a complete abstraction to ensure the library's reusability and maintenance.
Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry
Node Congress 2024Node Congress 2024
7 min
Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry
Yash Rajavarma introduces observability and explains its importance for developers. He discusses how OpenTelemetry can empower Node.js applications by providing easy instrumentation and management of telemetry data. OpenTelemetry simplifies the implementation of observability and is designed to benefit developers.
Listen Better, Lead Better
TechLead Conference 2024TechLead Conference 2024
7 min
Listen Better, Lead Better
Active listening is a powerful tool that can improve relationships and foster growth. The BREW framework provides guidance for effective communication, emphasizing the importance of being present, reflecting, encouraging, and withholding judgment. Active listening involves understanding what is not being said and creates trust and empathy. By practicing active listening and using the BREW framework, leaders can become more effective in their roles.
Next.js: Reshaping Web App Architecture for Performance Excellence
React Summit 2024React Summit 2024
9 min
Next.js: Reshaping Web App Architecture for Performance Excellence
This Talk discusses how Next.js was used to reshape web app architecture for performance excellence. Next.js allows for server-side rendering (SSR) and client-side rendering (CSR), improving performance and user experience. The implementation of Next.js on the application resulted in faster initial page loads, reduced white screen time, and improved loading states. It is important to use the different rendering options correctly to maximize performance.
AI in Front-End Dev: Your Creative Partner or Job Snatcher?
JSNation 2024JSNation 2024
8 min
AI in Front-End Dev: Your Creative Partner or Job Snatcher?
Top Content
AI in front-end development empowers developers to take on more ambitious projects and innovate at a faster pace. Natural language is a new programming language that can be used for coding, learning, and automating complex tasks. However, it is important to remember that AI is a supplement to human capabilities, not a replacement. Developers need to evolve their skills and stay ahead of emerging technologies to work effectively with AI. The demand for AI engineers is high.
React Jam and Why React Is Awesome for Making Games
React Summit 2024React Summit 2024
7 min
React Jam and Why React Is Awesome for Making Games
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.
Latest
Making React Work in Chrome Extensions
React Summit US 2024React Summit US 2024
11 min
Making React Work in Chrome Extensions
Watch video: Making React Work in Chrome Extensions
Sriram Hariharan
Darshan Bhatta
2 authors
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.
From Lag to Lightning: Boosting React Native Performance
React Day Berlin 2024React Day Berlin 2024
17 min
From Lag to Lightning: Boosting React Native Performance
Hello, everyone. Today I'll talk about boosting React Native app performance. We'll explore optimization techniques, practical strategies, tools, and examples. Performance is crucial for mobile apps. Slow apps lead to frustration, abandonment, and revenue loss. We need to maintain 60 frames per second and overcome performance challenges. Let's understand the React Native architecture, legacy model, and the new architecture with JSI, fabric renderer, and turbo modules. Performance issues in React Native arise due to the single-threaded nature of JavaScript. The React Native bridge can be overwhelmed by large payloads, so using JSI for direct native communication is a more efficient solution. Profiling tools like Flipper, Chrome dev tools, React dev tools, Xcode instruments, and Android profiler help identify bottlenecks. Offloading heavy computations to web workers or JSI can improve JavaScript performance. Enable Hermes engine for improved performance. Optimize flatlist usage, delay non-urgent tasks, and prevent memory leaks for better app performance. Use initial numToRender and maxToRenderPerBatch props, memoize render item, and clean up side effects for optimized rendering. Preload and cache images, delegate gesture processing to the native thread, and continuously test the app under real-world conditions for smooth rendering and fluid UI.
Make Real: Tldraw’s Accidental AI Play
React Day Berlin 2024React Day Berlin 2024
32 min
Make Real: Tldraw’s Accidental AI Play
I'm Steve Ruiz, the founder and CEO of Tealdraw. TLDR is a canvas app in React that allows developers to build with their SDK. TLDR pays attention to details that enhance the canvas experience and can be used to interact with different elements. TLDR's demos showcase its versatility, but may not perform well on social media. TLDR's AI collaboration features allow users to quickly turn their drawings into AI-generated images. The Make Real project helps users create user interfaces by drawing and providing prompts, generating working prototypes. The system behind Make Real can handle complex interactions and ambitious projects. OpenAI integration and the Steel Draw Computer enable building workflows and multi-stage generations. The goal is to bring the Canvas from being specialized to a primitive for the web. Teal Draw is free for open source and non-commercial use, with options to purchase licenses for additional features.
React Server Components in AI Applications
React Day Berlin 2024React Day Berlin 2024
33 min
React Server Components in AI Applications
Good morning, React Day Berlin! Today we'll discuss the intersection of AI and React server components. AI engineering is like salt for React developers, enhancing product experiences. Generative UI uses AI to generate text and code, and we'll build a React app using server components with generative UI. AI can improve movie search by inferring context, and we'll build a collaborative movie search project. Implementing AI search involves creating an AI context and setting UI state. We can enhance the UI by adding a system prompt and creating an AI agent for rich UI. The generate function acts as a generator for the virtual DOM. Memory functionality and interactive movie components can enhance the UI further. The future possibilities include AI-generated UI for e-commerce and personalized recommendations. React server components and the intersection of AI and UI are essential for UI engineers. AI SDK is MIT licensed and available for further discussions.
Building C++ / JSI Native Modules for React Native in 2024
React Summit US 2024React Summit US 2024
17 min
Building C++ / JSI Native Modules for React Native in 2024
Watch video: Building C++ / JSI Native Modules for React Native in 2024
In this talk, the speaker discusses the process of building C++ native modules for React Native. They explain that native modules allow for tighter platform integration and access to platform-independent performance code, but come with trade-offs such as increased build times and potential issues with crashes and package dependencies. The speaker clarifies the differences between the old and new architecture of React Native, highlighting the introduction of the JavaScript interface (JSI) and its benefits. They also explore alternative React Native architecture options, including TurboNativeModules and LegacyNativeModules. The speaker discusses the challenges of working with legacy native modules and the benefits of using NitroModules and pre-building native code. They conclude with recommendations for using Nitro modules, pre-building, and utilizing a compiler cache to optimize build times.
Local-First: A Crazy New Way to Build Apps
JSNation US 2024JSNation US 2024
25 min
Local-First: A Crazy New Way to Build Apps
Watch video: Local-First: A Crazy New Way to Build Apps
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.
Writing Your First Vite Plugin
React Summit US 2024React Summit US 2024
19 min
Writing Your First Vite Plugin
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.
React 19 and the Compiler for the Rest of Us
React Day Berlin 2024React Day Berlin 2024
30 min
React 19 and the Compiler for the Rest of Us
Hi everyone. I'm Johnny, an application engineer who builds user-centric React 19 applications. Today, our goal is to help you reach production mountain with React 19. Let's start by gathering a crew and discussing the motives for installing the compiler. We'll revisit React rules and explore the compiler's impact on code. The React compiler translates from JavaScript to JavaScript and provides error reporting. It enables deeper levels of optimization and focuses on user experience. To upgrade to React 19, install the latest version and be aware of any compatibility issues. Check if any custom runtime code needs to be disabled. The React compiler can be used with versions 17 or 18 if you have runtime support. The compiler removes use memos and optimizes the initialization process based on static components. It provides granular reactivity and reduces rendering, making the application feel quicker. Follow React rules and conventions to ensure compatibility. Test custom hooks, be aware of the impact on build time, and address any unexpected issues like the removal of the global JSX namespace. Debugging tools and source mapping in Chrome are useful for understanding compiler output. Enjoy translating chants and exploring the possibilities of React 19!
React UI Accessibility on TV - Practical Case Study in Real Production
React Summit US 2024React Summit US 2024
10 min
React UI Accessibility on TV - Practical Case Study in Real Production
Watch video: React UI Accessibility on TV - Practical Case Study in Real Production
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.
The Performance Impact of Generated JavaScript
JSNation US 2024JSNation US 2024
17 min
The Performance Impact of Generated JavaScript
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.
Popular
JavaScript
Webdevelopment Tailored for 2024
React Summit 2024React Summit 2024
7 min
Webdevelopment Tailored for 2024
Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.
Future of Frontend Frameworks Fireside Chat
React Summit 2024React Summit 2024
28 min
Future of Frontend Frameworks Fireside Chat
Fred K. Schott
Minko Gechev
Ryan Carniato
Daniel Afonso
Aakansha Doshi
Tim Neutkens
6 authors
Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.
Building a JS Engine -- For Fun!
JSNation 2024JSNation 2024
9 min
Building a JS Engine -- For Fun!
Top Content
The Talk discusses the basics of building a JS engine, highlighting the complexity and feature completeness of existing engines. It emphasizes the possibility of creating a simpler engine tailored to specific use cases and target audiences. The speaker suggests starting anywhere in the process and provides tips on using parser libraries, implementing runtime features, and ensuring correctness through testing. Additionally, the Talk encourages exploring JavaScript standards and engaging with the open-source community.
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challeng...
Testing: Do More With Less
JSNation 2024JSNation 2024
27 min
Testing: Do More With Less
This talk focuses on practical approaches for testing Node.js applications, including the use of Dora metrics and the testing trophy strategy. It emphasizes the importance of covering critical flows with integration and end-to-end tests, while also considering the cost and speed of different test types. The speaker recommends mocking third-party services and using snapshot testing, but warns about the potential for false positives. Playwright is suggested as a preferred tool, and the importance of automated test execution is emphasized.
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!
Peace, Love and JavaScript
Node Congress 2024Node Congress 2024
17 min
Peace, Love and JavaScript
The OpenJS Foundation supports the entire JavaScript ecosystem and thousands of open source projects. They follow a neutral nonprofit organization with separate business and technical governance to minimize drama. Rebooting governance and addressing intellectual property can also help reduce conflicts. OpenJS provides collaboration spaces and support in various areas for open source projects. They foster a collaborative environment and invite participation in their projects.
React
Building End-to-End Encrypted Apps (Web & React Native)
React Summit 2024React Summit 2024
32 min
Building End-to-End Encrypted Apps (Web & React Native)
This Talk explores the concept and advantages of end-to-end encryption in software development. It discusses the challenges of data encryption and conflict resolution in collaborative apps. The integration of end-to-end encryption with conflict-free replicated data types (CRDTs) is highlighted. The talk also covers simplified document sync, real-time sync and encryption, key management, and authentication. Additionally, it mentions the importance of local-first integration, CRDT frameworks, and data search indices.
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.
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.
The Suspense Quest - Inside React's Magic
React Summit 2024React Summit 2024
30 min
The Suspense Quest - Inside React's Magic
This Talk explores the suspense component in React and its benefits in handling fetched data. It delves into the rendering process of React components and how suspense anticipates requests. The offscreen fiber is introduced as a hidden component that ensures state continuity. The Talk also discusses the usage of suspense for handling concurrent queries and throwing promises, as well as the integration of Redux and the upcoming changes in React 19. Overall, the Talk provides insights into the workings of suspense and its potential applications in software development.
Sketching with Code: Integrating React and p5.js
React Summit US 2024React Summit US 2024
30 min
Sketching with Code: Integrating React and p5.js
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.
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.
The Art of Ignoring Best Practices for React Performance
React Summit 2024React Summit 2024
19 min
The Art of Ignoring Best Practices for React Performance
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.
AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and...
Panel Discussion: Future of React
React Summit US 2024React Summit US 2024
39 min
Panel Discussion: Future of React
Watch video: Panel Discussion: Future of React
Kent C. Dodds
Shruti Kapoor
Mark Erikson
Eli White
Mofei Zhang
Theo Browne
Tom Occhino
7 authors
We're going to be doing a future of React panel discussions. React 19 is in RC stage and we're excited to hear when it will be stable. The React compiler is here to stay and is the future of developer experience and tooling. React 19 brings exciting features like RSCs and consolidation of the framework. React's commitment to community and innovation is commendable. The React team values feedback and actively engages with the community. React's future includes supporting the community and enabling smooth migrations. There's a need to teach underlying concepts and educate AI systems. Teaching and adapting to React can be challenging. The React compiler changes default re-rendering behavior. Collaboration with Next.js and Vercel has been valuable for React's development. Appreciation for the community and partnerships with Vercel and Microsoft.
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
React Summit US 2024React Summit US 2024
30 min
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Top Content
Watch video: Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
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.
Free workshops
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to...
Deploy and Test Full-Stack React Apps on Cloudflare
React Summit US 2024React Summit US 2024
105 min
Deploy and Test Full-Stack React Apps on Cloudflare
WorkshopFree
Dario Piotrowicz
Christian Sparks
2 authors
This 3 hour workshop will provide an introduction to the Cloudflare Developer Platform for application developers. It will focus on developing a full-stack React application backed by tests that can guarantee the correctness of its interactions with the resources and APIs provided by the Develope...
Powerful Data Visualisation with AG Grid & AG Charts
React Summit US 2024React Summit US 2024
107 min
Powerful Data Visualisation with AG Grid & AG Charts
WorkshopFree
Mike Ryan
Mike Ryan
Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid & Charts libraries that...
Building Your Own GenAI Agent Application
React Summit US 2024React Summit US 2024
87 min
Building Your Own GenAI Agent Application
WorkshopFree
Amit Mandelbaum
Idan Rozin
2 authors
GenAI agents are one of the most promising directions for complex GenAI based applications. These agents can search the web, code, and carry complex tasks completely autonomously for the user. In this workshop we will learn the basics of GenAI agents. Define the basic terms and frameworks...
Llms Workshop: What They Are and How to Leverage Them
React Summit 2024React Summit 2024
66 min
Llms Workshop: What They Are and How to Leverage Them
WorkshopFree
Nathan Marrs
Haris Rozajac
2 authors
Join Nathan in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a f...
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
C3 Dev Festival 2024C3 Dev Festival 2024
48 min
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
WorkshopFree
Andreia Ocanoaia
Andreia Ocanoaia
Feeling the limitations of LLMs? They can be creative, but sometimes lack accuracy or rely on outdated information. In this workshop, we’ll break down the process of building and easily deploying a Retrieval-Augmented Generation system. This approach enables you to leverage the power of LLMs with...
How to Build Front-End Access Control with NFTs
JSNation 2024JSNation 2024
88 min
How to Build Front-End Access Control with NFTs
WorkshopFree
Solange Gueiros
Solange Gueiros
Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.
Building Your Generative AI Application
React Summit 2024React Summit 2024
82 min
Building Your Generative AI Application
WorkshopFree
Dieter Flick
Dieter Flick
Generative AI is exciting tech enthusiasts and businesses with its vast potential. In this session, we will introduce Retrieval Augmented Generation (RAG), a framework that provides context to Large Language Models (LLMs) without retraining them. We will guide you step-by-step in building your ow...
Build Peer-to-Peer Applications with Pear Runtime
JSNation 2024JSNation 2024
152 min
Build Peer-to-Peer Applications with Pear Runtime
WorkshopFree
David Mark Clements
David Mark Clements
Learn how to rapidly build peer-to-peer applications with Pear Runtime. No servers required. Understand peer-to-peer paradigms and construct applications from well-defined building blocks. This workshop will cover how to create both Desktop and Terminal applications (with discussion for Mobile) t...
Upcoming events

Subscribe to the top JS conferences

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

Learn more
JSNation 2025 logo
JSNation 2025
Amsterdam, Jun 12 - 16, 2025
React Summit 2025 logo
React Summit 2025
Amsterdam, Jun 13 - 17, 2025
Productivity Conf for Devs and Tech Leaders logo
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
Node Congress 2025 logo
Node Congress 2025
Apr 17 - 18, 2025
C3 Dev Festival 2025 logo
C3 Dev Festival 2025
June, 2025
TechLead Conference 2025 logo
TechLead Conference 2025
June, 2025
React Advanced 2025 logo
React Advanced 2025
London, October, 2025
JSNation US 2025 logo
JSNation US 2025
New York, November, 2025
React Summit US 2025 logo
React Summit US 2025
New York, November, 2025
TestJS Summit 2025 logo
TestJS Summit 2025
November, 2025