Upcoming events
React Summit 2025
React Summit 2025
Jun 13 - 17, 2025
JSNation 2025
JSNation 2025
Jun 12 - 16, 2025
JSNation US 2025
JSNation US 2025
Nov 17 - 20, 2025
React Summit US 2025
React Summit US 2025
Nov 18 - 21, 2025
React Advanced 2025
React Advanced 2025
Nov 27 - Dec 1, 2025
Productivity Conf for Devs and Tech Leaders 2026
Productivity Conf for Devs and Tech Leaders 2026
March, 2026
Node Congress 2026
Node Congress 2026
April, 2026
Web Development insights directly from framework authors and early adopters.
Talks from our events
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
Vue.js Live 2024
Vue.js Live 2024
Apr 25 - 26, 2024
Node Congress 2024
Node Congress 2024
Apr 4 - 5, 2024
Articles
Top ideas
Trending today
Thinking Like an Architect
Node Congress 2025Node Congress 2025
23 min
Thinking Like an Architect
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.
Why You Should Use Redux in 2024
React Summit 2024React Summit 2024
33 min
Why You Should Use Redux in 2024
Top Content
Mark Erickson explains the history, creation, evolution, and benefits of Redux. Redux was designed to make state updates and action history maintenance easy, incorporating functional programming principles. Redux Toolkit was created to simplify Redux usage. Redux is still a valid choice for its consistent pattern and separation of state from UI. The decision to use Redux depends on the specific use case and the need for centralized state management.
How an RSC Framework Enables Server Actions
React Advanced 2024React Advanced 2024
25 min
How an RSC Framework Enables Server Actions
Top Content
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.
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.
Testing Mail Service With Playwright
TestJS Summit 2022TestJS Summit 2022
17 min
Testing Mail Service With Playwright
Top Content
Watch video: Testing Mail Service With Playwright
This Talk discusses how to test mail service with Playwright, covering e-mail verification, reset password user journey, and more. It explores the use of third-party providers for reliable e-mail delivery and demonstrates how Playwright can help perform checks on e-mail content. The Talk also introduces the concept of a fake SMTP server and showcases how fixtures can be used to access the SMTP server and perform assertions on the HTML body of emails. Playwright's HTML rendering feature allows for interaction with email content as if it were a regular web page. It highlights the ability to render HTML from API calls, perform assertions on the rendered page, and exclude dynamically generated data from visual regression tests.
The Hitchiker's Guide to Event Driven Architectures
Node Congress 2025Node Congress 2025
21 min
The Hitchiker's Guide to Event Driven Architectures
Today's Talk introduced event-driven architectures with Node.js. The event loop in Node.js enables non-blocking interaction between components. The event emitter class is used to handle events synchronously. Redis and Apache Kafka are popular tools for event handling, with Kafka providing scalability and persistence. Kafka.js is a JavaScript library that supports transactions and compression. Server-sent events are used to send events to the client. A plugin and library are used to convert an event emitter to an async iterator. The client displays emojis and updates the vote count.
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.
Nested Interactive Elements: An Nightmare in Accessibility
React Advanced 2023React Advanced 2023
23 min
Nested Interactive Elements: An Nightmare in Accessibility
Top Content
Watch video: Nested Interactive Elements: An Nightmare in Accessibility
Nested interactive elements can cause accessibility issues on websites, and the speaker shares a personal experience with an accessibility bug involving a list component. Mitigating nested interactive structures involves limiting these patterns during development and restructuring existing elements. The speaker provides recommendations for improving accessibility, such as adjusting role properties and gathering user feedback. The conclusion emphasizes the importance of accessible solutions and encourages sharing resources to build more inclusive experiences.
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.
Enhancing React Ecosystems with Observability: A Deep Dive into React with OpenTelemetry
React Summit 2024React Summit 2024
22 min
Enhancing React Ecosystems with Observability: A Deep Dive into React with OpenTelemetry
The Talk discusses the difference between monitoring and observability, highlighting the focus of OpenTelemetry on generating and processing data. It explores the concept of traces and span IDs in distributed tracing and the experimental nature of OpenTelemetry in the browser. The Talk also touches on the complexities of React with server components and demonstrates how distributed tracing can connect traces for different services. The process of adding OpenTelemetry to Next.js and analyzing application and browser traces is explained, along with the importance of context propagation. The Talk concludes with insights on analyzing fetch calls, errors, and the storage limitations of traces.
Featured
Short takes
Can AI Turn Us Into 10x Developers?
JSNation 2024JSNation 2024
7 min
Can AI Turn Us Into 10x Developers?
AI can help developers become 10x more efficient by leveraging powerful GPUs. Codium is an AI developer tool that can accelerate learning, analyze dependencies, and provide personalized coding experiences. It abstracts away complexity and allows developers to focus on building user experiences. Codium aims to transform the software industry and empower developers to become 10x engineers.
First Comes Conflict, Then Comes Growth
React Summit 2024React Summit 2024
6 min
First Comes Conflict, Then Comes Growth
Conflicts in software development often arise from the roles of victim, persecutor, and rescuer in the drama triangle. Shifting to a creator role helps navigate conflicts by focusing on learning and improving. Navigating conflict involves preventing rescue, providing feedback, and challenging others. Managers can play a crucial role as coaches instead of rescuers. By encouraging a shift to the empowerment dynamic, unnecessary drama and conflict can be avoided.
A Better Starting Point
React Summit 2024React Summit 2024
7 min
A Better Starting Point
In this talk, the speaker introduces CreateNextApp and CreateT3App as tools for quickly setting up Next.js projects. CreateT3App has a modular CLI that allows users to select specific technologies. The speaker also discusses E3env, which ensures control of environment variables, and T3 Turbo, a monorepo version of CreateT3App that offers flexibility for installation and deployment.
Server-Driven Mobile Apps With React Native
React Summit 2024React Summit 2024
8 min
Server-Driven Mobile Apps With React Native
Today, we explore server-driven UI in React Native, which allows for scalable and complex UIs without incurring tech debt. Project Lightspeed simplifies UI definition and reduces code duplication. Server-driven UI, used by industry giants like Shopify and Airbnb, enables flexibility and platform consistency. Additionally, Evan Bacon's talk at ReactConf introduces the vision of universal React server components in server-driven UI.
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.
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.
Empowering Nx with AI
React Summit 2024React Summit 2024
8 min
Empowering Nx with AI
Today's Talk discusses empowering NX with AI and building an AI-powered documentation system. NX is a powerful build system with smart features like project graph analysis and dependency management. The AI features include an assistant for streamlined navigation of documentation, AI error explainer, and resource allocation optimization on NX Cloud. The AI-powered documentation system uses embeddings and vector matching to find relevant Docs, utilizing tools like OpenAI, GPT, Superbase, and Vercel's AI SDK.
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.
Simplify Package Releases – From Versioning to Publishing
JSNation 2024JSNation 2024
7 min
Simplify Package Releases – From Versioning to Publishing
The Talk focuses on the Nx release command for publishing npm packages in a monorepo setup. It ensures correct package publishing order, handles versioning and change logs, and allows for simulating changes before publishing. Advanced features include configurable versioning, group releases, and support for different languages. Documentation, videos, and recipes are available for customizing and automating releases on your CI system.
Beyond the Console: Navigating JavaScript With Observability
JSNation 2024JSNation 2024
7 min
Beyond the Console: Navigating JavaScript With Observability
Nathan Mars, tech lead at Grafana Labs, introduces observability for JavaScript applications, highlighting the effectiveness of debugging and troubleshooting with observability. Open Telemetry is presented as a standardized way to obtain system data and Grafana as a platform for monitoring metrics, logs, traces, and profiles. The talk also emphasizes the applicability of observability to the front end using GrafanaFerro to collect metrics like page load, errors, and user sessions.
Latest
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.
The Next Chapter of Dev Productivity: Aligning Experience with Excellence
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
19 min
The Next Chapter of Dev Productivity: Aligning Experience with Excellence
Hi, everyone. Thanks for joining this talk on the next chapter of Dev Productivity, aligning experience with excellence. My name is Jeff Schnitter. I'm a Solution Architect at Cortex, and frankly, I'm not sure if I'm qualified to give the talk about Dev Productivity and aligning experience with excellence across the entire industry. So, good developer experience make developers happy. Great NGX makes the business thrive, and this ties it back to developers being happy. NGX excellence is really a constant journey. The adoption of those tools makes sense. It's still really difficult to make sense through all of that. Think about a developer whose job is really to understand the complexity of writing code and deploying it in different environments. Developer productivity is about reducing friction and enabling them to write better, performing, and secure code. Customers are on different paths in their journey to engineering excellence. AI can play a huge role in the engineering ecosystem. Metrics and a broader perspective beyond tools are necessary for engineering excellence. DevEx and engineering excellence are essentially the same, focusing on freeing up developers to write feature code and get ideas to production while addressing challenges like cost and security. Cortex invites you to join engineering excellence activities and share thoughts on completing the journey from DevEx to engineering excellence. The conversation and journey never end, so being prepared and adaptable is crucial.
AI-Powered Development: From Curiosity to Creativity
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
19 min
AI-Powered Development: From Curiosity to Creativity
Welcome to my talk on AI powered development. We'll explore the implications of AI tools and where the value lies in software development. We're transitioning to a new age where AI plays a significant role in coding. The new workflow involves asking AI for code, verifying it, and continuing to build. AI tools are available in the market, offering different options for developers. It's important to choose the right approach that aligns with your goals. Keeping IDE and AI separate allows for better control. The value of AI-powered development lies in architecture, scalability, and creativity. We're in the early stages of AI-powered development, presenting a significant advantage for those entering the field now.
Maximize Productivity with AI Agents
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
25 min
Maximize Productivity with AI Agents
I'm Tejas Kumar, a software developer with over 20 years of experience. AI agents are defined as entities that act on behalf of users or groups to produce specific effects. Agents consist of an orchestration layer, a language model, and tools represented as JSON functions. Langflow is an open-source tool that allows users to build their own AI agents by connecting language models and tools. Composio is a tool that enhances agent capabilities by offering integrations and apps, such as Google Calendar integration. MCP (Model Context Protocol) is a way to share context with models and extend their capabilities. It allows functions to be made available to models over standard input/output or an HTTP endpoint. MCP can be used with GitHub to perform various tasks like searching and fixing code issues. The Talk covered the basics of AI agents, building agents with Langflow and enhancing them with Composio, and using MCP with GitHub. The speaker encouraged audience questions and exploration of these concepts.
ChatGPT Unleashed: Revolutionizing Web Development from Idea to Deployment
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
22 min
ChatGPT Unleashed: Revolutionizing Web Development from Idea to Deployment
Welcome to Chad GPT, Unleashed, Revolutionizing Web Development. I'll share my journey and lessons learned about GPT-03-Mini-High. TLDR: Good with slower-changing technologies, poor with rapidly moving ones. Let's test the application by building a vision board. User stories, requirements, acceptance criteria, and design principles were well-executed. Mobile responsiveness, accessibility, security, and scalability are important. LLM struggled with error handling and installation, but we managed to troubleshoot. The app creation process was painful, but we created a better version. Some end-to-end tests failed. Automated tests didn't consider challenges and project structure. Continuous integration failed during deployment, but manual deployment worked. Majority of LLM tools worked. AI's impact on hiring: current roles remain, but new hires are affected. AI enhances my abilities, reducing the need for hiring. Thank you for your time.
Building the Next Generation of AI Developer Tools
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
26 min
Building the Next Generation of AI Developer Tools
Hello, everyone. My name is Krzysztof, and I will be talking today about developer tools, AI, and how we use both of those to create the next generation of developer tools. GitHub Copilot, released in 2021, revolutionized developer tools by automating boring parts of coding and keeping developers in a state of flow. Suggestions are shown directly in the editor and clearly separated from the real code. Chat interfaces, like Chat GPT, solve quality of response issues and are useful when flow doesn't exist. The next generation of tools focuses on structured exchange, user control, and iteration. GitHub Spark allows users to create small applications without focusing on code. Designing applications with the user in mind and handling ambiguity is important. Real-world software tasks require human guidance, and exploring new ideas beyond chat-based AI is necessary. Always consider the human aspect and ethical considerations when using AI-powered features.
AI Engineer End-to-End Workflow: Productivity Challenges and Their Solutions
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
22 min
AI Engineer End-to-End Workflow: Productivity Challenges and Their Solutions
Today's Talk explores productivity challenges and solutions for AI engineers, focusing on an application called Contoso Chat. The end-to-end workflow is examined from a productivity perspective, introducing the concept of Exposure to AI. Building an AI application involves ideation, augmentation, and operationalization stages. Provisioning and setup are crucial steps, with infrastructure as code being a productivity tool. GitHub Codespaces and development containers provide consistent development environments. Azure AI Inference API allows easy iteration and prototyping. AI-assisted evaluation involves training AI models and using evaluators for grading responses. Custom evaluators can be created. Overall, the Talk emphasizes the importance of productivity throughout the AI engineer's journey.
Using AI as Your Performance Expert in Node.js
Node Congress 2025Node Congress 2025
20 min
Using AI as Your Performance Expert in Node.js
Today's Talk discusses the transformation of performance monitoring with AI in Node.js. AI-powered tools can analyze massive amounts of data and provide actionable insights, making performance debugging faster and more efficient. Traditional profiling techniques are often time-consuming and require deep expertise. AI-powered diagnostics analyze data and provide recommendations for optimizing performance. AI-driven performance analysis correlates performance issues with system metrics and generates code optimization suggestions. Advancements in performance debugging include detecting CPU bottlenecks, memory leaks, and combining multiple data sources for context-aware insights. The AI-powered demo showcases the detection and optimization of performance issues in a Node.js application. Integrating AI-powered performance monitoring is straightforward and requires a mindset of continuous learning and curiosity in performance optimization.
Leveraging Developer Productivity Engineering Practices for Greater Impact as an IC
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
26 min
Leveraging Developer Productivity Engineering Practices for Greater Impact as an IC
Hey, my name is Mikhail Levchenko. I've changed my job and became a full-time developer productivity engineer. Let me share a little story. Imagine being a wealthy trader in 15th century Europe. Delivering spices for profit was not an easy task. Middle East nations heavily taxed any traders. But the Portuguese sailed around Africa using the Mariner's Astrolabe. Fast forward, Gerardo Mercator invented a map perfectly suited for deep ocean navigation. The Dutch East India Company became the new king of the spice trade. Developer productivity is about building a cozy environment for developers, solving hard problems, and identifying process bottlenecks. It focuses on the whole development process as a product. By leveraging this perspective, you can drive change among developers and other roles. Observing developer processes as a product involves meeting stakeholders, formulating a vision, creating a model and metrics, finding productivity problems, and proposing solutions. The stakeholders include developers, CEOs, CTOs, engineering managers, and other roles involved in software development. The goal is to make everyone more productive, guided by the motto of happier developers building better software faster. There are three highlighted frameworks in this talk: DORA, DEVX, and Mertrix. DORA focuses on speed and reliability with metrics like acceleration frequency, lead time, failure rate, and recovery time. DEVX addresses the human factor with metrics related to feedback loops, cognitive load, and flow state. DX4 is a recent metric that combines DORA and DEVX, introducing proprietary metrics for top management. It includes a failure rate to encompass reliability and a percentage of time spent on new features. Engineer-developed metrics like the reliability metrics from Dora and the percentage of time spent on new features are valuable additions. Talking to top management about changes is made easier with a cool metric. Research concerning metrics, consult stakeholders, and read literature to improve understanding. Try prototypes before developing custom tools as a last resort. Confirm success with empirical metrics. Release managers often feel constantly interrupted and overwhelmed by the task of supervising a release. Sharing the role with the entire team proved to be ineffective, leading to forgotten procedures. Automation and streamlining of the release process improved satisfaction and reduced delayed releases. Make developer productivity part of company goals and culture code. Advocate for developers to top management. Drive change by starting small, experimenting, and using tools as a last resort. Find ways to make teammates more productive.
Can Machines Learn Bug Language?
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
27 min
Can Machines Learn Bug Language?
In this Talk, the speaker discusses the importance of analyzing bugs in software development. Analyzing bugs goes beyond just counting them; it helps improve processes, understand root causes, and gain insights through machine learning. The Talk emphasizes the need for proper communication with bugs and the importance of preparing the bug analysis environment. Automation and visualization can improve bug analysis efficiency, and a comprehensive analysis of different metrics is necessary to gain insights for improvement. The Talk also highlights examples of bug analysis and the use of machine learning for pattern recognition. Bug severity estimation using machine learning algorithms and the use of clustering for bug analysis are also mentioned. Overall, the Talk provides valuable insights on bug analysis and its role in improving software quality and productivity.
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!
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.
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.
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.
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.
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.
React in the Autonomous Robotics Industry
React Summit 2024React Summit 2024
11 min
React in the Autonomous Robotics Industry
Hamza Hawi, a software engineer at the Autonomous Robotics Research Center, discusses the use of React and Leaflet in robotics. The research center utilizes a mixed fleet of robots and relies on React for mission planning software, while Leaflet is used for mapping and custom layers. Leaflet offers flexibility for different types of vehicles and supports the creation of custom layers like image and video overlays. Additionally, the talk mentions the use of video overlays for weather forecasts and optimizing joystick usage with a strategy design pattern.
AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Top Content
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.
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.
Let's Build Suspense 🥁
React Summit US 2024React Summit US 2024
20 min
Let's Build Suspense 🥁
Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.
Is React Really Dying?
React Advanced 2024React Advanced 2024
29 min
Is React Really Dying?
Is React really dying? React is dead. Let's take a look at the numbers. Svelte is getting 1.5 million downloads per week. Angular is pulling 3.5. Probably not a competitor with React. React dwarfs everything with 25 million downloads a week. React is incredibly popular with 4 million users and developers. Despite some criticism, a survey shows that 71% of respondents liked React, while only 28% didn't. React's flexibility and options can be overwhelming for beginners. React's complexity has increased, causing confusion for beginners. Memory management, overcomplicated architecture, and innovation fatigue are common challenges in React. React 19 is delayed due to suspense issues. React server components are a favorite innovation. Qwik's hydration model is cool. Qwik is amazing, and it would be cool to see something like it for React. AI can help you get 80% there, but you still need an actual developer to tweak and clean up the code. Tab AI keeps your workflow going. React's popularity is undeniable. The momentum behind React is strong, and it's unlikely to fade away anytime soon.
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.
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.
Free workshops
Free webinar: Building Full Stack Apps With Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Free webinar: Building Full Stack Apps With Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
In this webinar I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive furthe...
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Top Content
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...
Upcoming events

Subscribe to the top JS conferences

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

Learn more
React Summit 2025 logo
React Summit 2025
Amsterdam, Jun 13 - 17, 2025
JSNation 2025 logo
JSNation 2025
Amsterdam, Jun 12 - 16, 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
Productivity Conf for Devs and Tech Leaders 2026 logo
Productivity Conf for Devs and Tech Leaders 2026
March, 2026
Node Congress 2026 logo
Node Congress 2026
April, 2026