React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

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

React Summit 2024

FocusReactive

CKSource

Chromatic

Storyblok

Ag Grid

JetBrains

Wix Codux

Chainlink Labs

Picnic

Sisense

MongoDB

DataStax

Convex

Storyblok is a CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Kickstart a new CMS project with your favorite technology in a matter of minutes, and for free.

FocusReactive will help you architect, build, and lead technically advanced websites focusing on performance and scalability. Partners and <a href="https://focusreactive.com/next-js-expert-agency/" target="_blank" rel="noopener noreferrer">experts in Next.js/Vercel</a>, Storyblok, Sanity, Contentful, Shopify Hydrogen, and other Headless eCommerce platforms.Whether you seek <a href="https://focusreactive.com/headless-cms-expert-agency/" target="_blank" rel="noopener noreferrer">expert Headless CMS agency</a> services or an expert agency with deep experience with platforms like <a href="https://focusreactive.com/storyblok-expert-agency/" target="_blank" rel="noopener noreferrer">Storyblok</a> or <a href="https://focusreactive.com/sanity-expert-agency/" target="_blank" rel="noopener noreferrer">Sanity</a>, FocusReactive is the one to help you scale.

As a special perk, we're offering a complimentary NextJS audit designed to pinpoint areas for optimization, improve performance, and ensure you're following the best practices for SEO and security.&nbsp; Our expert team will closely examine your implementation, provide actionable insights, and help you leverage the full power of NextJS.

Free NextJS Performance and SEO Best Practices Audit

Next.js, Headless CMS and eCommerce expert agency

<span style="font-size:10pt;font-family:Arial;font-style:normal;" data-sheets-root="1" data-sheets-value='{"1":2,"2":"Chromatic is a visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs."}' data-sheets-userformat='{"2":1049345,"3":{"1":0},"11":3,"12":0,"23":1}' id="isPasted">Chromatic is a visual testing &amp; review tool that scans every possible UI state across browsers to catch visual and functional bugs.

Webdevelopment Tailored for 2024

Andrzej Fricze

And Now You Understand React Server Components

Kent C. Dodds

RSCs In Production: 1 Year Later

Theo Browne

Making State Management Intelligent

David Khourshid

Anthony's Roads to Open Source - The Set Theory

Anthony Fu

Facing Frontend's Existential Crisis

Ryan Carniato

Tim Neutkens

Managing Ourselves Managing Each Other

Rachel Nabors

Fetch Once, Render Everywhere: React Server Components in Expo Router

Evan Bacon

Why You Should Use Redux in 2024

Mark Erikson

Case Study: Building Accessible Reusable React Components at GitHub

Siddharth Kshetrapal

What’s New in Astro

Fred K. Schott

Introducing Waku: The Minimal React Framework

Daishi Kato

Behind the Scenes of a Visual Regression Test

Chris Kalmar

One Code to Rule Them All

Simon Grimm

Types Beyond TypeScript

Josh Goldberg

Building End-to-End Encrypted Apps (Web & React Native)

Nik Graf

Crafting React Applications with Typesafe APIs

Aleksandra Sikora

Empowering Nx with AI

Katerina Skroumpelou

React Performance, Past and Future

Ivan Akulov

Sathya Gunasekaran

Julius Marminge

Frontend Access Control Using Digital Assets

Solange Gueiros

Hacking into Labeled Arrows

Aakansha Doshi

Improve Your App Performance With Background Jobs

Sylwia Vargas

AsyncLocalStorage vs. React Context

 Greg Brimble

Max Reactivity with Solid

Atila Fassina

Remix — The New Create React App

Brooks Lybrand 

Alexandra Spalato

AI Ethics For The Rest of Us?

Kathryn Grayson Nanz

Superwebapps: Rethinking Desktop Applications With Progressive Web Apps

Nico Martin

"React Now Looks Like PHP" They Said

Lukas Fischer

Server-Driven Mobile Apps With React Native

Mo Khazali

Animating React With Finesse!

Nikhil Sharma

Why the Full-stack Framework of the Future is a DSL

Vince Canger

Understanding Typescript: Dissecting Function Typechecks in React

Talk - TBA

Charlotte Isambert

The Art of Ignoring Best Practices for React Performance

Tiger Oakes

Accessibility in 2024

Chandra Carney

React Jam and Why React Is Awesome for Making Games

Bjarke Felbo

Technically Included (The Best Kind of Included)

Tom Raviv

First Comes Conflict, Then Comes Growth

Wisam Zaghal

Art & Entropy: Introducing Chaos to Your Frontend

Thibaud Courtoison

Navigating Modern Frontend Innovations 

Mrina Sugosh

Solving i18n for React Server Components

Loris Sigrist

React in the Autonomous Robotics Industry

Hamza Haoui 

The Path to High-Performance Canvas Rendering in React

Mana Peirov

Empowering Developers: Creating Cross-Framework Libraries with Native Experiences Using React

Ray Luxembourg

Enhancing React Ecosystems with Observability: A Deep Dive into React with OpenTelemetry

Jan Peer Stöcklmair

Nested Interactive Elements: A Nightmare in Accessibility

Cat Johnson

Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner

Omar Diop

Creating Videos... With React!

Alfonso Graziano 

How Data Privacy Literacy Is Shaping Infrastructure

Meaghan Choi

Next.js: Reshaping Web App Architecture for Performance Excellence

Mia NASR KHNEISSER

The ABCs of Green Software & Sustainable IT

Saravanan K Nagarajan

From Websites to Games: The Future of React Three Fiber

Kris Baumgartner

We’ve been hard at work to create a first-look at data fetching, server rendering, and streaming in universal Expo Router apps.

Managing state is complicated. Humans are even more complicated. As developers, it's our job to deliver seamless and intuitive user experiences, but the sheer complexity of human behavior and the real world can make this a daunting task. In this talk, we'll explore a radical new approach to app development where language models (LLMs) and reinforcement learning (RL) can be used to handle app logic in a more intelligent and human-centric way. We're bringing artificial intelligence to state management in ways that go much, much further than calling the ChatGPT API. You will learn how you can leverage AI in your existing code to create the best UX possible, and peer into the future of AI and the path to AGI.

In this talk, I’d like to reflect on the performance changes React went through in the past years – and hypothesize about where we’re going. Key points:React reached maturity and can now push frontend forward without reinventing the same primitives (like how all frameworks were stuck reinventing vdom for the past 10 years)Performance (past): consistent performance push you didn’t even notice (componentDidMount → useEffect and how that avoids layout thrashing; React 18 update batching). Some stuff didn’t really work out (Prepack)Performance (current): features that are available, but we need to change our habits to adopt them: startTransition (needs a habit to separate interactions into urgent and non-urgent), RSC + Server Actions (needs new patterns and approaches to data loading etc) Performance (future): React Offscreen API, React ForgetPerformance (further future, subjective opinion) – where React and other frameworks are moving: intelligent progressive enhancement, with zero JS on the client unless necessaryWhat didn’t work out:Why we can’t put frameworks into workers (answer: latency, data copying, etc.)Why react didn’t go the svelte route (inlining js instead of a single bundle)Why react didn’t go the aggressive-code-splitting-and-chunks-on-demand route

The design-development gap hurts your React projects: slower timelines, compromised quality, and repetitive handoffs. This talk explores the origins of this problem, the differences in language and environment, and offers solutions through processes, tools, and collaboration. Discover how including designers throughout the implementation process helps developers reduce friction, speed updevelopment, and deliver exceptional UIs.

An overview of the top 3 approaches you can apply to boost the rendering performance of HTML Canvas in your React application, based on the lessons we learned during the development of AG Charts.

Create React App (CRA) was a game changer in garnering React adoption. Prior to the release of CRA, the experience of setting up a React app was more about configuring webpack than it was actually writing React code.Now that the React docs no longer list CRA as a suggestion on the “Start a New React Project” page, and additionally recommend you pick a React-powered framework, the getting started experience is once again fragmented.CRA was never meant to be how you built a full-featured React app anyway. It was a starting point, and a really good one. Inevitably many developers (such as myself) used CRA to build websites, and lots of them. However, a lot more goes into building a website than just using a “library for web and native user interfaces” — you need to handle routing, data fetching and mutations, styling, and a whole lot more.I believe Remix is the best framework available for taking up this mantle. Built on top of React Router, the most widely used routing solution in the React ecosystem, powered by Vite, and now with an option to build pure SPAs (like CRA), Remix is well poised as the best starting point to start React apps of all varieties.In this talk I plan to show the story of how Remix has evolved into the CRA replacement, how you can easily migrate from a CRA or React Router project, and how Remix will bring you into the future of React.

Lessons I learned on my journey to working full time on open source, as well as tips for thinking and making open source projects more successful.

In this talk titled “Empowering Developers: Creating Cross-Framework Libraries with Native Experiences Using React,” we will explore a unified development strategy that enables software to be used across multiple frameworks without sacrificing the native experience for any user group. This approach not only extends the reach of software solutions but also optimizes development processes by allowing teams to write code in React—our framework of choice—and deploy it seamlessly across Angular, Vue, and others.

The state of frontend development last couple years is in an odd place for the uninitiated web developer and expert alike. Server Components? Resumability? Hydration? Waterfalls? Islands? Why so much focus on water? And why are we even talking about this? In this talk, SolidJS creator Ryan Carniato explores the landscape of modern web development to understand how we got here and what these solutions really solve.

We'll delve into the intersection of web development and NFT (Non-Fungible Token) technology. As the digital landscape continues to evolve, developers are constantly seeking innovative ways to enhance user experience and security. From authentication to user permissions. NFTs offer a decentralized and secure solution that can reshape the way we interact with web applications.

Most developers closely follow the framework wars. So busy with these games, that we forget to check what new features HTML, CSS, and JavaScript offer us. Native modals, dynamic viewport units, and optional chaining are just some of the features you should use already! If you stopped following Web Platform development in 2015, it's time to refresh your knowledge. I will teach you to build applications tailored to 2024 and prepare you for the new Web Platform features that will appear in the coming years.

Between SolidJS, Qwik and React, there's been significant innovation in the frontend development landscape. Mrina Sugosh, DevRel Manager @ CK, aims to tie it all together and assist React developers in embracing modern approaches. This talk is designed to offer valuable insights for developers keen on navigating front-end trends and making well-informed technology decisions for their projects.

How do you create a scalable application with lots of different layouts, screens, giving enough flexibility to each team to customise without adding orders of magnitude in complexity to your app? Companies like Airbnb, Meta, and Lyft approach this with server-driven UI. We’ll explore how this can work for mobile apps, challenges that it introduces, and how it’s the way forward in the age of React Server Components.

We all intend to grow and strive to make a bigger impact until conflict shows up. We view conflict as a negative thing that gets in the way of growth when it is both necessary and vital. In this presentation, I'll share my experiences and ideas on how you can handle conflict and stay on the path toward making an impact!

I bet you've always used React to build websites and applications, right? What if I told you that we can also edit a movie with it! Learn how a simple render engine built in React and Node.js works to make videos using React components.Also, you will learn how to create a scalable render-farm using AWS. The main library to build the render engine is Remotion and allows to render videos programmatically.

React started as a web rendering library, but its benefits and ease of use has made it find its way into many other domains, including now games! Yes, React is not what you'd traditionally use for making games, but it’s actually great for it. This talk will talk about the popular React Jam, a 10-day game jam for making games using React, and the pros/cons of using React for games. Listen in to hear how you can easily make a game using everyone’s favorite web library!

Are you struggling to achieve optimal performance in your web applications? Are you unsure about how to effectively manage your application's routes while ensuring maximum security for your sensitive data? These are the most recent problems we encountered at l’Oréal Tech Accelerator where our users used to wait in front of empty white screens long before getting the needed information. After extensive research and deliberation, we looked at Next.js as a potential solution to our woes. However, adopting Next.js presented us with a new set of challenges. We had to rethink our architecture and determine the best approach for integrating the frontend, backend, and our core backend systems. In this talk we will discuss in more details the obstacles we faced and the innovative solutions we implemented to overcome them.

Domain Specific Languages (DSL) are everywhere in web development, but these languages and their qualities often get taken for granted. HTML, Regex, CSS, and SQL are all DSLs which allow you to simply declare what functionality you want, instead of having to specify all the implementation details.Taking the DSL approach to full-stack web development not only unlocks new abstractions that make building more efficient for the developer, they also assist AI-coding assistants in creating more complex, maintainable code, by handing off the creation and management of large amounts of boilerplate code to the DSL.In this talk we will explore how we built Wasp around a DSL to create a unified approach to developing full-stack web-apps.

There has been a tremendous amount of focus on technology growth and not too much on Sustainable IT. With great computing power comes greater carbon footprint and the culture of thinking about Sustainable IT needs to be cultivated. My talk is to instill in the minds of the tech-savvy audience that Sustainable IT and Green Software are critical factors that need to be considered while developing their cutting-edge technologies.

There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building structures with nested interactive elements, and unfortunately, some of them are completely inaccessible.  In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.

When you were a teenager, someone probably sat you down to explain “the birds and the bees”. For many, this was an uncomfortable topic; maybe even one that was avoided for as long as possible. In the development community, I’ve noticed a similar approach being taken to discussing the ethics of AI. But in the famous words of Salt-N-Pepa (mostly): “Let’s talk about AI, baby! Let’s talk about you and me! Let’s talk about all the good things and the bad things that may be.” AI is not going away anytime soon: it’s wildly interesting, full of potential, and capable of so much good – however, it also has the potential to cause serious harm. So let’s get real for a bit and talk about what should be considered in order to use AI responsibly: bias, misinformation, dataset sources, accountability and more. After all…if you’re not ready to talk about AI, then you’re probably not ready to have it.

Cloud vs. local compute is used to be a purely performance or technical decision. But as our users become more privacy aware, the granularity of data and where it's stored is evolving from a technical performance decision to a human emotional decision. One that is shifting how we should think about compute.

We’ll cover the basics of how accessibility works in organizations and on teams, who is responsible for accessibility, how to push for changes without being an expert, and how to grow your skillset.

Animations are the heartbeat of captivating web experiences but wield them carelessly, and the enchantment fades into frustration. Join Nikhil on an exhilarating journey as he reveals the secrets to crafting mesmerizing, high-performance animations in your React apps.In this dynamic talk, Nikhil delves deep into the world of animation, dissecting the common bottlenecks that threaten your app's responsiveness. Learn how to identify, debug, and eliminate these performance roadblocks, ensuring your animations are as snappy as they are spellbinding.

In this enlightening session, we'll unveil the pioneering integration of AI and ML within the Nx ecosystem. Discover how our cloud services are enhanced with intelligent algorithms to optimize performance and efficiency. We'll also take a peek into the Nx AI Assistant, our innovative tool designed to streamline navigation and utilization of Nx documentation.

The dream of using React for Web, Mobile Apps and beyond becomes reality. Thanks to Expo Router, we can confidently use the same routing logic for web and mobile, have it different layouts, use CSS, and with v3 even include API endpoints for Fullstack React Native apps. This talk will show you ways to go “all-in” on React Native, including other popular approaches that use Tamagui, Solito or Monorepos to build Universal Apps from one codebase.

Waku is an ongoing project aimed at developing a React framework with first-class support for React Server Components. In this talk, I will provide an overview of Waku and walk you through how you can start developing a new project using Waku.

I've always avoided trying to do sales pitches for Redux, and tbh most of my time has been spent telling people when they _shouldn't_ use Redux :) But I still see lots of folks asking "_when_ should I use Redux?", and "how does Redux compare to $OTHER_TOOL?". So, I figure it's worth actually doing a talk where I cover the actual benefits and reasons to consider using Redux today.

Too many people are wondering what a JavaScript developer is doing in a robotics company , but In an era where the intersection of software development and robotics is rapidly expanding, it's not uncommon for JavaScript developers to find themselves in the midst of the autonomous robotics industry .<div>During this talk I'll show some use cases of react in the robotics industry , showcasing how this versatile JavaScript library can revolutionize the way we approach robotic development from user interfaces for controlling robotic systems to VR teleoperation capabilities . Robotics often demands real-time responsiveness and efficient resource utilization we'll discuss the careful considerations and decisions we've made to ensure optimal performance. We'll delve into techniques such as virtual component memoization, and minimizing re-renders .</div>

Twitter influencers would have you believe that if you just use the semantic html tag for elements instead of a div, your components will be accessible. but there’s a lot more that goes into it!Let’s zoom in on one component from GitHub (one that you’ve probably used before!) and look at all the accessibility considerations involved and interesting challenges in implementing them.

AsyncLocalStorage is a modern API which has landed in many JavaScript runtimes. It allows developers to pass a value to a callback function without needing to drill through a direct reference. In this, it is similar to React’s Context. However, although they have a somewhat related purpose, particularly in a React Server Components world, there are meaningful differences and a suitable time to use one over the other.

Have you ever wanted to break the rules and be a React troublemaker? I’ll show you how ignoring React’s best practices can improve performance, all without major rewrites to your codebase. To understand how, we’ll learn when React decides to render and how to trick it to render less frequently. We’ll build components that don’t render anything, conditionally call hooks, and even use a piece of Svelte - all to quickly fix real performance problems I encountered at Microsoft.

In the dynamic landscape of web development, prioritizing user privacy is paramount. In this 20-minute conference talk, we delve into the world of "Privacy-First Frontend Monitoring." We will explore strategies and technologies that empower developers to scrutinize and optimize web frontend error and performance without compromising user confidentiality. Discover how implementing privacy-centric approaches not only enhances the reliability and efficiency of web applications but also fosters user trust in an era where data protection is of utmost concern. Join me as we navigate the complexities of frontend monitoring, ensuring a seamless user experience while safeguarding the privacy of those who engage with our digital creations.

Privacy-First Frontend Monitoring

Maulik Suchak

Everybody seems to be talking about "types" these days. From the TypeScript language to type description utilities such as prop-types and Zod, developers expect clear descriptions of the shapes of their React components, data, and hooks. Let's talk about the mindset shift that's happened over the last decade, and where types are taking us over the next one.Brief foundations: what is TypeScript, what "type safety" means, and setting up TypeScript in a React (Next.js) projectA history of how type safety has worked in React, starting with class componentsThinking in Type(s|Script): How modeling value shapes helps raise predictability and understandability, especially in the wildest and wackiest of React architectures.TypeScript's Limitations: By design, TypeScript can only act as a development-time type system and enforce what that system can represent. We'll want to go over what can't and/or shouldn't be represented in that type system.Raising the Runtime: Moving those type thoughts into your React runtime with programmatic frameworks or libraries such as tRPC and Zod - especially as they integrate with React metaframeworks like Next.js and Remix.React Specifics: How this "types-first" theory works helps improve common parts of projects in the React ecosystem: from prop-types back in the day to REST or RPC endpoints, testing, and documentation today.ESLint lint rules to catch common async and React code bugs - and why the language is designed to let you do those dangerous things in the first place.Ecosystem future: where the TC39 types-as-comments proposal will -and won't- take types at a language-level for JavaScript in general and React apps specifically.By allowing our types to be a reflection of the runtime reality, we embrace types-first thinking in designing code - making our code more clear to read and update. These better-define boundaries help in everything from better-defined React component boundaries to auto-generated client&lt;&gt;server API bridges. Hooray, types!

This session aims to show JavaScript developers how PHP concepts, especially those honed in Drupal development, can enrich their approach to React applications. It will cover how PHP's server-side strengths and Drupal's modular architecture can inform and enhance client-side development in React. The talk will include practical examples of integrating Drupal with React, emphasizing how PHP's backend prowess can be leveraged in a JavaScript-dominated environment. The session promises to be an eye-opener for React developers, offering them new perspectives and tools drawn from the PHP world, ultimately leading to more robust, efficient, and innovative web applications.

Have you ever fixed a TypeScript error and found yourself wondering why your solution actually worked? TypeScript often leaves us in a state of curiosity and, occasionally, confusion.In this presentation, I aim to untangle one such mystery: why TypeScript applies different typechecks to a function parameters and its return value. It's a peculiar aspect many of us have noticed but perhaps not fully unraveled. Why do these two seemingly similar aspects of functions follow different rules?TypeScript’s aim is to protect us from typing mistakes, and our aim during this talk will be understanding its purpose, using React practical examples.

In this talk you will learn timeless soft skills necessary to navigate interpersonal relationships with friends, coworkers, and reports. You will learn about emotional regulation, reframing, boundaries, radical ownership, and letting the fuck go.

Web developers learn a lot of programming techniques in the pursuit of their career but often don't realize the depth of their own skill. React Three Fiber became a sensation among thousands of developers because it demonstrated that the knowledge they possess can be harnessed to create interactive 3D graphics. However, React Three Fiber has been stuck in the mindset of websites while the future of web increasingly moves toward immersive 3D experiences.In this presentation, we will explore the new generation of React Three Fiber and the changes being made to evolve it into a framework capable of supporting complex real time apps, such as live simulations and video games. Our goal is to give web developers a new moment of recognition where they look at a video game programmed with React and think, "I can do this"

How the transition to React Server Components enables better internationalization solutions.

Chaos Engineering is a current trend which involves studying the behavior of a system in the face of external events that are often unlikely, but in this case provoked (server or load-balancer crash, loss of DNS, etc.).The disorder thus generated provides a wealth of information on how our systems work, enabling us to improve their robustness.But strangely enough, all the books, talks and tutorials on Chaos Engineering overlook an important component of our systems. And yet, if there's one area where unpredictability, inconsistency and the need for resilience are central concerns, it's the frontend.💥Chaos, frontend, and Japanese ancestral art 👘: 3 notions that at first glance have nothing in common, but which together open up new perspectives in the development of our applications.

We will have a look at the mechanisms by which SolidJS empowers us to build highly performant web apps with a mental model that works just as you'd expect. This talk is a step further on the consequences of choosing fine-grained reactivity: benefits for developer experience, efficiency, and end-user performance.

Progressive web apps describe a whole new set of browser features that enable completely new ways of interacting with web applications.While originally intended as an alternative to mobile apps, we are seeing more and more desktop apps that rely on the web platform. Photoshop, Visual Studio Code, Squoosh, Clipchamp and the whole Google Office Suite are just a few examples of a growing number of completely web-based desktop applications - Superwebapps!.In this talk, we will focus on some of the new and exciting browser capabilities that allow us to create powerful React applications that make our daily lives easier. Of course, including tangible examples and an outlook on the browser roadmap.

This talk will guide you through the integration of OpenTelemetry within React environments, emphasizing Server Side Rendering (SSR) and the innovative React Server Components (RSC). Learn how to harness the power of telemetry data—traces, metrics, and logs—to gain a comprehensive understanding of your application's behavior and user interactions.

Labeled arrows are one of the most widely used features when it comes to whiteboard, isn't it? In this talk, I will be deep-diving into the internals of labeled arrows and how they work under the hood in Canvas and SVG and I will be also sharing my experience building labeled arrows in Excalidraw - A virtual free Open-Source collaborative end-to-end encrypted canvas-based editor for sketching hand-drawn diagrams.

Join me on a musical journey through the world of open source software as I share the story behind crafting from scratch an online guitar tuner with Javascript.In this talk, we'll explore the delightful intersection of mathematics and development, where a simple curiosity led to the creation of an open-source tuner using React and Next.js.I'll share insights and challenges into the implementation of the tuner, navigating through the algorithmic landscape of autocorrelation and frequency calculations.

Building end-to-end encrypted applications is exciting, but also intimidating. This talk is designed to lower the entry barrier, offering a clear roadmap for integrating end-to-end encryption in collaborative, real-time applications.We begin by unveiling a simple design with one shared encryption key, promptly addressing its inherent challenges. Progressively, we delve into tools like Opaque, Secsync and CRDTs to tackle the challenges we identified and enhance our application with the goal of offering a seamless user experience without compromising on security.Each segment of the talk starts with an accessible overview before diving into practical, code-based examples. This approach not only demystifies the intimidating theory and empowers attendees with the tools and knowledge to apply these principles effectively in their projects.

In our daily routines as frontend engineers, we diligently apply unit, integration, and end-to-end tests to our development processes. The primary goal of these practices is to deliver features at high velocity with confidence in the robustness of our code. It's crucial to ensure that any modifications we introduce do not inadvertently disrupt the app's functionality. However, an often overlooked aspect of software testing is the visual part. Even if your app works correctly from a functional standpoint, what if key visual elements, such as call-to-action buttons, are obscured or entirely missing from the user's view? In this talk, we will dive into the inner workings of visual regression testing. We'll explore how it functions and what steps are taken between the start and the result of such a test. We will look into the challenges it encounters along the way as well.

Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.

Build a Powerful Datagrid With AG Grid

Brian Love

I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side.

Building Your Own Custom Type System

Kunal Dubey

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.

How to Build Front-End Access Control with NFTs

Next.js on the Edge with its new secrets sauce for better user experience and high performance. We will unveil Next.js secret sauce and the way of working to deliver the best user experience in Edge network and the new features including partial pre-rendering. How to make use of the Server component and its high performance on Edge network.

Unveiling Next.js Secret Sauce on the Edge

Mustafa Azim

In this session, we will build and deploy a decentralized application from scratch and delve into its additional features, all while minimizing the complexity typically associated with learning blockchain technology.By the end of this session, I hope attendees will not only have a clearer understanding of blockchain development, but also realize that building in this space can be surprisingly straightforward and enjoyable.My goal is to share my enthusiasm for open-source development and the potential of Web3.

Learn to Build on WEB3 Like It’s WEB2

David Dal Busco

Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.

Hands-On AI: Integrating LangChain with JavaScript for Web Developers

Vivek Nayyar

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 feel for key skills for working with LLMs in your own applications such as prompt engineering and exposure to OpenAI's API. After this session you will have insights around what LLMs are and how they can practically be used to improve your own applications.

React Summit 2024

The biggest React conference worldwide