December 2 - 5, 2022
React Day Berlin
Berlin & Online

React Day Berlin 2022

Build apps, not walls

Take part in the exploration of the React universe! Focusing on in-depth talks, hands-on workshops, and developing new opportunities, the React Day Berlin conference provides space for everyone to make friends and collaborate on stellar apps.

Esta edición del evento ha finalizado, las últimas actualizaciones de este React Conference están disponibles en el sitio web de la marca.
Los Átomos de Jotai Son Simplemente Funciones
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Las Cosas Raras de React
34 min
Las Cosas Raras de React
Top Content
React has some weird and undocumented features like using the key attribute to remount components. The new beta docs and RFCs provide valuable insights into React's thinking and allow for proposing changes. React's composition story has evolved from mixins to higher order components to hooks. The upgrade to React 18 fixed TypeScript types but introduced issues with optional children. React warnings can be helpful but also annoying, and a library called React Reduce Stress can suppress them. React strict mode helps identify issues and supports new features, but it can cause double rendering in React 18. Overall, React is an interesting journey with its flaws and learning opportunities.
Luchando contra la Deuda Técnica con la Refactorización Continua
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
Construyendo Equipos Multiculturales de Alto Rendimiento
25 min
Construyendo Equipos Multiculturales de Alto Rendimiento
Top Content
The Talk discusses the importance of effective communication and collaboration in cross-cultural teams. It emphasizes the impact of culture on communication and performance evaluation. The speaker highlights the differences between low-context and high-context communication styles and the need to understand cultural nuances. It also explores the challenges of giving feedback in multicultural teams and suggests ways to improve communication and create a feedback culture. The influence of language on communication and the importance of transparency and honesty in feedback are also discussed.
Despídete de tus esquemas de API con tRPC
29 min
Despídete de tus esquemas de API con tRPC
Today's Talk introduces TRPC, a library that eliminates the need for code generation and provides type safety and better collaboration between front-end and back-end. TRPC is demonstrated in a Next JS application integrated with Prisma, allowing for easy implementation and interaction with the database. The library allows for seamless usage in the client, with automatic procedure renaming and the ability to call methods without generating types. TRPC's client-server interaction is based on HTTP requests and allows for easy debugging and tracing. The library also provides runtime type check and validation using Zod.
Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...
32 min
Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...
The Talk discusses TurboPack, a successor to Webpack, aiming to create a framework-independent, flexible, and extensible tool for the open-source community. It addresses performance challenges by integrating SWC into Next.js. The challenges with Next.js and Webpack include orchestration issues, backward compatibility constraints, and cache invalidation problems. TurboEngine and TurboPack provide constant performance in incremental builds, leveraging Rust's predictable performance and parallelism. The Talk also covers topics like dependency tracking, task graphs, cache invalidation, lazy asset graphs, and the integration of TurboPack with Next.js. The future plans involve reconfiguring Webpack and TurboEngine, moving computations to the cloud, providing insights into builds, and facilitating migration and integration with JavaScript projects.
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
9 min
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
28 min
Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React
Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.
Espera, ¿React es Multi-Hilo?
22 min
Espera, ¿React es Multi-Hilo?
Top Content
This Talk explores the use of web workers in React to improve user experience and performance. It discusses the limitations of JavaScript rendering and how web workers can offload tasks to separate threads. The Talk also highlights the benefits of using concurrent mode in React and introduces the UseWebWorkerHook library for simplifying the creation of web workers. It emphasizes the considerations when using web workers and concludes with a mention of Postman's hiring and new feature release.
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Next.js 13: Estrategias de Obtención de Datos
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Herramienta Multiplataforma de React Native Kotlin
26 min
Herramienta Multiplataforma de React Native Kotlin
Top Content
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.
Es hora de desfragmentar la web
34 min
Es hora de desfragmentar la web
Top Content
Today's Talk introduces Mitosis, an open source project that solves the problem of building framework agnostic components. It supports JSX and Svelte syntax and outputs human-readable code for various web frameworks. Mitosis is already being used by enterprise customers and can be easily integrated with React, Svelte, and other frameworks. It saves time, allows for easy handling of framework version migrations, and enables efficient unit and integration testing.
Potenciando Tu Experiencia de Desarrollo Con Turborepo
26 min
Potenciando Tu Experiencia de Desarrollo Con Turborepo
Top Content
This Talk explores the benefits of using TuberApple, a tool for supercharging the development experience. It highlights the advantages of monorepos, such as code reuse, shared standards, improved team collaboration, and atomic changes. TuberApple, specifically Tuburepo, offers efficient task execution through caching and optimized scheduling. It simplifies monorepo development by allowing parallel execution of tasks and seamless coordination of changes. Tubo, another tool within TuberApple, enables smart task execution, declaring task dependencies, and efficient caching in monorepos.
Ejecuta Juegos Dentro de Tus Aplicaciones React Native
28 min
Ejecuta Juegos Dentro de Tus Aplicaciones React Native
Top Content
Today's Talk discusses integrating Unity into React Native apps for game development. Unity provides a wide range of capabilities and can be seamlessly integrated with React Native. The integration involves using the Unity View component and the Unity Message callback to enable communication between the two platforms. Native plugins are created to facilitate communication between Unity and React Native. The performance of Unity in React Native apps is comparable to regular React Native apps, and the decision to use Unity or React Native depends on the app's use case and need for advanced UI and gaming capabilities.
Nextra 2.0: Crea un sitio de documentación completo en 5 minutos
28 min
Nextra 2.0: Crea un sitio de documentación completo en 5 minutos
Top Content
Next.js and Nextra are powerful tools for generating full-featured documentation websites with ease. Nextra offers features like dark mode, full-text search, and React code integration. Next.js provides image optimization, SSG, SSR, and other powerful features. Nextra is highly customizable and supports localization, collaboration, and API integration. The future vision includes combining documentation and live views, adding social card generation and advanced search functionality.
Descansa de REST (y GraphQL)
32 min
Descansa de REST (y GraphQL)
This Talk explores the evolution of RPC and its relevance in modern full stack development. It discusses the limitations of SOAP and REST and introduces GraphQL as a solution. The focus is on RPC frameworks like tRPC and BlitzRPC, which provide end-to-end type safety and improved developer experience. The Talk also highlights the advantages of RPC in the context of full stack development with frameworks like Next.js. Future improvements for RPC libraries are discussed, including enabling server APIs for multiple clients and creating a developer experience tool combining the best features of BlitzRPC and tRPC.
La magia de construir una arquitectura de sistema de diseño multiplataforma
23 min
La magia de construir una arquitectura de sistema de diseño multiplataforma
This Talk discusses the development of a cross-platform design system architecture. It explores different approaches and proposes a unified API that works across web and native platforms. The Talk covers techniques for resolving files and declarations, configuring bundlers, and testing for both web and native platforms. It also highlights the bundling of TypeScript types and handling accessibility for different platforms.
Construye tu propio (Simple) React desde cero!
111 min
Construye tu propio (Simple) React desde cero!
WorkshopFree
Sean Blundell
Jean Duthon
2 authors
¿Alguna vez te has preguntado cómo funciona React?¿Cómo sería crear las líneas mágicas que componen la herramienta que todos aprendimos y amamos?Acompáñanos en nuestro viaje para implementar React desde cero, haciendo que un proyecto React simple funcione con tu propia biblioteca my-react.js.
Qué incluye- Introducción- Renderizando nuestro primer componente- Ciclo de actualización y el VDOM- Conoce los hooks
Requisitos previos- Algunos conocimientos de React.
Componentes Genéricos con TS y React
10 min
Componentes Genéricos con TS y React
Ilya, a Staff Engineer in ArtSecurity, gives a talk on using generic components with React and TypeScript. He demonstrates how to pass generics to React components and addresses syntax limitations. Generics allow components to operate on data without a defined shape and are commonly used in form field components and component libraries.
Detectando estáticamente errores en aplicaciones de React con TypeScript y ESLint
21 min
Detectando estáticamente errores en aplicaciones de React con TypeScript y ESLint
This Talk explores static analysis tooling for JavaScript and TypeScript, focusing on detecting bugs with TypeScript and ESLint. The importance of type checking and extending recommended rules is emphasized. The Talk also delves into specific ESLint rules and provides code samples to demonstrate their usage. The insights provided by ESLint powered by TypeScript are highlighted. Floating promises and misused promises are discussed, along with recommendations for handling exceptions and resources. The Talk concludes by offering resources and support for further exploration and development.
Potencia tus aplicaciones GraphQL con CDNs
13 min
Potencia tus aplicaciones GraphQL con CDNs
This Talk discusses how to grow GraphQL apps with CDNs by exploring concepts like caching, freshness, and validation. It explains how CDNs cache content closer to end users, improving delivery speed. The use of persistent queries and cache control headers in GraphQL is explored as a solution to caching challenges. The talk also highlights the interplay between automatic persistent queries, Apollo cache control, and Apollo Engine for efficient CDN caching.
Cómo automatizar cambios de código para 100 repositorios: Introducción a los Codemods
28 min
Cómo automatizar cambios de código para 100 repositorios: Introducción a los Codemods
This Talk discusses automating code changes for Android repositories, utilizing tools like JSCodeShift and Abstract Syntax Tree. The speaker shares a real use case example of maintaining a design system library and making changes to a component. The talk emphasizes the importance of automating repetitive tasks and using the power of abstract syntax tree for code changes. The Q&A session covers topics like source code formatting, TypeScript support, and cultural embedding of code mods. The talk concludes with insights on when automation is worth it and the limitations of code mods for monorepo changes.
Curso intensivo sobre Jamstack con Next.js y Storyblok
161 min
Curso intensivo sobre Jamstack con Next.js y Storyblok
WorkshopFree
Arisa Fukuzaki
Chakit Arora
2 authors
Es posible que ya hayas leído sobre Jamstack. Probablemente ya hayas utilizado Next.js y recientemente hayas escuchado mucho sobre los CMS sin cabeza. Este curso rápido pondrá todas las piezas juntas y te mostrará por qué Storyblok, combinado con Next.js, es la mejor combinación para tu próximo proyecto. ¡Ven y pruébalo tú mismo!
- Conocimiento profundo de Jamstack. Cómo ha cambiado desde los tiempos antiguos hasta el mundo moderno. Aprende cómo se creó Jamstack comparando los sitios estáticos y los sitios dinámicos.- Cómo Next.js sirve contenido y cómo se sirve el contenido con la generación de sitios estáticos (SSG).- Metodología de diseño atómico y cómo se aplica al sistema de gestión de contenido.- Experiencia práctica en proyectos construyendo un proyecto Jamstack con Next.js y Storyblok.
Requisitos previos- Cualquier editor de texto. Se recomienda Visual Studio Code- Node.js LTS- NPM o Yarn- Cuenta de GitHub- Cuenta de Vercel- Familiaridad con JavaScript, React y Git. Haber trabajado con Next.js antes es una ventaja
Lo que se incluye1. Introducción y descripción general del curso2. Introducción a Jamstack3. Introducción al diseño atómico4. Descripción general de los CMS sin cabeza5. Introducción a Storyblok6. Creación de una aplicación Next.js7. Creación de un espacio Storyblok8. Conexión de Next.js y Storyblok9. Creación de componentes personalizados10. Creación de la primera página11. Introducción a Visual12. Adición de páginas dinámicas13. Creación de la sección de blogs14. Implementación en Vercel
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
158 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React que intenta obtener los mayores beneficios de TypeScript? Entonces este es el masterclass para ti.
En este masterclass interactivo, comenzaremos desde lo básico y examinaremos los pros y los contras de las diferentes formas en que puedes declarar componentes de React utilizando TypeScript. Después de eso, nos moveremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guards y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapeo de tipos. Y comenzaremos a programar en el sistema de tipos de TypeScript utilizando tipos condicionales e inferencia de tipos.
¡Vamos a Remix para Localizar el Contenido!
28 min
¡Vamos a Remix para Localizar el Contenido!
This Talk explores Remix and internationalization, discussing the impact and logic of internationalization and the challenges developers face. It highlights the global usage of the internet and the importance of localizing content. The fundamental logic of internationalization is explained, including location-based, header-based, and URL-based approaches. The implementation of internationalization in Remix is demonstrated using Remix IAT Next package and a Content Management System. The Talk also covers client-side and server-side configuration, importing and wrapping translation files, and implementing dynamic routes with Remix.
Haciendo que una biblioteca de código abierto sea financieramente sostenible
8 min
Haciendo que una biblioteca de código abierto sea financieramente sostenible
The Talk discusses how an open source library, ReactFlow, was made financially sustainable. Various methods were tried, including Github sponsoring and cross financing, but a price tag was eventually added to the library. Building trust and clear expectations through ongoing support and communication with subscribers was key to gaining financial support. The issue of people not knowing how much to contribute was addressed by providing a clear pricing structure. Additional features like one-on-one support and Pro examples were added to combat the paradox of choice and encourage financial support.
¿Qué demonios significan "declarativo" y "reactivo" en realidad?
69 min
¿Qué demonios significan "declarativo" y "reactivo" en realidad?
Workshop
Andre Kovac
Andre Kovac
¿Has construido aplicaciones con frameworks frontend antes? - Entonces seguramente te has encontrado con los términos "declarativo" y "reactivo". Desde que React fue lanzado en 2013, la mayoría de los frameworks o bibliotecas de UI modernos quieren ser como él, pero ¿qué significan realmente estos términos? ¿Y cuál es la diferencia entre el código "declarativo" e "imperativo"?
Me llevó mucho tiempo comprender estos conceptos, pero cuando finalmente lo hice, vi los frameworks frontend de una manera totalmente nueva. Y espero que sientas lo mismo después de esta charla.
En este taller muy interactivo, profundizaremos en muchos ejemplos de código para comprender profundamente los términos, con ejemplos utilizando JavaScript puro, React y Svelte. Pero los conocimientos serán universales. Después de esta charla, podrás unirte con confianza a discusiones sobre la naturaleza "declarativa" y "reactiva" de cualquier nuevo paquete o biblioteca.
Diseño de Pruebas Efectivas con React Testing Library
131 min
Diseño de Pruebas Efectivas con React Testing Library
Workshop
Josh Justice
Josh Justice
React Testing Library es un gran marco de trabajo para pruebas de componentes de React porque responde a muchas preguntas por ti, por lo que no tienes que preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Aún hay muchas preguntas que debes resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir en comparación con pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una línea de código específica que es difícil de probar? ¿Y qué diablos debes hacer con esa advertencia persistente de act()?
En este masterclass de tres horas, presentaremos React Testing Library junto con un modelo mental sobre cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada parte de la lógica, si debes o no simular dependencias, y mejorará el diseño de tus componentes. Saldrás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor.
Prerrequisitos:- Familiaridad con la construcción de aplicaciones con React- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas experiencia previa con React Testing Library- Configuración de la máquina: Node LTS, Yarn
El Estado de las Herramientas de React
29 min
El Estado de las Herramientas de React
The Talk discusses over 20 JavaScript tools commonly used by developers, including transpilers and bundlers. It highlights the pros and cons of various tools such as Sucrase, Babel, SWC, and ESBuild. The importance of TypeScript, linters like eslint, and the emergence of new tools like Rome are also mentioned. The Talk delves into the future of JavaScript, the challenges of bundling UI libraries, and the corporate era of JavaScript libraries with the backing of companies.
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
95 min
Seguridad de tipo de extremo a extremo con React, GraphQL y Prisma
WorkshopFree
Sabin Adams
Sabin Adams
En este masterclass, obtendrás una visión de primera mano de qué es la seguridad de tipo de extremo a extremo y por qué es importante. Para lograr esto, construirás una API de GraphQL utilizando herramientas modernas y relevantes que serán consumidas por un cliente de React.
Qué se incluye:1. Bienvenida y presentación2. Configuración de Prisma (lección 1)3. Configuración de un servidor de GraphQL (lección 2)4. Construcción del esquema de GraphQL (lección 3)5. GraphQL en el cliente (lección 4)6. Cerrar la brecha (lección 5)7. Conclusión
Prerrequisitos- Node.js instalado en tu máquina (12.2.X / 14.X)- Se recomienda (pero no es obligatorio) usar VS Code para las tareas prácticas- Un IDE instalado (se recomienda VSCode)- (Bueno tener) *Un conocimiento básico de Node.js, React y TypeScript
Escribiendo Extensiones de Chrome en React
7 min
Escribiendo Extensiones de Chrome en React
Today's Talk is about making Chrome extensions in React. The speaker demonstrates a boilerplate project and shows how easy it is to get started. The Talk also explores the components of a Chrome extension and how changes trigger a hot reload.
Una Guía Breve para el Desarrollo de React Native
12 min
Una Guía Breve para el Desarrollo de React Native
Today we are discussing the challenges faced by React native developers in mobile deployment. Automation is the key to spending less time on tasks and focusing on delivering features. There is a stage for monitoring mobile apps after release. Differentiating between iOS and Android, there are specific requirements for each. The FASTA file allows for configuring tasks and actions.
Creación para Web y Móvil con Expo
155 min
Creación para Web y Móvil con Expo
Workshop
Josh Justice
Josh Justice
Sabemos que React es para la web y React Native es para Android e iOS. Pero ¿has oído hablar de react-native-web? ¡Para escribir una aplicación para Android, iOS y la web en un solo código base! Al igual que React Native abstrae los detalles de iOS y Android, React Native Web también abstrae los detalles del navegador. Esto abre la posibilidad de compartir aún más código entre plataformas.
En este masterclass, aprenderás a configurar el esqueleto de una aplicación React Native Web que funcione de manera excelente y se vea increíble. Puedes utilizar el código resultante como base para construir la aplicación que desees, utilizando los paradigmas de React y muchas bibliotecas de JavaScript a las que estás acostumbrado. ¡Te sorprenderá la cantidad de tipos de aplicaciones que realmente no requieren un código base separado para móvil y web!
Qué se incluye1. Configuración de navegadores de cajón y de pila con React Navigation, incluyendo la capacidad de respuesta2. Configuración de React Navigation con URLs3. Configuración de React Native Paper, incluyendo el estilo del cajón y los encabezados de React Navigation4. Configuración de un tema de color personalizado que admita el modo oscuro5. Configuración de favicons/iconos de aplicaciones y metadatos6. Qué hacer cuando no puedes o no quieres proporcionar la misma funcionalidad en la web y en el móvil
Requisitos previos- Familiaridad con la construcción de aplicaciones con React o React Native. No es necesario conocer ambos.- Configuración de la máquina: Node LTS, Yarn, ser capaz de crear y ejecutar correctamente una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/
Lecciones aprendidas al solucionar un problema con el carrito de compras
9 min
Lecciones aprendidas al solucionar un problema con el carrito de compras
This Talk discusses lessons learned from troubleshooting a shopping cart issue in a restaurant marketplace app. The bug was difficult to reproduce but occurred more frequently as the app grew. The investigation involved checking frontend logs and using tools like Sentry and Fullstory. The solution involved using the customer's view at checkout as the source of truth and emphasizing the importance of testing and financial responsibility.
Experiencia de UX consistente a gran escala: Lecciones aprendidas cuando llevé el sombrero de DesignOps
31 min
Experiencia de UX consistente a gran escala: Lecciones aprendidas cuando llevé el sombrero de DesignOps
Today's Talk covers the challenges of implementing accessibility in design systems and the importance of using existing libraries. It also emphasizes the use of design tokens and code generation to ensure consistency across different code bases. The Talk explores automation, webhooks, and type safety in design systems, as well as the importance of measuring adoption and building accessibility. Finally, it suggests establishing a DesignOps team to encourage collaboration between designers and developers.
Ecología Digital: ¿Cómo puedes mitigar la huella de carbono de los sitios web?
7 min
Ecología Digital: ¿Cómo puedes mitigar la huella de carbono de los sitios web?
Today's Talk discusses digital ecology and reducing the carbon footprint of websites. Techniques such as using JavaScript or TypeScript, lighter libraries, and optimizing resources can reduce the carbon footprint by 70%. User data collection is important for sustainability, and the Ecolint tool helps make websites more sustainable. It's an open-source tool that can be downloaded and customized.
Manteniéndose seguro en un mundo concurrente
30 min
Manteniéndose seguro en un mundo concurrente
The talk discusses the ramifications of the new concurrent features in React and the misconceptions around the rendering model. It explores the changes in the rendering process and the need to handle state carefully. The talk also highlights the challenges in managing communication with the outside world and the recommended libraries for synchronization. It mentions the benefits of using concurrent mode in existing frameworks and the difficulties in building demos and enforcing immutability. Finally, it emphasizes the benefits of concurrent mode for heavy components.
Innovar con React
156 min
Innovar con React
WorkshopFree
Cristobal Chao
Cristobal Chao
En este masterclass, aprenderás cómo crear un Sistema de Componentes Personalizado desde cero en React, y llevarlo al siguiente nivel.Aprenderás las mejores prácticas al construir un Sistema de Componentes, así como las herramientas que puedes utilizar para ser un colaborador más efectivo con otros equipos multifuncionales.
Qué se incluye1. Introducción2. Aprender los fundamentos de un Sistema de Componentes3. Configuración del entorno de desarrollo4. Importar fuentes5. Elegir una biblioteca base de Componentes React6. Escribir nuestros primeros componentes7. Configurar un tema centralizado8. Escribir estilos personalizados para inyectar en nuestros componentes9. Inyectar iconos en nuestros componentes10. Agregar hooks11. Hacer que los componentes sean responsivos12. Agregar modo oscuro13. Desplegar tu Sistema de Componentes14. Exportar tu Sistema de Componentes a una herramienta de diseño15. Prototipar con tus componentes de producción
Usando MediaPipe para crear aplicaciones de aprendizaje automático multiplataforma con React
20 min
Usando MediaPipe para crear aplicaciones de aprendizaje automático multiplataforma con React
Welcome to a talk on using MediaPipe for cross-platform machine learning applications with ReactJS. MediaPipe provides ready-to-use solutions for object detection, tracking, face mesh, and more. It allows for video transformation and tensor conversion, enabling the interpretation of video footage in a human-readable form. MediaPipe utilizes graphs and calculators to handle the perception pipeline. Learn how to use MediaPipe packages in React and explore a demo showcasing the hands model for detecting landmarks. Custom logic can be written to detect open and closed landmarks, making it useful for applications like American Sign Language.
GraphQL para Desarrolladores de React
113 min
GraphQL para Desarrolladores de React
Workshop
Roy Derks
Roy Derks
Hay muchas ventajas de usar GraphQL como fuente de datos para el desarrollo frontend, en comparación con las API REST. Nosotros, los desarrolladores, por ejemplo, necesitamos escribir mucho código imperativo para recuperar datos y mostrarlos en nuestras aplicaciones y manejar el estado. Con GraphQL, no solo puedes reducir la cantidad de código necesario para la recuperación de datos y la gestión del estado, sino que también obtendrás mayor flexibilidad, mejor rendimiento y, sobre todo, una mejor experiencia de desarrollo. En este masterclass aprenderás cómo GraphQL puede mejorar tu trabajo como desarrollador frontend y cómo manejar GraphQL en tu aplicación frontend de React.
Qué se incluye:1. Introducción a GraphQL2. Consultas en GraphQL3. Mutación de datos4. GraphQL en React5. Uso de un cliente GraphQL
Menos problemas con Lifetimes
6 min
Menos problemas con Lifetimes
The Talk introduces the concept of Lifetime in software development, which is used to handle clean-ups. By using a simple object called Lifetime, engineers can bind clean-up functions and reuse them throughout their applications. Lifetimes can be nested, allowing for the creation of chains and trees to manage dependencies. The Talk also mentions the ability to create different types of lifetimes, such as sequential lifetimes, which can be useful for canceling requests or cleaning up effects from previous iterations.
Llevando la Nueva Arquitectura de React Native a la Comunidad de OSS - Edición de Otoño
29 min
Llevando la Nueva Arquitectura de React Native a la Comunidad de OSS - Edición de Otoño
The Talk discusses the new React Native architecture and its introduction to the open source community. The new architecture aims to bring React 18 to mobile and native platforms, while eliminating the Bridge component bottleneck. It includes core concepts like the new renderer (fabric), native module system (turbo modules), codegen for type safety, and bridge-less mode. The architecture simplifies the development process for web developers, requires changes in build tools, and recommends the use of the Hermes JavaScript engine. It also emphasizes the importance of exploring new APIs, migrating libraries, and providing feedback to improve the ecosystem.
¿Cómo comenzar tu viaje hacia la accesibilidad móvil?
24 min
¿Cómo comenzar tu viaje hacia la accesibilidad móvil?
This talk explores mobile accessibility, including the different types of disabilities and how they affect app usage. It emphasizes the importance of making apps usable for as many people as possible and highlights the challenges faced by individuals with visual impairments. The talk also covers the principles of mobile accessibility, such as scaling the font size, supporting dark mode, and ensuring readable text. External tools and resources, like the Accessibility Inspector and Accessibility Scanner, are recommended for analyzing app accessibility. Various platforms and communities, such as Mobile Ally, Twitter, and React Native AMA, provide valuable resources for learning about mobile accessibility.
3+ Usos de React en un Estudio de Juegos
29 min
3+ Usos de React en un Estudio de Juegos
Game development challenges and solutions include saving games in the cloud, customer support tools, and remote changes to player progress. Custom editors in game development can be generated based on a database schema. The use of web technologies in game development can lead to faster and better games. The speaker discusses the tech stack used in game development, including TypeScript, React, and React Native. The talk concludes with advice for web developers transitioning to game development.
Introducción al Mercado de Bibliotecas
10 min
Introducción al Mercado de Bibliotecas
This Talk provides an introduction to the library marketplace, focusing on selling NPM packages and building UI libraries. It explains the steps to publish a UI library and how clients can install the package. The marketplace dashboard enables setting subscriptions, pricing, and tracking downloads and purchases. Developers receive payments through PayPal on the 20th of each month.
Acelerar la Innovación
10 min
Acelerar la Innovación
Today's Talk focuses on accelerating innovation and the importance of solving the right problem. Design Thinking and the product life cycle are discussed as tools for product innovation. The R approach, which involves constant experimentation and learning, is introduced. The idea of syncing production components from storybook to Figma is explored. Finally, the Talk emphasizes the role of developers as the new creators, unlocking their powers to innovate.