Name: React Summit 2024
Start: 2024-06-14T11:00:00.000Z
End: 2024-06-18T19:00:00.000Z

La Inteligencia Artificial (IA) es ahora imprescindible en el desarrollo de software, y la demanda de ingenieros en IA está aumentando rápidamente. Como desarrollador de React, es una buena oportunidad para crecer y expandirse. Muchos desarrolladores de React pueden preguntarse: '¿Qué necesito saber sobre IA? ¿Y tengo lo necesario?' Con la IA remodelando industrias, la presión para adaptarse y ampliar nuestras habilidades es palpable. La pregunta no es solo mantenerse relevante; se trata de aprovechar oportunidades sin precedentes en el desarrollo y la automatización. ¿Qué tal si aprender IA pudiera ayudarte a hacer más con React? Piensa en usar IA para ayudar con la codificación o para crear aplicaciones más inteligentes y rápidas. Esta charla te mostrará cómo empezar. En esta charla, desmitificaremos el papel de un ingeniero en IA y delinearemos las habilidades esenciales que los desarrolladores de React necesitan para ingresar a este campo en evolución.

IA para Desarrolladores de React: Oportunidades, Aprendizaje e Innovación

AI offers opportunities for React developers to code faster and automate tasks. Generative AI is a crucial area for developers to focus on. Working with AI APIs and RAGS can open up new possibilities for projects. Orchestration frameworks and tools like Lanchain and relevance help chain tasks together and work with different AI models. AI is a supplement to human capabilities and learning to code with AI can help developers push boundaries and become better.

Artificial Intelligence (AI) is now a must-have in software development, and the demand for AI engineers is rising through the roof. As a React developer, it is a good chance to grow and expand. Many React developers might wonder: “What do I need to know about AI? and do I have what it takes?” With AI reshaping industries, the pressure to adapt and expand our skillisets is palpable. The question isn’t just about staying relevant; it’s about seizing unprecedented opportunities in development and automation. What if learning AI could help you do more with React? Think about using AI to help with coding, or to make smarter apps faster. This talk will show you how to start. in this talk, we’ll demystify the role of an AI engineer and outline the essential skills React developers need to transition into this evolving field.

AI for React Developers: Opportunities, Learning, and Innovation

Alexandra Spalato

¿Tu aplicación React necesita mostrar eficientemente una gran cantidad de datos en una rejilla? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor rejilla JavaScript del mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la rejilla, la personalización y renderización de celdas, y más. Saldrás de este masterclass gratuito de 3 horas equipado con los conocimientos para implementar AG Grid en tu aplicación React.

Construye una Potente Rejilla de Datos con AG Grid

Welcome to the workshop! Today we'll be diving into AG Grid and React, covering features such as column definition, row data and sorting, cell rendering and customization, cell editing, and styling AG Grid. We'll also explore value getters, value formatters, cell renderers, and custom cell editors. AG Grid supports infinite row rendering and integrates seamlessly with Firebase for real-time data streaming. With themes and extensive customization options, AG Grid provides functionality and scalability for handling large datasets.

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

Build a Powerful Datagrid With AG Grid

Brian Love

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

Building Your Own Custom Type System

Kunal Dubey

La IA generativa está emocionando a los entusiastas de la tecnología y a las empresas con su vasto potencial. En esta sesión, presentaremos Retrieval Augmented Generation (RAG), un marco que proporciona contexto a los Modelos de Lenguaje Grande (LLMs) sin necesidad de volver a entrenarlos. Te guiaremos paso a paso en la construcción de tu propia aplicación RAG, culminando en un chatbot completamente funcional. Conceptos Clave: IA Generativa, Retrieval Augmented Generation Tecnologías: OpenAI, LangChain, AstraDB Vector Store, Streamlit, Langflow

Construyendo tu Aplicación de IA Generativa

Welcome to this online workshop where we will build our own chatbot with generative AI. Datastacks provides technologies for implementing generative AI applications, including AstraDB as a vector store for retrieval augmented generation. The build-your-own-Rack chatbot repository contains application iterations, each adding additional functionalities to create a fully functional chatbot with streaming capabilities. Implementing the first application with Streamlit involves drawing a UI and integrating it with OpenAI chat models. Deploy the workshop chatbot application in Streamlit and use Langflow to implement generative applications without coding.

Generative AI is exciting tech enthusiasts and businesses with its vast potential. In this session, we will introduce Retrieval Augmented Generation (RAG), a framework that provides context to Large Language Models (LLMs) without retraining them. We will guide you step-by-step in building your own RAG app, culminating in a fully functional chatbot. Key Concepts: Generative AI, Retrieval Augmented Generation Technologies: OpenAI, LangChain, AstraDB Vector Store, Streamlit, Langflow

Building Your Generative AI Application

Dieter Flick

Comprender los fundamentos de la tecnología NFT y su aplicación en fortalecer la seguridad web. A través de demostraciones prácticas y ejercicios prácticos, los asistentes aprenderán cómo integrar sin problemas mecanismos de control de acceso basados en NFT en sus proyectos de desarrollo front-end.

Cómo Construir Control de Acceso Front-End con NFTs

Today's workshop explores the concept of unlocking digital ownership through blockchain technology. NFTs are unique digital assets that provide transparency, immutability, and trust. The workshop covers topics such as wallet setup, securing wallets, obtaining test tokens, creating NFTs, deploying contracts, building front-end applications, granting access, and the possibilities of NFTs. The importance of transaction validation and the availability of alternative blockchains are also discussed.

Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.

How to Build Front-End Access Control with NFTs

Solange Gueiros

En este masterclass, configurarás un entorno de pila completa local y crearás una aplicación móvil React Native que se ejecuta en esa pila. Agenda:- Instalar el contenedor Docker de Oracle 23ai- Construir y ejecutar Parse Server con el nuevo adaptador de almacenamiento de Oracle- Construir y ejecutar una aplicación móvil React Native de Walking History en la pila Walking History es una aplicación React Native que te permite caminar por la ciudad de Nueva York (o simularlo en un emulador de dispositivos) y te muestra la atracción o punto de interés más cercano.

Crear una aplicación React Native de pila completa con Oracle 23ai

The Workshop introduces a new stack from Oracle for building React Native apps, with a focus on JSON and NoSQL development against the Oracle database. The stack includes an embassy server, Docker, Node.js, and a SQL client. New features in the database include property graphs, JSON relational duality, JavaScript stored procedures, and AI vector search. The workshop covers installation, server configuration, local testing, and frontend development. Opportunities for switching databases and using cloud code and spatial data are also mentioned.

In this workshop, you will set up a local full-stack environment and create a React Native Mobile app that runs against that stack.  Agenda:- Install Oracle 23ai Docker container- Build and run Parse Server with the new Oracle Storage Adapter - Build and run a Walking History React Native mobile app against the stack Walking History is a React Native application that allows you to walk around New York City (or simulate that in a device emulator) and it tells you about the closest attraction or point of interest.

Build a Full Stack React Native App with Oracle 23ai

Doug Drechsel

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

Facing Frontend's Existential Crisis

Ryan Carniato

Debate del Panel de React 19

The Talk revolves around React 19 and the React compiler, highlighting its new APIs, optimizations, and impact on frameworks like Next.js. The React compiler has undergone multiple iterations, resulting in improved performance and alignment with developers' expectations. The integration of React with Next.js simplifies rendering and offers free optimizations. There is excitement about the opt-in approach of React Server Components and the potential of underrated features like suspense and transitions. Overall, React's influence on the JavaScript ecosystem and UI libraries is acknowledged and appreciated.

React 19 Panel Discussion

Evan Bacon

Sathya Gunasekaran

Tim Neutkens

Brooks Lybrand 

Siempre he evitado intentar hacer ventas para Redux, y la verdad es que la mayor parte de mi tiempo se ha dedicado a decirle a la gente cuándo _no deberían_ usar Redux :) Pero todavía veo a muchas personas preguntando "_¿cuándo_ debería usar Redux?", y "¿cómo se compara Redux con $OTRA_HERRAMIENTA?". Así que, creo que vale la pena hacer una charla en la que cubra los beneficios reales y las razones para considerar el uso de Redux hoy en día.

Por qué deberías usar Redux en 2024

Mark Erickson explains the history, creation, evolution, and benefits of Redux. Redux was designed to make state updates and action history maintenance easy, incorporating functional programming principles. Redux Toolkit was created to simplify Redux usage. Redux is still a valid choice for its consistent pattern and separation of state from UI. The decision to use Redux depends on the specific use case and the need for centralized state management.

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

Why You Should Use Redux in 2024

Mark Erikson

No más cargadores, no más errores - Suspense ha revolucionado la forma en que los desarrolladores manejan operaciones asíncronas.Pero alguna vez te has preguntado qué magia permite que Suspense funcione? ¿Cómo sabe Suspense que tiene que mostrar un fallback porque va a ocurrir una consulta en un componente inferior?En esta charla, exploraremos el funcionamiento interno de Suspense para descubrir la magia que potencia uno de los componentes más queridos de React.

La Búsqueda del Suspense - Dentro de la Magia de React

This Talk explores the suspense component in React and its benefits in handling fetched data. It delves into the rendering process of React components and how suspense anticipates requests. The offscreen fiber is introduced as a hidden component that ensures state continuity. The Talk also discusses the usage of suspense for handling concurrent queries and throwing promises, as well as the integration of Redux and the upcoming changes in React 19. Overall, the Talk provides insights into the workings of suspense and its potential applications in software development.

No more loaders, no more errors - Suspense has revolutionized the way developers handle asynchronous operations.But have you ever wondered what magic enables Suspense to work? How does Suspense know it has to display a fallback because a query is going to happen in a component below?In this talk, we’ll explore the inner workings of Suspense to uncover the magic that empowers one of the most beloved components of React.

The Suspense Quest - Inside React's Magic

Charlotte Isambert

SolidStart es el Meta-Framework de pila completa del ecosistema SolidJS. Reúne múltiples herramientas y bibliotecas de manera componible para ofrecer bases altamente eficientes, comprensibles y escalables para aplicaciones web. Vamos a explorar cómo SolidStart resuelve problemas comunes de UX y DX para construir aplicaciones mejores.

SolidStart 1.0: Echando un vistazo bajo el capó

SolidStart is an efficient, unopinionated, and ergonomic full-stack framework that provides great defaults and flexibility. It includes features such as a bundler, a serializer, a server, and a router. The serializer, Seroval, enables streaming and real-time state synchronization between server and client. SolidStart offers powerful file routes, RPCs, and single-flight mutations. It is recommended for building UIs in full applications, Spark, single-page apps, and native apps.

SolidStart is the full stack Meta-Framework from the SolidJS ecosystem. It brings multiple tools and libraries together in a composable fashion to offer highly performant, understandable, and scalable foundations for web applications. Let's explore how SolidStart solves common UX and DX for building better apps.

SolidStart 1.0: Peeking Under the Hood

Atila Fassina

Esta charla ofrece una introducción suave a un nuevo paradigma de flujos de trabajo duraderos al guiar a la audiencia a través de un caso de uso común: una campaña de correo electrónico de incorporación de usuarios. Mostraré cómo los enfoques de bricolaje tienden a ser lentos e poco confiables, o requieren una inversión significativa de recursos. En cambio, al adoptar trabajos en segundo plano, puedes ofrecer una gran experiencia de usuario y operaciones sin estrés. Cada vez más empresas prefieren ciclos de desarrollo cortos y un enfoque ágil para la dotación de personal. Ser capaz de tener el control de los flujos de trabajo completos de principio a fin convierte a los equipos de desarrollo (anteriormente) de front-end en equipos de producto empoderados.

Mejora el rendimiento de tu aplicación con trabajos en segundo plano

This is a background jobs one-on-one talk focusing on the challenges and benefits of using background jobs in software development. It explores the complexity of software development and the impact of distributed applications. The talk highlights the use of Ingest as a reliable solution for executing functions in the background and building drip campaigns. It emphasizes the importance of reliability and architectural choices in software development and discusses the features and capabilities of Ingest, including local development, handling failures, and data retrieval.

This talk offers a gentle introduction to a new paradigm of durable workflows by walking the audience through a common use case: user onboarding email campaign. I’ll show how the DIY approaches tend to be slow and unreliable — or require significant investment of resources. Instead, by embracing background jobs you can deliver a great User Experience and stress-free ops. More and more companies favor short development cycles and lean approach to headcount. Being able to own entire business workflows end-to-end turns (formerly) front-end teams into empowered product teams.

Improve Your App Performance With Background Jobs

Sylwia Vargas

¿Qué hay de nuevo en Astro? Escucha a Fred K. Schott (co-creador y mantenedor principal de Astro) hablar sobre la dirección futura del marco de trabajo web impulsado por contenido de Astro. Con nuevas noticias y demostraciones que se basan en tres de los primitivos fundamentales de Astro: Islas, Colecciones de Contenido y Transiciones de Vista.

Qué hay de nuevo en Astro

The Talk revolves around the future of JavaScript, React, and Astro. Astro focuses on performance and delivering a better developer and user experience, particularly for content sites. It introduces view transitions, islands, and content as primitives for the next decade of web development. Astro also emphasizes zero JavaScript transitions, native transitions, and a unified content layer. It aims to optimize performance, offer personalized experiences, and ensure compatibility with any tech stack.

What's next for Astro? Hear from Fred K. Schott (Astro co-creator, core maintainer) about the future direction for Astro's content-driven web framework. Featuring new announcements and demos that build on three of Astro's foundational core primitives: Islands, Content Collections, and View Transitions.

What’s New in Astro

Fred K. Schott

¿Sabías que la introducción de useEffect resolvió una clase completa de problemas de rendimiento? ¿Sabías que &lt;Suspense&gt; fue diseñado para hacer la hidratación varias veces más suave sin que te des cuenta de nada? React ha cambiado mucho. Muchos de estos cambios fueron impulsados por el deseo de una mejor arquitectura. Pero bajo el capó, cada uno de estos cambios también nos empujó a escribir aplicaciones más rápidas, a menudo sin que nos diéramos cuenta. En esta charla, vamos a ver algunos detalles de rendimiento de React que casi nadie conoce: - useEffect, y cómo es más rápido que componentDidMount- Batching, y cómo ha mejorado desde la versión 0.4 hasta la 0.12 y la 18- Suspense, y algunos de los efectos menos obvios de su uso- y posiblemente incluso más

La Mano Invisible del Rendimiento de React

React's improvements in performance, such as the introduction of useEffect, have gone unnoticed. useEffect simplifies synchronizing logic and improves performance by eliminating forced layout calculations. Update batching optimizes rendering by combining multiple set-state calls into a single render. React 18 introduces batched set-state calls for faster performance. React Suspense and selective hydration improve user experience and debugging performance issues is best done practically. Server components, recommended debugging tools, and framework choices are also discussed.

Did you know introducing useEffect solved a whole class of performance issues? Did you know &lt;Suspense&gt; was designed to make hydration several times smoother without you even noticing anything?  React has changed a lot. Many of these changes were driven by a desire for better architecture. But under the hood, each of these changes also pushed us to write faster apps – often, without us even noticing that. In this talk, let’s look at some rarely known React performance details almost nobody knows about: - useEffect, and how it’s faster than componentDidMount- Batching, and how it improved from version 0.4 to 0.12 to 18- Suspense, and some of the less obvious effects of using it- and possibly even more

Invisible Hand of React Performance

Ivan Akulov

Las flechas etiquetadas son una de las características más utilizadas cuando se trata de pizarra, ¿verdad? En esta charla, profundizaré en los detalles de las flechas etiquetadas y cómo funcionan internamente en Canvas y SVG. También compartiré mi experiencia construyendo flechas etiquetadas en Excalidraw, un editor colaborativo de código abierto, virtual y encriptado de extremo a extremo basado en lienzo para dibujar diagramas a mano alzada.

Hackeando las Flechas Etiquetadas

Labeled Arrows are widely used in conversations, communication, diagrams, and more. The Talk discusses constructing Labeled Arrows, rendering arrows in Canvas, optimizing stroke API calls, using RoughJS for drawing and rendering text, rendering multiline text on Canvas, clearing overlapping area and clipping, comparing clipping and clear rect performance, handling clipping and linking labels to arrows, linking labeled arrows to texts, rotated text and exporting as SVG, masking in SVG and labeling arrows, SVG masking and performance improvements, and optimizing rendering and drawing in Canvas.

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

Hacking into Labeled Arrows

Aakansha Doshi

Los influencers de Twitter te harían creer que si simplemente usas la etiqueta html semántica en lugar de un div, tus componentes serán accesibles. ¡Pero hay mucho más que eso!Enfoquémonos en un componente de GitHub (¡uno que probablemente hayas usado antes!) y veamos todas las consideraciones de accesibilidad involucradas y los desafíos interesantes en su implementación.

Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub

The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.

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

Case Study: Building Accessible Reusable React Components at GitHub

Siddharth Kshetrapal

Construir aplicaciones cifradas de extremo a extremo es emocionante, pero también intimidante. Esta charla está diseñada para reducir la barrera de entrada, ofreciendo una hoja de ruta clara para integrar el cifrado de extremo a extremo en aplicaciones colaborativas en tiempo real.Comenzamos revelando un diseño simple con una clave de cifrado compartida, abordando rápidamente sus desafíos inherentes. Progresivamente, nos adentramos en herramientas como Opaque, Secsync y CRDTs para enfrentar los desafíos que identificamos y mejorar nuestra aplicación con el objetivo de ofrecer una experiencia de usuario fluida sin comprometer la seguridad.Cada segmento de la charla comienza con una visión general accesible antes de adentrarse en ejemplos prácticos basados en código. Este enfoque no solo desmitifica la teoría intimidante, sino que también capacita a los asistentes con las herramientas y el conocimiento para aplicar estos principios de manera efectiva en sus proyectos.

Construyendo aplicaciones cifradas de extremo a extremo (Web y React Native)

This Talk explores the concept and advantages of end-to-end encryption in software development. It discusses the challenges of data encryption and conflict resolution in collaborative apps. The integration of end-to-end encryption with conflict-free replicated data types (CRDTs) is highlighted. The talk also covers simplified document sync, real-time sync and encryption, key management, and authentication. Additionally, it mentions the importance of local-first integration, CRDT frameworks, and data search indices.

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

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

Nik Graf

Gestionar el estado en React es complicado. Los humanos son aún más complicados. Como desarrolladores, es nuestro trabajo ofrecer experiencias de usuario fluidas e intuitivas, pero la complejidad misma del comportamiento humano y del mundo real puede hacer que esto sea más difícil de lo que debería ser. En esta charla, exploraremos un enfoque radicalmente nuevo para el desarrollo de aplicaciones donde los modelos de lenguaje (LLMs) y el aprendizaje por refuerzo (RL) se pueden utilizar para manejar la lógica de la aplicación de una manera más inteligente y centrada en el ser humano. Estamos llevando la inteligencia artificial a la gestión del estado de formas que van mucho, mucho más allá de "llamar a la API de OpenAI y esperar lo mejor". Aprenderás cómo puedes aprovechar la IA en tus aplicaciones React existentes para crear la mejor experiencia de usuario posible y vislumbrar el futuro de los agentes de IA.

Haciendo la Gestión del Estado Inteligente

Today's Talk explores intelligent state management in React, highlighting the limitations of traditional state management and the need for innovation. Xdate's store simplifies state management by providing an easy way to update and retrieve data. The integration of AI and state machines enables the creation of intelligent apps that enhance user experience. The combination of state management and AI is achieved through packages like StatelyAI-Agent and the Vercel AI SDK. State machines, reinforcement learning, and large language models play a key role in creating intelligent agents. Graph algorithms can be used to traverse state machines and improve user experience. State agents store knowledge in short-term and long-term memory, while state machines provide guardrails and automation in multi-step processes. The impact of Language Models (LLMs) on UI performance and the future experimentation of building AI models to identify state machines are also discussed.

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

Making State Management Intelligent

David Khourshid

Profundizaremos en la intersección entre el desarrollo web y la tecnología de NFT (Token No Fungible). A medida que el panorama digital continúa evolucionando, los desarrolladores buscan constantemente formas innovadoras de mejorar la experiencia del usuario y la seguridad. Desde la autenticación hasta los permisos de usuario. Los NFT ofrecen una solución descentralizada y segura que puede transformar la forma en que interactuamos con las aplicaciones web.

Control de Acceso Frontend Utilizando Activos Digitales

Blockchain technology and NFTs provide a decentralized alternative to centralized systems for identity and access control. Smart contracts are immutable programs executed on the blockchain, while NFTs offer unique identifiers and ownership through wallets. Developing the user interface involves using React, Veeam, and Solidity. Deploying smart content requires Remix and a web wallet like Metamask. Integrating smart contracts with React can be done using the Vim library and creating a wallet client. Blockchain technology ensures transparency, trust, and tamper-proof transactions.

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

Frontend Access Control Using Digital Assets

Todos parecen estar hablando de "tipos" en estos días. Desde el lenguaje TypeScript hasta utilidades de descripción de tipos como prop-types y Zod, los desarrolladores esperan descripciones claras de las formas de sus componentes React, datos y hooks. Hablemos sobre el cambio de mentalidad que ha ocurrido en la última década y hacia dónde nos llevan los tipos en la próxima.Bases breves: qué es TypeScript, qué significa "seguridad de tipos" y cómo configurar TypeScript en un proyecto React (Next.js). Una historia de cómo ha funcionado la seguridad de tipos en React, comenzando con los componentes de clase.Pensar en Tipo(s|Script): cómo modelar las formas de los valores ayuda a aumentar la previsibilidad y comprensión, especialmente en las arquitecturas más salvajes y locas de React.Limitaciones de TypeScript: Por diseño, TypeScript solo puede actuar como un sistema de tipos en tiempo de desarrollo y hacer cumplir lo que ese sistema puede representar. Repasaremos lo que no se puede y/o no se debe representar en ese sistema de tipos.Elevando el tiempo de ejecución: trasladar esos pensamientos sobre tipos a tiempo de ejecución de React con frameworks o bibliotecas programáticas como tRPC y Zod, especialmente cuando se integran con metaframeworks de React como Next.js y Remix.Especificidades de React: cómo esta teoría de "tipos primero" ayuda a mejorar las partes comunes de los proyectos en el ecosistema de React: desde prop-types en el pasado hasta endpoints de REST o RPC, pruebas y documentación en la actualidad.Reglas de linting de ESLint para detectar errores comunes de código asincrónico y React, y por qué el lenguaje está diseñado para permitirte hacer esas cosas peligrosas en primer lugar.Futuro del ecosistema: dónde llevará y dónde no llevará la propuesta de tipos como comentarios del TC39 los tipos a nivel de lenguaje para JavaScript en general y aplicaciones de React en particular.Al permitir que nuestros tipos sean un reflejo de la realidad en tiempo de ejecución, adoptamos el pensamiento de "tipos primero" en el diseño de código, lo que hace que nuestro código sea más claro de leer y actualizar. Estas fronteras mejor definidas ayudan en todo, desde límites de componentes React mejor definidos hasta puentes de API cliente&lt;&gt;servidor generados automáticamente. ¡Hurra por los tipos!

Tipos más allá de TypeScript

This Talk explores the concept of types and their significance in software development, particularly in relation to TypeScript. It discusses the limitations and advantages of TypeScript compared to other tools like Flow and Ezno. The Talk emphasizes the role of types in bridging system boundaries and improving code quality. It also highlights the importance of type-checked linting and the future of ESLint. Additionally, the Talk mentions the benefits of faster and easier linting with projects like Biome and OXC, and recommends books for further learning.

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

Types Beyond TypeScript

Josh Goldberg

Lecciones que aprendí en mi camino hacia trabajar a tiempo completo en código abierto, así como consejos para pensar y hacer que los proyectos de código abierto sean más exitosos.

Los caminos de Anthony hacia el código abierto - La teoría de conjuntos

Open source projects can be successful by finding a large intersection of target users. Making extensions universal can lead to increased popularity and collaboration. Collaboration across ecosystems is encouraged to create more maintainable and extendable architectures. Financial support is necessary for open source projects to be sustainable. Contributing to open source can be done by identifying areas for improvement and actively participating in GitHub workflows.

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

Anthony's Roads to Open Source - The Set Theory

Anthony Fu

Explora la integración de GPT de OpenAI en aplicaciones de React para crear interfaces de usuario dinámicas e inteligentes. Esta sesión ofrece ideas prácticas sobre cómo aprovechar las potentes capacidades de procesamiento del lenguaje natural (NLP) de GPT para chatbots, generación de contenido y experiencias de usuario personalizadas. Sumérgete en la configuración técnica con Next.js 14, LangChain, el SDK de IA de Vercel y la búsqueda vectorial de MongoDB para optimizar y personalizar tus aplicaciones. Únete a nosotros para transformar tus proyectos de React con IA.

OpenAI en React: Integrando GPT con tu aplicación de React

In this Talk, the speaker demonstrates how to create an AI chat bot that can answer questions based on information it was never trained on. They build a basic RAG pipeline in just five minutes using live coding. The speaker also shows how to create embeddings and a vector database, set up a vector search index and endpoint, and modify the chat route to enhance the chat bot's capabilities. The program is run and tested, and the Talk concludes with an invitation to join a workshop for more information.

Explore the integration of OpenAI's GPT into React applications to create dynamic, intelligent user interfaces. This session offers practical insights into leveraging GPT's powerful NLP capabilities for chatbots, content generation, and personalized user experiences. Dive into the technical setup with Next.js 14, LangChain, Vercel's AI SDK, and MongoDB's Vector Search to optimize and customize your applications. Join us to transform your React projects with AI.

OpenAI in React: Integrating GPT with Your React Application

Jesse Hall

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

The Path to High-Performance Canvas Rendering in React

Mana Peirov

En esta charla titulada "Empoderando a los desarrolladores: Creando bibliotecas de múltiples frameworks con experiencias nativas utilizando React", exploraremos una estrategia de desarrollo unificada que permite que el software se utilice en múltiples frameworks sin sacrificar la experiencia nativa para ningún grupo de usuarios. Este enfoque no solo amplía el alcance de las soluciones de software, sino que también optimiza los procesos de desarrollo al permitir que los equipos escriban código en React, nuestro framework de elección, y lo implementen sin problemas en Angular, Vue y otros.

Bibliotecas de múltiples frameworks con experiencias nativas utilizando React

The Talk discusses building cross-framework libraries using React to provide a superior experience for developers across different frameworks. The speaker explains the strategy of rendering React components internally and bridging them to different frameworks. They emphasize the importance of simplicity, understandability, and adherence to best practices in third-party libraries. The speaker also highlights the significance of creating a bridge layer and implementing a complete abstraction to ensure the library's reusability and maintenance.

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

Cross-Framework Libraries with Native Experiences Using React

Ray Luxembourg

¿Cómo sería un backend si estuviera diseñado pensando en las aplicaciones modernas de React? ¿Qué podría hacer la base de datos si siguiera los principios fundamentales de React? Aprende sobre un nuevo enfoque para construir aplicaciones fullstack con una base de datos reactiva en esta charla relámpago.

Aplicando los principios de React a una base de datos en la nube

React principles can break down for full-stack apps, but Convex has built a backend and database to address this. The five React principles discussed include reactivity, consistency, overlapping writes, and caching. Convex's database ensures consistency, handles overlapping writes with transactions, and automatically invalidates caches based on relevant writes. Convex combines the best of SQL and NoSQL databases and applies React principles to simplify app development and improve the user experience.

What would a backend look like if it was designed with modern React applications in mind? What could the database do if it followed core React principles? Learn about a new approach to building fullstack apps with a reactive database in this lightning talk.

Applying React Principles to a Cloud Database

Michal Srb

Create React App (CRA) fue un cambio de juego en la adopción de React. Antes del lanzamiento de CRA, la experiencia de configurar una aplicación de React se trataba más de configurar webpack que de escribir código de React.Ahora que la documentación de React ya no lista CRA como una sugerencia en la página "Comenzar un nuevo proyecto de React" y además recomienda elegir un framework basado en React, la experiencia de comenzar nuevamente está fragmentada.CRA nunca fue la forma de construir una aplicación de React completa. Era un punto de partida, y uno muy bueno. Inevitablemente, muchos desarrolladores (como yo) usaron CRA para construir sitios web, y muchos de ellos. Sin embargo, construir un sitio web requiere mucho más que solo usar una "biblioteca para interfaces de usuario web y nativas"; necesitas manejar el enrutamiento, la obtención y mutación de datos, el estilo y mucho más.Creo que Remix es el mejor framework disponible para asumir este desafío. Construido sobre React Router, la solución de enrutamiento más utilizada en el ecosistema de React, impulsado por Vite y ahora con la opción de construir SPAs puras (como CRA), Remix está bien posicionado como el mejor punto de partida para comenzar aplicaciones de React de todas las variedades.En esta charla, planeo mostrar la historia de cómo Remix se ha convertido en el reemplazo de CRA, cómo puedes migrar fácilmente desde un proyecto de CRA o React Router, y cómo Remix te llevará al futuro de React.

Remix - La Nueva Create React App

The Talk discusses the transition from Create React App to Vite as a more sustainable and popular alternative. Vite is praised for its simplicity, minimal dependencies, and exit strategy. The speaker emphasizes the importance of frameworks like Remix and React Router in providing solutions for common development challenges. The focus is on merging Remix into React Router to create a unified framework, with an emphasis on code splitting, routing, data fetching, and generating HTML. The future direction includes completing React Router 7 and reserving Remix for a different framework build.

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

Remix — The New Create React App

La brecha entre el diseño y el desarrollo perjudica tus proyectos de React: plazos más lentos, calidad comprometida y entregas repetitivas. Esta charla explora los orígenes de este problema, las diferencias en el lenguaje y el entorno, y ofrece soluciones a través de procesos, herramientas y colaboración. Descubre cómo incluir a los diseñadores durante todo el proceso de implementación ayuda a los desarrolladores a reducir la fricción, acelerar el desarrollo y ofrecer interfaces de usuario excepcionales.

Incluido Técnicamente (El Mejor Tipo de Inclusión)

Being technically included leads to better results and UIs. Incorporating multiple team members comes with challenges and compromises. The evolution of tools and technologies has standardized industry practices. Closing the gap between developers and designers requires collaboration and a common source of truth. Embracing change and building trust can improve collaboration between developers and designers.

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

Technically Included (The Best Kind of Included)

Tom Raviv

Hemos estado trabajando arduamente para crear una primera mirada a la obtención de datos, el renderizado del servidor y la transmisión en aplicaciones universales de Expo Router.

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

React Native and ExpoRouter provide a powerful way to build client-side applications that run on both web and native platforms. Server-driven UI and React Server Components offer dynamic rendering and A-B testing opportunities. Server rendering in native apps allows for the integration of movies and enhances the user and developer experience. The Talk includes live demos showcasing interactions with Spotify and native contacts, as well as currency conversion. Server rendering and React Server Components enable the generation of interactive components and bring modern state and AI to every platform.

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

Futuro de los Frameworks Frontend Charla Informal

Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.

Future of Frontend Frameworks Fireside Chat

Minko Gechev

Daniel Afonso

Los desarrolladores web aprenden muchas técnicas de programación en busca de su carrera, pero a menudo no se dan cuenta de la profundidad de sus propias habilidades. React Three Fiber se convirtió en una sensación entre miles de desarrolladores porque demostró que el conocimiento que poseen puede ser aprovechado para crear gráficos 3D interactivos. Sin embargo, React Three Fiber se ha quedado en la mentalidad de los sitios web, mientras que el futuro de la web se mueve cada vez más hacia experiencias inmersivas en 3D.En esta presentación, exploraremos la nueva generación de React Three Fiber y los cambios que se están realizando para convertirlo en un framework capaz de soportar aplicaciones complejas en tiempo real, como simulaciones en vivo y videojuegos. Nuestro objetivo es dar a los desarrolladores web un nuevo momento de reconocimiento donde vean un videojuego programado con React y piensen: "Yo puedo hacer esto"

Del Sitio Web a los Juegos: El Futuro de React Three Fiber

This Talk explores the future of React 3 Fiber and its potential for building immersive 3D worlds and video games on the web. The challenges of building immersive 3D apps and the solutions provided by React 3 Fiber are discussed, including decoupling simulation state updates and enhancing scheduling with stable references. The concept of data-oriented programming and the use of ECS (Entity-Component-System) design pattern for composable data in React 3 Fiber are explored. The Talk concludes by emphasizing the future focus on enabling data-oriented workflows and the integration of a built-in scheduler in future versions of React 3 Fiber.

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

From Websites to Games: The Future of React Three Fiber

Kris Baumgartner

Y Ahora Entiendes los Componentes del Servidor React

In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.

And Now You Understand React Server Components

Kent C. Dodds

En esta charla aprenderás habilidades blandas atemporales necesarias para navegar las relaciones interpersonales con amigos, compañeros de trabajo y subordinados. Aprenderás sobre regulación emocional, cambio de perspectiva, límites, propiedad radical y soltarlo todo.

Gestionándonos Gestionando a los demás

The Talk provides a personal human toolkit for debugging human interactions by focusing on depersonalization, understanding power dynamics, setting boundaries, managing emotions, repairing ruptures, and embracing repair. It emphasizes the importance of owning mistakes, recognizing power differentials, and speaking truth to those in positions of power. It also highlights the significance of setting boundaries, both emotional and temporal, and managing dysregulation. The Talk encourages investing in human debugging tools and learning to be better humans together.

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

Managing Ourselves Managing Each Other

Rachel Nabors

Todos tenemos la intención de crecer y esforzarnos por tener un impacto mayor hasta que aparece el conflicto. Vemos el conflicto como algo negativo que obstaculiza el crecimiento cuando en realidad es necesario y vital. En esta presentación, compartiré mis experiencias e ideas sobre cómo puedes manejar el conflicto y mantenerte en el camino hacia tener un impacto!

Primero Viene el Conflicto, Luego Viene el Crecimiento

Conflicts in software development often arise from the roles of victim, persecutor, and rescuer in the drama triangle. Shifting to a creator role helps navigate conflicts by focusing on learning and improving. Navigating conflict involves preventing rescue, providing feedback, and challenging others. Managers can play a crucial role as coaches instead of rescuers. By encouraging a shift to the empowerment dynamic, unnecessary drama and conflict can be avoided.

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

First Comes Conflict, Then Comes Growth

Wisam Zaghal

RSCs en Producción: 1 Año Después

This Talk explores the experience of shipping server components in production and highlights the benefits and challenges of using Server Components in Next.js apps. The Talk discusses the deployment of UploadThing and the use of AppRouter for safe production usage. It delves into the implementation of different layouts, data fetching, and code centralization for improved performance. The Talk also covers the use of server components for performance optimization and latency handling. Additionally, it explores the use of Edge and Lambda for partial pre-rendering and the challenges faced with webpack performance and hydration. Overall, the Talk emphasizes the benefits and challenges of working with Server Components in Next.js applications.

RSCs In Production: 1 Year Later

Theo Browne

La mayoría de los desarrolladores siguen de cerca las guerras de los frameworks. Tan ocupados con estos juegos, que olvidamos revisar las nuevas características que HTML, CSS y JavaScript nos ofrecen. ¡Los modales nativos, las unidades de vista dinámicas y el encadenamiento opcional son solo algunas de las características que ya deberías estar utilizando! Si dejaste de seguir el desarrollo de la Plataforma Web en 2015, es hora de actualizar tus conocimientos. Te enseñaré a construir aplicaciones adaptadas a 2024 y te prepararé para las nuevas características de la Plataforma Web que aparecerán en los próximos años.

Desarrollo web adaptado para 2024

Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.

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

Webdevelopment Tailored for 2024

Andrzej Fricze

Esta sesión tiene como objetivo mostrar a los desarrolladores de JavaScript cómo los conceptos de PHP, especialmente los perfeccionados en el desarrollo de Drupal, pueden enriquecer su enfoque en las aplicaciones de React. Se cubrirá cómo las fortalezas del lado del servidor de PHP y la arquitectura modular de Drupal pueden informar y mejorar el desarrollo del lado del cliente en React. La charla incluirá ejemplos prácticos de integración de Drupal con React, enfatizando cómo se puede aprovechar la destreza del backend de PHP en un entorno dominado por JavaScript. La sesión promete ser reveladora para los desarrolladores de React, ofreciéndoles nuevas perspectivas y herramientas extraídas del mundo de PHP, lo que finalmente conducirá a aplicaciones web más robustas, eficientes e innovadoras.

"React Ahora Se Parece a PHP" Dijeron

This Talk explores the similarities between React and PHP, particularly in building a guestbook. It showcases the shift towards back-end development and the use of modern PHP frameworks like Drupal. The integration of front-end code in the back-end is discussed, as well as the benefits of React server components. The comparison between PHP 99 and React 2024 highlights the advantages of using React in PHP development. The Talk concludes with excitement for the future of JavaScript, React, PHP, and Drupal.

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

"React Now Looks Like PHP" They Said

Lukas Fischer

Cómo la transición a los Componentes de Servidor de React permite soluciones de internacionalización mejores.

Resolviendo i18n para Componentes de Servidor de React

The Talk discusses internationalization for server components and the challenge of loading translations efficiently. It suggests using import statements in JavaScript to optimize message loading and eliminate the need for namespaces. Tree shaking and tools like Paraglide.js can help minimize message delivery and simplify the process. Overall, the Talk emphasizes the importance of efficient internationalization practices in building multilingual apps.

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

React Summit 2024

The biggest React conference worldwide