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

Varun

Mark Erikson

Nicolas Carlo

Olivier Tassinari

Ciarán Curley

Lera

James Swinton-Bland

  Neha  Seth

Kræn Hansen

Vinicius Dallacqua

Manuel Bieh

Irina Baeva

Alba Silvente Fuentes

Paula Burghelea

JSNation Conference 🗓 June 1-5, 2023

Daria Shabala

Seungho Park

Adrian Hajdin

Darko Bozhinovski

Bogdan Plieshka

Károly Török

Wyatt Johnson

Agnieszka Labonarska

Bart Zaalberg

Pascal Moser

Marko Draksic

Sander Vervaeke

Nishant Satyam

Jan Peer Stöcklmair

Bela Bohlender

Jerel Miller

Omar Diop

Jarred Utt

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

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

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

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

Ryan Carniato

Evan Bacon

Sathya Gunasekaran

Tim Neutkens

Brooks Lybrand 

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

Fred K. Schott

Minko Gechev

Daniel Afonso

Aakansha Doshi

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

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

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

AI 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

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

Fetch Once, Render Everywhere: React Server Components en 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.

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

¿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 comenzar con AG Grid, cómo podemos habilitar la ordenación y 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.

Construye un Datagrid Poderoso 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

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

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

Esta charla te guiará a través de la integración de OpenTelemetry en entornos de React, haciendo hincapié en el Renderizado en el Lado del Servidor (SSR) y los innovadores Componentes de Servidor de React (RSC). Aprende cómo aprovechar el poder de los datos de telemetría, trazas, métricas y registros, para obtener una comprensión completa del comportamiento de tu aplicación y las interacciones de los usuarios.

Mejorando los Ecosistemas de React con Observabilidad: Un Profundo Análisis de React con OpenTelemetry

The Talk discusses the difference between monitoring and observability, highlighting the focus of OpenTelemetry on generating and processing data. It explores the concept of traces and span IDs in distributed tracing and the experimental nature of OpenTelemetry in the browser. The Talk also touches on the complexities of React with server components and demonstrates how distributed tracing can connect traces for different services. The process of adding OpenTelemetry to Next.js and analyzing application and browser traces is explained, along with the importance of context propagation. The Talk concludes with insights on analyzing fetch calls, errors, and the storage limitations of traces.

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

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

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

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

AsyncLocalStorage es una API moderna que se ha implementado en muchos entornos de ejecución de JavaScript. Permite a los desarrolladores pasar un valor a una función de devolución de llamada sin necesidad de acceder directamente a una referencia directa. En este sentido, es similar al Contexto de React. Sin embargo, aunque tienen un propósito algo relacionado, especialmente en el mundo de los Componentes de Servidor de React, existen diferencias significativas y un momento adecuado para usar uno sobre el otro.

AsyncLocalStorage vs. React Context

Today's Talk explores the concepts of async local storage and React context. Async local storage is a useful API for retrieving values from a parent component without passing them through multiple components. React context, on the other hand, allows for the creation of context instances in parent components and consumption in child components. The Talk also discusses server actions in React, their limitations, and the use of async local storage in server actions, with an example Cloudflare worker handling web requests and authentication.

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

 Greg Brimble

Waku es un proyecto en curso destinado a desarrollar un framework React con soporte de primera clase para React Server Components. En esta charla, proporcionaré una visión general de Waku y te guiaré sobre cómo puedes comenzar a desarrollar un nuevo proyecto utilizando Waku.

Presentando Waku: El Framework React Mínimo

I will talk about my recent project, Waku, and my React libraries - Rustand, Jotai, and Valisio. Waku is a React framework that depends heavily on React Server Components (RSC) and aims to make capabilities like code splitting, routing, data fetching, and SSR available to developers. It uses React components based on RSC for reusability and provides a fast experience with VIT, hot reload, and hot module replacement. Waku is under active development, aiming for V1 alpha and exploring Waku-specific features. Deploying Waku apps on Vercel is supported, and a plugin system is in consideration for extended support.

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

Introducing Waku: The Minimal React Framework

Daishi Kato

Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.

Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web

The Workshop introduced various aspects of prompt engineering, including Retrieval Augmented Generation (RAG) which allows for shorter context length. It covered topics such as coding with LLM, connecting to LLM models, getting structured output, defining output format, and using prompt templates with dynamic variables. The Workshop also delved into loading and manipulating documents, creating embeddings, and searching in VectorDB. The final sections explored using LLM with retriever and retrieving answers from the vector database. The Workshop provided valuable insights and resources for further learning in the field of software development and engineering.

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

Integrating LangChain with JavaScript for Web Developers

Vivek Nayyar

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

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

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

Únete a Nathan en esta sesión práctica donde primero aprenderás a alto nivel qué son los modelos de lenguaje grandes (LLMs) y cómo funcionan. Luego sumérgete en un ejercicio de codificación interactivo donde implementarás la funcionalidad de LLM en una aplicación de ejemplo básica. Durante este ejercicio, adquirirás habilidades clave para trabajar con LLMs en tus propias aplicaciones, como la ingeniería de indicaciones y la exposición a la API de OpenAI. Después de esta sesión, tendrás una idea de qué son los LLMs y cómo se pueden utilizar prácticamente para mejorar tus propias aplicaciones. Tabla de contenidos:- Demostración interactiva de la implementación de funciones básicas impulsadas por LLM en una aplicación de demostración- Discutir cómo decidir dónde aprovechar los LLMs en un producto- Lecciones aprendidas sobre la integración con OpenAI / descripción general de la API de OpenAI- Mejores prácticas para la ingeniería de indicaciones- Desafíos comunes específicos de React (gestión de estado :D / buenas prácticas de UX)

Masterclass: Qué son y cómo aprovechar los LLMs

Today's Workshop introduced large language models (LLMs) and their implementation using C. The training process involves compressing a large amount of text into parameters, resulting in a lossy approximation. LLMs generate text based on their training, but the generated content may include hallucinations or partially correct answers. Fine tuning and reinforcement learning stages improve the performance of LLMs. In the context of Grafana, LLMs are used for tasks such as generating titles and descriptions, understanding flame graph profiling data, and generating pizza names.

Join Nathan in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a feel for key skills for working with LLMs in your own applications such as prompt engineering and exposure to OpenAI's API. After this session you will have insights around what LLMs are and how they can practically be used to improve your own applications. Table of contents: - Interactive demo implementing basic LLM powered features in a demo app- Discuss how to decide where to leverage LLMs in a product- Lessons learned around integrating with OpenAI / overview of OpenAI API- Best practices for prompt engineering- Common challenges specific to React (state management :D / good UX practices)

Llms Workshop: What They Are and How to Leverage Them

Nathan Marrs

Haris Rozajac

¿Cómo se crea una aplicación escalable con muchos diseños y pantallas diferentes, brindando suficiente flexibilidad a cada equipo para personalizar sin agregar órdenes de magnitud en complejidad a su aplicación? Empresas como Airbnb, Meta y Lyft abordan esto con la interfaz de usuario dirigida por servidor. Exploraremos cómo esto puede funcionar para aplicaciones móviles, los desafíos que presenta y cómo es el camino a seguir en la era de los Componentes de Servidor de React.

Aplicaciones Móviles Dirigidas por Servidor con React Native

Today, we explore server-driven UI in React Native, which allows for scalable and complex UIs without incurring tech debt. Project Lightspeed simplifies UI definition and reduces code duplication. Server-driven UI, used by industry giants like Shopify and Airbnb, enables flexibility and platform consistency. Additionally, Evan Bacon's talk at ReactConf introduces the vision of universal React server components in server-driven UI.

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

Server-Driven Mobile Apps With React Native

Mo Khazali

¿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

El estado del desarrollo frontend en los últimos años es un lugar extraño tanto para el desarrollador web no iniciado como para el experto. ¿Server Components? ¿Resumability? ¿Hydration? ¿Waterfalls? ¿Islands? ¿Por qué tanto enfoque en el agua? ¿Y por qué estamos hablando de esto? En esta charla, el creador de SolidJS, Ryan Carniato, explora el panorama del desarrollo web moderno para entender cómo llegamos aquí y qué soluciones realmente resuelven estos problemas.

Enfrentando la Crisis Existencial del Frontend

I'm honored to be here today. The past decade has been dominated by single-page apps. Loading JavaScript is about 35 times slower than images on low-end devices. Server rendering involves sending more JavaScript and HTML, increasing payload and effort. React was developed for complex apps, but business needs have pushed towards simpler websites. Metrics for testing frameworks include code execution costs, bundle size, and payload size. Islands, popularized by frameworks like Astro and Fresh, break up apps into sections for server rendering. React's solution is to use islands and communicate in a diffing format. Quik reduces code execution and size, eliminating double-serializing. Frameworks like Solid Start provide tools for server rendering in a lightweight package. WASM frameworks have improved in performance. Next.js partial pre-rendering and HTMX offer solutions for sites with less interactivity.

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

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

¿Alguna vez has querido romper las reglas y ser un problema para React? Te mostraré cómo ignorar las mejores prácticas de React puede mejorar el rendimiento, todo sin grandes reescrituras en tu código base. Para entender cómo, aprenderemos cuándo decide React renderizar y cómo engañarlo para que renderice con menos frecuencia. Construiremos componentes que no rendericen nada, llamaremos condicionalmente a hooks e incluso usaremos una parte de Svelte, todo para solucionar rápidamente problemas reales de rendimiento que encontré en Microsoft.

El Arte de Ignorar las Mejores Prácticas para el Rendimiento de React

This Talk introduces the concept of being a 'React bad boy' by ignoring best practices and optimizing React rendering. It explains how to avoid unnecessary rerenders using React.memo and React DevTools. It also covers advanced techniques like isolating state changes and lazy loading hooks. The Talk explores reducing component rerenders using Svelte stores and optimizing with swap stores in Redux. These techniques improve React performance without the need for major refactors or rewrites.

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

The Art of Ignoring Best Practices for React Performance

Tiger Oakes

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

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

Next.js en el Edge con su nueva salsa secreta para una mejor experiencia de usuario y alto rendimiento. Revelaremos la salsa secreta de Next.js y la forma de trabajar para ofrecer la mejor experiencia de usuario en la red Edge y las nuevas características, incluyendo la pre-renderización parcial. Cómo aprovechar el componente del servidor y su alto rendimiento en la red Edge. Tabla de contenidos:- Introducción a la red Edge- Tiempo de ejecución en el Edge con V8- Casos de uso de las funciones en el Edge- Desplegar un servicio en la red Edge

Revelando la Salsa Secreta de Next.js en el Edge

The Workshop covered topics such as the edge network, zones, and cost optimization for portals and apps. Deploying functions on the edge network reduces latency and improves availability. The edge runtime provides computational APIs and cost effectiveness. Edge function costs depend on usage and considerations such as user count and limitations. The Workshop also demonstrated app deployment on Versatile and configuration of edge components.

Next.js on the Edge with its new secrets sauce for better user experience and high performance. We will unveil Next.js secret sauce and the way of working to deliver the best user experience in Edge network and the new features including partial pre-rendering. How to make use of the Server component and its high performance on Edge network. Table of the contents:- Intro to the Edge network- Edge runtime in V8- Use cases of the edge functions- Deploy a service on the edge network

React Summit 2024

The biggest React conference worldwide

Varun

Mark Erikson

Nicolas Carlo

Olivier Tassinari

Ciarán Curley

Lera

James Swinton-Bland

Neha Seth

Kræn Hansen

Vinicius Dallacqua

Manuel Bieh

Irina Baeva

Alba Silvente Fuentes

Paula Burghelea

JSNation Conference 🗓 June 1-5, 2023

Lera

Daria Shabala

Seungho Park

Adrian Hajdin

Darko Bozhinovski

Bogdan Plieshka

Károly Török

Wyatt Johnson

Agnieszka Labonarska

Bart Zaalberg

Pascal Moser

Marko Draksic

Sander Vervaeke

Nishant Satyam

Jan Peer Stöcklmair

Bela Bohlender

Jerel Miller

Omar Diop

Jarred Utt

Total attendees