October 20 - 23, 2023
React Advanced
London, UK & Online

React Advanced 2023

Nos sumergiremos a fondo

Are you into modern web development with React, React Native, GraphQL, TypeScript and hungry to learn from the best? The React ecosystem and community have grown drastically in the past years, and so did the complexity of web and JavaScript app development.

It's highly recommended to take this journey with the help of others – connect with the global network of field experts and explore the framework at the main React Conference in London! Engineers of any level are welcome, but be prepared for hardcore.



Esta edición del evento ha finalizado, las últimas actualizaciones de este React Conference están disponibles en el sitio web de la marca.
Simplificando los Componentes del Servidor
27 min
Simplificando los Componentes del Servidor
Top Content
Watch video: Simplificando los Componentes del Servidor
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Compilador React Forget - Entendiendo React Idiomático
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Watch video: Compilador React Forget - Entendiendo React Idiomático
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Una Guía Práctica para Migrar a Componentes de Servidor
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
Watch video: Una Guía Práctica para Migrar a Componentes de Servidor
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Watch video: Solucionando Problemas de Rendimiento en React
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Diseño Opt-in – La Nueva Era de los Marcos de React
23 min
Diseño Opt-in – La Nueva Era de los Marcos de React
Watch video: Diseño Opt-in – La Nueva Era de los Marcos de React
This Talk discusses opt-in design in web development, focusing on API design and understanding good defaults. Opt-in design allows developers to start with minimal tools and gradually add complexity as needed. The principles of opt-in design include finding the lowest common denominator, making complexity easy to add, and prioritizing the user experience. The Talk also explores the concept of opt-in design in React and Astro, as well as the comparison between React and Solid frameworks. Server rendering and streaming in React are highlighted, along with the importance of suspense boundaries for a better user experience.
La improbable amistad entre React y Rust
26 min
La improbable amistad entre React y Rust
Watch video: La improbable amistad entre React y Rust
This Talk explores the unlikely friendship between React and Rust, showcasing how they can be used together. The speaker demonstrates live coding and explains the process of calling Rust functions from JavaScript using the Tauri framework. The Talk also covers retrieving system information and disk details using Rust's sysinfo library. The speaker emphasizes the importance of serializability and showcases a button and SD card reader as examples of practical applications.
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
29 min
Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
Watch video: Elevando el Listón: Nuestro Viaje Haciendo de React Native una Opción Preferida
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
Micro-Frontends con React y Federación de Módulos Vite
20 min
Micro-Frontends con React y Federación de Módulos Vite
Top Content
Watch video: Micro-Frontends con React y Federación de Módulos Vite
Microfrontends is an architecture used by big companies to split monolithic frontend applications into manageable parts. Maintaining a consistent look and feel across different microfrontends is a challenge. Sharing styles can be done through Vanilla CSS, CSS modules, or CSS in JS. JavaScript variables can be used in styles, but readability and runtime overhead are considerations. Sharing state in microfrontends can be achieved through custom events, broadcast channels, shared state managers, or custom PubSub implementations. Module federation with Vite allows for client composition and sharing dependencies. Configuration is similar to Webpack, and future work includes working on the QUIC framework.
Monitoreo 101 para Desarrolladores de React
112 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, ve cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
98 min
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
Top Content
Workshop
Richard Moss
Richard Moss
En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente).
En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen:
- Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps
¿Cómo NO usar useEffect?
24 min
¿Cómo NO usar useEffect?
Top Content
Watch video: ¿Cómo NO usar useEffect?
Welcome to how not to use UseEffect. UseEffect is a hook introduced in React 16.8 as a replacement for component dismount and update in class components. It runs your callback once when the component mounts and when there are changes in dependencies. UseEffect allows performing side effects such as fetching data. UseEffect executes its callback asynchronously to allow the browser to render and show something to the user without blocking the main thread. Setting a state in a useEffect without a dependency array can cause nasty loops. Sometimes you are using use effects to take care of calling parent events. Nasty Fetch. Sometimes, when fetching articles, loading and race conditions need to be considered.
“Microfrontends” para móviles en React Native
24 min
“Microfrontends” para móviles en React Native
Top Content
Watch video: “Microfrontends” para móviles en React Native
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Remix: Abrazando los estándares web para redefinir el desarrollo web moderno
26 min
Remix: Abrazando los estándares web para redefinir el desarrollo web moderno
Top Content
Watch video: Remix: Abrazando los estándares web para redefinir el desarrollo web moderno
Remix is a web development framework that combines the scalability of server-rendered frameworks with the flexibility of React. It prioritizes web standards and best practices for security. Remix streamlines development with web standards like URLs, fetch API, HTML, and HTTP caching. It simplifies data handling through HTML forms and HTTP, improving user experience. Httpication in Remix reduces server load and speeds up response time, while global search and Storyblock make building complex websites easier.
Cómo utilizar Suspense y GraphQL con Apollo para construir excelentes experiencias de usuario
29 min
Cómo utilizar Suspense y GraphQL con Apollo para construir excelentes experiencias de usuario
Top Content
Watch video: Cómo utilizar Suspense y GraphQL con Apollo para construir excelentes experiencias de usuario
Jerel Miller
Alessia Bellisario
2 authors
This Talk discusses using suspense and GraphQL with Apollo client to build great end user experiences. It explains the core concepts of React suspense and how to fetch data in suspense with Apollo client's new suspense hooks. The Talk also covers optimizing the loading experience by adding suspense boundaries, using the defer directive in GraphQL, and integrating suspense hooks with React 18 transitions. Future plans include new APIs like suspenseful use fragment and lazy use background query in Apollo client 3.9. Testing strategies for suspense in components and customizing loading states are also mentioned.
Fetch, useEffect, React Query, SWR, ¿qué más?
102 min
Fetch, useEffect, React Query, SWR, ¿qué más?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras
Depuración del Rendimiento de React
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Patrones para el Rendimiento
28 min
Patrones para el Rendimiento
Watch video: Patrones para el Rendimiento
This Talk discusses patterns for performance in React development, including addressing slow resizing in custom cell renderers. It explores optimizing React render performance by reducing excessive re-rendering and using direct style updates. The use of layout effect and callback refs is also highlighted as techniques to improve performance. Additionally, the Talk mentions the AG Grid and TanStack Table libraries, as well as upcoming features like grid state restoration.
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
23 min
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
Watch video: Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
Nested interactive elements can cause accessibility issues on websites, and the speaker shares a personal experience with an accessibility bug involving a list component. Mitigating nested interactive structures involves limiting these patterns during development and restructuring existing elements. The speaker provides recommendations for improving accessibility, such as adjusting role properties and gathering user feedback. The conclusion emphasizes the importance of accessible solutions and encourages sharing resources to build more inclusive experiences.
Pruebas Efectivas con Detox
159 min
Pruebas Efectivas con Detox
Workshop
Josh Justice
Josh Justice
Así que has configurado Detox para probar tu aplicación React Native. ¡Buen trabajo! Pero aún no has terminado: todavía hay muchas preguntas que necesitas responder. ¿Cuántas pruebas escribes? ¿Cuándo y dónde las ejecutas? ¿Cómo te aseguras de que hay datos de prueba disponibles? ¿Qué haces con partes de tu aplicación que utilizan APIs móviles que son difíciles de automatizar? Podrías invertir mucho esfuerzo en estas cosas, ¿vale la pena?
En esta masterclass de tres horas abordaremos estas preguntas discutiendo cómo integrar Detox en tu flujo de trabajo de desarrollo. Saldrás con las habilidades e información que necesitas para hacer de las pruebas Detox una parte natural y productiva del desarrollo diario.
Tabla de contenidos:
- Decidir qué probar con Detox vs React Native Testing Library vs pruebas manuales- Configuración de una capa de API falsa para pruebas- Cómo hacer que Detox funcione en CI en GitHub Actions de forma gratuita- Decidir cuánto de tu aplicación probar con Detox: una escala móvil- Integración de Detox en tu flujo de trabajo de desarrollo local
Prerrequisitos
- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica con Detox- Configuración de la máquina: un entorno de desarrollo CLI de React Native en funcionamiento que incluye Xcode o Android Studio
React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación
153 min
React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con React Server Components! En esta inmersiva masterclass de 3 horas, desbloquearemos todo el potencial 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 React Server Components, que combina a la perfección la renderización 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 Server Components 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 Server Components para optimizar la obtención de datos y reducir el tamaño del paquete de JavaScript- Integrar Server y Client Components para una experiencia de usuario fluida- Estrategias para pasar datos eficazmente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de React Server Components
Nivel de la masterclass:
No importa tu nivel actual de experiencia en React, esta masterclass te equipará con el conocimiento y las herramientas para llevar tu juego de desarrollo web a nuevas alturas. No pierdas esta oportunidad de mantenerte a la vanguardia y dominar la tecnología de vanguardia que está cambiando la cara del desarrollo web. ¡Inscríbete ahora y desata todo el poder de React Server Components!
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
104 min
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria
II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes
III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen
VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización
El Estado del Estado en el Enrutador de la Aplicación
32 min
El Estado del Estado en el Enrutador de la Aplicación
Watch video: El Estado del Estado en el Enrutador de la Aplicación
React has improved state management with built-in hooks like useState, useReducer, and useRef. Redux can still be used but it's recommended to avoid global state. Zustand is an alternative state manager that allows for easy creation of hooks. Proper architecture is important for accessing the global store. State managers can add extra bytes to the client's JavaScript bundle, so it's important to be selective in choosing libraries. Next.js and React routers are recommended for server-side rendering and personalized experiences can be achieved with spas.
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
19 min
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Watch video: Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Protege Tu Aplicación Next.js Con una Política de Seguridad de Contenido
6 min
Protege Tu Aplicación Next.js Con una Política de Seguridad de Contenido
Watch video: Protege Tu Aplicación Next.js Con una Política de Seguridad de Contenido
Lucas Esteveau discusses the importance of Content Security Policy (CSP) as an additional layer of security for browsers. He explains how to validate and implement CSP using tools like csp-evaluator.withgoogle.com and observatory.mozilla.org. He also highlights the use of server components and middleware in the Hudafor project to set and enforce CSP directives. Lucas advises starting with a report-only CSP, reviewing the results, and gradually enforcing the policy. He emphasizes the importance of reviewing policy violation reports and iterating the process when making changes.
Zod === TypeScript, pero en tiempo de ejecución en tus aplicaciones React
20 min
Zod === TypeScript, pero en tiempo de ejecución en tus aplicaciones React
Watch video: Zod === TypeScript, pero en tiempo de ejecución en tus aplicaciones React
Zotter is a powerful tool for working with TypeScript in React applications, providing a simple schema concept for validation. It allows you to convert Zod schemas into TypeScript types and check if objects match the schema. Zod can be used for validation and contract enforcement, ensuring data consistency and preventing issues. It can also be used in React applications to create a validation layer and prevent code from running with incorrect data. The speaker encourages questions and provides contact information for further discussion.
¡Aprovechando el Bucle de Eventos para Aplicaciones Súper Rápidas!
35 min
¡Aprovechando el Bucle de Eventos para Aplicaciones Súper Rápidas!
Watch video: ¡Aprovechando el Bucle de Eventos para Aplicaciones Súper Rápidas!
This talk covers the event loop, microtask queue, and provides a live demo. JavaScript is single-threaded but can perform tasks that only a multithreaded environment can. The event loop consists of a call stack and microtask queue, which allow JavaScript to run non-blocking operations. Leveraging the microtask queue can lead to significant performance improvements in applications, such as React. However, it is important to use it correctly to avoid issues like infinite loops.
Jazz: Construye Aplicaciones React en Tiempo Real, Locales con Sincronización y Datos Colaborativos Seguros
29 min
Jazz: Construye Aplicaciones React en Tiempo Real, Locales con Sincronización y Datos Colaborativos Seguros
Watch video: Jazz: Construye Aplicaciones React en Tiempo Real, Locales con Sincronización y Datos Colaborativos Seguros
JAS is a new framework for building apps around sync and secure collaborative data, promising to simplify app development by eliminating unnecessary complexity. CoJson is an abstraction that simplifies app development by implementing multi-device co-editing, user identities, permissions, sync, caching, and persistence. Jazz is an open source framework that provides idiomatic bindings for CoJSON, specifically in the browser. JAS provides powerful sync and storage capabilities, eliminating the need for external blob storage. Jazz React allows developers to use React and provides automatic subscriptions for reactive updates to core values. JAS offers instant interaction, offline sync, and the ability to rebuild Twitter with Jazz.
Gestión de Funcionalidades con React
27 min
Gestión de Funcionalidades con React
Watch video: Gestión de Funcionalidades con React
Feature management in React.js applications involves techniques like feature flags and toggles, allowing for decoupling of application deployment from feature releases. Gradual rollouts, remote configuration, and audience targeting are key techniques. Increased control and flexibility in feature management provide targeted launches and quick rollbacks, but there are pain points like lack of reviews and approval workflow. Infrastructure as code (IAC) and GitOps are practices that can be combined with feature management. Feature Advisor is a tool that helps with feature management in React applications, focusing on principles rather than the tool itself.
Hidratación, Islas, Streaming, Reanudabilidad... ¡Oh Dios Mío!
26 min
Hidratación, Islas, Streaming, Reanudabilidad... ¡Oh Dios Mío!
Watch video: Hidratación, Islas, Streaming, Reanudabilidad... ¡Oh Dios Mío!
Today's Talk introduces the concepts of hydration and off islands, explores the benefits of islands for enhancing server-side rendered HTML with client-side JavaScript, discusses the lazy approach of re-zoomability and its advantages over traditional hydration, highlights the use of resumability and concurrent React for improved rendering performance, examines the features and concerns of React server components, touches on the co-location of client and server code, and explores future trends in rendering and navigation. The Talk also reflects on past ideas and emphasizes the importance of identifying core metrics for performance optimization.
Acelerando Tu Aplicación React Con Menos Javascript
15 min
Acelerando Tu Aplicación React Con Menos Javascript
Watch video: Acelerando Tu Aplicación React Con Menos Javascript
Quick React is a tool that speeds up React applications with less JavaScript, and Builder.io is a visual CMS that empowers marketing teams. Web performance is a challenge, with most websites scoring poorly. Island architecture and reasonability are alternative approaches to hydration that improve performance. QUIC allows for resumable applications and Quick React enables island architecture for faster startup times. Hydration and inter-island communication are crucial for interactivity in React applications.
React Concurrente Hecho Fácil
23 min
React Concurrente Hecho Fácil
Watch video: React Concurrente Hecho Fácil
Today's Talk introduces concurrent React and highlights the importance of fast and slow updates in user interfaces. It explains how concurrent rendering improves UI performance by allowing fast updates to proceed without being blocked by slow updates. The concept of assigning priorities to renders is discussed, with high priority renders being synchronous and low priority renders being interruptible. The Talk also mentions the benefits of using concurrent features in navigation and list filtering. Overall, concurrent React enhances rendering with interruptibility and prioritization, making the application feel faster and more responsive.
Código bajo demanda: El futuro de la colaboración en código
27 min
Código bajo demanda: El futuro de la colaboración en código
Watch video: Código bajo demanda: El futuro de la colaboración en código
During the Talk, the speaker discusses the power of streaming and its impact on music consumption and production. They also explore the challenges and benefits of incorporating streaming into software development, using examples from Spotify. The future of code development is envisioned as a streaming world, where code is always live and changes are instantly available to everyone. The speaker emphasizes the importance of treating components as complete products, prioritizing component reviews, and enhancing the workflow for forking and contributing to components.
El Camino Rocoso de las Bibliotecas de Obtención de Datos en el Nuevo SSR de Transmisión de React
28 min
El Camino Rocoso de las Bibliotecas de Obtención de Datos en el Nuevo SSR de Transmisión de React
Watch video: El Camino Rocoso de las Bibliotecas de Obtención de Datos en el Nuevo SSR de Transmisión de React
This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.
¿Ya estamos listos para pasar de Figma a React con IA?
21 min
¿Ya estamos listos para pasar de Figma a React con IA?
Watch video: ¿Ya estamos listos para pasar de Figma a React con IA?
Today's Talk explores how AI can empower developers to write better React code and automate the process of converting Figma designs into code. It discusses the use of heuristics to convert Figma designs into working HTML code and the potential of AI in generating better CSS class names. The Talk also highlights the importance of generating code that follows team conventions and automating design and code updates. Finally, it emphasizes the benefits of using large language models to automate tasks and improve developer productivity.
Software Local-Primero Con ElectricSQL
29 min
Software Local-Primero Con ElectricSQL
Watch video: Software Local-Primero Con ElectricSQL
Local-first software allows for instant display of data to the user, offering zero latency and offline functionality. It simplifies data synchronization and enables real-time multi-user sync. Popular tools like Facebook Messenger and Google Workspace apps have adopted this pattern. Electric SQL provides a drop-in sync layer for existing applications, combining real-time functionality with conflict-free offline capabilities. Local-first software replaces APIs and microservices with a standardized replication protocol, simplifying state management and reducing server load.
Pensando Diferente Acerca de a11y – Diseño de Sitios Web Accesibles para los Neurodivergentes
30 min
Pensando Diferente Acerca de a11y – Diseño de Sitios Web Accesibles para los Neurodivergentes
Watch video: Pensando Diferente Acerca de a11y – Diseño de Sitios Web Accesibles para los Neurodivergentes
Accessibility goes beyond screen readers and semantic HTML, and it's important to consider the needs of neurodivergent individuals. Cognitive impairments pose unique challenges, and COGA provides valuable guidelines for designing for cognitive accessibility. Customization, error tolerance, and compatibility with browser extensions are crucial in improving user experience. The NHS design system prioritizes functionality and has proven effective in handling emergencies. Understanding user needs and advocating for change within the tech industry are essential for creating a more accessible web.
Por qué Todos Necesitan un Marco de Trabajo
39 min
Por qué Todos Necesitan un Marco de Trabajo
Watch video: Por qué Todos Necesitan un Marco de Trabajo
Today's Talk explores the value of using frameworks in software development, specifically focusing on React and its impact on web development. The Talk delves into the benefits of frameworks, such as solving routing and data fetching challenges, handling edge cases, and providing server-side rendering. It also introduces the concept of server components and their role in server-side rendering. The Talk highlights the advantages of soft navigation and the seamless communication between client and server. Overall, frameworks offer valuable functionality that enhances productivity and addresses common development challenges.
Superpoderes de la API Web del navegador
23 min
Superpoderes de la API Web del navegador
Watch video: Superpoderes de la API Web del navegador
Today's Talk explores various Web APIs and their functionalities, including the Intersection Observer API for element visibility, the Network API for connection detection, and the Background Sync API for offline capabilities. The Broadcast Channel API enables communication between components and the Beacon, Web Speech, Web Share, Screen Awake Lock, Page Visibility, Background Fetch, and Web Authentication APIs offer additional functionalities. These standardized APIs work across browsers and can improve performance while reducing electricity consumption.
Cómo los Popovers Están a Punto de Ser Mucho Más Fáciles de Construir
28 min
Cómo los Popovers Están a Punto de Ser Mucho Más Fáciles de Construir
Watch video: Cómo los Popovers Están a Punto de Ser Mucho Más Fáciles de Construir
This talk explores the challenges and guidance for building well-designed popovers and dialogues in HTML. It discusses the differences between dialogues and popovers, their use cases, and the importance of semantics in differentiating them. The talk also covers UI considerations, implementation, and positioning of popovers. Additionally, it highlights the use of modals for blocking access to the rest of the page and the role of semantics in making accessible dialogues and popovers.
Aprovechando el poder de MessageChannel y BroadcastChannel
11 min
Aprovechando el poder de MessageChannel y BroadcastChannel
Watch video: Aprovechando el poder de MessageChannel y BroadcastChannel
This talk explores hidden web APIs for communicating between iframes and web workers. It discusses the disadvantages of a naive messaging approach and introduces the message channel API as a solution. The speaker also presents a library called message-channel-shake that simplifies message channel implementation. The talk covers various technologies like React, broadcast channel, and transferable objects.
Todo lo que necesitas es un contrato...
29 min
Todo lo que necesitas es un contrato...
Watch video: Todo lo que necesitas es un contrato...
The speaker discusses the challenges of server state and test maintenance, and how they found solutions using React Query and Mock Service Worker. They emphasize the benefits of defining contracts for faster development and stress reduction. The speaker also highlights the advantages of using Mock Service Worker over mock servers and explains how it allows for easy customization and test overrides. They mention the upcoming release of V2 of MS-Double and encourage the audience to stay updated.
Simplificando la gestión de datos en React con React Query
16 min
Simplificando la gestión de datos en React con React Query
Watch video: Simplificando la gestión de datos en React con React Query
Today's talk introduces React Query, a library that simplifies data management in React applications. It covers the core concepts and features of React Query, including data fetching, caching, and mutation. The talk also discusses query invalidation and cache time, highlighting how React Query optimizes performance and reduces code complexity.
Medición de la Cobertura del Sistema de Diseño React
11 min
Medición de la Cobertura del Sistema de Diseño React
Watch video: Medición de la Cobertura del Sistema de Diseño React
Karen discusses measuring the coverage of a design system using React Scanner. The tool helps analyze code and extract component details, allowing for the measurement of component usage and identification of patterns. The analysis also reveals anti-patterns in the design system consumption. By restructuring components, data-driven decisions can be made to optimize component usage at a route level and address anti-patterns.
Construyendo Mejor Depuración de React con Análisis de Replay
31 min
Construyendo Mejor Depuración de React con Análisis de Replay
Watch video: Construyendo Mejor Depuración de React con Análisis de Replay
Today's Talk focused on building better React dev tools with replay time travel analysis. The React DevTools provide valuable insights into React apps, using a fiber data structure to represent component instances. Replay is a time-traveling debugger for React, with plans to make Chrome their primary recording browser. They extract React information from recordings using their time travel API and have built a UI for debugging and inspecting the content. The long-term goal is to have Replay work offline and in permanent record mode.
Flashlight, un Faro para Aplicaciones Móviles
7 min
Flashlight, un Faro para Aplicaciones Móviles
Watch video: Flashlight, un Faro para Aplicaciones Móviles
Today's Talk introduces Flashlight, a tool for measuring mobile app performance. Flashlight provides a performance report that highlights issues like high CPU usage on low-end devices. To fix these issues, the Shopify component Flashlist can be used. Flashlight can also be used locally to measure performance changes in React Native apps, with the ability to see the score rapidly changing and improved performance after implementing fixes. More information can be found in the documentation and an article comparing scrolling performance in React Native.
Automatización de las Pruebas de Accesibilidad para Tu Biblioteca de Componentes
41 min
Automatización de las Pruebas de Accesibilidad para Tu Biblioteca de Componentes
Watch video: Automatización de las Pruebas de Accesibilidad para Tu Biblioteca de Componentes
Today's Talk focused on automating accessibility testing for component libraries using Storybook. The importance of web accessibility was emphasized, along with the benefits of incorporating accessibility from the start. Storybook was highlighted as a valuable tool for component-driven development, testing, and identifying accessibility issues. The integration of the accessibility add-on in Storybook allows for component-level insights, efficient feedback loops, and automated accessibility testing. Manual testing and addressing complex issues with screen readers were also discussed.
¡Ejecuto Código de Internet!
20 min
¡Ejecuto Código de Internet!
Watch video: ¡Ejecuto Código de Internet!
npm packages are unsanitized inputs from the internet that we run without much scrutiny, so we need to address the issue of malicious packages. Lavamote offers proactive runtime protections to automatically detect and mitigate threats. Lava Mode uses Hardened JavaScript to provide isolation and enforce a policy for your application's build process. The talk introduces a webpack plugin for those who don't want to use the browserify ecosystem. Lavamote's behavior is explored, showcasing how it restricts package access to certain properties. Beta testing is open to gather feedback and improve Lava Mode.
Documentación Técnica - ¿Cómo puedo escribirla mejor y por qué debería importarme?
27 min
Documentación Técnica - ¿Cómo puedo escribirla mejor y por qué debería importarme?
Watch video: Documentación Técnica - ¿Cómo puedo escribirla mejor y por qué debería importarme?
This talk emphasizes the importance of writing technical documentation and provides tips for improving it. Technical documents help explain intentions, reasoning, and choices, reducing work volume and aiding troubleshooting. Writing technical documents is important for visibility, career progression, and communication with managers. Integrating documentation into the development tool chain and treating it like tests ensures its quality and keeps it up to date. Structuring technical documentation effectively and providing concise and clear information are key for boosting its usefulness.
Construyamos una Navegación Espacial para TV
18 min
Construyamos una Navegación Espacial para TV
Watch video: Construyamos una Navegación Espacial para TV
This talk discusses the challenges of implementing spatial navigation for TV controls and the need for a library. The approach to spatial navigation can be improved by developing extra logic to connect TV control with the application. The demo application showcases the use of a NavigationEngine class and the useFocusRef hook function. The integration logic involves selecting the next node based on key presses and node coordinates. The talk also highlights the challenges of complex arrangements and circular navigations in smart TV application development.
¿Es la indicada? (¿Cómo seleccionar una biblioteca de código abierto?)
10 min
¿Es la indicada? (¿Cómo seleccionar una biblioteca de código abierto?)
Watch video: ¿Es la indicada? (¿Cómo seleccionar una biblioteca de código abierto?)
This talk provides tips for selecting the right open-source library, such as using NPM trends to compare libraries and considering bundle size, dependencies, and licenses. It also emphasizes the importance of choosing libraries maintained by multiple maintainers and being cautious when trusting engineers. The talk highlights a cautionary tale about relying on a single maintainer and suggests paying attention to changes in major versions and specifying exact versions in dependencies to mitigate security vulnerabilities.
Estado Colaborativo en Tiempo Real en el Borde
26 min
Estado Colaborativo en Tiempo Real en el Borde
Watch video: Estado Colaborativo en Tiempo Real en el Borde
Steven, a design tool nerd, worked on InVision Studio and now focuses on LiveBlocks, providing APIs and tools for multiplayer collaboration. Collaborative design tools like Figma, Canva, Mural, Notion, Mirror, Linear, and Pitch use conflict resolution algorithms such as OTs and CRDTs. Data migration and collaboration patterns are important considerations for building production applications. Figma stands out for its seamless assembly of collaboration features. LiveBlocks enables front-end developers to build collaborative experiences without complex backend infrastructure, using fractional indexing for consistent ordering.
Pruebas de Usabilidad Sin un Especialista en UX
28 min
Pruebas de Usabilidad Sin un Especialista en UX
Watch video: Pruebas de Usabilidad Sin un Especialista en UX
Usability testing is effective for uncovering user pain points and desire paths, as well as revealing loopholes, shortcuts, and hacks. Finding diverse users for testing can be challenging, but reaching out to sales and support teams and offering incentives can help. The logistics of usability testing include having multiple people to run tests, disclosing recording methods, and considering in-person or remote testing. During the tests, it's important to encourage participants to think out loud, ask open-ended questions, and gather feedback for improvement. Collecting and summarizing usability test results involves analyzing raw data, gathering hard data, and avoiding biases.
Ganando la Carrera de Rendimiento
21 min
Ganando la Carrera de Rendimiento
Watch video: Ganando la Carrera de Rendimiento
Today's Talk focuses on improving the performance of Wix websites through an architecture change that reduced JavaScript size and improved Core Web Vitals metrics. The implementation of a feature with saved data required rewriting components and calculating view data on a separate frontend server. This approach led to a smaller and faster client application and allowed for caching in the CDN. The key takeaways include reducing JavaScript download, using feature-specific components, and caching server responses.
Hackeando un e-Reader con React
7 min
Hackeando un e-Reader con React
Watch video: Hackeando un e-Reader con React
React for eBooks? Learn how to hack an eReader to display a tea menu. Create images and write e-books using React. Use EPUB format to create chapters and include CSS. Use Pandoc and Dino to simplify the process and make quick updates.
Implementación de Horarios y Cronogramas
6 min
Implementación de Horarios y Cronogramas
Watch video: Implementación de Horarios y Cronogramas
Today's Talk focuses on implementing schedules and timelines using the PlanBy component. PlanBy is a React-based tool that offers a simple interface and features like sidebar, timeline, layout, and live program refreshing. It uses a custom virtualized view to handle large amounts of data efficiently. The component allows for easy customization and can be used to build schedulers, conference agendas, TV guides, and more. Installation is straightforward, requiring only a few components, one hook, and two wrappers.
Revisiones de Código React en Open Source: Asegurando Calidad y Colaboración
6 min
Revisiones de Código React en Open Source: Asegurando Calidad y Colaboración
Watch video: Revisiones de Código React en Open Source: Asegurando Calidad y Colaboración
Open Source promotes accessibility, inclusivity, collaboration, innovation, transparency, and trust. Code reviews are a collaborative process in software development, with challenges including language barriers, documentation changes, and review backlog. Best practices for effective code reviews include clear objectives, focusing on the code, and using code review tools. Linters are important for scanning code issues, and measuring success in code reviews can be done using key metrics. React Code Reviews are crucial for the success of open-source projects.