Name: React Day Berlin 2023
Start: 2023-12-08T12:00:00.000Z
End: 2023-12-12T20:00:00.000Z

La gestión del estado de React es difícil. ¿Por qué? ¡Porque hay tantas opciones a considerar! Estado local, reductores, hooks personalizados, contexto y más de una docena de bibliotecas de terceros. En esta sesión, exploraremos las lecciones que he aprendido al manejar el estado complejo en React durante los últimos siete años. Compartiré mi estrategia para categorizar el estado de React, incluyendo local, servidor, global, derivado y muchos más. Después de esta sesión, entenderás cómo identificar diferentes tipos de estado, dónde declarar el estado y cómo elegir entre estas diferentes opciones.

Gestión del Estado de React: 10 Años de Lecciones Aprendidas

This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.

Managing React state is hard. Why? Because there are so many options to consider! Local state, reducers, custom hooks, context, and over a dozen third-party libraries. In this session, we’ll explore the lessons I’ve learned from managing complex state in React over the last seven years. I’ll share my strategy for categorizing React state including local, server, global, derived and many more. After this session, you’ll understand how to identify different types of state, where to declare state, and how to choose between these different options.

Managing React State: 10 Years of Lessons Learned

Cory House

He estado desarrollando un marco minimalista para los Componentes del Servidor React (RSC). Esta charla compartirá mi viaje para entender profundamente RSC desde una perspectiva técnica. Demostraré cómo operan las características de RSC a un nivel bajo y proporcionaré ideas sobre lo que RSC ofrece en su núcleo. Al final, deberías tener un modelo mental más fuerte de los fundamentos de los Componentes del Servidor React.

Explorando los fundamentos de los Componentes del Servidor React

This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.

I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.

Exploring React Server Component Fundamentals

Daishi Kato

No pensamos en React como si tuviera sus propios tipos. Pero los tipos de React son una parte fundamental del marco de trabajo - supervisados por el equipo de React, y coordinados con las principales lanzamientos de React.En esta charla de codificación en vivo, veremos todos los tipos que te has estado perdiendo. ¿Cómo obtienes el tipo de props de un componente? ¿Cómo sabes qué ref toma un componente? ¿Deberías usar React.FC? ¿Y qué pasa con JSX.Element?Te irás con un montón de ideas emocionantes para llevar a tus aplicaciones de React, y esperamos que con una nueva apreciación por las maravillas de React y TypeScript trabajando juntos.

Los tipos más útiles de React

Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.

We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.

React's Most Useful Types

Matt Pocock

En unos meses, Google DESTRUIRÁ tu aplicación React......bueno, más o menos. En marzo, Google está lanzando un nuevo Core Web Vital llamado Interacción hasta el Próximo Pintado (INP). Mide la velocidad de las interacciones, y hasta ahora todos los sitios de React que Ivan ha visto tenían el INP muy en rojo. Esto es malo para cualquier sitio que se preocupe por el SEO.En esta charla, aprendamos cómo prepararnos para el nuevo Core Web Vital: cómo funciona el INP, y cómo mejorarlo, tanto manualmente como con las nuevas APIs de React como useTransition() y React Concurrency.

Prepara tu React, Nuevos Core Web Vitals están Llegando

The Talk discusses the NextPaint metric, a new performance metric introduced by Google that measures the speed of clicks or keyboard input on a page. It explores how React rendering can impact the NextPaint metric and offers optimization techniques such as using the useTransition hook in React 18. The Talk also covers the changes introduced in React 18's rendering process, the impact of wrapping with suspense, and the replacement of the First Input Delay metric with the interaction to the next page. The limitations of useTransition and general React performance optimization strategies are also discussed.

In a few months, Google will DESTROY your React app......well, kinda. In March, Google is releasing a new Core Web Vital called Interaction to Next Paint (INP). It measures the speed of interactions – and every React site Ivan has seen so far had INP way in red. This is bad for any site that cares about SEO.In this talk, let’s learn how to prepare for the new Core Web Vital: how INP works, and how to improve it – both manually and with new React APIs like useTransition() and React Concurrency.

Brace Your React, New Core Web Vitals are Coming

Ivan Akulov

<div>Damos un vistazo a diferentes desafíos y decisiones al agrupar código para aplicaciones web. Observamos cómo se resuelven comúnmente estos y por qué necesitamos repensarlos.</div>

Repensando las Estrategias de Agrupación

The talk discusses rethinking bundling strategies, focusing on challenges such as long-term caching and improving the state of Next.js and Webpack. It explores handling immutable caching and content hashes, optimizing asset references and page manifests, and addressing issues with client-side navigation and long-term caching. The talk also covers tree shaking and optimization, optimizing module fragments and code placement, and the usage and relationship of TurboPack with Webpack. Additionally, it touches on customizing configuration and hash risks, barrel imports and code splitting, and entry points and chunking heuristics.

<div>We take a look at different challenges and decisions when bundling code for web applications. We look at how these are commonly solved and why we need to rethink them.</div>

Rethinking Bundling Strategies

Tobias Koppers

Los Componentes de Servidor React son una forma más nueva de trabajar con React que se adopta ampliamente en marcos de trabajo como Next.js. En esta charla, veremos cómo funcionan y se ejecutan en el lado del servidor, y cómo encajan con la renderización en el servidor y las aplicaciones tradicionales de React.

Componentes de Servidor React

React server components solve the problem of interrupting user interfaces caused by CPU-bound or network-bound web applications. They allow for read-only content to be rendered on the server and interactive elements to be shipped to the client, reducing code shipped and improving performance. Server-side rendering and server-side fetching improve the user experience by reducing delays and flash of unstyled content. Soft navigation with server components enables re-rendering without hard navigation, and using frameworks like Next.js helps with debugging and deployment challenges.

React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.

React Server Components

Tejas Kumar

Astro 3 fue lanzado hace un tiempo y trajo consigo algunas características nuevas increíbles. En esta charla, echaremos un vistazo a algunas de las características recién lanzadas en Astro 3, haremos algo de codificación en vivo y nos divertiremos. Podemos echar un vistazo a lo que vendrá a continuación en Astro 4 y también podría haber 'una cosa más'

Todo Sobre Astro

Astro is a powerful framework for content-driven websites, with its own syntax and the ability to use favorite front-end libraries. It has seen significant improvements in Astro 2 and Astro 3, including view transitions and improved performance. Astro 4 introduces features like a powerful dev toolbar, content caching, and internationalization support. The Astro community is highly regarded, and Astro is being used for production websites. Astro also supports migrating legacy websites and integrating with headless CMSs.

Astro 3 was released a while ago and brought some amazing new features with it. In this talk, we’ll take a look at some of the newly released features in Astro 3, do some live coding and have some fun. We can take a look at what’s coming next in Astro 4 and there also might be a 'one more thing

All Things Astro

Elian Van Cutsem

Configurar proyectos de JavaScript no es divertido. Empezar implica instalar y configurar node, tsc, prettier, eslint, un marco de pruebas, un controlador de base de datos, y más. ¿Por qué JavaScript no incluye baterías? En esta charla hablaremos de cómo Deno soluciona esto, permitiéndote concentrarte en construir cosas. Exploramos qué beneficios desbloquea la integración completa de herramientas, y recordamos lo divertido que es programar si tus herramientas te ayudan, en lugar de requerir tu cuidado constante.

Javascript Debería Venir Con Baterías

JavaScript Should Come With Batteries: Deno is a next-generation JavaScript runtime that addresses the lack of built-in tooling in JavaScript. It provides a secure and simple way to develop applications with built-in testing, linting, formatting, and a language server for VS Code. Deno is compatible with Node.js and NPM, supports web standard APIs, and allows code portability between frontend and server. It also offers features like a built-in database, a key-value store, and transparent monetization with Deno Deploy.

Setting up JavaScript projects is no fun. Getting started involves installing and configuring node, tsc, prettier, eslint, a testing framework, a database driver, and more. Why is JavaScript not batteries included? In this talk we'll talk about how Deno fixes this, letting you focus on building stuff. We explore what benefits full tooling integration unlocks, and remember how fun it is to program if your tools help you, rather than requiring your babysitting.

Javascript Should Come With Batteries

Luca Casonato

Los Componentes del Servidor React son un nuevo tema en la comunidad, un montón de marcos de trabajo los están implementando, la gente está discutiendo sobre este tema. Pero, ¿qué pasaría si pudiéramos usar los Componentes del Servidor React en React Native? ¿Y llevar todas las características de optimización que los RSC permiten a las aplicaciones móviles? En esta charla presentaría lo que somos capaces de hacer con los RSC en React Native!

Llevando los Componentes del Servidor React a React Native

React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.

React Server Components are new topic in community, bunch of frameworks are implementing them, people are discussing around this topic. But what if we could use React Server Components in React Native? And bring all optimisation features that RSC allows to mobile apps? In this talk I would present what we are able to do with RSC in React Native!

Bringing React Server Components to React Native

Szymon Rybczak

En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas. Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.

Next.js para Desarrolladores de React.js

The Workshop covers advanced topics related to Next.js and React, including React Server Components and their benefits, using React Server Components with Next.js, caching and data fetching optimization, server actions and execution, and the differences between Edge and Node runtimes in Next.js. The Workshop also explores the use of React suspense for streaming SSR, selective hydration, and error management with server actions. Additionally, the Workshop provides examples, a GitHub repo, a Next.js course, and a community forum for further learning and discussion.

In this advanced Next.js workshop, we will delve into key concepts and techniques that empower React.js developers to harness the full potential of Next.js. We will explore advanced topics and hands-on practices, equipping you with the skills needed to build high-performance web applications and make informed architectural decisions. By the end of this workshop, you will be able to:1. Understand the benefits of React Server Components and their role in building interactive, server-rendered React applications.2. Differentiate between Edge and Node.js runtime in Next.js and know when to use each based on your project's requirements.3. Explore advanced Server-Side Rendering (SSR) techniques, including streaming, parallel vs. sequential fetching, and data synchronization.4. Implement caching strategies for enhanced performance and reduced server load in Next.js applications.5. Utilize React Actions to handle complex server mutation.6. Optimize your Next.js applications for SEO, social sharing, and overall performance to improve discoverability and user engagement.

Next.js for React.js Developers

Adrian Hajdin

¡Memoriza todas las cosas!, es lo que la mayoría de las guías de React te dirán, explicando cómo su costo de memoria es insignificante en comparación con sus beneficios de rendimiento, pero ¿alguien realmente lo ha medido alguna vez? ¿Qué tal hacerlo en una aplicación React compleja con varios miles de componentes? Resulta que obtener esa respuesta no es simple en absoluto, y requiere adentrarse en el complejo mundo del perfilado de memoria de Chrome. Esta charla explorará los conceptos básicos del perfilado de heap, avanzando hacia herramientas y técnicas más avanzadas para analizar el uso de memoria en tu aplicación React, incluyendo cómo perfilarlo en tu pipeline de CI y responder a tus propias preguntas de optimización escribiendo analizadores de heap personalizados.

¿Cuánta RAM está usando tu UseMemo? ¡Vamos a perfilarlo!

Memory usage is often overlooked in web applications, but excessive memory usage impacts performance and user experience. It's important to analyze memory usage and optimize it, considering concepts like count versus size and shallow versus retain memory. The Chrome Memory Profiler and Memlab are useful tools for analyzing memory usage. By optimizing React components and using tools like Memlab, memory usage can be reduced significantly. React hooks can be expensive for large-scale projects, and memory analysis is a challenging task.

Memoize all the things!, is what most React guides will tell you, explaining how its memory cost is negligible compared to its performance benefits, but has anyone actually ever measured it? What about doing it in a complex React application with several thousands components? Turns out getting that answer is not simple at all, and requires delving into the complex world of Chrome Memory Profiling. This talk will explore the basics of heap profiling, moving on to more advanced tools and techniques for analysing memory usage in your React application, including how to profile it in your CI pipeline and answer your own optimisation questions by writing custom heap analyzers.

How Much RAM Is Your UseMemo Using? Let’s Profile It!

Giulio Zausa‮ 

Los Durable Objects de Cloudflare son un nuevo entorno de ejecución de JavaScript que facilita la construcción de servidores backend con estado, a demanda y en el borde, tan fácil y barato como las funciones sin servidor.Al colocar el cálculo y el estado, los Durable Objects reducen la complejidad a gran escala y te permiten concentrarte en la construcción de tu producto.En esta charla rápida, codificaremos en vivo un backend en tiempo real desde cero, mostraremos cómo funcionan los Durable Objects y exploraremos cómo puedes aplicar esta herramienta versátil a una amplia gama de problemas de ingeniería cotidianos.

Durable Objects - Todo En Todas Partes Todo De Una Vez Por No Mucho Dinero

Durable Objects is a versatile programming paradigm by Cloudflare that allows for stateful and uniquely addressable server environments. It simplifies feature development, enables real-time updates through WebSocket connections, and provides a built-in key-value store for long-term storage. It can be used to create collaborative applications, manage data storage efficiently, and explore co-located compute and data at the edge. Other companies like Azure also offer similar technologies. Deno's KV and fly.io's Flame are innovative products that eliminate the need for provisioning databases and Kubernetes clusters.

Cloudflare's Durable Objects are a new JavaScript runtime that makes building stateful, on-demand backend servers on the edge as easy and cheap as serverless functions. By colocating compute and state, Durable Objects melt complexity at scale, and allow you to focus on building your product.In this fast-paced talk we'll live code a real-time backend from scratch, show how Durable Objects work, and explore how you can apply this versatile tool to a wide range of everyday engineering problems.

Durable Objects - Everything Everywhere All At Once For Not Very Much Money

Jani Eväkallio

Las contraseñas han sido durante mucho tiempo las llaves de nuestros reinos. Sin embargo, a menudo se convierten en los puntos débiles de nuestra armadura: olvidados, mal utilizados o explotados. Nuestras aplicaciones de Next a menudo hacen uso de contraseñas para autenticar a los usuarios, pero ¿cómo sería un mundo sin contraseñas? ¿Y cómo podemos comenzar a conducir hacia ese futuro hoy?

Autenticación Más Allá de las Contraseñas

This workshop focuses on the future of authentication, specifically passwordless authentication. It explores the challenges with passwords and introduces various passwordless authentication methods such as magic links and WebOfN. The registration and authentication process for passwordless authentication are discussed, along with the use of passkeys for authentication. The workshop also covers the setup of Auth0 and the creation of a Next.js application with Auth0 integration.

Passwords have long been the keys to our kingdoms. However, they often become the weak points in our armor — forgotten, misused, or exploited. Our Next apps often make use of passwords to authenticate users, but what would a world with no passwords look like? And how we can start driving into that future today?

Authentication Beyond Passwords

Juan Cruz Martinez

¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes. Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos. A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React

Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación

React Server Components allow for server-side rendering and improve performance by reducing the code sent to the browser. They enable asynchronous operations on the server, such as database queries, without separate endpoints. Next.js is a suitable server for React Server Components and provides better type safety by directly querying the database. Next.js also offers a router cache that can be controlled to ensure updated data is immediately reflected in the application. React Server Components can be used with Next-specific APIs to update the UI and simplify form handling by eliminating the need for JavaScript on the client.

Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications. Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects. Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components

React Server Components Unleashed: A Deep Dive into Next-Gen Web Development

Maurice de Beijer

Hoy en día, cada desarrollador está utilizando LLMs en diferentes formas y figuras. Muchos productos han introducido capacidades AI incorporadas, y en esta masterclass aprenderás cómo construir tu propia aplicación AI. No se necesita experiencia en la construcción de LLMs o en el aprendizaje automático. En cambio, utilizaremos tecnologías web como JavaScript, React y GraphQL que ya conoces y amas.

Construyendo Aplicaciones AI para la Web

Today's workshop focuses on AI for front-end developers and building with Lengtchain JS. Participants will learn how to create a custom MyGPT application, explore prompt engineering and retrieval, and use local data sets. The workshop covers creating a handler function, turning a text area into a controlled component, and rendering a message component on the screen. Participants will also learn about prompt templates, few-shot prompting, and setting up a vector database. The workshop concludes with information on staying in touch and accessing the beta version of a course based on the workshop.

Today every developer is using LLMs in different forms and shapes. Lots of products have introduced embedded AI capabilities, and in this workshop you’ll learn how to build your own AI application. No experience in building LLMs or machine learning is needed. Instead, we’ll use web technologies such as JavaScript, React and GraphQL which you already know and love.

Building AI Applications for the Web

Roy Derks

En esta charla, exploraremos cómo construir APIs GraphQL escalables y mantenibles para aplicaciones empresariales utilizando patrones de Diseño Guiado por el Dominio y Arquitectura Limpia. Discutiremos la importancia de modularizar su API en torno al dominio empresarial y una mejor organización de subdominios. Pasaremos brevemente por los componentes principales de una API GraphQL, incluyendo resolvers, capa de dominio y capa de base de datos y cómo hemos evolucionado hacia nuestra nueva arquitectura.

Construcción de APIs GraphQL de grado empresarial con Diseño Guiado por el Dominio y Arquitectura Limpia

Today's Talk focuses on building enterprise-grade GraphQL APIs with domain-driven design and clean architecture. The speaker shares their experience and emphasizes the importance of understanding the business domain and aligning software with business requirements. They discuss the layered approach of clean architecture and the benefits it provides for separation of concerns and testing. The Talk also covers the use of GraphQL schema merging and mappers to create a unified schema. The speaker concludes by highlighting the importance of constant observation, evaluation, and improvement in software development.

In this talk, we will explore how to build scalable and maintainable GraphQL APIs for enterprise applications using Domain-Driven Design and Clean Architecture patterns. We will discuss the importance of modularizing your API around the business domain and better subdomain organization. We will briefly go through the main components of a GraphQL API, including resolvers, domain layer, and database layer and how we've evolved them to our new architecture.

Building Enterprise-grade GraphQL APIs with Domain-Driven Design and Clean Architecture

Petar Ivanov

En Microsoft estamos repensando la forma en que utilizamos ReactJS como desarrolladores frontend, los patrones de diseño de UI tradicionales de React resultan en código redundante, lo que hace que el mantenimiento del código sea engorroso. Al hacer que la UI sea configurada por archivo, potenciamos los componentes de React al hacer que el archivo de configuración sea la única fuente de verdad. El enfoque anterior facilitó la incorporación rápida de nuevos escenarios de UI y con una regresión mínima en los antiguos flujos de UI, lo que resultó en una reducción significativa en los esfuerzos de desarrollo, la mejor parte es que todo el código se mantuvo solo en Typescript, no se utilizaron XML u otros lenguajes declarativos.

UI Configurada por Archivo de Configuración usando ReactJS

This lightning talk introduces the concept of config-driven UI using ReactJS, which allows for dynamic and customizable UIs without hard-coding. The technique involves using a JSON file to specify the type, size, position, and data source for each component. The talk also explains the structure of config-driven UI components, including elements, vertical and horizontal containers, and nested layouts.

We at Microsoft are rethinking the way we use ReactJS as frontend devs, traditional React UI Design patterns results in redundant code, making code maintainability cumbersome. By making UI Config driven we supercharged React components by making config file a single source of truth, The above approach made it easier to onboard new UI scenarios quickly and with minimal regression in the old UI Flows, resulting in a significant reduction in dev efforts, the best part is all the code was kept in Typescript only no XML or other declarative languages were used.

Config Driven UI using ReactJS

Joban Singh

La arquitectura sin cabeza ha ganado inmensa popularidad en los últimos años por su capacidad para desacoplar el frontend y el backend, permitiendo a los desarrolladores crear aplicaciones web atractivas, interactivas y escalables. En esta masterclass, nos sumergiremos rápidamente en el Mundo y la Arquitectura sin Cabeza. Además, construiremos un sitio web de blog súper rápido utilizando Storyblok, un CMS sin cabeza que ofrece una función de vista previa en tiempo real con un enfoque de componente anidable, y Astro (3.0) que ya está creando revuelo con el nuevo directorio de aplicaciones. - Domina los fundamentos de CMS sin cabeza- Domina un enfoque de Astro &amp; CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro &amp; Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza

Curso intensivo sobre Astro y Storyblok

This workshop introduces Astro Storyblok and combines it with the headless CMS, Storyblok. It covers topics such as headless CMS, JAMstack, and the use of atomic design. Participants learn how to set up a Storyblok account, configure the preview URL, and import component schemas. They also explore real-time editing, nested components, and dynamic menus. The workshop concludes with customizing existing components, adding images, and using the Astro image component.

Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications.  In this workshop, we will quickly take a dive into the Headless World and Architecture.  Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory.  - Master headless CMS fundamentals- Master an Astro &amp; headless CMS approach- Use Atomic design in your Astro &amp; Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless

Crash course into Astro and Storyblok

Arisa Fukuzaki

Nuestra aplicación de interfaz de usuario web es bastante grande: cientos de personas la han estado construyendo activamente durante los últimos ocho años. Comenzamos a enfrentar problemas de escalabilidad y limitaciones tecnológicas. Evaluamos muchas opciones y nos decidimos por los micro-frontends. Esta noche discutiremos:- Diferencias entre varias arquitecturas de micro-frontends- Por qué tomamos esta decisión y si es útil para ti- Lo que ganamos- Lo que sacrificamos (sí, hay desventajas)- Qué desafíos aún tenemos por delante

Desafíos de Descomponer un Front-End Masivo Usando Micro-Frontends

Microfrontends offer a potential solution to frontend engineering problems, improving testing efficiency and allowing for faster development. There are misconceptions about microfrontends, with different approaches such as horizontal and vertical splits. Monorepos are recommended for managing microfrontends. Data management and side effects can be handled through various approaches. Building microfrontends without a monorepo can be challenging, but it depends on the scale of the application. Trust in people and implementing a registry of components help avoid duplication. Tools like Module Federation and NX are useful for managing microfrontends.

Our web UI application is pretty big - hundreds of people have been actively building it during the past eight years. We started facing scalability issues and technological limitations. We evaluated plenty of options and settled on micro-frontends. This evening we will discuss:- Differences between various micro-frontend architectures- Why we made this choice and if it's helpful for you- What we gained- What we sacrificed (yes, there are downsides)- What challenges are still ahead of us

Challenges of Decomposing a Massive Front-End Using Micro-Frontends

Oleksandr Tryshchenko

Webpack es una herramienta poderosa para construir aplicaciones modernas de JavaScript, pero su arquitectura puede ser compleja y desalentadora para los desarrolladores que son nuevos en ella. En esta charla, nos sumergiremos en el funcionamiento interno de Webpack y exploraremos cómo sus diversos componentes trabajan juntos para crear un paquete. Al final de esta charla, tendrás una comprensión integral de la arquitectura de Webpack y su sistema de plugins. Estarás equipado con el conocimiento para construir aplicaciones complejas usando Webpack con confianza.

La Anatomía de Webpack: Una Inmersión Profunda en Su Arquitectura

Webpack is a module bundler that converts code into a format browsers can read. It has a plugin architecture built with Tappable that allows users to tap into hooks for important events. Tappable instances like compiler and compilation can be used to tap into hooks. The resolver in Webpack is used to check if required paths exist and can modify non-JavaScript files using loaders.

Webpack is a powerful tool for building modern JavaScript applications, but its architecture can be complex and daunting for developers who are new to it. In this talk, we will dive into the inner workings of Webpack and explore how its various components work together to create a bundle. By the end of this talk, you will have a comprehensive understanding of Webpack's architecture and its plugin system. You will be equipped with the knowledge to build complex applications using Webpack confidently.

The Anatomy of Webpack: A Deep Dive Into Its Architecture

Nitin Kumar

Las condiciones de carrera se encuentran entre algunos de los problemas más desafiantes de detectar y reproducir. Como tal, representan un desafío significativo en el desarrollo, notablemente en la interfaz de usuario. En esta charla, exploramos cómo detectar condiciones de carrera aprovechando las técnicas de fuzzing. Te guiamos a través del descubrimiento del verdadero problema de las condiciones de carrera y cómo impactan en la experiencia del usuario. Te proporcionamos herramientas y ejemplos que demuestran cómo detectarlas fácilmente en tu trabajo diario gracias a las pruebas que se basan en el fuzzing. Después de esta charla, esperamos que tu código React esté libre de condiciones de carrera o al menos que tengas las herramientas adecuadas para ayudarte.

Rompe la Carrera: Detección Fácil de Condiciones de Carrera para React

Race conditions can be complex to debug and reproduce, causing frustration for users. The speaker discusses examples of race conditions and ways to fix and avoid them. They demonstrate an example of an auto-completion field in React and how to handle race conditions in API calls. The speaker introduces the FastCheck framework for property-based testing to address race conditions and improve tests. Randomizing inputs and outputs can help uncover bugs specific to certain scenarios. The speaker also discusses mitigating race conditions in React and handling test overhead and reproducibility.

Race conditions are among some of the most challenging to detect and reproduce issues. As such they pose a significant challenge in development notably in UI. In this talk, we explore how to detect race conditions by leveraging fuzzing techniques. We walk you through discovering the real problem of race conditions and how they impact user experience. We provide you tools and examples demonstrating how to easily detect them in your daily work thanks to tests relying on fuzzing. After that talk, we hope your React code will be race conditions free or at least that you will have the right tools to help you.

Break the Race: Easy Race Condition Detection for React

Nicolas Dubien

Los juegos multijugador son los más geniales: nos acercan, incluso cuando estamos luchando. Si bien no puedes construir World of Warcraft en un fin de semana, tampoco necesitas un gran equipo de producción de un estudio de juegos AAA para crear un juego que sea divertido y atractivo. ¡Todo lo que necesitas es el buen viejo React con un poco de magia de Three.js y WebSocket! Esta charla te guía a través de la creación de un simple juego multijugador en el navegador utilizando React Three Fiber y Socket.IO. Aprenderás cómo estructurar el código del juego, renderizar una escena 3D interactiva en el navegador y establecer una comunicación bidireccional entre el cliente y el servidor.

Juegos multijugador con React Three Fiber y WebSockets

We're discussing making multiplayer games in React, focusing on accessibility and development phases. The game architecture involves a monorepo with a single server and WebSocket connections. React context is used for server communication and updating the React state. The game introduces 3D using React 3 Fiber and implements game mechanics like timers. The talk also mentions using generative AI tools for game design and testing with tools like Cypress. Different rendering techniques and the use of Socket.io's rooms feature in the WebSocket server are also discussed.

Multiplayer games are the coolest: they bring us closer together, even when we’re battling it out. While you can’t build World of Warcraft in a weekend, you also don’t need a big AAA game studio production team to create a game that is fun and engaging. All you need is good old React with some Three.js and WebSocket magic sprinkled in! This talk walks you through creating a simple multiplayer game in the browser using React Three Fiber and Socket.IO. You will learn how to structure the game code, render an interactive 3D scene in the browser, and establish two-way communication between the client and server.

Multiplayer Games with React Three Fiber and WebSockets

Maya Nedeljković Batić

En el mundo dinámico de React, asegurarse de que su código permanezca limpio y mantenible es primordial. Sumérgete en una sesión que desmitifica las complejidades de estructurar tus proyectos de React, separando claramente las preocupaciones y adhiriéndose a las mejores prácticas que resisten el paso del tiempo. A partir de experiencias del mundo real y consejos prácticos, esta charla promete equiparte con el conocimiento para elevar tu base de código de React a la cima de la claridad y la eficiencia.

Creando React Impecable: Mejores Prácticas para un Código Mantenible

React best practices, including state management, component performance, testing, accessibility, and clean architecture, are discussed. The use of useMemo and useCallback should be limited to when necessary, and tools like React's new compiler and Million.js can aid in performance optimization. End-to-end testing and React Testing Library are important for critical functionalities. Accessibility is emphasized, and the use of the xCore/React package is recommended. Logic business can be extracted from components, and file naming and folder structure should be carefully considered. Import aliases and different folder structures can enhance code maintainability. The talk also touches on managing hooks and testing, and ends with a discussion on favorite pizza and online presence.

In the dynamic world of React, ensuring that your code remains clean and maintainable is paramount. Dive into a session that demystifies the intricacies of structuring your React projects, distinctly separating concerns, and adhering to best practices that stand the test of time. Drawing from real-world experiences and hands-on tips, this talk promises to arm you with the knowledge to elevate your React codebase to the zenith of clarity and efficiency.

Crafting Pristine React: Best Practices for Maintainable Code

Miguel Ángel Durán

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

Deja que la IA Sea Tus Documentos

AI is a revolutionary change that helps businesses solve real problems and increase productivity. The workshop covers the demand for intelligent apps, limitations of LLMs, and how to overcome them. It explores the tech stack, integrating GPT, and optimizing the user experience. MongoDB Atlas Search and Vector Search are used to store embeddings and enable semantic search. Prompt engineering allows customization of AI responses.

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

Let AI Be Your Docs

Jesse Hall

El sistema de tipos de TypeScript es increíblemente poderoso. Puede representar tipos de JavaScript interdependientes extrañamente complejos y viene con un conjunto de condiciones lógicas completas de Turing. Pero esta es una conferencia de React, ¿verdad? Implementemos un React primitivo puramente en el sistema de tipos. ¡Por diversión!

Sistema de Tipos React

This Talk is about implementing a limited subset of the type equivalent of React, specifically its JSX engine, in the TypeScript type system with no runtime code. The speaker demonstrates how to use TypeScript features like constrained types and template literal strings to infer and render JSX elements in the type system. They also show how to render headings and children using a utility called 'render component'. The Talk concludes with additional resources for learning TypeScript and related topics.

TypeScript's type system is incredibly powerful. It can represent bizarrely complex interdependent JavaScript types and comes with a Turing-complete set of logical conditions. But this is a React conference, right? Let's implement a primitive React purely in the type system. For fun!

Type System React

Josh Goldberg

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

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

AI is a revolutionary change that helps businesses solve real problems and make applications smarter. Vectors enable semantic search, allowing us to find contextually relevant information. We'll build an AI-powered documentation site that answers questions, provides contextually relevant information, and offers links for further exploration. To enable vector search with MongoDB, we use the LingChain method to connect to MongoDB, create vector embeddings for user queries, and find related documents using maximal marginal reference. Join the workshop for a complete start-to-finish guide and integrate MongoDB Vector Search into your next React-based AI application.

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

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

Una experiencia moderna de herramientas generalmente implica un viaje de usuario en varios medios, incluyendo Web, VS Code, GitHub, etc. Escribir código y componentes personalizados para cada plataforma no es el enfoque más eficiente, lo que lleva a la duplicación de código y, lo más importante, el riesgo de una falta de una experiencia cohesiva. La Arquitectura Multiplicadora es un conjunto de patrones, técnicas y bibliotecas que, utilizando micro frontends y algunos servicios de backend innovadores, permiten la reutilización del componente de herramientas en diferentes medios de distribución Ven a esta charla para aprender cómo somos capaces de permitir a varios equipos de herramientas en Red Hat entregar la mejor experiencia nativa de componentes de UI (s y Vistas) en VS Code, Web, y Desktop, e integrarlos directamente en GitHub (Extensión de Chrome) con cambios mínimos en su base de código.

Construyendo un Mejor Marco de Micro-Frontend que Permite la Libertad de Plataforma

This talk discusses the challenges of scaling and maintaining applications and how architecture decisions can impact them. It introduces the concept of Microfrontend and its advantages of easier scaling, issue identification, and diversification of technology stacks. The implementation of Microfrontend at Red Hat is explained, including the use of a new framework, communication strategies, and the need for scalability and maintenance in large applications. The talk also covers the multiplying architecture framework of micro frontend and its core components. The implementation of Microfrontend in VS Code and examples of combining different frameworks into a single application are showcased. The issue of duplication of library loading is addressed using federated modules in webpack.

A modern tooling experience usually involves a user journey on multiple mediums, including Web, VS Code, GitHub, etc. Writing custom code and components for each platform is not the most efficient approach, leading to code duplication and, most importantly, the risk of a lack of a cohesive experience. Multiplying Architecture is a set of patterns, techniques, and libraries that, using micro frontends and some innovative backend services, allow for the re-use of the tooling component in different distribution mediums Come to this talk to learn how we are able to enable multiple tooling teams across Red Hat to deliver the best native experience of UI components (s and Views) on VS Code, Web, and Desktop, and directly integrate them on GitHub(Chrome Extension) with minimal changes on their code base.

Building a Better Micro-Frontend Framework That Enables Platform Freedom

Saravana Srinivasan

Cuando se combina con una función de renderizado personalizada, JSX se puede utilizar para construir rápidamente un lenguaje de marcado específico de dominio personalizado. Te mostraré cómo abordar esto utilizando el ejemplo de crear construcciones en Minecraft.

Hackeando JSX: Construyendo en Minecraft con React

JSX can be used to create builds in Minecraft by writing pseudo-HTML code within JavaScript. It can be transpiled into a format that the browser can understand and is not limited to React. JSX allows for the creation of an intermediary representation that can be converted into commands for Minecraft. Existing tooling can be used with JSX, eliminating the need for custom parsers and enabling linting and IDE support. The source code for the project is available on GitHub.

When combined with a custom rendering function, JSX can be used to quickly build a custom domain-specific markup language. I will show you how to approach this using the example of creating builds in Minecraft.

Hacking JSX: Building in Minecraft with React

Felix Wotschofsky

React ha explotado en popularidad gracias al rendimiento y la experiencia de desarrollo inigualable que el DOM virtual y la reconciliación podrían ofrecer. Pero a medida que nuestras aplicaciones crecían, comenzamos a empujar los límites de la gestión del estado del cliente de una manera eficiente. Veamos cómo lograr una reactividad de grano fino y qué aporta la reanudabilidad a la mesa.

Entendiendo los Patrones de Renderización

This Talk discusses rendering patterns on the web, including the use of React and the concept of memoization. It explores the idea of using signals to change data without a full re-render and how frameworks like SolidJS, Vue, Svelte, and Angular are adopting signals. The React team is developing React for Get, a compiler that provides auto-memoization to reduce unnecessary re-renders. Different frameworks have their own ways of using signals, such as shallow ref or ref in Vue, use signal in Quick, and defining and accessing signals in Angular and Svelte.

React has exploded in popularity thanks to the performance and unrivaled developer experience the virtual DOM and reconciliation could offer. But as our apps grew, we started pushing the boundaries of managing client state in a performant way. Let's see how to achieve fine-grained reactivity and what resumability brings to the table.

Understanding Rendering Patterns

Atila Fassina

Trabajando en emoji-picker-react me encontré con un desafío: filtrar la lista de 1800 emojis provocaba un retraso significativo debido a las nuevas renderizaciones.¡Aprendamos cómo solucioné esto solo usando CSS!

Búsqueda solo con CSS*: ¡Mejora el rendimiento de filtrado en React con CSS!

Evitar Alus, a frontend engineer, shares a trick to improve search performance in React applications by optimizing the search algorithm and reducing DOM updates. CSS attribute selectors can be used for filtering and applying styles based on emoji values. A component called CSS Search can be created to improve search performance by hiding emojis that do not match the search query. Despite some performance drawbacks, this solution works significantly faster. Visit Evitar Alus' website or Twitter account for more of their work.

Working on emoji-picker-react I encountered a challenge - filtering the list of 1800 emojis triggered a significant delay due to re-renders.Let's learn how I fixed this only using CSS!

CSS Only* Search: Improve React Filtering Performance with CSS!

Evyatar Alush

En el panorama actual, decidir entre construir una aplicación nativa o una aplicación web puede impactar significativamente en el éxito de tu proyecto y en la experiencia del usuario. A medida que la tecnología avanza y las expectativas de los usuarios continúan evolucionando, el proceso de toma de decisiones se vuelve cada vez más complejo. Profundicemos en las consideraciones clave que pueden ayudarte a determinar qué es lo correcto para ti, una aplicación nativa o una aplicación web. También veremos ejemplos reales de aplicaciones y examinaremos las razones detrás de su elección de enfoque de desarrollo.

Aplicar o no: Cuándo elegir Nativo o Web

The Talk discusses the choice between building native or web apps for software development. It explores the benefits of building web apps, such as fast development, easy debugging, and universal rendering. It also highlights the power of native apps, with their advanced features, better offline experience, and monetization opportunities. The Talk suggests using libraries like Capacitor or React Native to combine the benefits of both web and native apps.

In today's landscape, deciding between building a native app or a web app can significantly impact your project's success and user experience. As technology advances and user expectations continue to evolve, the decision-making process becomes increasingly complex. Let's dive into the key considerations that can help you determine what is right for you, a native app or a web app. We'll also look at real-world examples of apps and examine the reasons behind their choice of development approach.

To App or Not: When to Choose Native or Web

Mike Hartington

En esta charla, presentaré a la audiencia el potencial de OpenAPI para simplificar y mejorar el proceso de desarrollo para las aplicaciones React. Demostraré cómo OpenAPI puede ser aprovechado para autogenerar automáticamente APIs REST, optimizando la consumición de datos dentro de los proyectos React. Con un enfoque agudo en la eficiencia y la fiabilidad, los asistentes obtendrán valiosos conocimientos sobre la implementación de pruebas automatizadas para garantizar la robustez y la calidad en sus aplicaciones.

Cómo consumir automáticamente APIs con React

Today's Talk covers the challenges of developing APIs and the available tools to simplify the process. It also demonstrates building a pizza menu application using React and Fastify, with documentation and SDK generation using Swagger and OpenAPI. Orval is introduced as a tool for generating mutations, testing with mock service worker-generated mocks, and using Zod for validation. It supports multiple languages and frameworks, and allows consuming APIs from various resources. The SDK can be tracked using version control, and Open API specifications can generate Swagger UI and Redux doc asserts.

In this talk, I'll introduce the audience to the potential of OpenAPI in simplifying and enhancing the development process for React applications. I will demonstrate how OpenAPI can be harnessed to seamlessly autogenerate REST APIs, streamlining the consumption of data within React projects. With a keen focus on efficiency and reliability, attendees will gain valuable insights into implementing automated tests to ensure robustness and quality in their applications.

How to Automatically Consume APIs with React

Theodore Vorillas

Escribiendo un código más limpio en React siguiendo los Principios SOLID

SOLIDifica Tu Código React

Clean code is easily understood, readable, changeable, extensible, and maintainable. SOLID principles enforce good practices for scalable and maintainable software. The Single Responsibility Principle (SRP) ensures that components have a single reason to change. The Open-Close Principle (OCP) allows components to be easily extended without modifying the underlying source code. The Liskov Substitution Principle (LSP) enables swapping child elements within a subtype component. The Interface Segregation Principle (ISP) states that components should only depend on the props they actually use.

Writing a cleaner Code in React by following SOLID Principles

SOLIDify Your React Code

Islem Maboud

Imagina ser un caballero preparándose para un torneo de justas, pero tu caballo está más interesado en las pacas de heno de la feria que en tu duelo inminente. Eso es lo que a veces puede sentirse al preparar tu departamento de tecnología para una ronda de inversión o una salida. Esta charla proporciona una mirada en profundidad al papel de un ingeniero de frontend, especialmente trabajando con React, en la preparación de un departamento de tecnología para una ronda de inversión o una salida. A través de una lente única de diligencia técnica, la presentación descubre la importancia de las buenas prácticas, la arquitectura sólida, la documentación eficiente y más.

Preparándose para el Éxito: Guía de un Ingeniero de Frontend para la Diligencia Técnica

Tech due diligence is a thorough examination that can influence a product or company's future, involving analyzing technical architecture, code base, team culture, and more. Front-end engineers play a crucial role in bridging design and functionality. Automation, infrastructure, and documentation are key areas in tech due diligence. Best practices, clean code, and market connections are important for selling. Tech due diligence requires data access and security measures, and companies may be hesitant to fully cooperate.

Imagine being a knight preparing for a jousting tournament, but your horse is more interested in the fair's hay bales than your impending duel. That's what prepping your tech department for an investment round or exit can feel like sometimes. This talk provides an in-depth look into the role of a frontend engineer, especially working with React, in preparing a tech department for an investment round or an exit. Through a unique lens of tech due diligence, the presentation uncovers the importance of good practices, solid architecture, efficient documentation, and more.

React Day Berlin 2023

Build apps, not walls