Name: React Summit US 2023
Start: 2023-11-13T13:00:00.000Z
End: 2023-11-15T22:30:00.000Z

Tony Alicea

Taz Singh

Lera

James Swinton-Bland

  Neha  Seth

Kræn Hansen

Daniel Afonso

Shivay Lamba

Irina Baeva

Aleksei Podgaev

JSNation Conference 🗓 June 1-5, 2023

Daria Shabala

Seungho Park

Naman Goel

Chris Griffing

Stephen Cooper

Medhat Dawoud

Lenz Weber-Tronic

Varun

Joanna Otmianowska

Nick Taylor

Jerel Miller

Maurice de Beijer

Abhijeet Prasad

Nitya Narasimhan

Monica Powell

Seth Webster

Giulio Zausa

Vitor Alencar

Jeroen van Wissen

Jordan Newland

Charles

David Pugh

TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos. Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.

Dominando conceptos avanzados en TypeScript

The Workshop covers advanced concepts in TypeScript, such as strict types and type guards. It explores the use of development tools and the advantages of using TypeScript in software development. The Workshop also delves into mapping union types and object types, as well as keywords and conditional types. Bug fixes and type validation are discussed, along with recursive parsing and entity validation. The Workshop concludes with a final bug fix and key takeaways for using TypeScript effectively.

TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects. You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.

Mastering advanced concepts in TypeScript

Jiri Lojda

Cuando se trata de construir interfaces caprichosas, React es un aliado sorprendentemente capaz. En esta charla, te mostraré cómo uso React para orquestar interacciones complejas al profundizar en algunos ejemplos de mi blog.

El Potencial Caprichoso de los Marcos de Trabajo de JavaScript

The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.

When it comes to building whimsical interfaces, React is a surprisingly capable ally. In this talk, I'll show you how I use React to orchestrate complex interactions by digging into some examples from my blog.

The Whimsical Potential of JavaScript Frameworks

Josh Comeau

El desarrollo web moderno es fantástico. ¡Hay tantas herramientas geniales disponibles! El desarrollo web moderno es agotador. ¡Hay tantas herramientas geniales disponibles! Cada uno de estos sentimientos es cierto. Lo que es genial es que la mayoría de las veces, es difícil tomar una decisión que sea incorrecta. En serio. Los compromisos de la mayoría de los marcos y herramientas que podrías usar para construir tu aplicación se ajustan a las limitaciones de la gran mayoría de las aplicaciones. A pesar de esto, los ingenieros luchan constantemente con la parálisis del análisis.Hablemos de esto, y de una solución en la que estoy trabajando para ello.

El Epic Stack

This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.

Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

The Epic Stack

Kent C. Dodds

Estamos observando un cambio generacional hacia la derecha en la aplicación de la IA, impulsado por las capacidades emergentes y la disponibilidad de modelos de fundación de código abierto/API. Una amplia gama de tareas de IA que solían requerir 5 años y un equipo de investigación para lograr en 2013, ahora sólo requieren documentación de API y una tarde libre en 2023. Las capacidades emergentes están creando un nuevo título: para manejarlas, tendremos que ir más allá del Ingeniero de Prompts y escribir *software*. ¡Exploremos la amplia gama de nuevas oportunidades en la era del Software 3.0!

El Ascenso del Ingeniero de IA

The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.

We are observing a once in a generation “shift right” of applied AI, fueled by the emergent capabilities and open source/API availability of Foundation Models. A wide range of AI tasks that used to take 5 years and a research team to accomplish in 2013, now just require API docs and a spare afternoon in 2023. Emergent capabilities are creating an emerging title: to wield them, we'll have to go beyond the Prompt Engineer and write *software*. Let's explore the wide array of new opportunities in the age of Software 3.0!

The Rise of the AI Engineer

Shawn Swyx Wang

Un vistazo detrás de las escenas al diseño y desarrollo de los nuevos documentos de React en react.dev. El nuevo react.dev se lanzó este año introduciendo nuevas metodologías como desafíos y cajas de arena interactivas y características de inclusividad sutiles, como el "tono internacional" y ejemplos culturalmente agnósticos. Los nuevos documentos no solo han cambiado la forma en que las personas aprenden React, sino que también han inspirado cómo pensamos sobre la educación de los desarrolladores como comunidad. En esta charla, aprenderá cómo el equipo de React y algunos miembros ambiciosos de la comunidad hicieron que los "documentos de React rock" para una generación de desarrolladores de front end y cómo estos nuevos patrones y técnicas establecidas se pueden aplicar en sus proyectos favoritos.

Puerta de entrada a React: La historia de React.dev

The Talk discusses the journey of improving React and React Native documentation, including the addition of interactive code sandboxes and visual content. The focus was on creating a more accessible and engaging learning experience for developers. The Talk also emphasizes the importance of building a human API through well-designed documentation. It provides tips for building effective documentation sites and highlights the benefits of contributing to open source projects. The potential impact of AI on React development is mentioned, with the recognition that human engineers are still essential.

A behind the scenes look at the design and development of the all-new React docs at react.dev. The new react.dev launched this year introducing new methodologies like challenges and interactive sandboxes and subtle inclusivity features, like "international tone" and culturally agnostic examples. Not only have the new docs changed how people learn React, they've inspired how we think about developer education as a community. In this talk, you will learn how the React team and some ambitious community members made the "React docs rock" for a generation of front end developers and how these new patterns and established techniques can be applied in your favorite projects.

Gateway to React: The React.dev Story

Rachel Nabors

En los 10 años que React ha estado presente, hemos visto un progreso sin precedentes en la web. Los navegadores han crecido en capacidades a pasos agigantados, las herramientas explotaron y los marcos de trabajo surgieron lentamente para convertirse en tecnología cotidiana. Pero así como cambió la web, también lo hicieron los usuarios de la web Y sus necesidades. Los ingenieros de rendimiento han monitoreado el uso lujoso y liberal de los marcos de trabajo, resultando en un perjuicio para los usuarios Y sus experiencias de usuario. "R3ACT" es una charla que descubrirá y discutirá algunos peligros de rendimiento tal como aparecen en la web, teniendo en cuenta a React, respaldado por datos de laboratorio y rum.

R3ACT: Una mirada aterradora a las cifras de rendimiento

This Talk on web performance and React explores various metrics such as time to first bite, largest contentful paint, cumulative layout shift, and first input delay. It highlights the challenges of JavaScript in impacting total blocking time and user experience. Mobile usage and device performance are discussed, along with the importance of measuring and improving page performance. The speaker also mentions the abundance of technologies in today's web and emphasizes the need to prioritize user experience over sending excessive JavaScript.

In the 10 yrs that React has been present, we've seen an unprecedented amount of progress on the web. The browsers have grown in capabilities by leaps and bounds, tooling exploded and frameworks slowly emerged to become quotidian technology. But just as the web changed, so did users of the web AND their needs. Performance engineers have monitored the lavish and liberal use of frameworks, resulting in the disservice to users AND their user experiences. "R3ACT" is talk that will uncover and discuss some performance perils as they appear on the web, with React in mind, supported by lab and rum data.

R3ACT: A Frightening Look At Performance Figures

Henri Helvetica

React Server Components Panel Discussion

Panel discussion on React Server components, including benefits, considerations, and importance for React developers. Emphasis on leveraging server components in new applications and existing frameworks. Exploration of server actions, partial pre-rendering, simplification of data fetching with RSE, challenges, limitations, and harmonizing client-server architectures with React Server Components. Integration of client and server actions, addressing tool complexity, challenges in server component adoption, hiring mindset, full-stack development, technology advancements, and the evolution of technology capabilities.

Tom Preston-Werner

Ben Holmes

Kathryn Middleton 

Matt Carroll

Andrew Clark

Esta masterclass te guiará a través del ciclo de vida del desarrollo de productos para crear una aplicación web del mundo real. Aprenderás sobre los Componentes del Servidor React, construyendo un sistema de diseño dentro de Storybook, y utilizando el desarrollo frontend para acercarte a convertirte en un desarrollador full-stack. La masterclass cubrirá el aumento de la confianza en tu aplicación con pruebas unitarias e implementando autenticación y autorización. Tendrás la oportunidad de trabajar a través de las características del producto y examinar un proyecto real de RedwoodJS, obteniendo valiosa experiencia en el desarrollo de productos del mundo real. RedwoodJS hace que sea simple acercarse al desarrollo full-stack, y esta masterclass te dará las habilidades que necesitas para crear tus propias aplicaciones web del mundo real.

La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack

Today's Workshop focused on RedwoodJS, a full-stack framework that makes it easy to develop web applications. The Workshop covered topics such as setting up a Redwood project, installing Tailwind CSS, using Storybook for component development, writing tests, setting up database relationships with Prisma, using GraphQL to access the database, and exploring React Server Components. The Workshop also showcased demos of creating links, refreshing pages, and using React Server Components for AI integration. Overall, the Workshop provided a comprehensive overview of RedwoodJS and its features.

This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.

The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development

Amy Dutton

En esta charla, exploraremos la poderosa característica de seguridad de la Política de Seguridad de Contenido (CSP) y cómo se puede implementar en Next.js para reforzar las defensas de tu sitio web contra ataques web comunes como Cross-Site Scripting (XSS) e inyección de datos. Cubriremos los conceptos básicos de CSP, sus beneficios y las mejores prácticas para implementarlo en Next.js. Además, compartiremos algunas herramientas para evaluar y probar tu política. Al final de esta charla, tendrás una sólida comprensión de cómo mejorar la seguridad de tu sitio web con CSP y proteger a tus usuarios de las siempre presentes amenazas de la web moderna.

Política de Seguridad de Contenido con Next.js: Mejorando la Seguridad de tu Sitio Web

Lucas Estevão, a Principal UI Engineer and Technical Manager at Avenue Code, discusses how to implement Content Security Policy (CSP) with Next.js to enhance website security. He explains that CSP is a security layer that protects against cross-site scripting and data injection attacks by restricting browser functionality. The talk covers adding CSP to an XJS application using meta tags or headers, and demonstrates the use of the 'nonce' attribute for allowing inline scripts securely. Estevão also highlights the importance of using content security reports to identify and improve application security.

In this talk, we'll explore the powerful security feature of Content Security Policy (CSP) and how it can be implemented in Next.js to bolster your website's defenses against common web attacks like Cross-Site Scripting (XSS) and data injection. We'll cover the basics of CSP, its benefits, and best practices for implementing it in Next.js.  Additionally, we'll share some tools to evaluate and test your policy. By the end of this talk, you'll have a solid understanding of how to level up your website's security with CSP and protect your users from the ever-present threats of the modern web.

Content Security Policy with Next.js: Leveling Up your Website's Security

Lucas Estevão

El prop drilling está bien. La duplicación es genial. Las funciones largas son amor. Hablamos mucho sobre el mal código complicado porque es fácil ver el problema. Pero la investigación muestra que los ingenieros pueden trabajar bien con el mal código autónomo. Lo que realmente los confunde es algo completamente diferente: la complejidad arquitectónica. La complejidad arquitectónica hace que tu código sea difícil de trabajar, causa 3 veces más errores, reduce a la mitad la productividad y puede incluso hacer que los desarrolladores abandonen por frustración. En esta charla exploramos lo que puedes hacer.

Olvida el mal código, concéntrate en el sistema

Setting up the system and separating concerns are important in software development. Modular construction and prefab units are a new trend that makes construction quicker and easier. Architectural complexity can lead to a drop in productivity and an increase in defects. Measuring architectural complexity can help identify natural modules in the code. Best practices for avoiding architectural complexity include organizing code by business domain and using prop drilling. Atomic design and organizing a monorepo are recommended approaches for managing architectural complexity.

Prop drilling is fine. Duplication is great. Long functions are love. We talk a lot about bad complicated code because it’s easy to see the problem. But research shows engineers can work around self-contained bad code just fine. What really trips them up is something else entirely – architectural complexity. Architectural complexity makes your code hard to work with, causes 3x more bugs, halves productivity, and may even cause devs to ragequit. In this talk we explore what you can do.

Forget Bad Code, Focus on the System

Swizec Teller

Los componentes de servidor React (RSCs) son un gran cambio de paradigma para React. Incluso podrías preguntarte si NextJS y los componentes de servidor son lo mismo (spoiler: ¡no lo son!) Esta charla desmitifica cómo los RSCs *realmente* funcionan fuera del marco. Construiremos nuestro propio servidor Node, conectaremos el renderizador RSC a mano, y entenderemos la lógica de agrupación y enrutamiento para enviar un componente de servidor a tu navegador. Sí, todo con codificación en vivo. ¿Qué podría salir mal...?

Componentes de Servidor React desde Cero

This Talk introduces React Server Components and provides a step-by-step guide on building and rendering them. It explores the capabilities of server components, including interactivity and streaming. The Talk also covers the process of incorporating client-side rendering and the challenges of bundling and mapping client components. Additionally, it discusses the importance of supporting React Server Components and the ongoing efforts to integrate them with different bundlers.

React server components (RSCs) are a huge paradigm shift for React. You might even ask if NextJS and server components are the same thing (spoiler: they're not!) This talk demystifies how RSCs *really* work outside the framework. We'll build our own Node server, hook up the RSC renderer by hand, and understand the bundling and routing logic to ship a server component to your browser. Yes, all with live coding. What could go wrong...?

React Server Components from Scratch

Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend. Nivel de la masterclass: Intermedio

Monitoreo 101 para Desarrolladores de React

Welcome to Workshop Monitoring 101 for React Developers. Learn how to create a Sentry project, handle errors, use collaboration tools, set up alerts, and explore distributed tracing. Set up source maps and wizards to get additional information about errors. Add event context and custom tags to identify users triggering events. Configure custom tags in Sentry to aggregate and filter errors. Explore alerts, issue assignments, and integrations with GitHub. Implement distributed tracing to follow the execution of requests and identify performance bottlenecks. Connect the client-side and back-end using Sentry's trace ID and transaction. Use session replay to debug applications and improve user experience.

If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.  Workshop level: Intermediate

Monitoring 101 for React Developers 

Lazar Nikolov

Sarah Guthals

¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React. Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid. Prerrequisitos: React y JavaScript básicos Nivel de la masterclass: Principiante

Construye un potente DataGrid en pocas horas con Ag Grid

AG Grid is a powerful JavaScript grid used in various applications. It can handle millions of rows of data and supports Excel-like functionality. The most important construct in AG Grid is the column definition, which instructs AG Grid on how to represent properties in the data set. AG Grid provides sorting and filtering options, as well as the ability to customize cell rendering and editing. Styling cells and rows in AG Grid can be done using cell styles, cell classes, or cell class rules. AG Grid also offers customization options with CSS variables, SAS rules, and module system for bundle size control.

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. We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid. Prerequisites: Basic React and JavaScript Workshop level: Beginner

Build a powerful DataGrid in few hours with Ag Grid

Mike Ryan

Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas? Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios. En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.

De Todo App a B2B SaaS con Next.js y Clerk

The workshop focuses on building a basic Todo application and transforming it into a fully functioning SaaS product using modern developer tools. Dev tools like Next.js, Vercel, Clerc, PlanetScale, and Stripe are used to simplify the development process. The workshop covers topics such as fixing issues, adding interactivity and database integration, implementing authentication and payment, customizing Clerk components, adding premium payment plans with Stripe integration, and implementing multi-tenancy features. Participants are encouraged to provide feedback and share their projects built with Clerk.

If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies? Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users. In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.

From Todo App to B2B SaaS with Next.js and Clerk

Dev Agrawal

El ecosistema de desarrolladores siempre está avanzando rápidamente y este año no ha sido una excepción. Los Componentes de Servidor React pueden ofrecer una mejora significativa a la experiencia del desarrollador y al rendimiento de la aplicación. Pero creo que es justo decir que este nuevo paradigma de servidor primero puede ser complicado de entender!En la primera mitad de esta masterclass, exploraremos los Componentes de Servidor React desde cero: construyendo nuestro propio mini marco meta para ayudarnos a entender cómo funcionan los RSCs. Descubriremos exactamente qué se produce en una construcción RSC y conectaremos esas piezas para formar una aplicación completa.A continuación, ¡lo desplegaremos! Cloudflare también ha tenido un año ocupado — Smart Placement, en particular, es una nueva tecnología que hemos desarrollado que se ajusta perfectamente al modelo RSC. Exploraremos por qué eso tiene sentido para nuestra aplicación de masterclass, y realmente lo desplegaremos en la Plataforma de Desarrolladores de Cloudflare.Finalmente, ampliaremos un poco más nuestra aplicación, utilizando D1 (nuestra base de datos SQL sin servidor) para mostrar realmente el poder del Componente de Servidor React cuando se combina con Smart Placement.Deberías salir de esta masterclass con una mayor comprensión de cómo funcionan los Componentes de Servidor React (tanto detrás de las escenas como también cómo tú como desarrollador puedes usarlos día a día), así como una visión de algunos de los nuevos patrones de despliegue que ahora son posibles después de las recientes innovaciones en el espacio de la plataforma.

Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)

This workshop on React server components covers client-side rendering, server-side rendering with React and CloudFlare workers, and the use of workers for server-side rendering. It introduces the concepts of React server components, suspense, and the regional worker. The workshop also discusses the responsibilities of the global and region workers, optimizing bundle size, delivering HTML, and setting up a database. Smart placement is highlighted as a way to improve worker performance.

The developer ecosystem is always moving fast and this year has proved no exception. React Server Components can offer a significant improvement to developer experience and to application performance. But I think it's fair to say that this new server-first paradigm can be tricky to wrap your head around!In the first half of this workshop, we'll explore React Server Components from the ground-up: building our own mini meta-framework to help us understand how RSCs work. We'll discover exactly what is produced by an RSC build and we'll connect those pieces together to form a full application.Next, we'll deploy it! Cloudflare have also had a busy year too — Smart Placement, in particular, is a new technology that we've developed which fits the RSC model perfectly. We'll explore why that makes sense for our workshop app, and we'll actually deploy it onto the Cloudflare Developer Platform.Finally, we'll build out our app a little further, using D1 (our serverless SQL database) to really show off the React Server Component's power when combined with Smart Placement.You should come away from this workshop with a greater understanding of how React Server Components work (both behind-the-scenes and also how you as a developer can use them day-to-day), as well as insight into some of the new deployment patterns that are now possible after recent innovations in the platform space.

Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)

 Greg Brimble

React continúa evolucionando su capacidad beta, los Componentes de Servidor de React, y continúan desarrollándolos en asociación con marcos como NextJS.En esta masterclass, los asistentes aprenderán qué son los Componentes de Servidor de React, cómo construirlos y usarlos eficazmente en NextJS, y se centrarán en una de las principales ventajas de React/NextJS: la reutilización a través de componentes.También cubriremos tecnologías beta relacionadas habilitadas por el directorio `app`, como los layouts anidados y las acciones del servidor (capacidad alfa/experimental).¡Únete a nosotros para esta masterclass práctica de 120 minutos!Tecnologías: React, JavaScript/Typescript, NextJS, Miro

Construyendo Componentes de Servidor Reutilizables en NextJS

Today's Workshop focused on using React Server Components in Next.js to optimize app performance. The workshop covered topics such as using client and server components together, app bootstrap, using the Miro API, setting up credentials and layout structure, working with layout and page components, creating board links and layout, understanding server rendering and Miro board, fetching data and server performance, working with Next.js routes and board metadata, debugging, getting data from the board, usage of Miro in real-world apps, and the conclusion with helpful resources.

React continues to evolve their beta capability, React Server Components, and they're continuing to further develop them in partnership with frameworks like NextJS.In this workshop, attendees will learn what React Server Components are, how to effectively build and use them in NextJS, and focus on one of the major advantages of React/NextJS: reusability through components.We will also cover related beta technologies enabled by the `app` directory, such as nested layouts and server actions (alpha/experimental capability).Join us for this hands-on, 120 minute workshop!Technologies: React, JavaScript/Typescript, NextJS, Miro

Building Reusable Server Components in NextJS

Will Bishop

Mettin Parzinski

En esta charla, Tony muestra cómo un enfoque de autoría y HTML semántico primero para el trabajo de plantillas JSX conduce a componentes de interfaz de usuario más legibles, mantenibles y accesibles. Demuestra cómo pensar en implementar un prototipo de interfaz de usuario de una manera semántica, autoría de HTML antes de los visuales. Muestra cómo el marcado accesible mejora el rendimiento, reduce el tamaño del DOM, minimiza el tiempo dedicado a CSS y reduce la carga cognitiva no solo para los desarrolladores, sino también para todos nuestros usuarios, sin importar cómo consuman nuestros sitios y aplicaciones.

Autoría de HTML en un Mundo JavaScript

This Talk by Tony Alicia focuses on authoring HTML in a JavaScript world. The speaker challenges developers to change their approach to building React components by starting with HTML first. By authoring HTML in a semantic way, readability and maintainability can be improved. Well-authored HTML provides better understanding of content and improves accessibility. It also has performance benefits by reducing DOM size. Investing time in HTML can save time and make applications more future-proof.

In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.

Authoring HTML in a JavaScript World

Desata el poder de la IA en tu documentación con esta masterclass práctica. En esta sesión interactiva, te guiaré a través del proceso de crear un sitio de documentación dinámica, potenciado con la inteligencia de la IA (ChatGPT).Imagina un mundo donde no tienes que buscar en páginas de documentación para encontrar esa línea de código esquiva. Con esta solución impulsada por la IA, obtendrás respuestas precisas, resúmenes concisos y enlaces relevantes para una exploración más profunda, todo al alcance de tu mano.Esta masterclass no es solo sobre aprender; es sobre hacer. Ensuciarás tus manos con algunas de las tecnologías más buscadas en el mercado hoy en día: Next.js, shadcn-ui, OpenAI, LangChain y MongoDB Vector Search.

Deja que la IA Sea Tus Documentos

This workshop explores the demand for building intelligence into applications and the limitations of language models. It covers the integration of GPT with React apps using retrieval augmented generation (RAG) and vector search. The workshop provides guidance on setting up MongoDB Atlas and OpenAI, creating embeddings, and configuring the application. Troubleshooting tips and code examples are also provided. Overall, the workshop emphasizes the importance of prompt engineering, semantic search, and personalized results in AI-powered applications.

Unleash the power of AI in your documentation with this hands-on workshop. In this interactive session, I'll guide you through the process of creating a dynamic documentation site, supercharged with the intelligence of AI (ChatGPT).Imagine a world where you don't have to sift through pages of documentation to find that elusive line of code. With this AI-powered solution, you'll get precise answers, succinct summaries, and relevant links for deeper exploration, all at your fingertips.This workshop isn't just about learning; it's about doing. You'll get your hands dirty with some of the most sought-after technologies in the market today: Next.js, shadcn-ui, OpenAI, LangChain, and MongoDB Vector Search.

Let AI Be Your Docs

Jesse Hall

¿Tú o un ser querido sufren de la práctica demasiado común de 'useEffect'? ¿Has vuelto a renderizar más veces de las que puedes contar? ¿Estás listo para revolucionar tu código React? Explora cómo optimizar el rendimiento, simplificar tu código y reducir errores desafiando el uso convencional de 'useEffect'. Inspirado por los propios Documentos de React, esta charla te guiará a través de escenarios comunes de 'useEffect', demostrando alternativas poderosas para mejorar tu base de código. ¡Abraza la simplicidad y eleva tus habilidades de desarrollo de React con nosotros! "Puede que no necesites un efecto... Eliminar los Efectos innecesarios hará que tu código sea más fácil de seguir, más rápido de ejecutar y menos propenso a errores." Lo creas o no, ¡esa introducción se ha tomado directamente de los Documentos de React!

Rompiendo el hábito de 'useEffect'

Mike North discusses breaking the use-effect habit in React and explores alternative approaches to improve maintainability, flexibility, and code simplicity.

Do you or a loved one suffer from the all to common practice of 'useEffect'? Have you re-rendered more times than you can count? Are you ready to revolutionize your React code? Explore how to optimize performance, streamline your code, and reduce errors by challenging the conventional use of 'useEffect'. Inspired by the React Docs themselves, this talk will guide you through common 'useEffect' scenarios, demonstrating powerful alternatives to enhance your codebase. Embrace simplicity and elevate your React development skills with us! "You might not need an effect... Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone." Believe it or not, that intro is taken straight from the React Docs!

Breaking the 'useEffect' Habit

Mike North

El proyecto comenzó de maravilla: el equipo estaba motivado, avanzando rápidamente y lanzando funciones antes de lo previsto. Pero poco a poco, la complejidad se fue infiltrando. Ahora, implementar pequeños cambios lleva una eternidad, la deuda técnica se está acumulando a un ritmo alarmante y todos están perdiendo la confianza de que el proyecto se completará alguna vez. Bienvenidos al medio desordenado. Tomando ejemplos de proyectos reales que se lanzaron demasiado tarde, exploraremos los síntomas y las causas de la complejidad en las aplicaciones React grandes, y compartiremos consejos y estrategias para lidiar con ella antes de que se apodere de tu base de código.

El Medio Desordenado — Navegando la Complejidad en Aplicaciones React Grandes

Managing complexity in large React applications is a challenge, as it tends to grow exponentially over time. Component composition is a key technique that allows for flexibility in React applications, but too much composition can make components harder to use. Managing complexity and reducing cognitive load is crucial, and strategies such as controlling abstraction evolution and minimizing information needed for simple changes can help. Simplicity is difficult, but important in slowing down the growth of complexity.

The project started out great—the team was motivated, moving fast, and shipping features ahead of schedule. But little by little, complexity found its way in. Implementing small changes takes forever now, tech debt is piling up at an alarming rate, and everyone is losing confidence that the project will ever get done. Welcome to the messy middle.  Taking examples from real-world projects that shipped way too late, we'll explore the symptoms and causes of complexity in large React applications, and we'll share tips and strategies for dealing with it before it takes over your codebase.

The Messy Middle — Navigating Complexity in Large React Applications

Maxi Ferreira

La mayoría de los desarrolladores de CSS hoy en día escriben estilos visuales en términos de lo que literalmente ves: valores de color exactos, números de tamaño, y así sucesivamente. Pero, ¿y si pudieras escribir estilos como una función de cómo encajan en tu sistema de diseño? ¿Y si pudieras obtener seguridad de tipo al especificar y usar esos valores, incluyendo en props responsivas? Esta charla se sumergirá en algunas de las características clave y defectos en muchos constructores de sistemas de diseño hoy en día como Chakra UI y Tailwind. Estableceremos cuáles deberían ser los mejores próximos pasos para los sistemas de diseño con APIs de TypeScript seguras por tipo y rendimiento tanto para páginas preconstruidas como en tiempo de ejecución.

Sistemas de Estilo Seguros por Tipo: El Futuro de CSS

This Talk explores the evolution of CSS and the development of style systems in software engineering. It discusses the limitations of CSS and the need for frameworks, pre-processors, and JavaScript to enhance styling capabilities. The Talk highlights different approaches to CSS styling, including libraries like Tailwind and Chakra UI. It also introduces innovative style systems like Vanilla Extract and Rainbow Sprinkles, which offer optimized CSS classes and type safety. The speaker emphasizes the importance of design systems and encourages developers to explore and consider the strengths and weaknesses of different style systems.

Most CSS developers today write visual styles in terms of what you literally see: exact color values, size numbers, and so on. But what if you could write styles as a function of how they fit into your design system? And what if you could get type safety in specifying and using those values, including in responsive props? This talk will dive into some of the key features and flaws in many design system builders today such as Chakra UI and Tailwind. We'll establish what the best next steps for design systems should be with type-safe TypeScript APIs and performance both for prebuilt pages and at runtime.

Type-Safe Style Systems: The Future of CSS

Josh Goldberg

Para muchos desarrolladores de aplicaciones, GraphQL es fundamental para construir grandes experiencias de usuario. Con la introducción de React Suspense, los desarrolladores tienen una forma ergonómica de orquestar estados de carga para mejorar el status quo. En esta charla, el equipo de Apollo Client te mostrará cómo construimos una aplicación no trivial utilizando las nuevas características de Suspense de Apollo Client, características de GraphQL como la directiva @defer, y cómo combinarlas para construir grandes experiencias de usuario en tus propias aplicaciones.

Cómo usar Suspense y GraphQL con Apollo para construir grandes experiencias de usuario

Today's Talk is about using suspense and GraphQL with Apollo Client to create smooth user experiences. The Talk covers the introduction and power of suspense, the new Used Suspense Query hook in Apollo Client, updating components with suspense, using suspense boundaries and tradeoffs, optimizing playlist fetching with GraphQL, loading more tracks and using transitions, and concluding remarks and future developments.

For many app developers, GraphQL is instrumental in building great user experiences. With the introduction of React Suspense, developers have an ergonomic way to orchestrate loading states to improve upon the status quo.  In this talk, the Apollo Client team will show you how we built a non-trivial application using Apollo Client’s new Suspense features, GraphQL features like the @defer directive, and how to combine them to build great user experiences in your own apps.

How to Use Suspense and GraphQL with Apollo to Build Great User Experiences

Alessia Bellisario

¿Qué es suspense para la obtención de datos en React? ¿Por qué el modelo de React hace que la creación de solicitudes de red durante el renderizado sea tan difícil? ¿Por qué (según el conocimiento del presentador) ninguna biblioteca además de Relay admite esto, a pesar de su gran conveniencia?
 En esta charla, Robert discutirá cómo React renderiza componentes (especialmente con respecto a Suspense), y cómo construir una biblioteca de obtención de datos que funcione correctamente a la luz de esos comportamientos. Luego, con todas las piezas en su lugar, usaremos una biblioteca, @boulton/react-disposable-state, para crear nuestra propia obtención de datos compatible con suspense!

Suspense para la Obtención de Datos: Cómo Obtener Durante el Renderizado

This talk discusses the best practices for fetching data during the initial render of a component in React. It emphasizes the importance of fetching in advance and avoiding fetching twice. The talk also highlights the need for an external cache to store information about API calls and the use of a cleanup function to avoid memory leaks. Additionally, the speaker mentions their library, react-disposable-state, which can be used for making side effects during render.

What is suspense for data fetching in React? Why does React's model make creating network requests during render so difficult? Why does (to the presenter's knowledge) no library besides Relay support this, despite its sheer convenience?
 In this talk, Robert will discuss how React renders components (especially with regards to Suspense), and how to build a data-fetching library that functions correctly in light of those behaviors. Then, with all the pieces in place, we'll use a library, @boulton/react-disposable-state, to roll our own suspense-compatible data fetching!

Suspense for Data Fetching: How to Fetch During Render

Robert Balicki

En esta charla, los asistentes aprenderán cómo integrar el modelo de lenguaje GPT-4 de OpenAI en sus aplicaciones React, explorando casos de uso prácticos y estrategias de implementación para mejorar la experiencia del usuario y crear aplicaciones interactivas e inteligentes.

OpenAI en React: Integrando GPT-4 con Tu Aplicación React

AI is revolutionizing application development and can enhance React applications. Advancements in AI include batch AI, real-time AI, and generative AI. Language models have limitations in accessing real-time data. Retrieval Augmented Generation (RAG) uses vectors to enhance language models. Vector search capabilities improve GPT models by providing up-to-date information and access to private data. Technologies like Next.js, OpenAI, Lankchain, Versel AI SDK, and MongoDB are used to build smarter React apps. An AI-powered documentation site can be built using custom data and vector search. The talk concludes by emphasizing the importance of integrating AI seamlessly into user-centric platforms like React-based projects.

In this talk, attendees will learn how to integrate OpenAI's GPT-4 language model into their React applications, exploring practical use cases and implementation strategies to enhance user experience and create intelligent, interactive applications.

OpenAI in React: Integrating GPT-4 with Your React Application

En esta charla, exploraremos cómo Valtio puede simplificar la gestión de estado de tu React proporcionando una solución minimalista y de alto rendimiento. Cubriremos los fundamentos de Valtio, incluyendo cómo crear y actualizar una tienda y cómo acceder y modificar la tienda desde tus componentes. También nos adentraremos en algunas características avanzadas de Valtio, como la suscripción a cambios en la tienda, y el uso de la memorización para optimizar el rendimiento de tus componentes. Al final de esta charla, tendrás una sólida comprensión de cómo Valtio puede hacer que tu gestión de estado sea más eficiente y efectiva, permitiéndote crear aplicaciones escalables y mantenibles.

Gestión del Estado en React con Valtio

This is a short presentation on VALTEO, a proxy-based state management system that uses JavaScript's native idea of proxies to create observable and immutable state. The proxy tracks changes to the object and nested proxy objects, only re-rendering the component when a specific key changes. There is a gotcha with proxies in Valtio - avoid reassigning the proxy to a whole new object. Valtio integrates with Redux DevTools, making it even more powerful and convenient.

In this talk, we will explore how Valtio can simplify your React state management by providing a minimalist and performant solution. We will cover the basics of Valtio, including how to create and update a store and how to access and modify the store from your components. We will also dive into some advanced Valtio features, such as subscribing to changes in the store, andusing memoization to optimize your components' performanc. By the end of this talk, you will have a solid understanding of how Valtio can make your state management more efficient and effective, allowing you to create scalable and maintainable applications.

React State Management with Valtio 

Niya Panamdanam

¿Alguna vez has intentado navegar por tus sitios web favoritos con JS deshabilitado en tu navegador? Puede sentirse como cortar una línea de vida para internet. En lugar de interfaces amigables para el usuario, te enfrentas a una pared en blanco que dice “por favor, habilita JavaScript“ en el centro de ella. Pero no tiene por qué ser así.En esta charla, exploraremos técnicas para construir aplicaciones web modernas que pueden seguir funcionando en un entorno sin JS, y proporcionar una experiencia completa cuando JS está activado.

Opcional Javascript: Aplicaciones React modernas que funcionan sin JS

In this Talk, the speaker discusses the concept of building JavaScript optional applications, focusing on the use of tools like React server components, Next.js, remix, React Router, Astro, SolidStarts, and Weld. They explore various aspects such as building eCommerce apps, pagination, adding items to cart without JavaScript, and implementing features like card previews using HTML and CSS. The speaker also highlights the trade-offs and considerations when disabling JavaScript, maintaining cart items, and combining old and new ways of building applications.

Have you ever tried browsing your favorite websites with JS disabled in your browser? It can feel like cutting a lifeline for the internet. Instead of welcoming user-friendly interfaces you’re faced with a blank wall that says “please enable JavaScript“ in the center of it. But it doesn’t have to be that way. In this talk, we’ll explore techniques for building modern web applications that can remain functional in a JS-free environment, and provide a full experience when JS is turned on.

Javascript Optional: Modern React Applications That Work Without JS

Konstantin Lebedev

Los ASTs son prevalentes en todo lo que hacemos. ESLint, Typescript, etc nos permiten sumergirnos en nuestro código fuente de una manera con la que podríamos no estar familiarizados. Echemos un vistazo a cómo algunas herramientas modernas utilizan ASTs para mejorar nuestras vidas como desarrolladores. Algunas de las herramientas a cubrir incluyen: TS-Morph, Typescript, TreeSitter y ESlint. Dependiendo del tiempo, puedo profundizar en varias herramientas y patrones para trabajar con ASTs y cómo pueden encajar en cualquier flujo de trabajo de desarrollador moderno.

Los árboles no son solo follaje: ASTs y uso práctico

ASTs, or abstract syntax trees, are used by popular tools like Babel, TypeScript, ESlint, and Prettier to improve the developer experience. They have various use cases including compiling and code analysis. Editor tooling and writing tools can be enhanced using ASTs, with examples including formatting with Prettier, type annotations in JetBrains editors, and code mods for framework upgrades. Ts-morph is a useful tool for code transformations, while Tree Sitter is a portable tool that supports many languages and can be used to build IDEs or text editors in the browser.

ASTs are prevalent in everything we do. ESLint, Typescript, etc allow us to dive into our source code in a way we might not be familiar with. Let's take a look at how some modern tools use ASTs to improve our lives as developers. Some of the tools to be covered include: TS-Morph, Typescript, TreeSitter, and ESlint. Depending on time, I can dig into various tools and patterns for working with ASTs and how they can fit into any modern developer workflow.

Trees aren't just Foliage: ASTs and Practical Usage

Vamos a profundizar en el renderizado de React y evaluar la implicación del Renderizado Concurrente y la agrupación automática en el código que anteriormente dependía de la naturaleza sincrónica de v17. ¿Siempre mejora las cosas?
Con un estudio de caso del mundo real, evaluamos useSyncExternalStore y flushSync como herramientas para restaurar el renderizado sincrónico para evitar el “desgarro visual”. Trabajar a través de los compromisos de estos enfoques nos dará nuevas perspectivas sobre el renderizado de React y sugerencias sobre cómo podemos optimizar nuestras aplicaciones.

Renderizado: ¿Sincronizar o no sincronizar?

This Talk discusses rendering and synchronization in React 18. It addresses issues such as flashing rows and wiping out when scrolling. The use of usync-externalstore for concurrent reads and the potential misuse of APIs are explored. Debugging techniques using React Profiler and flush-sync are discussed. The talk also covers performance considerations for different machines and the importance of testing and considering alternative solutions.

Let’s dive deep into React rendering and evaluate the implication of Concurrent Rendering and automated batching on code that previously relied on the synchronous nature of v17. Does it always make things better?
With a real world case study, we evaluate useSyncExternalStore and flushSync as tools to restore synchronous rendering to avoid “visual tearing”. Working through the trade-offs of these approaches will give us new insights into React rendering and hints on how we can optimise our applications.

Rendering: To Sync or Not to Sync?

En esta charla cubriré varias estrategias y técnicas que puedes emplear para hacer que tus aplicaciones sean rápidas y mantener tus aplicaciones rápidas. Desde consejos y trucos sobre cómo medir el rendimiento, hasta estrategias arquitectónicas y trucos sucios y podridos.

Si no eres el primero, eres el último

Performance is a puzzle that requires different approaches for different problems and sites. User feedback is crucial in evaluating performance, rather than relying solely on metrics like Lighthouse scores. Measuring performance and identifying issues can be done through tools like the performance tab and user timings. Understanding the main thread and using tools like React Profiler and Chrome Tracing can provide insights into performance problems. Optimizing performance involves doing less work, avoiding main thread blocking, and considering options like virtualization and Canvas. Communicating the impact of optimization to leadership and exploring different uses of Canvas are also important topics discussed in the Talk.

In this talk I will be covering various strategies and techniques that you can employ to make your apps fast and keep your apps fast. From tips and tricks around measuring performance, to architectural strategy and dirty rotten tricks.

React Summit US 2023

The biggest React conference in the US