June 13 - 17, 2025
React Summit
Amsterdam & Online

React Summit 2025

The biggest React conference worldwide

React Summit is an annual conference on all things React, gathering thousands of Front-end and Full-stack engineers from around the world.

This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
Our Own React Global State Manager in Less Than 50 Lines of Code
26 min
Our Own React Global State Manager in Less Than 50 Lines of Code
Speaker delves into global state management in React, mentioning Redux and alternatives like React context. Creating a global state manager in under 50 lines of code with React context, highlighting challenges with performance and React specificity. Building a custom hook named user store for state management, implementing state and API for store, handling partial state updates efficiently. Managing listeners for state changes, setting up custom hooks and selectors, and subscribing to external stores. Demonstrating optimization in state management and preventing unnecessary button re-renders. Discussion on Redux, Signals, debugging, and various global state management choices like Zestand and Redux toolkit.
React Query - Beyond the Basics
Workshop finished
React Query - Beyond the Basics
WorkshopPro
Dominik Dorfmeister
Dominik Dorfmeister
In this workshop, we'll go beyond the fundamentals and explore some of the more powerful features React Query has to offer. You'll gain a deeper understanding of how it works under the hood and learn how to write scalable, maintainable React Query code.Together, we'll build a simple example app and incrementally enhance it with one core objective in mind: delivering the best possible user experience. That means snappy interactions, minimal layout shifts, and avoiding unnecessary loading spinners wherever we can.To achieve this, we'll dive into advanced techniques like various forms of prefetching (including integration with route loaders), seeding the query cache, crafting smooth paginated experiences, and even persisting query state through full page reloads using persistence plugins.
Note: You should have prior knowledge about React Query if you attend this workshop.
Enhancing React Apps with Playwright Monitoring
68 min
Enhancing React Apps with Playwright Monitoring
WorkshopFree
Nica Mellifera
Nica Mellifera
Test and trust your React app by combining Playwright’s powerful browser automation with modern synthetic monitoring. In this hands-on workshop, you’ll learn how to write real user flow tests with Playwright, run them locally, and then scale them into production-ready monitoring with Checkly.We’ll start with a quick tour of synthetic vs. real user monitoring, then dive into testing key interactions in your app, from page loads to forms and navigation. You’ll learn how to use Playwright’s core features to create reliable end-to-end tests.Next, we’ll show you how to turn those local tests into live monitors. You’ll deploy your tests as synthetic monitors, view test runs, and debug failures with rich observability data, like screenshots and traces.Table of contents:Intro: Synthetic vs RUM, Testing vs MonitoringSetup to run app locallyWrite Playwright tests on the appPlaywright core features Run testsConvert Playwright tests into synthetic monitorsConcepts of Monitoring as CodeObservability: debug with Traces, Logs & ScreenshotsClosing the loop with alerts and notification channels considerationsWorkshop level: developers comfortable with React and CLI tools.
TDD in Frontend
121 min
TDD in Frontend
Workshop
Aleksandr Shinkarev
Aleksandr Shinkarev
Tests first, code last!How to develop your frontend that the code isn't falling apart? How to make it scary free to deliver your work results? How to battle bugs that are chasing you at every step you make?I am going to answer these questions during the workshop and show how to follow TDD at React applications.To showcase the approach I am going to use Cypress, React, MobX, and even Dev Containers. These tools can be replaced by others that are in use in your projects today. Here and now tooling is not so important.In spite of the title the workshop is going to be useful not only for frontend developers. You can benefit from it even working in a different area of development because the key here is a mindset of how to make reliable applications through testing.
Build and Customize a Node-Based Workflow Builder With React
140 min
Build and Customize a Node-Based Workflow Builder With React
WorkshopFree
Łukasz Jaźwa
Łukasz Jaźwa
Node-based user interfaces offer an intuitive and powerful way to represent complex data flows and processes. In this interactive 3-hour workshop, you’ll learn how to create engaging diagram UIs using React and the popular React Flow library. We’ll start by exploring key libraries for creating custom diagram UIs, comparing their strengths, differences, and most effective use cases. Focusing on React Flow, we’ll then build a workflow application together, introducing features such as custom nodes and edges, drag-and-drop functionality, state management, minimap and zoom controls, auto- layout, and property-editing sidebar. You’ll discover how to leverage open-source UI components designed for diagramming to enhance visual appeal and learn how to extend diagrams with custom functionality. We’ll also look at existing tools and products that can streamline your development process – so you can concentrate on implementing your business logic efficiently. By the end of this workshop, you’ll know how to unlock the potential of node-based UIs in React, enabling you to create rich, interactive applications tailored precisely to your project’s needs.Workshop Agenda:Introduction to Diagram LibrariesBuilding a Workflow Application with React FlowImplementing Advanced Interaction and Usability FeaturesEnhancing the User ExperienceExtending and Scaling Your Node-based UIPlease note that this workshop assumes a comfortable working knowledge of React, so we can focus on building advanced features right from the start.
React Compiler Internals
23 min
React Compiler Internals
Introduction to React Compiler, its benefits, and the problem of memoization in React. Performance issues due to stateful components in React, solution with React.memo and use memo, and the benefits of React compiler in automating memoization. Compiler's transformation into high-level intermediate representation provides a clearer understanding of code operations and data flow, addressing the issues with unique identifiers for variables in complex scenarios. Compiler ensures each variable is assigned exactly once through single static assignment, resolving issues with variable values based on code paths and introducing unique names for assignments. Effects describe how operations interact with data, ensuring safe caching with types like read, store, capture, mutate, and freeze effects. The compiler understands operations but needs to identify values that change between renders for React, leading to the reactive analysis phase to determine reactive values in the component. Variables marked as reactive for potential changes between renders are optimized for caching. Compiler identifies dependencies to group operations for efficient caching. Scopes are established to cache related variables together and ensure efficient rendering and performance improvement in the final JavaScript code. Compiler sets up cache slots for dependencies and outputs to optimize performance. Scopes work independently to recalculate based on changes, ensuring efficient memoization. React Compiler streamlines memoization, providing automatic correct optimizations without manual burden, paving the way for performance-focused code.
Instrument, Monitor, Fix: A Hands-On Debugging Session
88 min
Instrument, Monitor, Fix: A Hands-On Debugging Session
WorkshopFree
Lazar Nikolov
Lazar Nikolov
You just shipped a new feature. Tests passed. CI’s green. Everything’s deployed. Life’s good… until the alerts start rolling in. Users reporting “weird stuff happening”, UI glitches, vague “it seems slow” reports, and that dreaded “can’t login” message. Well, this is shaping up to be a bad day. But… maybe not.Watch this hands-on session to learn how to build it, break it, debug it, and go from “no idea what’s wrong” to fixing issues—all in one go. Since we’re serious developers (obviously), we’ll use Next.js and:Setup Sentry from the ground up - including Errors, Session Replay, and TracingLearn ways to use Replays to understand the real user experience, and how to use Tracing to debug application issuesLeverage Sentry AI and the context of your application to understand what’s actually broken, and use Autofix to generate a fix - from root cause all the way to PR.Use this workshop guide to follow along: Quickstart Guide.
Building Full Stack React Apps with Bun
14 min
Building Full Stack React Apps with Bun
Bun is a fast JavaScript runtime aiming to improve Node.js compatibility and streamline the development toolchain. It offers seamless full-stack development capabilities with features like WebSocket support and code-splitting. The efficient package management in Bun optimizes production processes by reducing parsing time and system calls. Bun's collaboration plans include enhancing monorepo support and integrating with frameworks and routers for improved functionality and runtime efficiency.
Panel Discussion: The State of React
35 min
Panel Discussion: The State of React
Tanner Linsley
Naman Goel
Evan Bacon
Shruti Kapoor
Mark Erikson
Jarred Sumner
Sacha Greif
7 authors
Panelists introduced themselves and discussed React Server Components (RSCs), exploring usage in production and alternative frameworks. Challenges of adopting RSCs and benefits of universal data fetching were highlighted. The complexities of implementing RSCs were discussed, emphasizing the need for better integration. The potential of server components for composability and evolving architecture was explored. The React compiler's impact on performance optimization and component re-rendering was examined. Discussions included enhancing React with compiler features, evolving feature sets, and reimagining state management. Improvements in communication, community engagement, and dependency management within the React ecosystem were emphasized. Recommendations for managing dependencies, component performance, and audience appreciation were shared.
The Journey From React Frontend to Fullstack Development With Next.js
91 min
The Journey From React Frontend to Fullstack Development With Next.js
Workshop
Eric Burel
Eric Burel
Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.
Developing Production-Ready Apps in Collaboration With AI Agents
102 min
Developing Production-Ready Apps in Collaboration With AI Agents
Workshop
Alex Shershebnev
Alex Shershebnev
Coding assistants are already changing the way we develop code, and in several years they are expected to completely change how developers interact with code and write it. In this workshop, I'll share tips and best practices on using such tools as we develop the production-ready app with Zencoder.
React in Patterns
Workshop finished
React in Patterns
WorkshopPro
Krasimir Tsonev
Krasimir Tsonev
React and its ecosystem grows every year. New tools, new patterns, new concepts. This workshop covers the latest trends in the React development world. If you feel that you know how to use it but there is something more you could learn, this workshop is for you. We'll be going through the fundamentals, composition patterns, state management, styling workflows, routing, server-side rendering and components.
How to React Compiler
20 min
How to React Compiler
Introduction to React compiler, differences from React 19, installation of Babel plug-in React compiler, specifying target React versions, and how React compiler detects and processes component dependencies. Configuring React compiler settings, exploring default options and configurations, utilizing React compiler playground website for configurations, dealing with JSX markup re-computation. React compiler feature for extracting JSX from array map callbacks, limitations of enable function outlining, enabling JSX outlining for separate functions. Function memoization in React compiler, React compiler beta stage, potential errors with React compiler. React compiler error: memorization preservation, hidden messages, validation settings. React compiler: validation tools, hooks treatment, memorization challenges. Changing hooks to functions for React compiler optimization. React Compiler usage considerations and potential optimizations.
Maximize Productivity with AI Agents
30 min
Maximize Productivity with AI Agents
Tejas discusses AI agents and productivity at the React Summit, emphasizing the role of AI in enhancing user experiences. The use of JSON data and system prompts to improve parsing and streaming processes is highlighted. The importance of AI agents in web navigation for increased productivity and efficient website interaction is explored. Development of tools like the Google Calendar Manager Agent for better calendar management and troubleshooting calendar event creation are discussed. The talk also delves into future possibilities in UX and technology, along with insights on AI component creation and comparison between Langflow and N8n.
SPA to SSR and Everything in Between
29 min
SPA to SSR and Everything in Between
React's transformative impact, community support, and server-side evolution highlighted. Exciting developments from static site generators like Next.js and Gatsby to server-side rendering evolution, including React Fiber, Hooks, and server components. The pressure on servers in 2020 led to the announcement of server components, a complex but transformative idea. New challenges arise with weaving server and client, requiring adaptation and file organization. Evaluation of React server components' worth based on server-side needs and bundle issues. SPAs are prevalent and valued, despite the focus on client-side apps. TanStack Router offers unparalleled URL state management and type safety, enhancing SPA development. Exciting developments ahead with the DaVinci release, supported by sponsors for TAN stack's full-time commitment and core contributors.
AI-Powered Frontend Development: Building Better UIs Faster
19 min
AI-Powered Frontend Development: Building Better UIs Faster
Discussing building better UIs faster with AI, emphasizing the use of LLMs as predictive text models and the need to maximize their smart aspects in coding and UI development. Exploring file context management in Cursor IDE and demonstrating quick UI updates using AI for coding efficiency and real-time results. Discussing advanced workflows for efficient development using feedback-driven approaches and incorporating test-driven development for iterative and automated testing in Cursor IDE. Exploring advanced prompt tricks in Cursor IDE for efficient development by writing tests first, updating code iteratively, and enabling autorun mode for automated testing and bash commands. Cursor's Annoying Prompt Behavior, Automated Testing Benefits, and Test-Driven Development for Reliable Code. AI Feedback Importance and AI Testing Complexity with Clear Goals. AI Challenges, Visual Front-End Focus, and Fusion Preview. Integration of Figma Designs for Visual Tweaks, Exploring New Features and Design Systems, Updating Customers Tab and Making Visual Edits, Making Carousel and Visual Updates, Granular Design Updates and AI Integration, Dynamic Updates and Component Refactoring, Tagging Builder Bot for Automated Code Updates.
Bringing and Running AI Agents in the Browser
Workshop finished
Bringing and Running AI Agents in the Browser
WorkshopPro
Shivay Lamba
Shivay Lamba
In the past few years, there have been a large number of generative AI use cases and adoption has grown increasingly. A large number of web and JS applications now leverage large language models (LLMs), vector search / RAG (Retrieval Augmented Generation) for building better user experiences. Now the tide is shifting, and we have entered the era of AI agents. This is a promising field which combines the different generative AI usecases and helps to simplify the process of interacting with Gen AI by essentially making agents act like humans and makes interactions feel more human like to solve problems in an automated fashion.In this workshop, while we give a quick over view of LLMs, RAG, we will dive deeper into concepts of AI Agents such has how one can leverage LLMs for specific tasks. How can we include tool calling / function calling in AI Agents. Thus showing how an AI Agent is a system that is capable of independently deciding which functions or data sources to used to efficiently execute users' orders.We will show how to develop an AI agent that runs purely on the browser vs running them using cloud.  This workshop is for javaScript developers, AI enthusiasts, and tech innovators who want to integrate the use of AI within web applications to create intelligent and interactive app experiences.
Table of contents:  1. Intro to the general landscape of LLMs, RAG2. What are AI Agents3. Core components of AI Agents4. How to build your first AI Agent with JavaScript5. Stack to build AI Agents in the browser with open source models
The State of React and the Community in 2025
29 min
The State of React and the Community in 2025
Mark Erickson discusses the state of React in 2025, React community debates on React's direction and misconceptions, React's shift towards client-side frameworks and SSR emphasis, React's feature development process at Meta and Vercel, controversy around Vercel's server components involvement, tight relationship between React and Next, React team's emphasis on frameworks for app performance, critique of React's heavy-handed framework recommendation, React team's delay in adding VEET as a recommended tool, challenges with server components' origins and communication, no official signals support planned for React 19, social media impact on React development decisions, React community diversity and server components usage insights, React's evolving black box concept and tradeoffs discussed.
Defensive Coding
Workshop finished
Defensive Coding
WorkshopPro
Zbyszek Tenerowicz
Zbyszek Tenerowicz
Malicious code is out to get you. Can you keep your app working as expected and hold on to your secrets? Come to this workshop and try!The entire workshop will be delivered as bite-sized hands-on exercises where increasingly advanced threats are presented and you get to defend. 
No matter if you're concerned with malicious npm packages or building software to run other people's code, techniques presented in this workshop can be used to isolate JavaScript at runtime and protect against prototype poisoning.
We'll explore techniques allowing cooperation with packages that intend to steal your secrets and mess with built-in functionality of JavaScript via prototype-poisoning.Another part of the workshop will focus on using tools to isolate code and scale the defensive coding practice up for larger codebases.
If you're not dealing with security-critical code, it's a great opportunity to expand your awareness of rarely explored areas of JavaScript knowledge.
Thinking Like an Architect
32 min
Thinking Like an Architect
Premium
Modern software development shift towards developers involves more complex architecture decisions with trade-offs and long-term consequences. 11 tips learned from diverse projects and roles. Focus on decentralization, avoid technology-first approach, and consider context for great architecture. Understanding the holistic approach to architecture. Linking architecture to culture and structure. Importance of aligning decisions with business needs using techniques like event storming and domain storytelling. Netflix's core domain focuses on content accessibility and tailored user experience. Supporting domains like personalization ensure usability even during downtime. Payment methods, a generic domain, are essential for subscription. Adapting boundaries and architectural characteristics is crucial for evolving businesses. Define evolving core domains and adapt characteristics accordingly. Select key architectural characteristics for system design. Consider different availability needs for various subdomains like core and generic. Latency varies based on functions; strict for finance, flexible for integration. Understand and apply specific characteristics to subdomains for optimal system performance. Understand the need for different approaches in system design. Consider availability requirements for active architecture. Evaluate decisions impacting software design and technology. Modularize workload at code or code-infrastructure level. Consider context in choosing between monoliths and microservices. Adapt system modularity based on context and team structure. Consider modularity based on system requirements. Be pragmatic in architectural decisions. Utilize event-driven architecture in distributed systems. Leverage infrastructure for efficient service stitching and delivery. Adapt to changing system characteristics for scalability and efficiency. Consider cost implications of shifting from event-based to cron job. Design software for evolution, embracing changes and tradeoffs for user-focused systems. Create a sociotechnical system balancing long-term vision and immediate needs with a lean mindset. Embrace an iterative approach to software development, understanding the domain, consumers, and the system. Master communication skills for architects by focusing on communication, inclusion, and documentation. Translate technology reasons into business benefits to effectively communicate with various stakeholders. Change language to match audience, share reasoning effectively. Involve others in decision-making for better understanding and solutions. Master architectural decision records and architecture as code. Utilize written communication for API changes, involve all voices. Sequence diagrams aid team understanding; master architecture as code. Focus on key aspects, prioritize effectively to avoid distractions.
Full-stack App in half a Day: Next.js 15 Development Bootcamp
175 min
Full-stack App in half a Day: Next.js 15 Development Bootcamp
Workshop
Maurice de Beijer
Maurice de Beijer
Unlock the Power of Modern Full-Stack Development in Half a Day!Ready to build lightning-fast, scalable web applications? Join our immersive 4-hour interactive workshop and dive headfirst into the world of Full-Stack Next.js 15!This isn't just another theory session. You'll roll up your sleeves and build a real-world movie comparison application from scratch, guided step-by-step by our expert instructor Maurice. We'll start by setting up your local development environment with a robust PostgreSQL database running in a Docker container. Then, you'll experience the magic of rapid UI generation using v0.dev, allowing you to create stunning interfaces with ease.But we won't stop at the front-end. You'll learn how to seamlessly integrate your UI with a powerful backend using Next.js 15's latest features and the elegant Prisma ORM to interact with your PostgreSQL database. Plus, you'll discover the best practices for handling client-side behavior with a fun, interactive movie comparison feature.Finally, we'll take your application live with continuous deployment to Vercel, showcasing how to effortlessly share your creations with the world. By the end of this workshop, you'll have a fully functional movie comparison app and the confidence to tackle your own full-stack projects using the cutting-edge Next.js 15 ecosystem.
Scaling React Apps with Parallelism: Patterns for Multi-Threaded UIs
18 min
Scaling React Apps with Parallelism: Patterns for Multi-Threaded UIs
Introduction to multithreading in React for smoother user experiences by utilizing web workers and off-screen canvas. Tools for breaking free from JavaScript single-threading with web workers and offscreen canvas. Smooth UI performance with web workers, limitations, and offscreen canvas for offloading graphics rendering. Design separation for preventing threading issues, offload CPU-intensive tasks to workers without DOM access limitations. Manage WebWorker communication effectively with promise-based approach for tasks. Enhance data transfer efficiency with transferable objects and shared array buffer. Decide when to use multi-threading techniques wisely; reserve workers for data processing and complex operations. Best practices include terminating workers when not needed, profile applications, and explore future front-end parallelism for optimized user experiences.
Building Full Stack Apps With Cursor
46 min
Building Full Stack Apps With Cursor
Workshop
Mike Mikula
Mike Mikula
In this workshop 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 further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own AI generated full stack app on your machine!Please, find the FAQ here
The State of React
26 min
The State of React
Introduction to the State of React survey and the history of developer surveys. Detailed analysis of survey results, user demographics, and job titles. Examination of React API trends, user sentiment towards APIs, and new API challenges. Analysis of React library satisfaction, particularly with Next.js. Discussion on React state management and data loading, including pain points. Insights on React library usage patterns and application trends. Key takeaways include staying calm, appreciating foundational React elements, and relying on data for a balanced view.
Lynx: Unlock Native for More
32 min
Lynx: Unlock Native for More
Shen's first English talk at a conference introducing Lynx project with viral success, Lynx leveraging web technologies for multi-platform development, bridging web strengths with native capabilities, enhancing development capabilities with native UI elements, instant rendering, MTS enabling man-thread scripting and CSS support, exploration of Tailwind integration, embracing Haskell in Lynx for cross-platform thinking.
Building Dynamic Grids and Charts
140 min
Building Dynamic Grids and Charts
WorkshopFree
Brian Love
Brian Love
AG Grid and AG Charts are enterprise grid and chart libraries that are built for performance. In this workshop, you'll learn the basics of getting started with building feature-rich grids and charts in your React applications.
You'll discover:How quick you can build powerful grid and charting solutions in React:Rendering and editing cells in AG GridBuilding line, bar, and pie charts.In this 3 hours hands-on workshop you'll learn the powerful simplicity of using AG Grid and AG Charts in your apps. Let's be honest, grids and charts can be tough. Thankfully, AG Grid and AG Charts makes it easy. This workshop is helpful for those considering a grid to chart library, for developers, and for team leads.
At the Top of the Pyramid: Playwright Testing at Scale
25 min
At the Top of the Pyramid: Playwright Testing at Scale
Introduction to Playwright as an end-to-end testing tool with easy installation and code generation. Features include visual comparisons, API testing, and best-in-class developer experience. Playwright offers AI capabilities, practical testing tools, and innovative testing strategies. Challenges in testing specialized domains are addressed, along with best practices for test dependencies and readability. Optimizing testing efficiency through parallelism, code organization, and network cache usage. The discussion also covers test performance enhancement, managing workers, optimizing dependencies, stability of test functions, and the use of Playwright sharding in CI/CD runs.
How to Become a Staff Engineer
32 min
How to Become a Staff Engineer
The speaker provides insights on transitioning to a staff engineer role, emphasizing the key pillars of technical excellence, organizational impact, and mentorship. They discuss challenges faced in leading projects at Slack and misconceptions in staff engineer development, highlighting the importance of networking and self-promotion. Strategies for advancing to staff engineer level, promotion to senior staff engineer, and selecting strategic projects for career progression are outlined. The talk also covers career advancement strategies, navigating responsibilities as a staff engineer, deciding on the staff engineering path, and considerations in career decisions within engineering.
Testing React Applications Like an Engineer
19 min
Testing React Applications Like an Engineer
Imagine the scenario of working on the Mars rover, emphasizing the importance of thorough testing. Learn to test React applications effectively like an engineer. Focus on user-centric testing over traditional paradigms. Write precise test cases as user stories using BDD for clear communication. Utilize a structured approach with arrange, act, assert steps for clear tests. TDD is valuable for bug diagnosis and solutions, emphasizing efficient bug reproduction and resolution. Annotate tests to reproduce and fix bugs, focusing on user flows and effective bug fixing.
Deploy Everywhere with Expo Router
26 min
Deploy Everywhere with Expo Router
Innovating ExpoGo (formerly Exponent) for rapid mobile prototyping with custom native code support and instant deployment. Revolutionizing native app development with Continuous Native Generation (CNG) for enhanced speed and access to new features. Empowering React framework with Expo for web, enabling universal apps with SEO benefits and advanced CSS tools. Innovating navigation with Expo Router for seamless file-based routing and native API integration. Streamlining app deployment with Expo for efficient full stack development and user onboarding.
Improve Your Presentation Skills by Scripting Your Live Coding Demos to Perfection
8 min
Improve Your Presentation Skills by Scripting Your Live Coding Demos to Perfection
Elio's tips for perfect live coding: Minimize distractions, prepare well with light themes and larger fonts, adjust cursor style, avoid hover panels. Stay focused on one application during presentations. Changing settings for clarity, stressing the importance of tools like Demo Time for scripted presentations within Visual Studio Code, eliminating context switching between applications, and facilitating audience interaction with shared repositories. Exploring actions in Demo Time: creating code, opening files, highlighting code, and executing VS Code commands for a cleaner presentation. Utilizing Slides for Markdown presentations within Demo Time.
Beyond Maps: Crafting Immersive Geospatial Experiences with React and deck.gl
26 min
Beyond Maps: Crafting Immersive Geospatial Experiences with React and deck.gl
Welcome to React Summit! Learn about DEC GL, a geospatial visualization framework by Uber optimized for React. Visualize geospatial data with ease using DEC GL, React, and WebGL for rendering millions of points. Focus on integrating DEC GL with React, utilizing data and state variables for visualization layers. Combine data for visualization, ensure proper layer hierarchy to avoid overlaps. Using dev.gl or react-map-gl with Mapbox for map creation. Adding properties in GeoJSON, focusing on hovering interaction, updating hover feature with onHover handler. Efficient State Management for Custom Layers in WebGL, Performance Optimization with Deck.gl Features.
Building Cross-Platform Federated Modules With React, React Native and Re.Pack
28 min
Building Cross-Platform Federated Modules With React, React Native and Re.Pack
Introduction to building cross-platform super apps with React, React Native, and Repack. Discussion on leveraging module federation for cross-platform applications and the benefits of Repack, React Native, and module federation. Explanation of module federation's potential in React Native with Repack. Importance of Repack as an alternative bundler for React Native and the significance of sharing infrastructure. Overview of Repack V5's compatibility with React Native, migration benefits, and cross-platform micro-frontends. Integration of federated modules in React Native for seamless standalone module integration. Configuring flexible federated module dependencies with RSPack, Zephyr Cloud for versioning, and lazy loading. Integrating SDK for decoupled module development and enhancing federated module UI flexibility. Challenges and benefits of integrating external modules in React Native. Improving application development speed with Module Federation and Repack for faster deployment.
Blazing Fast Page Navigation with Speculation Rules
20 min
Blazing Fast Page Navigation with Speculation Rules
The talk explores the concept of building fast-navigating pages using speculation rules to enhance user experience. It delves into human impatience and the evolving perceptions of page speed. Speculation rules optimize page loading for seamless transitions based on user behavior predictions. Configuring speculation rules in HTML involves action decisions, target selection, and eagerness settings impacting loading behavior. Eagerness settings determine link loading behavior and resource optimization. The implications of speculation rules implementation include responsible pre-rendering and pre-fetching, measurement metrics assessment, and considerations for broader browser support. The talk also covers debugging speculation rules, efficient analysis of pre-rendered content, browser regulations, and bandwidth optimization techniques for improved page loading efficiency.
Zero-Styling Development: Utopia or the Future of Frontend?
7 min
Zero-Styling Development: Utopia or the Future of Frontend?
Mateusz Jagodziński presenting on Zero Styling Development and the challenges faced with manual styling implementations, leading to the adoption of a zero styling approach for efficiency and consistency in design implementation. Workflow Builder adopts a zero-styling approach beginning with design tokens in Figma, followed by automation for CSS generation and implementation using CSS variables, ensuring easy styling changes without developer intervention.
Senior Isn't About Your Tech Skills
15 min
Senior Isn't About Your Tech Skills
Being senior isn't just about tech skills; continuous improvement and broadening impact are vital for growth in the tech industry. Being effective in your work means focusing on outcomes that create superpowers for others, increasing your career opportunities and impact. Delivering valuable work creates opportunities for growth and rewards in your career. Being a senior engineer evolves from task execution to leadership and team management, leading to significant career growth and financial rewards. Results on your resume matter for your next job. Leadership, not titles, defines a senior engineer's role. Senior engineers lead projects, create direction in chaos, and focus on delivering results efficiently and effectively.
Let's Fight: React Framework Showdown 🥊
27 min
Let's Fight: React Framework Showdown 🥊
Today's focus is on comparing React frameworks and choosing the most suitable one for your project based on your beliefs about app development. Ankita's tech background, education focus, and unbiased framework comparison oath. Comparison of Next.js, React Router v7, CanStack Start. SSR and streaming in web evolution. Frameworks' different approaches. Choosing the right framework for app development based on needs. Comparing frameworks based on key pillars. Next.js for scalability and SEO. Remix for web standards integration. Tanstack Start for client-heavy apps and server-first approach. Different components in Next.js. Next.js ideal for e-commerce and content-heavy sites. Flexibility with React router for various applications. Tanstack's focus on client-heavy apps. Tanstack Start benefits, including server-first approach and full typing. Tanstack's advantages in typing, streaming, and server functions. Ideal for client-heavy apps with interactivity. Consider adoption rates and ecosystem longevity when choosing a framework. Comparison of Next.js, React Router v7, and Tanstack in terms of learning curve, adoption points, and routing methods. Developer experience comparison among Next.js, React Router v7, and Tanstack. Performance aspects including image handling, caching controls, and prefetching in Next.js and TANstack. Comparison of data fetching methods in Next.js, React Router, and TANstack. Deployment flexibility across frameworks. Key considerations for choosing Next.js, React Router, or Tanstack based on specific criteria. Next.js highlighted for built-in optimizations, server components, and broad community support. React Router emphasizes progressive enhancement, accessibility, and deep nested routing. Tanstack recommended for React Query integration, client-heavy apps, and SSR without complex abstractions.
From Architecture to Adoption: Engineering & Scaling a Modern LMS with React
28 min
From Architecture to Adoption: Engineering & Scaling a Modern LMS with React
The speaker highlights challenges in online learning platforms and the necessity for a developer-centric platform. Insights on building a specialized platform with real-world case studies are shared. MDX is discussed for creating flexible content and organizing content pieces into reusable modules. The platform architecture involves a monorepo with TurboRepo managing a stack of technologies. Strategies for enhancing user engagement, user retention through streaks, and key takeaways like scalable architecture, strategic rendering, and user-focused development are emphasized. Performance optimization techniques such as React Server Components and asset optimization with WebP are mentioned. Strategies for privacy-aware metrics tracking, user learning metrics, and avoiding server-side rendering for better performance are also covered.
Scaling a React Application from 0 to a Brazilian Users
19 min
Scaling a React Application from 0 to a Brazilian Users
Three years ago, faced tough decision job change. Chose tech co-founder role for innovative idea 'war with apply to job button' for universities. Startup validation via email engagement with decision makers, avoiding premature seeking of investment. Emphasis on tech stack adaptability, modular design, and reusability. Challenges with third-party library management, component library reorganization, and optimizing CSS loading. Focus on app quality improvement, release process enhancement for global success.
React Beyond the Browser
21 min
React Beyond the Browser
Menahi Shayan, former CTO, discusses the power of React in software development beyond the browser, emphasizing its ease of use and versatility. JS developers face challenges beyond JS comfort zones when building tools for various platforms, illustrating diverse paradigms and syntaxes. Learn how to set up office add-ins with React using Yeoman, generating boilerplate for Excel add-ins and exploring code structure. Explore ExcelJS API integration with React for Excel add-ins, including manipulating Excel sheets and syncing data between JavaScript and Excel runtimes. Extract values and addresses from selected ranges in Excel using context.sync function. Display data in JSX/TSX and demonstrate accessibility of data selected in Excel sheets through JavaScript/React. Leverage NPM packages including generative AI and Tailwind CSS to create a React-powered Excel add-in. Utilize Fluent UI for consistent UI with Excel and demonstrate JS capabilities in modifying Excel content. Discussing challenges in utilizing an LCD display with limited capabilities for React implementation and highlighting the absence of CSS, state management, animations, and DOM updates in current rendering methods. Presenting a groundbreaking solution to render React on embedded system displays by utilizing the Linux system frame buffer with Chromium, achieving high FPS and full HTML, CSS, and JS support. Running a React-based package called Magic Mirror on an embedded system enables seamless API calls through JavaScript, full UI rendering, Chromium inspector access, and remote debugging experience. Leveraging all available packages beyond the browser unlocks JavaScript's full potential on embedded systems, urging users to explore unconventional setups and embrace the native development philosophy.
Compiled Atomic JavaScript?
22 min
Compiled Atomic JavaScript?
In 2008, the movie Vantage Point inspired the exploration of diverse perspectives in software development. The evolution from traditional CSS to atomic styles in StyleX and the scalability advantage of atomic JavaScript are significant areas of interest. Rethinking server-side rendering with React, Web Components, and the Hano framework introduces new possibilities for interactive components. Custom elements, Shadow DOM, and the Solenoid framework address challenges in CSS scoping and SSR for lighter-weight HTML. Signal functions in Solenoid offer a unique approach to data management and component development, enhancing app efficiency. Real-time interactive server setup, innovative server-side development, and the use of HTML as a source of truth contribute to project speed and efficiency. Debugging, component definition, HTML streaming, and component usage highlight the declarative nature and streaming capabilities of server-generated HTML.
Prioritizing Architecture Over Framework in Web Development
17 min
Prioritizing Architecture Over Framework in Web Development
Alexandre Rivet emphasizes prioritizing architecture over frameworks in web development for efficiency and project maintenance. Leveraging long-term memory improves code comprehension and speed. Effective React applications require clear component naming and caution with global state usage. Strategies for efficient React development include separate logic for DOM and smart components, reducing global state dependencies, and creating independent API clients for flexibility.
T3Boy: Making Accurate Game Boy Emulation Accessible with Next.js and WASM
21 min
T3Boy: Making Accurate Game Boy Emulation Accessible with Next.js and WASM
Travis TI Kevin83 McGeehan, senior software engineer, ambassador for Task Videos, React Native specialist, task record holder in Pokemon Yellow Glitchless, TAS verification process for console input validation. Mickey Mouse $61 billion in merchandise sales, Pokemon RPGs, speedrunning concept, different categories, TASing in emulators, TAS records on TASvideos.org, TASbot mascot. TAS verification, controller interfaces, TASbot mascot, T3 Boy accessibility challenges, TAS videos preservation, Kolmogorov complexity in emulation accuracy. Qt for emulator front ends, WebAssembly benefits, T3 Boy website integration with emulation cores, T3 stack integration for game saves, custom pointer events API, T3 Boy interface overview. Integrating WASM module into Next.js boilerplate, Global function declaration in TypeScript, Important functions like cwrap for WebAssembly interaction. Cwrap function for JavaScript module interaction, Pointer concept in lower-level languages, Memory management with malloc, heapuate, and free. Loading BIOS and Memory Management, Handling Individual Values, Using Add Function for Callbacks, Quirks with Web Audio API and Resampling Limitations. Utilizing Pointer Events API, Cloud Saving Feature with Discord Auth, T3Boy Emulator, and WebAssembly Integration in React.
Efficient Data Visualisation with React and SVG
27 min
Efficient Data Visualisation with React and SVG
Ido, a full stack developer, discusses the benefits of building data visualization components from scratch using React, SVG, and minimal D3. Understanding basic SVG shapes, group elements, and SVG's declarative nature. Exploring SVG's compatibility with CSS, DOM events, and browser features. Highlighting pitfalls in integrating D3 with React and separating data transformation utilities. Utilizing D3 libraries for data manipulation and creating Sparkline components. Enhancing components with markers, CSS styling, interactivity, transitions, and pie charts. Utilizing CSS for animations in data visualization and gauge visualization with needle animation. Defining SVG components, interactions, and considerations for DIY vs. library integration. Exploring D3 axis, AG charts, and time-based animation.
Using React Without Using React
27 min
Using React Without Using React
The talk emphasizes component-based thinking in JavaScript development, highlighting the importance of components in non-React projects and the flexibility of JSX usage. It explores state management in React and tools like Redux, showcasing the significance of mastering web fundamentals before delving into frameworks. The discussion touches on balancing framework selection, understanding error messages in native approaches, and the importance of maintaining simplicity in design while adopting concepts in app development.
Web Performance Meets Human Sciences
29 min
Web Performance Meets Human Sciences
Speaker discusses the challenges in defining web speed metrics and the importance of non-hackable user behavior metrics. The impact of survivorship bias on data analysis is highlighted, along with global internet access factors and the correlation between web vitals and business outcomes. User perception of app performance, UX research impact on API design, and navigating data analysis biases are also covered. The talk emphasizes the need to connect technical metrics to business outcomes for app optimization and success.
Server Components Wars: PHP Strikes Back
6 min
Server Components Wars: PHP Strikes Back
Edoardo, a senior dev rel at Storyblok, delves into server components' intricacies, urging a better understanding. The evolution from PHP to React marked a shift in web development paradigms, emphasizing server-side rendering and dynamic client interactions. Facebook transitioned from PHP to React, introducing XHP subset. Isomorphic JavaScript and server-side rendering emerged with data requests and content rendering. React server components enable server-side rendering with data fetched from DBMS or CMS, emphasizing patterns for seamless transitions to new frameworks.
My Heart Is In the Right Place, but the DOM Isn't
18 min
My Heart Is In the Right Place, but the DOM Isn't
Kyle West emphasizes the importance of building accessible products and shares experiences in ensuring accessibility. A focus on accurate ARIA labels and the impact on accessibility. Optimizing accessibility with proper labels and utilizing the aria-hidden attribute. Lessons in ARIA usage, tabindex attribute, and the importance of quality code reviews. Addressing vestibular disorders in web design with solutions like prefersReduceMotion media query. Enhancing user comfort with accessibility queries and the importance of inclusive user-centric design in product development.
Your Frontend’s Best Friend - How to Ship Fast in 2025
20 min
Your Frontend’s Best Friend - How to Ship Fast in 2025
The Talk delves into enhancing success rates in software projects through focusing on iteration velocity and observability. Discussions revolve around the advantages of utilizing full stack web frameworks like Next.js and Remix for efficient software development and improved code sharing. The integration of TurboStream, BFF, and Model Context Protocol (MCP) in full stack development is explored. Vercel and Cloudflare's innovative solutions for integrating MCP servers into Next.js applications are highlighted, simplifying code sharing and enabling diverse front-end experiences.
Rusty Native Modules for React Native
23 min
Rusty Native Modules for React Native
Introduction to Veric, a Rust binding generator for React Native. Insights on building developer tools, native modules, and challenges of combining Rust with React Native. Explanation of foreign function interface (FFI) and C bridge challenges in Rust-RN integration. Discussion on challenges with FFI and alternative solutions like UniFFI and SaferFFI. Insights on Node API as ABI-safe alternative to JSI and Hermes API, benefits of pre-built binaries, and Ferric tool for Rust library Node API bindings. Demo of Rusty Web Storage for React Native using Ferric. Building Rust code for Android and Apple platforms, generating TypeScript declarations, and creating a storage class. Importing, testing, and consuming a storage module in Node.js. Introduction to React Native Node API modules, managing Node API bindings, and limitations in runtime-specific functions and app build times.
Security meets Usability: Crafting Dynamic and Granular Access Control Solutions
21 min
Security meets Usability: Crafting Dynamic and Granular Access Control Solutions
Samhita emphasizes the importance of access control in web applications and the shift towards attribute-based access control for enhanced security. Attribute-based access control considers user attributes, resource attributes, and environmental factors for access granting. Implementation challenges include the need for both front-end and back-end enforcement to prevent bypassing. Permission definition in CASL involves assigning abilities based on user roles using keywords and operators. Policy implementation involves defining policies for UI and server compatibility, grouping policies by resource, and using CEL for conditions evaluation. Access control evaluation requires handling dynamic business logic, enforcing permissions with CASL components, and implementing protected routes based on user permissions.
Reimagine Frontend in the Serverless Era
8 min
Reimagine Frontend in the Serverless Era
Evangelia, tech founder of Fioromat Academy, discusses the impact of serverless technologies on frontends, emphasizing a shift towards lightweight, stateless backends split into smaller units and the increased importance of API gateways and serverless functions. The discussion also highlights the significance of optimistic state updates, caching strategies to reduce API calls, resilient connection handling with retries for failed HTTP calls, granular error handling at the component level, and custom fallback UI per component. Overall, the Talk emphasizes the evolving frontend architectures and the necessity of adapting to changes in data structures and technologies.
React for Good: Creating Inclusive, Secure, and Scalable Applications in Emerging Markets
5 min
React for Good: Creating Inclusive, Secure, and Scalable Applications in Emerging Markets
Inosency Andembera, React developer, discusses using React for building scalable, secure, and inclusive applications for emerging markets like Malawi and Africa. Addressing challenges of Internet connectivity, device limitations, security concerns, and inclusivity for first-time Internet users. Utilizing React for performance, security, and inclusion in emerging markets through code splitting, lazy loading, authentication, input validation, multiple language support, and simple UIs. Highlighting React's features in enhancing inclusion by addressing challenges in emerging markets, such as limited digital literacy, creating simple UIs, supporting multiple languages, internationalization, step-by-step UIs, and semantic HTML for accessibility. Zunga, a financial platform in Malawi, showcases React's benefits in addressing financial service gaps, scalability, offline support, and security enhancements.
Validating the Web: The Evolution of Form Validation
20 min
Validating the Web: The Evolution of Form Validation
Exploring the evolution of web forms from HTML2 to Web 3.0 and the crucial role of form validation in application development. The importance of form validation, challenges, and the need for better approaches. Introducing VEST as a flexible validation tool inspired by unit testing frameworks. Highlighting VEST's logic separation, asynchronous validation, and advanced features like caching. Discussing warning states, user guidance, and the impact of form validation on user experience and application success.
The AI Developer's Guide to Not Accidentally Summoning Skynet
12 min
The AI Developer's Guide to Not Accidentally Summoning Skynet
Introduction to the risks of AI in web development and the potential security threats it poses, drawing parallels to the fictional AI Skynet and emphasizing the importance of understanding and mitigating these risks. Discussion on the OVASP project revealing the top security risks in AI-assisted development, focusing on prompt injection attacks as a significant threat to LLMs. Explanation of prompt injection attacks in AI involving social engineering, role-playing to bypass AI safeguards, and data exfiltration risks, emphasizing the critical threat of privilege escalation in LLMs. Discussion on AI toolkit for authorization in Gen AI projects and the risks associated with over-reliance on AI-generated code, especially in the context of 'white coding' and regex vulnerabilities. Discussion on the risks of using AI-generated regular expressions without validation, the importance of manual review, code analysis, and human approval in AI-assisted development, emphasizing the need for security protocols and vigilance.
Next.js Adapters: Build Once, Deploy Everywhere
7 min
Next.js Adapters: Build Once, Deploy Everywhere
Hello, React Summit. Excited to talk about Next.js adapters. Evolution towards adapter solutions to simplify deployment complexities. Minimalist adapter interface for customization and structured output handling. Key hooks and configurations for platform-specific optimizations. Partners collaboration for enhanced experiences in Next.js deployments. Simplified, platform-agnostic deployments for better developer experience.
Whose Job is Animation?
19 min
Whose Job is Animation?
Matt Coleman emphasizes the importance of animation in teams and user engagement, drawing from his career experiences. Effective animations focus on brand identity and user experience, avoiding excessive flashiness. Real-life elements in UI animation create familiarity and draw attention. Adding subtle animations to Jira UI can enhance user experience. Collaboration between designers and developers is crucial for successful animation creation. Tips include using CSS or JavaScript for animations, with recommended libraries like Framer, Greensock, Gsep, and Lottie.
Real-Time Multiplayer Gaming with React Native: A Reflex Game Case Study
20 min
Real-Time Multiplayer Gaming with React Native: A Reflex Game Case Study
Real-Time Multiplayer Game with React Native case study of Quickflex game creation, gameplay overview, personal introduction, problems faced, and solutions implemented. Game flow overview, routing challenges with Expo Router, transition to React Navigation for stack-based routing. Challenges with tab-based routing, transition to stack-based routing with Expo Router, importance of file structure in Expo projects. Challenges with game state management, handling UI states, and transitioning to improved code structure. Lessons on state management, using routes, hooks, WebSockets, and deployment challenges. Introduction to Durable Objects for stateful serverless applications, using PartyServer for WebSocket servers, and optimization tips for game development.
Delivering High-Quality Videos on Your ReactJS Website
7 min
Delivering High-Quality Videos on Your ReactJS Website
Raul from ImageKit discusses optimizing and streaming videos, highlighting challenges like resolutions and codecs. Developers can use ImageKit Video API for seamless integration and quick optimization. ImageKit offers streamlined video hosting with real-time optimization and adaptive streaming. It enables easy access to cloud storage and transformation of videos for better user experience.
Build a Metaframework in 30 Minutes or Less
26 min
Build a Metaframework in 30 Minutes or Less
The Talk covers the importance of Playwright as an end-to-end testing tool with AI capabilities and a supportive community. It addresses challenges in testing specialized domains like healthcare analytics and explores modern testing strategies like the testing pyramid and testing diamond. The implementation of the testing mushroom strategy for end-to-end testing, optimization of test dependency handling, and enhancement of test report readability and speed are discussed. Speed optimization, mocking strategies, test performance enhancement, parallelization, flaky test handling, decorators, test user registration, audience engagement, testing stability, sharding considerations, and gratitude for engaging discussions on testing strategies are also highlighted.
Modern React Architecture
Recording pending
Modern React Architecture
WorkshopPro
Brad Westfall
Brad Westfall
In this workshop we'll dive into the latest advancements in React and best practices for building modern React apps. We'll take a look at modern NextJS and React Router 7 Framework (aka Remix) along with React's new "React Server Components". We'll also talk about improving the data-fetching strategies of your SPAs along with options for migrating your SPA to modern React Router.
AI Unconference
Recording pending
AI Unconference
DiscussionRoom
Tejas Kumar
Johannes Goslar
Naman Goel
Adrian Hajdin
4 authors
Unconference is a format when participants pitch (=write on white board) ideas for short talks/discussions at the beginning of it, and then everyone gets an opportunity to get 5-7 minutes on "stage" and have a talk on the topic pitched earlier.Join Tejas Kumar, Adrian Hajdin, Naman Goel and others to discuss all things AI. Don't miss out on this opportunity to engage and learn together!
Discussion: Future of Native
Recording pending
Discussion: Future of Native
DiscussionRoom
Rita Castro
Evan Bacon
Kræn Hansen
Mike Grabowski
Xuan Huang
5 authors
Join Evan Bacon, Xuan Huang, Mike Grabowski and Kræn Hansen in an engaging discussion room where we explore a Future of Native. This is the perfect space for you to share your insights and connect with like-minded individuals. Come and be part of lively conversations, ask questions, and expand your knowledge.