Name: React Summit US 2024
Start: 2024-11-18T23:00:00.000Z
End: 2024-11-22T22:30:00.000Z

Kristiyan Velkov

Nicolas Carlo

James Swinton-Bland

Bree Hall

Julian Burr

Kræn Hansen

Kiril Peyanski

Irina Baeva

Brian Whippo

Aleksei Podgaev

Ian Schwartz

Lera

Rohit Singh

 Vinicios Neves

Seungho Park

Ameer Sami

Mike Hartington

Tim Damen

Thibault Van den Broecke

Wyatt Johnson

JJ Kasper

David Pugh

Kyle Langford

Houda Mouttalib

Joanna Otmianowska

Florence Shelley

Marko Draksic

Yomi Eluwande

Carmen Huidobro

Philip Fulcher 

Bela Bohlender

André Bauer

Jerel Miller

Sriram Hariharan

Si tuvieras los mismos objetivos que React Compiler, ¿qué tipo de componente de React escribirías? En esta masterclass Tony y la audiencia imaginan que son React Compiler, reescribiendo un componente de React de la misma manera exacta en que lo hace el compilador. A lo largo del camino, obtendremos una comprensión más profunda de los internos de React, para comprender completamente cómo funciona el compilador, por qué funciona de esa manera y cómo decidir si deberías usarlo.

If You Were a React Compiler

In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.

If you had the same goals as React Compiler, what kind of React component would you write? In this talk Tony and the audience imagine they are React Compiler, rewriting a React component in the exact same way the compiler does. Along the way, we'll gain a deeper insight into React internals, to fully grasp how the compiler works, why it works that way, and how to decide if you should use it.

Tony Alicea

Únase a nosotros para una introducción rápida al framework de React de full stack primero del lado del cliente de TanStack. Basado en TanStack Router, está lleno de Seguridad de Tipos, funciones del servidor, SSR, gestión de estado de URL poderosa y un par de características sorpresa increíbles que hacen que construir aplicaciones sea fácil, rápido y divertido nuevamente!

Tanstack Start - Un Framework de React de Full-Stack Primero del Lado del Cliente

We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.

Join us for a fast paced introduction to TanStack’s full stack client-side first React framework. Based on TanStack Router, it’s jam packed with Type Safety, server functions, SSR, powerful URL state management and couple more awesome surprise features that make building apps easy, fast and fun again!

Tanstack Start - A Client-Side First Full-Stack React Framework

Tanner Linsley

Prepárate para un emocionante viaje a través de lo último en Chrome DevTools y React DevTools mientras nos sumergimos en el Estado de la Unión para 2024. Exploraremos las poderosas herramientas y características que continúan empoderando a los desarrolladores para crear experiencias web de alto rendimiento. También tocaremos lo último en depuración de React, incluyendo actualizaciones como el soporte de React Compiler. Ya seas un usuario veterano o nuevo en la magia de DevTools, esta sesión te equipará con consejos prácticos y conocimientos para mejorar tu proceso de desarrollo.

Chrome DevTools: Estado de la Unión 2024 - Depuración de React y Más Allá

Hi folks, in this Talk we learn about React and Chrome DevTools. We explore the new AI Assistant panel in DevTools that helps with UI tweaking. React DevTools now supports Gemini AI model for error fixing. Extensibility is important and React DevTools has features like highlight updates and server components. We also learn about server logging in the browser console and toggling suspense fallbacks. Browser DevTools allow experimenting with local overrides and improving color contrast. Advanced features include overriding headers, network panel customization, and performance tooling. We also discuss Core Web Vitals, optimizing pages, and debugging UI with DevTools. There are fun tips for enhancing animations and logging workflow. The Talk ends with Q&A and sharing/removing features based on user feedback.

Get ready for an exciting journey through the latest in Chrome DevTools and React DevTools as we dive into the State of the Union for 2024. We'll explore the powerful tools and features that continue to empower developers to craft high-performance web experiences. We’ll also touch on the latest in React debugging including updates like React Compiler support. Whether you're a veteran user or new to the DevTools magic, this session will equip you with actionable tips and insights to level up your development process.

Chrome DevTools: State of the Union 2024 - Debugging React & Beyond

Addy Osmani

Los problemas de frontend que afectan a tus usuarios a menudo son provocados por problemas de backend. En esta masterclass, aprenderás cómo identificar problemas que causan páginas web lentas y malos Core Web Vitals usando tracing. Luego, pruébalo tú mismo configurando Sentry en un proyecto Next.js ya preparado para descubrir problemas de rendimiento, incluyendo consultas lentas a la base de datos en una sesión interactiva de programación en pareja. Saldrás de la masterclass siendo capaz de:- Encontrar problemas de backend que podrían estar ralentizando tus aplicaciones de frontend- Configurar tracing con Sentry en un proyecto Next.js- Depurar y solucionar problemas de rendimiento deficiente usando tracing Este será un evento en vivo de 2 horas donde tendrás la oportunidad de codificar junto con nosotros y hacernos preguntas.

Tracing: Frontend Issues With Backend Solutions

Welcome to the two-hour workshop where we will introduce Sentry, a monitoring platform, and demonstrate how to debug with it. We will walk through the project structure and set up Sentry for debugging. The workshop covers topics such as populating the database, configuring Sentry for better debugging, tracing performance, and session replay. We will also explore CI/CD, Python setup, and Django project integration with Sentry. The workshop emphasizes the importance of setting sample rates appropriately and covers issue identification, source map configuration, and analyzing errors with source maps. Additionally, it covers topics such as bug fixes, custom instrumentation, troubleshooting performance issues, and trace exploration. The workshop concludes with an overview of the features of Sentry, including trace view, session replay, user feedback widget, and AI capabilities. Attendees are encouraged to reach out for further questions.

Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing. Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session. You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.

Lazar Nikolov

Sarah Guthals

Aprovechando reactjs para crear microfrontends reutilizables abordando desafíos y errores comunes.

React y Microfrontends

I'm thrilled to be here at the React Summit to talk about React and Microfrontends. Micro frontends allow reusable components to be shared across the organization and are consumed at runtime using webpack's module federation feature. The module federation plugin enables sharing dependencies with unknown components. Micro frontends can be configured with Webpack by chunking and specifying shared dependencies. When rendering web components from a remote, it's best practice to import them using react lazy or loadable. When deciding between micro frontends and npm packages, consider the reusability at build time or runtime. Setting up micro frontend development involves installing the necessary libraries and deciding on eagerly or lazily sharing dependencies. Splitting monolithic content into microcontent requires considering independence and avoiding page awareness. Microcontent should be consistent and encapsulated using tools like emotion. Scaling and versioning microcontents is important for deployment at scale. Communication between microcontents can be done using React's one-way data binding. Shadow DOM can be used for encapsulation, but it has challenges with styling and accessibility. Developer mindset and clear documentation are crucial for consistency and communication in microfrontend development.

Leveraging reactjs to create reusable microfrontends addressing challenges and common pitfalls.

React and Microfrontends

Harsh Maheshwari

¿Alguna vez te has preguntado cómo React puede "actualizar" una página mientras aún se está cargando? Nos hemos perdido tanto en la discusión de cosas como Next.js, Suspense, Signals, Server Components y Server Actions, que la mayoría de los desarrolladores de React han pasado por alto una de las piezas más recientes de magia de React: Out Of Order Streaming.

Out Of Order Streaming (El Secreto que Impulsa el React Moderno)

I'm the second-best TypeScript YouTuber. I'm giving a talk on streaming in React and the benefits it brings to applications. Streaming allows for faster perceived loading times by sending partial HTML to the browser, rendering it and waiting for the rest to complete. Server-side loading can cause delays, but this can be improved by caching HTML on a CDN. Streaming HTML in a different order has been a challenge, but there are JavaScript solutions. Optimizing HTML streaming with Suspense and dynamic I.O. can further improve loading times. Using suspense in client-side rendering and addressing challenges with Next.js React model are interesting patterns. Caching can now be done at a more granular level, improving SEO and reducing load on the host server. Rendering on the server is not a big penalty compared to multiple API requests. Thank you all.

Ever wonder how React can "update" a page while it's still loading? We've gotten so lost in the discussion of things like Next.js, Suspense, Signals, Server Components, and Server Actions, that most React devs have totally missed one of React's most recent pieces of magic: Out Of Order Streaming.

Out Of Order Streaming (The Secret Powering Modern React)

Theo Browne

Panel Discussion: Future of React

We're going to be doing a future of React panel discussions. React 19 is in RC stage and we're excited to hear when it will be stable. The React compiler is here to stay and is the future of developer experience and tooling. React 19 brings exciting features like RSCs and consolidation of the framework. React's commitment to community and innovation is commendable. The React team values feedback and actively engages with the community. React's future includes supporting the community and enabling smooth migrations. There's a need to teach underlying concepts and educate AI systems. Teaching and adapting to React can be challenging. The React compiler changes default re-rendering behavior. Collaboration with Next.js and Vercel has been valuable for React's development. Appreciation for the community and partnerships with Vercel and Microsoft.

Kent C. Dodds

Shruti Kapoor

Mark Erikson

Eli White

Mofei Zhang

Tom Occhino

¡Llamando a todos los desarrolladores de React! Únete a nosotros para una masterclass inmersiva de 4 horas profundizando en React Server Components y Server Actions. Descubre cómo estas tecnologías revolucionarias están transformando el desarrollo web y aprende a aprovechar todo su potencial para construir aplicaciones rápidas y eficientes. Explora el mundo de React Server Components, combinando sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y experiencia de usuario incomparables. Sumérgete en React Server Actions para ver cómo combinan la interactividad del lado del cliente con la lógica del lado del servidor, facilitando el desarrollo de aplicaciones interactivas sin las limitaciones tradicionales de las API. Obtén experiencia práctica con ejercicios prácticos, ejemplos del mundo real y orientación experta sobre la implementación de estas tecnologías en tus proyectos. Aprende temas esenciales como las diferencias entre Server y Client Components, optimización de la obtención de datos, pasando datos de manera efectiva y maximizando el rendimiento con nuevos hooks de React como useActionState, useFormStatus y useOptimistic. Ya sea que seas nuevo en React o un profesional experimentado, esta masterclass te equipará con el conocimiento y las herramientas para elevar tus habilidades de desarrollo web. Mantente a la vanguardia y domina la tecnología de vanguardia de React 19. No te lo pierdas: ¡regístrate ahora y desata todo el poder de React!

Dominando React Server Components y Server Actions en React 19

Welcome to this workshop on mastering React Server components and React Server actions. We'll be using Next.js as our runtime server. We'll explore the difference between client components and server components, how to do updates and query server resources using server components and actions. React Server components render on the server, eliminating REST call overhead and simplifying working with data. They also provide advantages such as secure access to server APIs and databases. React Server components use a two-step flow of rendering on the server and merging the JSON virtual DOM with client-side rendering. Next.js supports React Server components, while client components are used for browser-specific functionality. Suspense and streaming are used for asynchronous rendering. Next.js Caching can be controlled using specific APIs. Server actions can be used for executing code on the server and submitting form data. The use of ActionState allows for form validation and error handling. The workshop concludes with discussions on error handling, code organization, and limitations of server actions.

Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications. Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints. Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic. Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!

Mastering React Server Components and Server Actions in React 19

Maurice de Beijer

Los agentes GenAI son una de las direcciones más prometedoras para aplicaciones complejas basadas en GenAI. Estos agentes pueden buscar en la web, codificar y realizar tareas complejas de manera completamente autónoma para el usuario. En esta masterclass aprenderemos los conceptos básicos de los agentes GenAI. Definiremos los términos y marcos básicos y entenderemos cómo se diferencian del uso tradicional de LLMs.Entenderemos las técnicas de prompting para agentes LLM y específicamente la técnica de React prompting para agentes de IA (no confundir con React el lenguaje de programación). Construiremos, desde cero, nuestro propio agente GenAI que puede interactuar con el usuario, realizar búsquedas en la web y codificar y ejecutar en Javascript.Tabla de contenidos:- Introducción a los agentes GenAI- Entendiendo el marco de React- Construcción práctica de un agente GenAI simple- Despliegue del Agente con streamlit- Consejos y marcos para desarrollar agentes GenAI

Building Your Own GenAI Agent Application

Welcome to the Workshop on Gen AI and LLM Agents! The Gen AI market is growing rapidly, with big companies investing in agent development using no-code tools. Chaining is a key concept in building trustworthy and complex systems in the Gen AI market. OpenAI 01 is the first model to integrate chain of thought thinking. LLM agents use step-by-step reasoning to provide answers and require a different framework than chain of thought. The React framework is successful for working with LLM agents. The process of React prompting involves iterating over tools to find the final answer. The Google search API is used as a tool in the LLM agent. The agent class is implemented to collect responses and decide the next action. The prompt is tweaked to include previous history. The LLM agent uses multiple tools, including the Google search API and a JavaScript code runner. The agent can perform calculations and retrieve data from web searches. Recommended resources for building advanced multi-agent systems include Langchain and Microsoft Autogen framework.

GenAI agents are one of the most promising directions for complex GenAI based applications. These agents can search the web, code, and carry complex tasks completely autonomously for the user. In this workshop we will learn the basics of GenAI agents. Define the basic terms and frameworks and understand how they differ from traditional use of LLMs.We will understand prompting techniques for LLM agents and specifically the React prompting technique for AI agents (not to be confused with React the programming language). We will build, from scratch, our own GenAI agent that can interact with the user, perform web searches and code and execute in Javascript.Table of contents:- Introduction to GenAI agents- Understanding the React framework- Hands-on Building of simple GenAI agent- Deployment of the Agent with streamlit- Tips, and frameworks for developing GenAI agents

Amit Mandelbaum

Idan Rozin

Esta masterclass de 3 horas proporcionará una introducción a la Plataforma de Desarrolladores de Cloudflare para desarrolladores de aplicaciones. Se centrará en desarrollar una aplicación React de pila completa respaldada por pruebas que puedan garantizar la corrección de sus interacciones con los recursos y APIs proporcionados por la Plataforma de Desarrolladores.La masterclass asume un conocimiento básico de TypeScript y React, ¡no mucho más allá de lo necesario para construir una aplicación hola mundo en React usando TypeScript! Tampoco se requiere conocimiento de la Plataforma de Desarrolladores, ya que todo lo relacionado con Cloudflare se introducirá como parte de la masterclass.Así que si estás interesado en el desarrollo de aplicaciones en la plataforma de Cloudflare (¡rápida y económica!), entonces esta masterclass es para ti. Al final de la misma, sabrás cómo construir una aplicación web de pila completa, completamente probada (usando React o cualquier marco de tu elección) con una estructura de pruebas integral que te dará plena confianza y tranquilidad. AgendaLa masterclass incluirá codificación en vivo, preguntas y respuestas, y secciones de codificación interactivas. El código inicial, junto con las instrucciones, también estará disponible para que los participantes lo revisen y profundicen después dela masterclass.Como parte de la configuración inicial, veremos cómo usar la herramienta <a href="https://developers.cloudflare.com/pages/get-started/c3/" target="_blank">C3</a> para desplegar fácilmente aplicaciones en Cloudflare en cuestión de minutos.Después, veremos cómo escribir código que interactúe con los recursos y APIs específicos de la Plataforma de Desarrolladores, específicamente, usaremos <a href="https://developers.cloudflare.com/kv" target="_blank">KVs</a>, R2 buckets y <a href="https://developers.cloudflare.com/workers-ai" target="_blank">Workers AI</a>. También nos aseguraremos de probar todo el código para asegurarnos de que interactúa correctamente con las APIs mencionadas a través de la <a href="https://developers.cloudflare.com/workers/testing/vitest-integration/" target="_blank">integración oficial de Workers Vitest</a>.Luego integraremos el código de Workers con nuestra aplicación React para construir una aplicación de pila completa lista para ser desplegada en la red de borde de Cloudflare. Usaremos <a href="https://playwright.dev/" target="_blank">playwright</a> para implementar un conjunto de pruebas de extremo a extremo (e2e) para asegurarnos de que la aplicación se integra perfectamente con la plataforma de Cloudflare. Conclusiones- Cómo desarrollar en el runtime de Cloudflare Workers e interactuar con varios recursos de Cloudflare- Cómo desarrollar, probar de manera integral y desplegar una aplicación de pila completa en la Plataforma de Cloudflare

Despliega y Prueba Aplicaciones React de Pila Completa en Cloudflare

Welcome to the workshop on deploying and testing full stack React apps on Cloudflare. The agenda includes an introduction to the project, UI implementations, deploying the project to the Cloudflare platform, implementing backend logic, and testing the whole application. Cloudflare Pages and Remix are the tech used. The workshop focuses on building a trading card generator app. The first exercise involves implementing the form and backend integration logic. The second step is to create a loader. Backend logic, cloud integration, and statefulness with Cloudflare bindings are covered. Exercise three focuses on implementing the card manager class functionality, including AI functionality. Testing KV and R2 functionality and integrating backend logic with the UI are also covered. Exercise four involves E2E testing with Playwright. Exercise five covers making the code more testable. The workshop concludes with additional ideas and resources.

This 3 hour workshop will provide an introduction to the Cloudflare Developer Platform for application developers. It will focus on developing a full-stack React application backed by tests that can guarantee the correctness of its interactions with the resources and APIs provided by the Developer Platform.The workshop assumes basic knowledge of TypeScript and React — not much beyond what’s needed to build a hello world app in React using TypeScript! Knowledge of the Developer Platform is also not required as everything Cloudflare related will be introduced as part of the workshop.So if you’re interested in application development on the (fast and inexpensive!) Cloudflare platform then this workshop is for you. By the end of it you will know how to build a fully-fledged, fully-tested, full-stack web application (using React or any framework of your choice) with a comprehensive testing structure that gives you full confidence and peace of mind. AgendaThe workshop will include live coding, Q&amp;A, and interactive coding sections. The starting code, alongside instructions will be also made available for participants to revisit and dig deeper afterthe workshop.As part of the initial setup we’ll see how to use the <a href="https://developers.cloudflare.com/pages/get-started/c3/" target="_blank">C3</a> tool to easily deploy applications to Cloudflare in a matter of minutes.Afterwards, we will see how to write code that interacts with the Developer Platform specific resources and APIs, specifically, we’ll use <a href="https://developers.cloudflare.com/kv" target="_blank">KVs</a>, R2 buckets and <a href="https://developers.cloudflare.com/workers-ai" target="_blank">Workers AI</a>. We’ll also make sure to test all the code to make sure that it correctly interacts with the aforementioned APIs via the official <a href="https://developers.cloudflare.com/workers/testing/vitest-integration/" target="_blank">Workers Vitest integration</a>.We will then integrate the Workers code with our React app to build a complete full-stack application ready to be deployed to the Cloudflare edge network. We will use <a href="https://playwright.dev/" target="_blank">playwright</a> to implement an end-to-end (e2e) suite of tests to make sure that the application integrates perfectly with the Cloudflare platform. Takeaways- How to develop on the Cloudflare Workers runtime and interact with various Cloudflare resources- How to develop, comprehensively test and deploy a full-stack application on the Cloudflare Platform

Deploy and Test Full-Stack React Apps on Cloudflare

Dario Piotrowicz

Christian Sparks

¿Tu aplicación React tiene mucha (y mucha) cantidad de datos que necesitan ser mostrados tanto en cuadrículas de datos como en gráficos? ¿Tus usuarios quieren interactuar, analizar y trabajar con estos datos sin comprometer el rendimiento o la confiabilidad? AG Grid proporciona las mejores bibliotecas de cuadrículas de datos y gráficos para React que están repletas de características y ofrecen un rendimiento inigualable al tiempo que son totalmente personalizables. En este masterclass, aprenderás cómo comenzar con AG Grid y AG Charts, y cómo utilizar sus características clave. Saldrás de este masterclass gratuito de 3 horas equipado con el conocimiento para implementar AG Grid y AG Charts en tu aplicación React.

Potente Visualización de Datos con AG Grid y AG Charts

In this workshop, we explored the features of Aggrid and how it works seamlessly with React. Aggrid is known for its speed and performance, handling large datasets with ease. We learned how to set up Aggrid, define columns, bind data, and implement AG Grid. We also covered sorting, filtering, cell rendering, and cell editing in Aggrid. Additionally, we were introduced to AGCharts, a canvas-based charting library that works well with AGGrid for plotting and graphing data. AGCharts is optimized for performance and offers a wide range of chart types and customization options. The workshop provided practical examples and exercises to demonstrate the use of Aggrid and AGCharts. Follow Mike Ryan on Twitter and Blue Sky at Mike Ryan Dev or Mike Ryan.dev for more information and resources.

Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid &amp; Charts libraries that are packed with features and provide unbeatable performance whilst being fully customisable. In this workshop, you'll learn how to get started with both AG Grid and AG Charts, learn how to use their key features. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid &amp; AG Charts into your React application.

Powerful Data Visualisation with AG Grid & AG Charts

Mike Ryan

La red que se encuentra entre nuestro servidor y el cliente es lo que causa la mayor complejidad en nuestro proceso de desarrollo. Ya sea la interfaz de usuario inicial que generamos en el servidor, las llamadas API que hacemos mientras el usuario navega, o los envíos de formularios que realiza nuestro usuario, mantener la aplicación receptiva y actualizada es una tarea enorme. ¿Cómo sería si toda esa complejidad simplemente desapareciera? Sería increíble, eso es lo que sería. Y React Server Components y Actions son lo que está haciendo eso posible. En esta charla, exploraremos cómo está sucediendo eso y cómo podemos aprovechar esta increíble experiencia de desarrollador para ofrecer experiencias de usuario aún mejores.

Abracadabra: La Red Desaparecida

I am so excited to share my software development experience. The talk focuses on React and the Vanishing Network, aiming to make network management disappear. It starts with the multi-page app paradigm and moves towards enhancing user experience and transitioning to single-page app architecture. The talk discusses eliminating duplication, transitioning to a JSON API, and utilizing React and user actions. It explores progressive enhancement with Remix, moving to modern React with server components, and enhancing server-client communication and UI. It also covers server-client code separation, Epic React version two, AI plugins, Next.js, trade-offs, testing, SQL queries, and optimizing for change.

The network that stands between our server and the client is what causes the most complexity in our development process. Whether it be the initial UI we generate on the server, the API calls we make as the user navigates around, or the form submissions our user makes, keeping the application responsive and up-to-date is a massive chore. What would it be like if all of that complexity just disappeared? Freaking great, that's what it would be like. And React Server Components and Actions are what's making that possible. In this talk we'll look into how that's happening and how we can take advantage of this amazing developer experience to deliver even better user experiences.

Abracadabra: The Vanishing Network

React 19 introduce Actions, una nueva forma de simplificar la gestión de formularios al simplificar el manejo de formularios, agregar estados de carga y facilitar la recuperación de datos. Esta charla práctica explora la transición a React 19 utilizando Form Actions, con demostraciones de código para gestionar el envío de formularios, mostrar indicadores de carga y recuperar datos de formularios de manera eficiente.

Todo lo que necesitas saber sobre React 19

React 19 introduces new features such as React Compiler and React Actions, which optimize code and provide better performance. The useOptimistic hook allows for optimistically updating UI, while the UseFormStatus hook tracks loading states and enables button disabling. The introduction of the 'action' attribute simplifies form handling and data retrieval. React 19 eliminates the need for useMemo and useCallback thanks to the React Compiler. The stability of React 19 has been observed in side projects without major issues.

React 19 introduces Actions, a new way to simplify form management by simplifying form handling, adding loading states, and making data retrieval easier. This hands-on talk explores transitioning to React 19 using Form Actions, with code demos of managing form submission, displaying loading indicators, and retrieving form data efficiently.

Everything You Need to Know About React 19

Aprende cómo manejar formularios en React utilizando las últimas características, como startTransition, useTransition, useOptimistic y useActionState, con y sin acciones del servidor de React 19, junto con la validación adecuada, manejo de errores y mejores prácticas.La masterclass comenzará demostrando el manejo tradicional de formularios usando useState y useEffect para el renderizado del lado del cliente. Gradualmente, pasaremos a utilizar las últimas características de React 19, incluyendo formularios del lado del servidor y los hooks más recientes para gestionar estados y errores de formularios. Al final de la masterclass, los participantes entenderán cómo crear formularios robustos con validación adecuada y manejo de errores.Objetivos de Aprendizaje<ul><li>Últimos Hooks de React 19 — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValue</li><li>Acciones del Servidor</li><li>Revalidaciones</li><li>Validación del lado del Servidor</li><li>Manejo de Errores</li><li>Prácticas de Seguridad</li></ul>

Evolución de la Gestión de Formularios en React

Welcome to the evolution of form management in React. Learn how to build forms using the latest React hooks. Handle forms with server actions, use validation, form status, optimistic, and action state. In this course, we'll turn the basic form into three different forms, including a server form that works without client-side JavaScript. Use the useFormStatus hook to provide real-time feedback about form submission status. The useActionState hook helps manage the state of a server action in React server components. The useOptimistic hook enables the creation of optimistic UIs. The useTransition hook distinguishes between urgent and non-urgent state updates. The useDeferredValue hook defers updating a part of the UI to keep it responsive during expensive updates. Practice and experiment to learn these concepts.

Learn how to handle forms in React using the latest features, such as startTransition, useTransition, useOptimistic, and useActionState, with and without React 19 server actions, alongside proper validation, error handling, and best practices.The workshop will begin by demonstrating traditional form handling using useState and useEffect for client-side rendering. Gradually, we'll transition to using the latest React 19 features, including server-side forms and the newest hooks for managing form states and errors. By the end of the workshop, participants will understand how to create robust forms with proper validation and error handling.Learning Goals<ul><li>Latest React 19 Hooks — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValue</li><li>Server Actions</li><li>Revalidations</li><li>Server-side Validation</li><li>Error handling</li><li>Security practices</li></ul>

Evolution of Form Management in React 

Adrian Hajdin

Construye Apps de IA en 5 Minutos: Demostración en Vivo con Vercel AI SDK, v0.dev y RAG! Sumérgete en el futuro del desarrollo de IA con una demostración en vivo sobre cómo construir una aplicación potenciada por IA en solo 5 minutos usando el AI SDK de Vercel, v0.dev y Retrieval-Augmented Generation (RAG). Aprende los secretos de ajustar modelos y de integrar sin problemas herramientas de vanguardia para crear aplicaciones potentes y receptivas. Ya seas un novato en IA o un profesional experimentado, esta charla te proporcionará el conocimiento práctico y las habilidades para desarrollar y desplegar rápidamente soluciones innovadoras de IA.

Construye Apps de IA en 5 Minutos: Demostración en Vivo con Vercel AI SDK, v0.dev y Rag!

I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.

Build AI Apps in 5 Minutes: Live Demo with Vercel AI SDK, v0.dev, and RAG! Dive into the future of AI development with a live demonstration on building an AI-powered app in just 5 minutes using Vercel’s AI SDK, v0.dev, and Retrieval-Augmented Generation (RAG). Learn the secrets of fine-tuning models and seamlessly integrating cutting-edge tools to create powerful, responsive applications. Whether you're an AI novice or a seasoned pro, this talk will provide you with the practical knowledge and skills to rapidly develop and deploy innovative AI solutions.2

Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!

Tracy Lee

Aunque los Refs se consideran una vía de escape, hay momentos en los que simplemente podrías necesitar usarlos. En esta charla, con la ayuda de ejemplos del mundo real, veremos qué pueden hacer los Refs por nosotros en términos de claridad de código y también de mejoras en el rendimiento. Piensa en minimizar renders y evitar interfaces de usuario parpadeantes. Cubriremos las restricciones para un uso seguro y, para aquellos de ustedes que ya están utilizando estos patrones, asegúrense de estar preparados para los cambios que vienen en React 19.

What Refs Can Do for You

Today's Talk focused on using refs and profiling Agigrid in React. The speaker shared their experience with optimizing custom cell components and performance, including using memo and leveraging the React compiler. They also discussed improving performance with manual style updates and refactoring the use of useEffect. The speaker highlighted the use of ref callbacks, which can be implemented with useLayoutEffect. React 19 introduces changes to the ref callback approach. The Talk touched on using React DevTools and CSS variables for monitoring renders. It also discussed the compatibility of Azure Grid with React and the trade-offs between using React components and vanilla JavaScript. The speaker emphasized the importance of considering the DX improvements and the complexity of not seeing a React component tree in the dev tools. The Talk concluded with a mention of AG Grid features, handling refs at various levels, and the recommendation to consult with Stephen for technical questions and application architecture.

While Refs are considered an escape hatch there are times when you might just need to use them.In this talk, with the help of real world examples, we will look at what Refs can do for us in terms of code clarity and also performance gains. Think along the lines of minimising renders and avoiding flickering UIs. We will cover the restrictions for safe usage and for those of you already using these patterns make sure you are prepared for the changes coming in React 19.

Stephen Cooper

En el panorama digital actual, la multiinquilinidad se ha convertido en una arquitectura crítica para plataformas SaaS, mercados y soluciones empresariales. Next.js ha evolucionado continuamente, lo que lo convierte en una opción cada vez más popular para construir aplicaciones full-stack. Con cada iteración, se ha vuelto aún más fácil desarrollar aplicaciones multiinquilino escalables. Hablemos sobre por qué la multiinquilinidad es vital y cómo las características de Next.js, como el enrutamiento dinámico, el middleware mejorado y las funciones de borde, simplifican el proceso de construcción y escalado de aplicaciones multiinquilino. Hablaremos sobre las mejores prácticas, discutiremos escenarios del mundo real y veremos algunos ejemplos en acción. Únete para ver cómo puedes aprovechar Next.js para crear aplicaciones multiinquilino seguras, eficientes y escalables.

Construyendo aplicaciones multiinquilino escalables con Next.js

Hello and namaste, New York. I'm excited to talk about building scalable multi-tenant applications with Next.js. We'll cover what multi-tenancy is, its advantages, key considerations, and how Next.js aids in development. Before starting multi-tenancy, let's understand what a tenant is. In multi-tenant architecture, all tenants share the same app but have different access, roles, and permissions. Easy maintenance, efficiency, scalability, and cost-effectiveness are some of the benefits of multi-tenancy. However, challenges include scalability, isolation, security, and customization. Next.js allows for easy organization of different domains and paths. Dynamic routing in Next.js enables the customization of layouts for each tenant, ensuring a personalized look and feel. Next.js API routing allows for isolating data fetching for different tenants. Middleware can handle request validation and provide features like authentication, authorization, server-side redirects, conditional redirects, and data isolation. Next.js offers scalability through caching, a component-based and modular approach, load balancing, serverless functions and platforms, and different types of rendering. Next.js continues to evolve and is a popular choice for multi-tenant architecture.

In today’s digital landscape, multi-tenancy has become a critical architecture for SaaS platforms, marketplaces, and enterprise solutions. Next.js has continuously evolved, making it an increasingly popular choice for building full-stack applications. With each iteration, it has become even easier to develop scalable multi-tenant applications. Let’s talk about why multi-tenancy is vital, and how Next.js features such as dynamic routing, enhanced middleware, and edge functions simplify the process of building and scaling multi-tenant applications. We will talk about best practices, discuss real-world scenarios, and see a few examples in action. Join to see how you can leverage Next.js to create secure, performant, and scalable multi-tenant applications.

Building Scalable Multi-Tenant Applications With Next.js

Chakit Arora

En Knock potenciamos experiencias de mensajería in-app en tiempo real a través de nuestro React SDK, permitiendo a los equipos de producto integrar componentes y tener feeds de notificaciones in-app completamente funcionales, modales, banners y más disponibles al instante. En esta charla, veremos cómo estructuramos nuestra biblioteca de React de manera componible, dando a los equipos el poder de usar nuestros componentes listos para usar, sobrescribir el estilo con sus propios tokens o traer sus propios componentes de UI a través de hooks. Profundizaremos en cómo estructuramos nuestro SDK para proporcionar la máxima flexibilidad para los equipos de ingeniería, mientras preservamos la facilidad de mantenimiento.

Construyendo Primitivas de React para Potenciar la Mensajería In-App

Hi, everyone. I'm Chris, the CTO at Nock. We help product teams power user-centric cross-channel notification experiences. Today, I'll talk about extending the abilities of our in-app messaging and how you can power any kind of in-app messaging using our platform. We optimize for flexibility, customization, and a shallow learning curve. Our pre-built React components include a banner, modal, card, and notification feed. All of this comes out-of-the-box, supporting light mode and dark mode. Easily show modals and announcements with no additional code. Own the rendered components for performance and customization. Build custom components with minimal code. Use hooks for fetching data and real-time updates. Noc provides a schema for strong data integrity.

At Knock we power real-time in-app messaging experiences via our React SDK, enabling product teams to drop in components and have fully featured in-app notification feeds, modals, banners, and more instantly available. In this talk, we'll take a look at how we structured our React library in a composable way, giving teams the power to use our components out of the box, override styling with their own tokens, or bring their own UI components via hooks. We'll dive into how we structured our SDK to provide maximum flexibility for engineering teams, while preserving ease of maintenance.

Building React Primitives to Power In-App Messaging

Chris Bell

Únete a mí en esta retrospectiva de 4 años mientras exploramos las lecciones aprendidas al construir un reproductor de video desde cero con React Native. Compartiré ideas, obstáculos y conclusiones clave de este proceso de desarrollo. Exploraremos consideraciones esenciales antes de adentrarnos en el desarrollo personalizado de un reproductor de video con React Native, incluyendo desafíos como la gestión de audio en segundo plano, las diferencias entre Android e iOS, la implementación de subtítulos y los controles personalizados. Ya seas un desarrollador experimentado o nuevo en React Native, esta retrospectiva te ayudará a navegar por los desafíos que enfrentamos al desarrollar un reproductor de video, asegurando un proceso de desarrollo más fluido para tus propios proyectos.

Una Retrospectiva de 4 Años: Lecciones Aprendidas al Construir un Reproductor de Video desde Cero con React Native

Hello, React Summit. Welcome to this talk, a retrospective on four years in the making of our React Native video player. We will cover what went well, what didn't go well, and the lessons learned. We used React Native Video 5.2.1 and custom components to optimize the player. Streaming HLS, subtitles, and transcripts worked well. iOS performance was good, but the Android player and background audio management caused issues. Different media players and syncing audio players were challenges. Managing dependencies and versions was difficult. Upgrading React Native Video to version 6.4 improved stability and added notification features. Future updates will include DLL support and player-control separation.

Join me for a 4-year retrospective as we explore the lessons learned from building a video player from scratch with React Native. I'll share insights, pitfalls, and key takeaways from this development journey. We'll explore essential considerations before diving into custom video player development with React Native, including challenges like background audio management, platform nuances between Android and iOS, subtitles implementation and custom controls. Whether you're a seasoned developer or new to React Native, this retrospective will help you navigate the challenges we faced when developing a video player, ensuring a smoother development process for your own projects.

A 4-Year Retrospective : Lessons Learned From Building a Video Player From Scratch With React Native

Omar Diop

React Server Components ofrecen un método efectivo para mejorar el rendimiento de las aplicaciones web al renderizar componentes en el servidor y transmitirlos al cliente en tiempo real. Esta sesión cubrirá la funcionalidad y los beneficios de React Server Components, mostrando cómo pueden aumentar la velocidad y la capacidad de respuesta de la aplicación. Examinaremos el papel de los componentes asíncronos, la gestión eficiente de datos y el uso estratégico de las características modernas de React para optimizar los tiempos de carga y la interactividad. Con ejemplos del mundo real y consejos prácticos, aprenderás cómo integrar estos componentes para mejorar el rendimiento de tu aplicación web y proporcionar una mejor experiencia de usuario.

React Server Components: Elevando la Velocidad, Interactividad y Experiencia del Usuario

My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.

React Server Components offer an effective method for improving web app performance by rendering components on the server and streaming them to the client in real time. This session will cover the functionality and benefits of React Server Components, showing how they can increase application speed and responsiveness. We will examine the role of asynchronous components, efficient data management, and the strategic use of modern React features to optimize load times and interactivity. With real-world examples and practical advice, you'll learn how to integrate these components to enhance your web app’s performance and provide a better user experience.

React Server Components: Elevating Speed, Interactivity, and User Experience

Aurora Scharff

¡Y no es de la manera que piensas!

La IA Revolucionará la UI

AI will revolutionize UI through the use of tools. Building recommendation systems for video games using AI libraries and data. Integrating Tansec Start to control server functions and override Fetch. Implementing RAG and using a vector database for response generation. Potential problems with context and data requests. Requesting tools and upgrading system context. Trying simulation games and using multiple steps for data retrieval. Client-side tool handling and tool request handling on the UI. Exploring Ollama application and direct post to AI. Giving AI tools and accessing data. AI evolution and the Tiny Troop project. Handling large databases and local models. RAG limitations and contextualized information. RAG live data retrieval and AI instruction. Exploring VectorDB and embeddings. Jack's thoughts on VectorDB and applause for presentation.

AI Will Revolutionize UI

Jack Herrington

Cualquiera puede publicar una biblioteca en NPM. Pero, ¿qué sucede cuando esa biblioteca es utilizada por millones de desarrolladores? ¿Cómo se manejan las complejidades de publicar uno de los paquetes más utilizados en el ecosistema y también lidiar con el soporte y mantenimiento de una comunidad? Veremos la mentalidad y el enfoque para enfrentar estos desafíos y lo que significa ser un "mantenedor" hoy en día, incluyendo prácticas para proporcionar soporte a los usuarios en todas las plataformas, mantener una mentalidad de "devrel", diseñar documentación, diseñar características y APIs, cómo considerar la versionado de paquetes y la compatibilidad, cuándo lanzar cambios disruptivos, desafíos técnicos con la publicación de paquetes y mantenerse al día con el ecosistema en constante evolución.

Mantener una Biblioteca y una Comunidad

Today's talk is about what it's like to be an open-source library maintainer, with examples and suggestions from the speaker's experience. Maintainers have various roles and responsibilities, including providing support for users and managing documentation. Setting boundaries, prioritizing documentation, and designing APIs are important aspects of being a maintainer. Release management and compatibility are challenging, requiring careful consideration of patch releases and breaking changes. The speaker shares an example of marking a method as deprecated in Redux and providing a migration path for users. Compensation for maintainers is a debated topic, and code mods can help with code migration. Maintainers often face challenges but can have a significant impact on the ecosystem and people's careers. Supporting open source developers is greatly appreciated.

Anyone can publish a library to NPM. But what happens when that library is used by millions of developers? How do you juggle the complexities of publishing one of the most widely used packages in the ecosystem, and also deal with supporting and maintaining a community? We'll look at the mindset and and approach to dealing with these challenges and what it means to be a "maintainer" today, including practices for providing user support across platforms, keeping a "devrel" mindset, designing documentation, designing features and APIs, how to consider package versioning and compatibility, when to ship breaking changes, technical challenges with publishing packages, and keeping up with the ever-evolving ecosystem.

Maintaining a Library and a Community

Desde bridgeful, a bridgeless, hasta Expo Modules y Static Hermes, el panorama de los módulos nativos en React Native está en constante evolución. La polinización cruzada, sin embargo, siempre ha sido limitada: es raro que React Native use módulos nativos de otros ecosistemas, y viceversa. En esta charla, presentamos Node-API, un estándar popular para exponer APIs nativas a JavaScript de manera ABI-estable, sin importar el motor. Usado en Node.js y la mayoría de los otros entornos de ejecución de JavaScript importantes, es la tecnología ideal para compartir módulos nativos entre ecosistemas. ¡Mostraremos cómo ya está siendo utilizado por Microsoft en React Native Windows, y lo que puede significar para el futuro de React Native!

React Native, Meet node.js Native Addons

We'll be going over the use cases of Node.js native add-ons and how they are written with NodeAPI. ABI stability allows swapping out older versions of a library for newer ones without recompiling the rest of the app. Node API enables the use of the latest Hermes regardless of React Native Windows. NativeScript is a library for calling native APIs from JavaScript, eliminating the need for dealing with native code. To initialize the addon in React Native, we modified the approach by auto-linking the native script XC framework. We can read the battery level using inline JavaScript and make view changes like setting the background color. React Native reanimated can be used to work on the UI thread. Support for Node.js native add-ons and completion of the official ABI stable Hermes API would open up the ecosystem.

From bridgeful, to bridgeless, to Expo Modules and Static Hermes, the landscape of native modules in React Native is ever-evolving. Cross-pollination, however, has always been limited – it is rare for React Native to use native modules from other ecosystems, and vice versa. In this talk, we introduce Node-API, a popular standard for exposing native APIs to JavaScript in an ABI-stable manner, no matter the engine. Used in Node.js and most other major JavaScript runtimes, it is the ideal technology for sharing native modules cross- ecosystem. We'll show how it's being used by Microsoft in React Native Windows already, and what it may mean for the future of React Native!

Jamie Birch

La influencia no está ligada a tener "Manager" en tu título de trabajo; se trata de las conexiones que construyes y el legado que dejas. Esta sesión te enseñará las habilidades necesarias para construir influencia dentro de tu organización, ya seas un IC o EM.

Influencia Sin Autoridad: Tener un Impacto en Tu Organización Independientemente del Título de Trabajo

Leadership is the key to building influence. Understanding the bigger picture and the impact of your work is crucial. Recognizing and appreciating the efforts of team members fosters a positive environment. Leaders should understand their strengths and weaknesses. Emotional intelligence and effective communication are important skills. Building influence in remote positions requires intentional relationship building. When giving feedback, create a safe environment and deliver it thoughtfully. Focus on resolution before discussing the reasons in urgent situations. Maintaining a professional distance while building team spirit is important.

Influence isn't tied to having "Manager" in your job title; it's about the connections you build and the legacy you leave. This session will teach you the skills necessary to build influence within your organization whether you're an IC or EM.

Influence Without Authority: Making an Impact in Your Organization Regardless of Job Title

Kelly Vaughn

Si sufres de: Escribir SQL para expresar la lógica de tu producto, tratar de recordar DSLs de autorización esotéricos, luchar con la caché de tu frontend, luchar con la caché de tu backend, despliegues lentos de backend, estado de UI inconsistente o desactualizado, falta de seguridad de tipos de extremo a extremo, falta de garantías transaccionales, bajo rendimiento de escritura en la base de datos, inicios en frío de la base de datos o rendimiento de lectura de la base de datos impredecible, entonces sintoniza esta charla y déjame mostrarte la luz al final del túnel.

Supercarga Tu App Full-stack con una Base de Datos Reactiva

My name is Tom, the head of developer experience at Convex. Convex is a sync engine written in Rust that includes database, file storage, and full text search. It can be self-hosted and allows you to write Convex code alongside your other code. It runs in a V8 isolate on the same machine as your data, making it fast. Convex uses web sockets for interaction and offers optimizations like optimistic updates. It is widely used and can handle real-time data. Convex aims to remove development burdens and focuses on scalability. It offers smooth concurrency and reduces friction in development. Convex for Startups is a program that offers perks like free access and aims to attract interesting applications.

If you suffer from: Writing SQL to express your product logic, trying to remember esoteric authorization DSLs, fighting your frontend cache, fighting your backend cache, slow backend deployments, inconsistent or stale UI state, lack of end-to-end type safety, lack of transactional guarantees, low database write throughput, database cold starts or unpredictable database read performance - then tune in to this talk and let me show you the light at the end of the tunnel.

Supercharge Your Full-stack App with a Reactive Database

Tom Redman

React 19 introduce una gran cantidad de nuevas capacidades y APIs. Entonces, ¿qué necesitas? ¿Qué puedes implementar hoy? ¿Y qué deberías dejar para que los autores del framework lo integren? Incluso si no planeas adoptar Server Components, hay nuevas capacidades en React 19 para mejorar la velocidad, clarificar el código e incluso eliminar dependencias de larga data. En este resumen práctico y progresivo, aprenderás todo lo que necesitas para estar preparado para una actualización a React 19.

Guía para Desarrolladores de Aplicaciones sobre React 19: Lo que Necesitas Saber y Todo lo que Puedes Ignorar con Seguridad

Today's Talk focused on React 19 and its features, APIs, changes, and optimizations. The speaker emphasized the importance of migrating apps and building with React 19. They discussed the high-level features of React 19, including TypeScript emphasis and the testing library philosophy. The Talk also covered the APIs and integration of React 19, as well as the changes and type safety it brings. The speaker highlighted the improvements in useReducer types and the use of TypeScript. They introduced useActionState for migrating code and the useOptimistic hook for maintaining state immediacy. Real-time updates, action functions outside components, and the benefits of using the 'use' prefix in React were also discussed. The Talk touched on upgrade considerations, the role of RSEs and server actions in React, and the current state of RSC development. Overall, the Talk provided valuable insights into the new features and enhancements in React 19 and their impact on the development process.

React 19 introduces a huge number of new capabilities and APIs. So, what do you need? What can you implement today? And what should leave for framework authors to integrate? Even if you don't plan to embrace Server Components, there are new capabilities in React 19 to improve speed, clarify code, and even eliminate long standing dependencies. In this practical and progressive overview, you'll learn everything you need to be prepared for a React 19 upgrade.

An App Developer's Guide to React 19: What You Need to Know and Everything You Can Safely Ignore

Michael Chan

Los flujos de trabajo de diseño a veces pueden estar en desacuerdo con el desarrollo, pero establecer patrones comunes entre disciplinas puede sentar las bases para la automatización y permitir que los equipos diseñen y lancen más rápido. Figma te permite obtener lo que necesitas del diseño y volver a escribir código, ya sea construyendo front-end por primera vez o construyendo con un sistema de diseño reutilizable en tu base de código.

Alineación de Patrones entre Diseño y Desarrollo

I'm Jake, a developer advocate at Figma, and today I'll be discussing aligning patterns between design and development. Collaboration between designers and developers requires recognizing our different perspectives. The goal is to close the gap between design and development, but this is often aspirational. The optimal path between design and development is somewhere in between, depending on factors like friction or waves. By recognizing each other's areas of resistance, we can find ways to make collaboration more effective. Figma's Code Connect fills the gap between Figma component logic and code logic by allowing teams to publish code-based informed component code snippets. CodeConnect currently supports HTML, Web Components, Angular, Vue, React, SwiftUI, and Jetpack Compose, and seeks to support more languages.

Design workflows can sometimes be at odds with development—but establishing common patterns between disciplines can set the foundation for automation and enable teams to design and ship faster. Figma allows you to get what you need from design and get back to writing code—whether that’s building front-end for the first time, or building with a reusable design system in your code base.

Aligning Patterns Across Design and Development

Jake Albaugh

Explora los Componentes del Servidor a través de la lente de Componentes de IU reutilizables, donde todo "depende" de los requisitos individuales del caso de uso y las necesidades individuales de la aplicación. En lugar de luchar entre 'servidor' y 'cliente', tengamos lo mejor de ambos mundos.

Componentes React Polimórficos para el Cliente y el Servidor

Hi, my name is Kirill and I have a little obsession with UI components. Let's talk React, specifically React 19 Server Components. I will show you how to build a polymorphic data table using server components. We explore mixing server and client components and applying the composition pattern. We discuss polymorphic components and separating client logic to render custom components without breaking client functionality. The component can be used in different environments, morphing into server or client components accordingly. This talk focuses on building a polymorphic component with minimal bundle size and access to both server and client APIs.

Explore Server Components through the lens of reusable UI Component, where everything "depends" on the individual requirements of the use-case and individual application needs. Instead of fighting over 'server' vs 'client' - let's have the best of both worlds.

Polymorphic React Components for Both the Client and the Server

Construir módulos C++ para React Native es más fácil de lo que podrías pensar (si sabes cómo). En esta charla compartiré las mejores prácticas actuales sobre cómo iniciar los módulos nativos C++ para React Native.

Construcción de módulos nativos C++ / JSI para React Native en 2024

In this talk, the speaker discusses the process of building C++ native modules for React Native. They explain that native modules allow for tighter platform integration and access to platform-independent performance code, but come with trade-offs such as increased build times and potential issues with crashes and package dependencies. The speaker clarifies the differences between the old and new architecture of React Native, highlighting the introduction of the JavaScript interface (JSI) and its benefits. They also explore alternative React Native architecture options, including TurboNativeModules and LegacyNativeModules. The speaker discusses the challenges of working with legacy native modules and the benefits of using NitroModules and pre-building native code. They conclude with recommendations for using Nitro modules, pre-building, and utilizing a compiler cache to optimize build times.

Building C++ modules for React Native is easier than you might think (if you know how). In this talk I’ll be sharing the current state best practices on bootstrapping of native C++ modules for React Native!

React Summit US 2024

The biggest React conference in the US