December 8 - 12, 2023

Berlin & Online

React Day Berlin 2023

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

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.

Sponsorship opportunitites

Versión en EspañolES

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

Cory House

reactjsconsulting.com

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.

react react query best practices indexeddb react react componentdidmount react performance react state management react swr react usetransition rtk query vs react query

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

Daishi Kato

Zustand, Jotai & Waku author

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.

react server components

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

Matt Pocock

Independent

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.

typescript react element vs component react fc react with typescript

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

Ivan Akulov

Google Developer Expert, Web Performance Consultant, Netherlands

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.

performance react web vitals

Repensando las Estrategias de Agrupación

32 min

Repensando las Estrategias de Agrupación

Watch video: Repensando las Estrategias de Agrupación

Tobias Koppers

Webpack and Turbopack Creator

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.

tool building

Componentes de Servidor React

27 min

Componentes de Servidor React

Watch video: Componentes de Servidor React

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

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

react server components

Todo Sobre Astro

28 min

Todo Sobre Astro

Watch video: Todo Sobre Astro

Elian Van Cutsem

Mentorship available

React Bricks

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

astro

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

Luca Casonato

Deno

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.

deno

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

Szymon Rybczak

Callstack

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

react native react server components backend for react native react native server components repack react native

Next.js para Desarrolladores de React.js

157 min

Next.js para Desarrolladores de React.js

Top Content

Workshop

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.

react nextjs react

¿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!

Giulio Zausa‮

Flux.ai

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.

performance react memory leak

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

Jani Eväkallio

Software Engineer

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.

devtools

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

127 min

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

WorkshopFree

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?

authentication

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

¡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

javascript react server components

Construyendo Aplicaciones AI para la Web

98 min

Construyendo Aplicaciones AI para la Web

Workshop

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.

web development artificial intelligence openai

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

Petar Ivanov

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.

graphql domain driven design react

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

Joban Singh

Software engineer at Microsoft Azure

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.

architecture config driven ui react react config

Curso intensivo sobre Astro y Storyblok

119 min

Curso intensivo sobre Astro y Storyblok

WorkshopFree

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

headless cms astro

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

Oleksandr Tryshchenko

Personio

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.

micro-frontends

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

Nitin Kumar

Razorpay

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.

architecture

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

Nicolas Dubien

Pigment

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.

testing devtools open-source react race condition

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

Maya Nedeljković Batić

Linear

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.

game development react games react websockets

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

Miguel Ángel Durán

midudev

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.

best practices

Deja que la IA Sea Tus Documentos

88 min

Deja que la IA Sea Tus Documentos

Workshop

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

Josh Goldberg

Open Source enthusiast, TypeScript contributor, writing a book on Typescript

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

typescript

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

Jesse Hall

codeSTACKr

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.

artificial intelligence

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

Saravana Srinivasan

Red Hat

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.

micro-frontends micro frontends react

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

Felix Wotschofsky

CODE University of Applied Sciences

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.

developer challenges react games

Entendiendo los Patrones de Renderización

9 min

Entendiendo los Patrones de Renderización

Watch video: Entendiendo los Patrones de Renderización

Atila Fassina

CrabNebula

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.

patterns

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!

Evyatar Alush

Front End Engineer at Meta, Vest validation framework creator

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.

css

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

Mike Hartington

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.

case study

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

Theodore Vorillas

Proxima Analytics

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.

api development react api

SOLIDifica Tu Código React

11 min

SOLIDifica Tu Código React

Watch video: SOLIDifica Tu Código React

Islem Maboud

Toptal

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.

solidjs react js advanced concepts

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

Armin Ayatollahi

TechMiners

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.

career

¿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 Erikson

Replay.io

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.

state management

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

Shubham Gautam

Mentorship available

Headout

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.

api development

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

Raymond Luong

Mentorship available

Mercury

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.

design systems

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

Sergio Avalos

Spotify

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.

react

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

Medhat Dawoud

Senior Software Engineer at Miro and a Google Developer Expert in Web Technologies

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.

performance

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

Daniel Afonso

PagerDuty

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.

web development frameworks

¿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

Daniel Espino García

Mattermost

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.

react native

Aplicaciones locales con ElectricSQL y React

12 min

Aplicaciones locales con ElectricSQL y React

Watch video: Aplicaciones locales con ElectricSQL y React

James Arthur

ElectricSQL

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.

state management

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

Eddie Jaoude

EddieHub

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.

documentation

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

Nikola Mitrovic

Passionate about web performance and ensuring the best possible User Experience of web applications

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.

web development api development

DOM Virtual: De vuelta en Bloque

9 min

DOM Virtual: De vuelta en Bloque

Watch video: DOM Virtual: De vuelta en Bloque

Aiden Bai

Dimension (dimension.dev)

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.

react

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

Carmen Huidobro

Directus

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.

web apps react native webassembly reactjs webassembly

Desconstruyendo el Rastreo Distribuido

8 min

Desconstruyendo el Rastreo Distribuido

Watch video: Desconstruyendo el Rastreo Distribuido

Lazar Nikolov

Sentry

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.

performance opentelemetry react

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

Jan Demmerle

&why GmbH

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.

artificial intelligence

¿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?

Mukul Ramchandani

Viacom18 - SDE2

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.

web components

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

Karan Kiri

SDE 2 FE at Fabric, Previous - Razorpay

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.

security

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

Tiger Oakes

Senior engineer at Microsoft

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 svg iot fun demos

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

Christian Stuff

Daily

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.

case study react webrtc reactjs video chat

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

Cyril Bonaccini

BAM

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.

react native devops mobile apps

Desarrollo Impulsado por la Empatía

29 min

Desarrollo Impulsado por la Empatía

Watch video: Desarrollo Impulsado por la Empatía

Manjula Dube

Vanguard

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.

case study

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"

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.

innovation

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

Sanket Sahu

GeekyAnts

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.

next.js

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

Matt Colman

Atlassian

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.

team productivity

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

Nicola Corti

Software Engineer in the React Native team @ Meta

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.

react native developer experience

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

Rashmi Nagpal

Cactus

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.

machine learning

Escapar de los fallos de seguridad

7 min

Escapar de los fallos de seguridad

Watch video: Escapar de los fallos de seguridad

Henrik Fricke

WakeSys

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.

security

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

Cristobal Chao

Torii

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.

innovation

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

Facundo Giuliani

Facundo works as a DevRel Engineer at Storyblok

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.

edge functions

React Day Berlin 2023

Build apps, not walls

Available in other languages: