December 8 - 12, 2023
React Day Berlin
Berlin & Online

React Day Berlin 2023

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 main React Conference in Germany 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.
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
16 min
Gestión del Estado de React: 10 Años de Lecciones Aprendidas
Top Content
Watch video: 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.
Explorando los fundamentos de los Componentes del Servidor React
21 min
Explorando los fundamentos de los Componentes del Servidor React
Top Content
Watch video: 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.
Los tipos más útiles de React
21 min
Los tipos más útiles de React
Top Content
Watch video: 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.
Prepara tu React, Nuevos Core Web Vitals están Llegando
30 min
Prepara tu React, Nuevos Core Web Vitals están Llegando
Watch video: 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.
Repensando las Estrategias de Agrupación
32 min
Repensando las Estrategias de Agrupación
Watch video: 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.
Componentes de Servidor React
27 min
Componentes de Servidor React
Watch video: 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.
Todo Sobre Astro
28 min
Todo Sobre Astro
Watch video: 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.
Javascript Debería Venir Con Baterías
30 min
Javascript Debería Venir Con Baterías
Watch video: 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.
Llevando los Componentes del Servidor React a React Native
29 min
Llevando los Componentes del Servidor React a React Native
Top Content
Watch video: 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.
Next.js para Desarrolladores de React.js
157 min
Next.js para Desarrolladores de React.js
Top Content
Workshop
Adrian Hajdin
Adrian Hajdin
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.
¿Cuánta RAM está usando tu UseMemo? ¡Vamos a perfilarlo!
20 min
¿Cuánta RAM está usando tu UseMemo? ¡Vamos a perfilarlo!
Top Content
Watch video: ¿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.
Durable Objects - Todo En Todas Partes Todo De Una Vez Por No Mucho Dinero
31 min
Durable Objects - Todo En Todas Partes Todo De Una Vez Por No Mucho Dinero
Watch video: 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.
Autenticación Más Allá de las Contraseñas
127 min
Autenticación Más Allá de las Contraseñas
WorkshopFree
Juan Cruz Martinez
Juan Cruz Martinez
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?
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡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
Construcción de APIs GraphQL de grado empresarial con Diseño Guiado por el Dominio y Arquitectura Limpia
22 min
Construcción de APIs GraphQL de grado empresarial con Diseño Guiado por el Dominio y Arquitectura Limpia
Watch video: 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.
Construyendo Aplicaciones AI para la Web
98 min
Construyendo Aplicaciones AI para la Web
Workshop
Roy Derks
Roy Derks
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.
UI Configurada por Archivo de Configuración usando ReactJS
7 min
UI Configurada por Archivo de Configuración usando ReactJS
Watch video: 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.
Curso intensivo sobre Astro y Storyblok
119 min
Curso intensivo sobre Astro y Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
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 & CMS sin cabeza- Usa el diseño atómico en tu aplicación Astro & Storyblok- Creación de páginas, adición de contenido y comprensión de cómo funciona el enrutamiento dinámico con sin cabeza
La Anatomía de Webpack: Una Inmersión Profunda en Su Arquitectura
15 min
La Anatomía de Webpack: Una Inmersión Profunda en Su Arquitectura
Watch video: 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.
Desafíos de Descomponer un Front-End Masivo Usando Micro-Frontends
28 min
Desafíos de Descomponer un Front-End Masivo Usando Micro-Frontends
Watch video: 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.
Creando React Impecable: Mejores Prácticas para un Código Mantenible
29 min
Creando React Impecable: Mejores Prácticas para un Código Mantenible
Watch video: 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.
Rompe la Carrera: Detección Fácil de Condiciones de Carrera para React
31 min
Rompe la Carrera: Detección Fácil de Condiciones de Carrera para React
Watch video: 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.
Juegos multijugador con React Three Fiber y WebSockets
28 min
Juegos multijugador con React Three Fiber y WebSockets
Watch video: 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.
Deja que la IA Sea Tus Documentos
88 min
Deja que la IA Sea Tus Documentos
Workshop
Jesse Hall
Jesse Hall
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.
Sistema de Tipos React
21 min
Sistema de Tipos React
Watch video: 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.
OpenAI en React: Integrando GPT-4 con Tu Aplicación React
11 min
OpenAI en React: Integrando GPT-4 con Tu Aplicación React
Watch video: 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.
Construyendo un Mejor Marco de Micro-Frontend que Permite la Libertad de Plataforma
28 min
Construyendo un Mejor Marco de Micro-Frontend que Permite la Libertad de Plataforma
Watch video: 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.
Hackeando JSX: Construyendo en Minecraft con React
7 min
Hackeando JSX: Construyendo en Minecraft con React
Watch video: 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.
Entendiendo los Patrones de Renderización
9 min
Entendiendo los Patrones de Renderización
Watch video: 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.
Búsqueda solo con CSS*: ¡Mejora el rendimiento de filtrado en React con CSS!
11 min
Búsqueda solo con CSS*: ¡Mejora el rendimiento de filtrado en React con CSS!
Watch video: 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.
Aplicar o no: Cuándo elegir Nativo o Web
23 min
Aplicar o no: Cuándo elegir Nativo o Web
Watch video: 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.
Cómo consumir automáticamente APIs con React
7 min
Cómo consumir automáticamente APIs con React
Watch video: 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.
SOLIDifica Tu Código React
11 min
SOLIDifica Tu Código React
Watch video: 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.
¿Qué hay de nuevo en Redux Toolkit 2.0?
8 min
¿Qué hay de nuevo en Redux Toolkit 2.0?
Watch video: ¿Qué hay de nuevo en Redux Toolkit 2.0?
Mark Erickson discusses the new features in Redux Toolkit 2.0, including the simplification of Redux logic and the addition of RTK query for data fetching. He mentions the challenges of achieving ESM common JS compatibility and refers to a blog post he wrote about it. The plan to ship major versions of RTK, Redux core, Reselect, and React Redux together is discussed, with a focus on the conversion of Redux core to TypeScript and the need for packaging updates and TypeScript type upgrades.
Preparándose para el Éxito: Guía de un Ingeniero de Frontend para la Diligencia Técnica
32 min
Preparándose para el Éxito: Guía de un Ingeniero de Frontend para la Diligencia Técnica
Watch video: 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.
El Futuro del Almacenamiento Web: Explorando APIs de Almacenamiento Avanzadas
9 min
El Futuro del Almacenamiento Web: Explorando APIs de Almacenamiento Avanzadas
Watch video: El Futuro del Almacenamiento Web: Explorando APIs de Almacenamiento Avanzadas
Today's Talk explores three powerful web APIs: indexedDB, cache storage, and the filesystem API. IndexedDB enables offline functionality and provides advanced features like coding & indexing, transactions, versioning, and security. Cache storage supports various caching strategies and namespaces, while the File System API allows fine-grained control over files, facilitating file uploads and downloads. A code example of interacting with the File System API is also provided.
Aplicando los Principios del Pensamiento de Producto a tu Sistema de Diseño
6 min
Aplicando los Principios del Pensamiento de Producto a tu Sistema de Diseño
Watch video: Aplicando los Principios del Pensamiento de Producto a tu Sistema de Diseño
Today's Talk focuses on applying product-making principles to design systems, emphasizing prioritization, MVPs, and metrics. It highlights the importance of understanding user needs and business goals through research and data collection. The Talk also emphasizes the iterative process of building components, gathering feedback, and iterating based on user validation. Lastly, it stresses the significance of measuring progress with metrics to track usage and adoption, and to demonstrate the impact of design system efforts.
Cepillado Diario para la Velocidad del Sitio Web: Abrace el Ritual del Presupuesto de Rendimiento
13 min
Cepillado Diario para la Velocidad del Sitio Web: Abrace el Ritual del Presupuesto de Rendimiento
Watch video: Cepillado Diario para la Velocidad del Sitio Web: Abrace el Ritual del Presupuesto de Rendimiento
This Talk provides an introduction to web performance and emphasizes the importance of setting performance goals and budgets. It explains the steps for creating and applying a performance budget and suggests various tools for performance budgeting. The Talk also highlights the need to make the performance budget concrete and meaningful, connect it to business goals, and integrate it into the development pipeline. It concludes by emphasizing the importance of maintaining performance and connecting with the speaker for more information.
Construyamos una Navegación Espacial para TV
34 min
Construyamos una Navegación Espacial para TV
Watch video: Construyamos una Navegación Espacial para TV
Today's Talk is about building a spatial navigation library for Smart TVs. The speaker shares their experience and challenges in building applications for Smart TVs. They demonstrate the functionality of spatial navigation using React and React Router. The navigation engine class is developed to handle TV control events and navigate through elements. Circular navigation is implemented to make navigation easier for users in TV applications.
Una Guía Nerd para los Conceptos de Tendencia en la Web
10 min
Una Guía Nerd para los Conceptos de Tendencia en la Web
Watch video: Una Guía Nerd para los Conceptos de Tendencia en la Web
Going to conferences can be overwhelming, so the speaker created a guide to trending web concepts using comic book characters. The chosen topic is resumability, and the story of Tony Stark is used to explain it. Resumability allows for immediate interactivity on a web page and is achieved through serialization and execution of code. The speaker challenges the audience to propose topics for future guides.
¿Cómo Usamos React Native en Mattermost? Arquitectura y Diseño
18 min
¿Cómo Usamos React Native en Mattermost? Arquitectura y Diseño
Watch video: ¿Cómo Usamos React Native en Mattermost? Arquitectura y Diseño
Today's talk is about how Mattermost uses React Native to develop their chat app. They faced challenges with multi-server support and offline support, but React Native's popularity and active community made it a good fit for their stack. They made decisions to improve reliability, such as using TypeScript and following coding rules. WatermelonDB brought scalability to their system, but also had challenges with a steep learning curve and database migrations. They use hooks for state management and native integration when necessary. They also implemented shared extensions and a portable device state feature.
WebAssembly y React: Una nueva era de aplicaciones web de alto rendimiento
14 min
WebAssembly y React: Una nueva era de aplicaciones web de alto rendimiento
Watch video: WebAssembly y React: Una nueva era de aplicaciones web de alto rendimiento
WebAssembly is a binary instruction format for a stack-based virtual machine, enabling deployment of code in languages like Go, Rust, or C++ to run in the browser. It allows for efficient image compression algorithms and whole runtimes like Node.js in the browser. WebAssembly provides a capability-based security layer and eliminates the need to worry about server setup. It is already being used by well-known organizations and platforms, and continues to evolve with upcoming features such as a component model, neural network capabilities, garbage collection, and multithreading. WebAssembly modules can be used in React and as a server tool.
DOM Virtual: De vuelta en Bloque
9 min
DOM Virtual: De vuelta en Bloque
Watch video: DOM Virtual: De vuelta en Bloque
Hi, my name is Anand Bai. I'll be talking about virtual DOM and its performance. Rich Harris argued that the virtual DOM is not as efficient as many believe, leading to the emergence of the meme that it's pure overhead. Today, I'm going to introduce something new, a new approach to doing the virtual DOM. MillionJS, a drop-in replacement for React, is significantly faster than Preact and React on benchmarks. The block virtual DOM, introduced by Block DOM, is a potential solution to existing virtual DOM libraries like React.
Desconstruyendo el Rastreo Distribuido
8 min
Desconstruyendo el Rastreo Distribuido
Watch video: Desconstruyendo el Rastreo Distribuido
Distributed tracing is a powerful technique for tracking requests and operations in a system, especially in full stack and microservice applications. The reinvention of distributed tracing introduces the concept of a trace and spans to capture debugging data. Enhancements include tags and a status field for better analysis, and the distribution of traces using a trace context for continued tracing.
Aplicaciones locales con ElectricSQL y React
12 min
Aplicaciones locales con ElectricSQL y React
Watch video: Aplicaciones locales con ElectricSQL y React
Electric SQL is a local-first sync layer that allows you to build applications directly on top of Postgres using React. It provides instant results, offline functionality, and built-in multi-user collaboration. The system ensures transactional causal plus consistency and supports real-time multi-user sync and cross-platform usage. Electric SQL eliminates boilerplate code, provides a high-quality user experience, and allows for cost savings and operational simplicity.
Cómo MDX es un cambio de juego para la Documentación de tu Proyecto React
28 min
Cómo MDX es un cambio de juego para la Documentación de tu Proyecto React
Watch video: Cómo MDX es un cambio de juego para la Documentación de tu Proyecto React
Good documentation is crucial and can make or break a project. Word of mouth is important in the industry, and great documentation can attract users. MDX is a powerful tool for writing documentation, allowing for customization and reuse of components. Documentation should be treated like code, with testing and continuous improvement. Responsible AI usage is important, and a balanced approach to documentation, including inline comments and different formats, should be used.
Construyendo un Sumiller Digital en ChatGPT y la API de OpenAI
8 min
Construyendo un Sumiller Digital en ChatGPT y la API de OpenAI
Watch video: Construyendo un Sumiller Digital en ChatGPT y la API de OpenAI
Today's Talk introduces the concept of building a digital AI-powered sommelier using the Bracel.ai SDK. The speaker emphasizes the role of developers in shaping the impact of AI, particularly generative AI, on our work. The Talk showcases a simple digital sommelier built using the Resell AI SDK and OpenAI API, highlighting the ease of implementation and the potential of open source tools. The speaker encourages users to explore the possibilities of generative AI responsibly and recommends checking out And Why, a design and technology studio from Munich.
Superpoderes de la API Web del Navegador
30 min
Superpoderes de la API Web del Navegador
Watch video: Superpoderes de la API Web del Navegador
Today's Talk covers various web APIs and their functionalities, including the intersection observer API, screen wake lock API, background sync API, and broadcast channel API. The speaker emphasizes the importance of optimizing performance and using standardized code to reduce application bundle size. They also highlight the need for environmental responsibility in JavaScript development. The Talk addresses handling API support and modifying code to suit different browser implementations.
¿Cómo el Shadow DOM te tiene cubierto?
18 min
¿Cómo el Shadow DOM te tiene cubierto?
Watch video: ¿Cómo el Shadow DOM te tiene cubierto?
The Shadow DOM allows for encapsulation and composability, enabling elements to have their own features without affecting the rest of the webpage. Custom elements in the Shadow DOM have their own behavior through encapsulation and scoped styles. Composability is key in software development, allowing for dynamic data passing. The Shadow DOM provides a way to modify the appearance of elements within it, but some properties are marked as important and cannot be changed. Building a Chrome extension using the Shadow DOM allows for composable and encapsulated experiences.
Cómo mejorar la seguridad de su aplicación web utilizando Mozilla Observatory
9 min
Cómo mejorar la seguridad de su aplicación web utilizando Mozilla Observatory
Watch video: Cómo mejorar la seguridad de su aplicación web utilizando Mozilla Observatory
The Talk discusses how to improve web application security using Mozilla Observatory. It covers topics such as evaluating security headers, maintaining grade history, and implementing content security policies. The importance of securing cookies and enabling HTTP to HTTPS redirection is emphasized. The use of referrer headers to control browser behavior and sub-resource integrity to prevent compromising files are also highlighted.
Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX
7 min
Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX
Watch video: Hackeando un e-Reader para Mostrar Mi Menú de Té Con JSX
React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.
React(ing) a WebRTC: Construye Mejores Experiencias de Audio y Video con Daily React
10 min
React(ing) a WebRTC: Construye Mejores Experiencias de Audio y Video con Daily React
Watch video: React(ing) a WebRTC: Construye Mejores Experiencias de Audio y Video con Daily React
Imagine building your own video conferencing app in React using Daily React, a React library built on Daily's client SDK. Rendering components and user controls in the app is crucial, including joining the call, displaying participants, toggling camera and microphone, and leaving the call. Optimize hooks and add features like device pickers, screen sharing, and text chat. Find the code on daily's GitHub and documentation at docs.daily.co.
Dominando Mobile DevOps: Aprovechando React Native para un alto rendimiento
8 min
Dominando Mobile DevOps: Aprovechando React Native para un alto rendimiento
Watch video: Dominando Mobile DevOps: Aprovechando React Native para un alto rendimiento
Today's Talk explores mobile DevOps and how React Native simplifies mobile releases. Key metrics for DevOps performance include deployment frequency, lead time for changes, time to restore service, and change failure rate. React Native allows over-the-air updates, eliminating the need for resubmission. Overdue updates offer advantages like bypassing app store validations and quick updates, but have limitations. Other options to consider are in-app models for forced upgrades, EAS Build and Submit, Repack for micro-frontends, and upcoming server components in React Native.
Panel de discusión "Innovación en React"
32 min
Panel de discusión "Innovación en React"
Watch video: Panel de discusión "Innovación en React"
Tejas Kumar
Sara Vieira
Mark Erikson
Miguel Ángel Durán
Sylwia Vargas
Elian Van Cutsem
6 authors
The Talk discussed various topics related to React, including the wishlist for future versions, the importance of accessibility, reducing bundle size, and improving deployment. It also explored React's innovation, stability, and the role of meta-frameworks. The challenges of contributing to React's open source project were highlighted, along with the need for a more community-driven approach. The Talk concluded with a lunch break announcement.
Desarrollo Impulsado por la Empatía
29 min
Desarrollo Impulsado por la Empatía
Watch video: Desarrollo Impulsado por la Empatía
This Talk explores empathy-driven development in software engineering, emphasizing the importance of understanding and applying empathy in code reviews, communication, and team collaboration. It highlights the benefits of empathy, such as personal growth, effective communication, and high code quality, while cautioning against excessive empathy. The Talk also discusses building empathetic teams, conducting empathy workshops, and practicing empathy in interviews. It addresses language barriers, handling engineers, and the role of AI in fostering empathy.
Plugins al estilo WordPress, pero para Next.js
Dec 12, 17:22
Plugins al estilo WordPress, pero para Next.js
Watch video: Plugins al estilo WordPress, pero para Next.js
This Talk discusses the implementation of a plugin system for Next.js, similar to Wordpress. The plugin system allows for the co-location of different functionalities within their own modules. Plugins can be easily added or removed without affecting other parts of the website. The Talk also showcases a demo of the plugin system in action. The key takeaways include the benefits of co-locating features, the importance of code abstraction beyond packages, and the future of copy-pasting as a means of code reuse.
Un Cuento de los Cambiantes. De Ingeniero a Gerente y Viceversa
7 min
Un Cuento de los Cambiantes. De Ingeniero a Gerente y Viceversa
Watch video: Un Cuento de los Cambiantes. De Ingeniero a Gerente y Viceversa
This talk explores the experience of flip-flopping between being an engineer and a manager in the software development field. It emphasizes the importance of maintaining hands-on technical skills for effective engineering management. The talk also highlights the value of managers having recent technical experience and the importance of leadership from both managers and senior engineers. Overall, the talk encourages those considering a transition to management to go for it and emphasizes the unique role of an engineering manager.
El día que rompí React Native
30 min
El día que rompí React Native
Watch video: El día que rompí React Native
The Talk discusses an incident where a React Native release caused broken builds and how it was fixed. The incident occurred due to the NPM package becoming too big, leading to the move of Android artifacts to Maven central. The use of dynamic versions and the plus dependency in React Native were identified as contributing factors to the problem. Lessons learned include the importance of removing plus dependencies and the need for better recommendations for creating resilient libraries.
Construir Inteligencia en el Borde - Aprendizaje Automático con React Native
13 min
Construir Inteligencia en el Borde - Aprendizaje Automático con React Native
Watch video: Construir Inteligencia en el Borde - Aprendizaje Automático con React Native
The Talk is about building intelligence at the edge with machine learning and React Native. It covers machine learning concepts, building ML models with React, challenges, best practices, and resources.
Escapar de los fallos de seguridad
7 min
Escapar de los fallos de seguridad
Watch video: Escapar de los fallos de seguridad
The Talk discusses web security and the importance of strong code protection. It highlights a vulnerability where a weak five-digit numeric code was used, allowing easy access to sensitive content. The speaker emphasizes the need for throttling as a mechanism to prevent attacks. The company implemented throttling and blocked access to photos to improve security. However, stronger code and additional measures, such as limiting access to specific IP addresses and timeframes, are still needed.
Acelerando la Innovación en Diseño y Desarrollo con Herramientas Impulsadas por IA
21 min
Acelerando la Innovación en Diseño y Desarrollo con Herramientas Impulsadas por IA
Watch video: Acelerando la Innovación en Diseño y Desarrollo con Herramientas Impulsadas por IA
The Talk discusses the importance of innovation and quick iterations in solving problems. It emphasizes the benefits of blending designers and developers from the beginning and using React for component reusability. Figma's dev mode capabilities are mentioned as a tool for faster development, although it is still a work in progress.
Empujando los límites hasta el borde
11 min
Empujando los límites hasta el borde
Watch video: Empujando los límites hasta el borde
Today's Talk introduces the concept of the Edge and Content Delivery Networks (CDNs), which bring content closer to users, improving performance and security. The Talk also discusses Edge Computing and Distributed Hosting (DH), which processes client data closer to the source for faster delivery of dynamic content. The use of DH offers benefits such as better performance, security, real-time insights, and scalability. The Talk concludes with an overview of Edge concepts, including server-side rendering logic and custom middleware for each request.