June 17 - 21, 2022
React Summit
Amsterdam & Online

React Summit 2022

La conferencia de React más grande del mundo

The biggest React conference worldwide

Esta edición del evento ha finalizado, las últimas actualizaciones de este React Conference están disponibles en el sitio web de la marca.
Evitando CSRF con Remix
7 min
Evitando CSRF con Remix
Welcome to my session on avoiding CSRF with Remix. Remix helps protect against CSRF by thinking about actions in terms of HTML form elements. To avoid CSRF with Remix, set the same site attribute on cookies and consider using a token in addition to the attribute. The token-based approach involves generating a unique token per session and form, transmitting it with the form, sending it back when the user submits the form, and securely validating it on the server side.
Impacto: Creciendo como Ingeniero
27 min
Impacto: Creciendo como Ingeniero
Top Content
This Talk explores the concepts of impact and growth in software engineering. It emphasizes the importance of finding ways to make the impossible possible and the role of mastery in expanding one's sphere of impact. The Talk also highlights the significance of understanding business problems and fostering a culture of collaboration and innovation. Effective communication, accountability, and decision-making are essential skills for engineers, and setting goals and finding sponsors can help drive career growth. Feedback, goal setting, and stepping outside of comfort zones are crucial for personal development and growth. Taking responsibility for one's own growth and finding opportunities for impact are key themes discussed in the Talk.
Manejo de datos a gran escala para desarrolladores de React
23 min
Manejo de datos a gran escala para desarrolladores de React
This Talk discusses handling data at scale for React developers, including scaling databases and the need for search. It explores different ways to fetch data in React, such as using useEffect, fetch, and setState. The Talk also introduces Suspense for data fetching and how it improves user experience. It covers controlling React Suspense, handling search, and using render-as-you-fetch. The Talk concludes with a discussion on the RFC status and fetching in event handlers.
5 Años de Construir React Table
24 min
5 Años de Construir React Table
Top Content
React Table is a popular table library that started with HTML5 tables and transitioned to React. It faced challenges with integration and user requests, leading to the development of React Table. The introduction of the Headless UI pattern and TypeScript support improved the library's capabilities and quality. Generics and TypeScript played a significant role in reducing the code size and improving development. React Table is now going framework agnostic and partnering with AG Grid.
Cómo los Aplicaciones de React son Hackeadas en el Mundo Real
7 min
Cómo los Aplicaciones de React son Hackeadas en el Mundo Real
How to hack a RealWorld live React application in seven minutes. Tips, best practices, and pitfalls when writing React code. XSS and cross-site scripting in React. React's secure by default, but not always. The first thing to discover: adding a link to a React application. React code vulnerability: cross-site scripting with Twitter link. React doesn't sanitize or output H ref attributes. Fix attempts: detect JavaScript, use dummy hashtag, transition to lowercase. Control corrector exploit. Best practices: avoid denialist approach, sanitize user inputs. React's lack of sanitization and output encoding for user inputs. Exploring XSS vulnerabilities and the need to pretty print JSON. The React JSON pretty package and its potential XSS risks. The importance of context encoding and secure coding practices.
No olvides React Memo
7 min
No olvides React Memo
The Talk covers topics such as React memo compiler, use memo and use callback, building custom hooks, and the benefits of using use ref. It also explores the similarities between use memo and use ref, and the use of React Memo for preventing re-renders and optimizing expensive calculations. The speaker also shares personal information and contact details.
Manteniendo la Cordura con Micro-Frontends en Producción de React Aplicando Observabilidad
7 min
Manteniendo la Cordura con Micro-Frontends en Producción de React Aplicando Observabilidad
Observability for microfrontends involves defining clear separation of concerns between teams and tracking errors in production with structured events. By using React boundaries, failures can be isolated and high observability can be achieved. Logging errors with metadata allows for querying specific error types and receiving notifications. Automating the process with Terraform simplifies observability for microfrontends.
La única forma de comer un elefante: Code Splitting con Server Side Rendering
9 min
La única forma de comer un elefante: Code Splitting con Server Side Rendering
The Talk discusses the challenges of handling DOM manipulation with JavaScript and the performance issues that arise from using SPAs. It explores the solution of server-side rendering (SSR) to address SEO concerns but notes that bundle size remains an issue. Code splitting is introduced as a way to load content dynamically, but it presents challenges for SSR. The speaker suggests a solution using vanilla.js that solves the problem without scalability issues.
Nuevo Motor de Renderizado de React de AG Grid
6 min
Nuevo Motor de Renderizado de React de AG Grid
Today's Talk introduces AG Grid's new React rendering engine, highlighting its features and benefits. The difference between AG Grid and React table is explained, emphasizing AG Grid's powerful UI and enterprise capabilities. The integration of AG Grid and React is discussed, showcasing how React is used throughout the grid and its customizations.
Localización para casos de uso del mundo real: Aprendizajes clave de la incorporación de marcas globales
8 min
Localización para casos de uso del mundo real: Aprendizajes clave de la incorporación de marcas globales
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.
Reaccionando a Web3
6 min
Reaccionando a Web3
Decentology provides developer tools for building React component-based blockchain applications without writing blockchain code. Web3 development is beneficial for applications with game engines, microtransactions, mobile payments, mediator contracts, business logic applications, simple authentication, and payments. They advocate for open source and allow developers to add a small royalty fee to paid transactions.
Hablemos de Re-renderizados
23 min
Hablemos de Re-renderizados
Top Content
This Talk discusses React performance and how re-renders can affect it. It highlights common mistakes and misconceptions, such as the overuse of useMemo and useCallback hooks. The importance of React.memo in preventing unnecessary child component re-renders is emphasized. Creating components in render functions is identified as a major performance killer, and the benefits of moving state down and wrapping state around children are explained. The Talk also covers optimizing component rendering through memoization and provides a recap of the key points.
El Arte de la Programación Funcional
26 min
El Arte de la Programación Funcional
Functional programming is a beautiful paradigm that allows us to understand programs and how entities behave and interact. It has nice characteristics like predictability, which makes testing and debugging easier. We explore how functional programming handles side effects and generative art. We learn about drawing patterns and grids with recursive functions, handling state in functional programming, and creating fashion using functional programming techniques. We also discuss handling randomness in functional programming and how to introduce organic variation and randomness to art while maintaining predictability.
Aplicaciones de React Microfrontend para TVs y Consolas de Juegos
25 min
Aplicaciones de React Microfrontend para TVs y Consolas de Juegos
This Talk discusses the architecture journey of a sports engagement platform, transitioning from a monolith to a microfrontend architecture. The ALEP microfrontend architecture is introduced to manage the complexity of a complex catalog and enable efficient deployment and version management. The deployment and release process involves using AliB and updating metadata in the deployment dashboard. The integration to React and TV development process involves using the AliB package and having independent lifecycles for packages. Shared code is used across different targets, and testing is done in a remote virtual lab. Focus management and key moments detection in sports are also addressed.
Desde Blender hasta la Web: El Viaje de un Modelo 3D
26 min
Desde Blender hasta la Web: El Viaje de un Modelo 3D
Today's Talk is about Blender and 3D in the web, covering topics such as rendering engines, material properties, exporting models, using React Fiber, lighting and shadows, state management, and adding wobbling effects. The speaker demonstrates how to create a 3D cupcake model and customize its appearance and behavior using React and Blender. The Talk also touches on topics like frosting selection, color changes, and adding orbit controls for interactive movement.
Tienes Tiempo para Construirlo Dos Veces
21 min
Tienes Tiempo para Construirlo Dos Veces
Top Content
Today's Talk focuses on software rewrites, specifically the transition from jQuery to React. The speaker shares their experience of rewriting a jQuery app to React, highlighting the benefits of the rewrite in terms of improved user experience and increased conversions. Approaches to software rewrites are discussed, including the page-by-page approach which allows for product innovation. The speaker emphasizes the importance of prioritizing rewrites or refactors for startups. The Talk concludes with insights on testing, server-side functionality, and the overall value of the rewrite.
Explorando AR Try-On con React Native
20 min
Explorando AR Try-On con React Native
This Talk discusses exploring AR Tryon with React Native, implementing AR try-on experiences in e-commerce apps, and considerations for AR development. It also covers the integration of AR platforms like ARKit and ARCore with React Native using the Duvero bridge. The Talk highlights the use of off-the-shelf solutions like Wanna's SDK for virtual try-on and Snap's AR technology and shopping extension. The importance of creating 3D models for AR Try-On and the challenges of writing native code for AR development are also mentioned.
Enrutamiento en React 18 y más allá
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Infiltra tu propia aplicación React Native
24 min
Infiltra tu propia aplicación React Native
Every bug and feature can be a potential flaw or entry point for bad actors. React Native projects have many dependencies that can be exploited. It's important to understand your app's native code and follow security guidelines. Analyzing and modifying code can alter an application's behavior. Repackaging and modifying compiled code is relatively easy. App update vulnerabilities can be demonstrated by redirecting URLs. Code reviews and automated tooling are important for accountability. There are resources available to learn about basic security precautions for React Native.
El Viaje de los Proyectos de CodeSandbox
32 min
El Viaje de los Proyectos de CodeSandbox
Code Sandbox is an online code editor that allows for easy sharing of code. It started as a side project and evolved into a company with significant growth. Code Sandbox Projects integrates Git and allows for contributions back to the original sandbox. Code Sandbox uses a micro VM for fast collaboration and hibernation. The future of Code Sandbox includes improved performance and integration of a faster bundler.
React Native en todas partes
22 min
React Native en todas partes
React Native Everywhere enables code sharing and platform individuality, responsive composition and navigation are key focus areas, the React Bangalore community has played a role in the development of React Native design systems, React Native URL Router provides a native feel with drag-from-edge navigation, collaboration with Software Mansion has been beneficial, and token-based centralization is important for consistent adaptation of design systems.
Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes
27 min
Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes
This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.
El caché de Apollo es tu amigo, si lo conoces
23 min
El caché de Apollo es tu amigo, si lo conoces
This Talk discusses various aspects of Apollo Cache in GraphQL and Apollo Client 3. It covers topics such as cache fetch policies, normalization, updates, and garbage collection. The importance of proper data storage and management in the cache is emphasized. The Talk also explores the challenges of managing lists and the need for custom update functions. Overall, it provides insights into optimizing the performance and efficiency of Apollo Cache in software development.
Full-stack JS hoy: Fastify, GraphQL y React
25 min
Full-stack JS hoy: Fastify, GraphQL y React
The Talk discusses building a modern full stack application with JavaScript and GraphQL, emphasizing the importance of prioritizing the critical 20% of challenges. It highlights the benefits of building a productive and transparent tech stack with modularity and developer-friendly tools. The use of PostGrey as a relational database and Fastify as a server framework is recommended. The Talk also explores the advantages of using Mercurius and Urql for GraphQL implementation. Additionally, it mentions the use of React, SSR, and Fastify Vite for full-stack SSR and modular components. The Talk concludes by mentioning the advantages of this stack for complex functionality and the possibility of using Fastify in a serverless infrastructure.
Flujo de trabajo de desarrollo de extremo a extremo impulsado por el diseño que escala
32 min
Flujo de trabajo de desarrollo de extremo a extremo impulsado por el diseño que escala
This Talk discusses the challenges of building full stack applications and introduces Redwood.js as a solution. It emphasizes the importance of design-driven workflows and the use of Redwood Cells to handle state and simplify complex tasks. The Talk also highlights the seamless integration between the front end and back end using mock data and the optimization of workflow for performant teams. It concludes with a mention of Redwood's authentication features and the importance of community and collaboration.
Dentro de Fiber: la descripción general en profundidad que querías para TLDR
27 min
Dentro de Fiber: la descripción general en profundidad que querías para TLDR
This Talk explores the internals of React Fiber and its implications. It covers topics such as fibres and units of work, inspecting elements and parent matching, pattern matching and coroutines, and the influence of coroutines on concurrent React. The Talk also discusses effect handlers in React, handling side effects in components, and the history of effect handlers in React. It concludes by emphasizing the importance of understanding React internals and provides learning resources for further exploration.
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
Compartir es Cuidar: Reutilizar Visualización de Datos Web en React Native
26 min
Compartir es Cuidar: Reutilizar Visualización de Datos Web en React Native
PolarisViz is a collection of React components that provide consistent visual styles, motion design, and accessibility features. It aims to solve the problem of inconsistencies in visualization decisions made by different teams. The library is flexible for different visual styles and has centralized theme management. PolarisViz was integrated with React Native using a separate library called Polaris Viz core. Challenges included limitations in native apps and the need to share UI components between web and mobile platforms.
Domina el Multiverso de Componentes
27 min
Domina el Multiverso de Componentes
This Talk explores the impact of UI testing on applications and the web, highlighting the need for comprehensive testing strategies. It discusses the complexities of the UI multiverse and the challenges in managing UI states. The suitability of different testing strategies across the testing continuum is examined, along with the importance of addressing the weight of UI testing challenges. The role of tools like Storybook and Chromatic in automated testing and collaboration is emphasized. Ultimately, the Talk emphasizes the love for the web and the need for strategies to manage the UI multiverse.
React Native, como se ve en la TV
20 min
React Native, como se ve en la TV
This Talk discusses TV app development using React Native, focusing on limitations and specific considerations. The speaker demonstrates how to fetch and display random dog images using React Native hooks. They also explain how to handle focus and spatial navigation in TV apps, including using focus keys and a spatial navigation library. The Talk emphasizes the importance of optimization and performance in TV app development and suggests using useMemo and useCallback to avoid unnecessary re-renders. The speaker concludes by mentioning job opportunities at JustWatch.
Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?
23 min
Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?
Top Content
Micro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment with subdomains, rather than technical concerns, can lead to software that is split nicely and user stories falling under the responsibility of a single team. Having a logical backup or reference point is important for implementing microfrontends without breaking their isolation. Microfrontends can communicate with each other using the window object and custom events. Microfrontends should be kept isolated while maintaining communication through various approaches.
Medición y Mejora del Rendimiento de React Native
19 min
Medición y Mejora del Rendimiento de React Native
This Talk discusses mobile app performance and provides tips for performance analysis. It includes a performance test on the TF1 news app and demonstrates how to analyze JS performance with React DevTools. The Talk also explores optimizing rendering in React components, such as FlatList and nested lists with carousels. It concludes with strategies for optimizing the virtualized list and carousel to achieve better performance.
Múltiples aplicaciones, un código para gobernarlas a todas
20 min
Múltiples aplicaciones, un código para gobernarlas a todas
This Talk discusses the benefits of using a single app to host multiple experiences or mini-apps, as opposed to a micro front-end architecture. By using a single app, it becomes easier to share state, simplify code sharing, handle analytics and errors, and deploy and monitor the app. The Talk also covers the handling of the shell app, routing, authentication, and subdomains for authentication.
Monorepos Rápidos de React con una Alta Calidad DX
22 min
Monorepos Rápidos de React con una Alta Calidad DX
Welcome to a talk about fast React monorepos with high quality DX. Monorepos allow for collaboration and code sharing between packages, providing a more organized development environment. Leveraging caching and distribution in CI can improve speed and efficiency. NX provides a feature-rich monorepo setup for React, improving developer experience. Monorepo tools like NX console extension and project graph visualization enhance capabilities and enforce code quality.
Escala tu aplicación de React sin micro-frontends
21 min
Escala tu aplicación de React sin micro-frontends
This Talk discusses scaling a React app without micro-frontend and the challenges of a growing codebase. Annex is introduced as a tool for smart rebuilds and computation caching. The importance of libraries in organizing code and promoting clean architecture is emphasized. The use of caching, NxCloud, and incremental build for optimization is explored. Updating dependencies and utilizing profiling tools are suggested for further performance improvements. Splitting the app into libraries and the benefits of a build system like NX are highlighted.
Introducción del sistema de diseño a aplicaciones web multinacionales
18 min
Introducción del sistema de diseño a aplicaciones web multinacionales
Octopus Energy introduced design systems to address challenges in maintaining brand identity, accessibility, and developer experience. They built a component library using design guidelines and accessibility best practices, following Bradfrost's atomic design methodology. They used TypeScript, Jest, Versal, and Storybook for building and testing the library. The design system is an ongoing project that evolves with the product and business over time.
Llevando la Nueva Arquitectura de React Native a la comunidad de código abierto
25 min
Llevando la Nueva Arquitectura de React Native a la comunidad de código abierto
Today's Talk introduces the new React Native architecture and its rollout to the open-source community. The new architecture eliminates the bridge component, improves performance, and enhances the developer experience. It includes features such as Fabric, Turbo Module, and Cogent component. The architecture also supports modern languages like TypeScript and Kotlin. Upgrading to the new architecture enables the use of React 18's concurrent features and new APIs. Proper documentation and a new architecture section on the website provide valuable resources for contributors and advanced developers.
Desafíos en proyectos a gran escala (NextJS - Contentful)
20 min
Desafíos en proyectos a gran escala (NextJS - Contentful)
This Talk discusses the challenges faced when implementing or migrating a legacy stack to Next.js and Contentful in large-scale projects. It emphasizes the need for careful analysis and estimation of time and resources. The Talk also highlights the benefits of Next.js in facilitating collaboration with isolated teams and integrating with other frameworks. It addresses the challenges of using a headless CMS in large-scale projects and suggests strategies for handling unavailability and crashes. The importance of using global state wisely and promoting code reusability is also emphasized, along with techniques for overcoming challenges in large-scale projects.
No querrás renderizar en el servidor tu aplicación Next.js
28 min
No querrás renderizar en el servidor tu aplicación Next.js
Top Content
Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better search engine optimization but requires a server. Static site generation provides outstanding performance and scalability but has limitations. Incremental static regeneration solves the problem of rebuilding the entire website. Choosing the right rendering strategy depends on the specific scenario, and for e-commerce websites, static site generation with incremental static regeneration is recommended.
Querido cliente, te estoy dejando
21 min
Querido cliente, te estoy dejando
Liad Yosef discusses the importance and evolution of server-side rendering, highlighting its benefits such as improved performance and SEO. He explores different rendering strategies and the challenges of hydration in React. He introduces SuspenseSSL in React 18 as a solution for fetching data in advance and selectively hydrating components. He also mentions React Server Component as a game changer for reducing bundle size in rendering with React.
Casar juegos WASM/WebGL con interfaz de React
22 min
Casar juegos WASM/WebGL con interfaz de React
Jonny discusses marrying WebAssembly and WebGL games with React, emphasizing the importance of choosing the right tool for game development. He introduces the Godot game engine as a powerful choice for game development and highlights the limitations of Godot. Jonny demonstrates how to combine React with Godot and showcases the ability to dynamically switch between different games on the same website. He explains the process of exporting a Godot game to the web using WebAssembly. Jonny also discusses the communication between React and Godot games and highlights the benefits and future improvements of using this approach.
Cómo lograr la composición de diseño en React
8 min
Cómo lograr la composición de diseño en React
This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.
¡El Arte Sutil de la "Carga Sutil"!
10 min
¡El Arte Sutil de la "Carga Sutil"!
This Talk explores the concept of subtle loading in software development, focusing on techniques to provide a fast and seamless user experience. Tips include avoiding waterfall loading, optimizing loading sequences, and handling loading scenarios for users on faster connections. The use of React 18 APIs, such as start transition, is recommended to achieve an optimistic loading experience. Overall, the Talk emphasizes the importance of improving user experience through subtle loading techniques.
¿Qué son las extensiones de Docker?
6 min
¿Qué son las extensiones de Docker?
Docker Extensions allow you to extend Docker Desktop's functionality, integrate workflows, and contribute to Docker Desktop. The Extensions SDK makes it easy to build extensions using React and TypeScript. The marketplace makes extensions easily discoverable, and a demo is available in Docker Desktop to install and explore extensions. Logs Explorer allows easy access and search of logs across all containers. Future plans include adding more extensions, improving the Marketplace experience, and gathering feedback from the community.
Pruebas automatizadas de seguridad de aplicaciones
9 min
Pruebas automatizadas de seguridad de aplicaciones
StackHawk is a dynamic application security testing tool that helps developers find and fix security issues. The scan identified a SQL injection issue and a cross site scripting issue. The StackHawk YAML is used to configure the scanner with important information such as the application's location, environment, and ID. The scanner can also be pointed at open API spec or GraphQL definitions. Try StackHawk for free at stackhawk.com and integrate it into your development process to improve software quality.
No lo tomes de manera personal, es Personalización
22 min
No lo tomes de manera personal, es Personalización
Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There are four types of personalization: explicit, implicit, interrupted, and seamless. Implementing personalized experiences involves using tools like Next.js and NetJS. Best practices include avoiding annoying users, testing strategies, and monitoring analytics.
Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web
21 min
Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web
In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.
Guía para desarrolladores frontend sobre Web3
22 min
Guía para desarrolladores frontend sobre Web3
This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain wallets, using RPC endpoints and block explorers, and accessing smart contract data. The talk emphasizes the use of ABIs and JavaScript libraries like ethers for interacting with smart contracts. It mentions the shift in mindset from HTTP requests to using ABI code and libraries for front-end development in Web 3. The talk concludes by mentioning Web3UI and tools like PolygonScan and Etherscan for building on the blockchain.
Elevando la Privacidad y Accesibilidad
25 min
Elevando la Privacidad y Accesibilidad
In this talk, the speaker discusses the creation of a component library that prioritizes accessibility and privacy. They highlight the importance of building applications that cater to users' devices and network limitations. The speaker shares their experience of solving performance issues with a YouTube iframe and introduces Light YouTube, a performance-focused web component. They emphasize the need to prioritize accessibility and privacy in applications and provide insights on how to address common problems. The talk concludes with a call to prioritize accessibility and create sensible defaults in libraries to improve user experiences.
Nueva forma de concebir la seguridad en las dependencias
21 min
Nueva forma de concebir la seguridad en las dependencias
Today's Talk explores the importance of understanding security issues and dependencies in software development. It emphasizes the role of developers in cybersecurity incidents and the need to detect and respond to vulnerabilities early. The Talk also discusses the risks associated with third-party dependencies and the impact of security breaches on organizations. Additionally, it highlights the significance of addressing security concerns and the potential consequences of exploiting vulnerabilities and exfiltrating data.
Convirtiéndose en un Maestro de Formularios: Flujos de Trabajo Intuitivos de Múltiples Pasos
26 min
Convirtiéndose en un Maestro de Formularios: Flujos de Trabajo Intuitivos de Múltiples Pasos
This Talk explores the concept of form wizards and their role in creating intuitive, multi-step workflows. It discusses the use of state machines and various implementation options, including Formic and the Dream API. The process of building a form wizard using React context, reducers, and custom hooks is explained. Integrating state machines and the introduction of the Robo Wizard library are also covered, highlighting its flexibility and compatibility with different UI frameworks.
Descubre si tu sistema de diseño es mejor que nada
20 min
Descubre si tu sistema de diseño es mejor que nada
Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.
Deja de abusar del manejo de estado del cliente
21 min
Deja de abusar del manejo de estado del cliente
This Talk discusses state management abuse and the use of React Query for API handling in React applications. The speaker demonstrates implementing loading indicators, custom hooks, caching mechanisms, and introduces React Query as a powerful tool for fetching, caching, and loading data. The conclusion emphasizes that React Query simplifies API handling without the need for complex state management tools like Redux or MobX.
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
17 min
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
Top Content
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.
Construir un Sistema de Diseño con React y Tailwind CSS
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Mejorando la Felicidad del Desarrollador con Preview.js
21 min
Mejorando la Felicidad del Desarrollador con Preview.js
Francois, a developer happiness engineer, discusses the challenges of slow builds and their impact on productivity. He explores the implementation of showing unavailable menu items in a food delivery app and demonstrates the use of Storybook for component design. Francois introduces Preview.js, a tool for previewing React, Vue, and Solid components, and explains how it simplifies the development process. He also highlights the benefits of using PrivyJS with Storybook and VIT for faster and more efficient development.
Modelado de Contenido para Desarrolladores de React
7 min
Modelado de Contenido para Desarrolladores de React
Haushal, a Developer Advocate at Contentful, discusses content modeling and its importance in providing a great user experience. He uses his Cookbook web app as an example to explain how he structures and organizes content. The overall content model emphasizes reusability and considerations for content governance and platform selection. Content modeling is an iterative process, and Haushal provides resources for further learning and development.
Accesibilidad web en aplicaciones JavaScript
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Práctica con AG Grid's React Data Grid
147 min
Práctica con AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Comienza con AG Grid React Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado una cuadrícula de datos AG Grid React y la habrás personalizado con componentes funcionales de React.- Comenzando e instalando AG Grid- Configurando ordenamiento, filtrado, paginación- Cargando datos en la cuadrícula- La API de la cuadrícula- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la cuadrícula con componentes de React
Curso intensivo de TypeScript para contenido de un CMS sin cabeza
98 min
Curso intensivo de TypeScript para contenido de un CMS sin cabeza
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En este masterclass, primero te mostraré cómo crear un nuevo proyecto en un CMS sin cabeza, llenarlo con datos y usar el contenido en tu proyecto. Luego, pasaremos el resto del tiempo en código, haremos lo siguiente:- Generar modelos y estructuras de tipo fuertemente tipados para el contenido obtenido.- Usar el contenido en componentes- Resolver contenido de campos de texto enriquecido en componentes de React- Tocar los pipelines de implementación y las posibilidades de descubrir problemas relacionados con el contenido antes de llegar a producción
Aprenderás:- Cómo trabajar con contenido de un CMS sin cabeza- Cómo se puede aprovechar el modelo de contenido para generar tipos en TypeScript y qué beneficios aporta a tu proyecto- Cómo dejar de usar literales de cadena para el contenido en el código- Cómo resolver texto enriquecido en componentes de React- Cómo minimizar o evitar problemas relacionados con el contenido antes de llegar a producción
Construye aplicaciones Web3 con React
51 min
Construye aplicaciones Web3 con React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
117 min
Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass
Creación de tiendas personalizadas en Shopify con Hydrogen
71 min
Creación de tiendas personalizadas en Shopify con Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Sumérgete en Hydrogen, un marco basado en React impulsado por Shopify. En este masterclass, exploraremos el marco y pondremos en marcha una tienda personalizada rápidamente. Aprenderás cómo (y cuándo) aprovechar los Componentes del Servidor de React y los mecanismos de almacenamiento en caché para construir tiendas personalizadas rápidas y dinámicas.
React a gran escala con Nx
160 min
React a gran escala con Nx
WorkshopFree
Isaac Mann
Zack DeRose
2 authors
Cuanto más grande se vuelve una base de código, más difícil se vuelve mantenerla. Todos los procesos informales de un equipo pequeño deben ser sistematizados y respaldados con herramientas a medida que el equipo crece. Ven y aprende cómo Nx permite a los desarrolladores centrarse más en el código de la aplicación y menos en las herramientas.
Construiremos un monorepo desde cero, creando una aplicación cliente y una aplicación de servidor que comparten una biblioteca de tipos de API. Aprenderemos cómo Nx utiliza ejecutores y generadores para hacer que la experiencia del desarrollador sea más consistente en todos los proyectos. Luego crearemos nuestros propios ejecutores y generadores para procesos que son únicos en nuestra organización. También exploraremos el creciente ecosistema de complementos que permiten la integración fluida de frameworks y bibliotecas.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Cómo Diseñar una Carrera de Freelance/Contratación Sostenible + Desafío de Codificación Rápida
75 min
Cómo Diseñar una Carrera de Freelance/Contratación Sostenible + Desafío de Codificación Rápida
WorkshopFree
Shane Ketterman
Shane Ketterman
¿Listo para comenzar tu carrera como freelance o recién estás comenzando en tu viaje freelance? Estás en el lugar correcto. Aprende de la fuerza laboral totalmente distribuida más grande del mundo.
El movimiento de talento independiente es el futuro del trabajo. Si estás considerando dejar el empleo a tiempo completo para una carrera como freelancer, ahora es el momento de encontrar tu espacio exitoso en la fuerza laboral de talento independiente. Más personas están trabajando como freelance hoy que nunca antes, y el mercado freelance ahora contribuye con $1.2 billones a la economía de los Estados Unidos. Algunos de los roles más demandados para freelancers en este momento son desarrolladores senior con experiencia profesional en React, Python, Blockchain, QA y Node.js.
Este masterclass te ayudará a diseñar una carrera de freelance/contratación sostenible y rentable a tiempo completo (o parcial). Te proporcionaremos herramientas, consejos, mejores prácticas y te ayudaremos a evitar errores comunes.
Al final del masterclass habrá una sesión de preguntas y respuestas con un Desarrollador Freelance que puede responder tus preguntas y brindar información y consejos sobre su propio éxito.
¡Durante el descanso del masterclass, realizaremos un desafío de codificación rápida! Al final del masterclass, otorgaremos un premio al ganador y mostraremos la tabla de clasificación.
Te haremos iniciar sesión en nuestro portal y completar el desafío lo más rápido posible para ganar puntos. Los puntos se asignan en función de la dificultad y la velocidad con la que resuelvas las tareas. En caso de que completes todas las tareas, obtendrás puntos extra por el tiempo restante. Verás tu puntaje, clasificación y la tabla de clasificación una vez que completes el desafío.
Estaremos regalando tres Tarjetas de Regalo de Amazon ($200, $100, $75) para los tres primeros ganadores.
Llevando tu aplicación web de React a nativa con Capacitor
92 min
Llevando tu aplicación web de React a nativa con Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
Entonces, tienes una increíble aplicación de React que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu base de código sea lo más cercana posible en la Web, Android e iOS. Afortunadamente, con Capacitor, ¡puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuirlas en tu App Store favorita!
Este masterclass está dirigido a desarrolladores intermedios que tienen una aplicación de React existente o están interesados en el desarrollo móvil con React. Repasaremos:
¿Qué es Capacitor?¿Cómo se compara con otras soluciones multiplataforma?Usando Capacitor para construir una aplicación nativa utilizando tu código web existenteMejorando nuestra aplicación para su distribución en las tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más.
Fundamentos de Remix
136 min
Fundamentos de Remix
Top Content
WorkshopFree
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Masterclass de alto rendimiento Next.js
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Cómo construir interfaces de usuario para contratos inteligentes
134 min
Cómo construir interfaces de usuario para contratos inteligentes
Workshop
Rahat Chowdhury
Rahat Chowdhury
Existen muchos caminos que podemos tomar para convertirnos en desarrolladores de web3. No todos los caminos requieren aprender un lenguaje completamente nuevo y convertirse en desarrollador de contratos inteligentes. En este masterclass aprenderemos cómo construir nuestra propia interfaz de usuario React sobre cualquier contrato inteligente existente en la blockchain de Prueba de Participación de Polygon. Exploraremos una visión general básica de las blockchains y aprenderemos sobre las ventajas de construir en Polygon. También obtendremos una comprensión de qué son los contratos inteligentes, aprenderemos cómo encontrar los existentes y conoceremos herramientas que nos ayudarán a interactuar con ellos desde una aplicación React.
GraphQL: De Cero a Héroe en 3 horas
164 min
GraphQL: De Cero a Héroe en 3 horas
Workshop
Pawel Sawicki
Pawel Sawicki
Cómo construir una aplicación GraphQL fullstack (Postgres + NestJs + React) en el menor tiempo posible.
Todos los comienzos son difíciles. Incluso más difícil que elegir la tecnología es desarrollar una arquitectura adecuada. Especialmente cuando se trata de GraphQL.
En este masterclass, obtendrás una variedad de mejores prácticas que normalmente tendrías que trabajar en varios proyectos, todo en solo tres horas.
Siempre has querido participar en un hackathon para poner algo en funcionamiento en el menor tiempo posible, entonces participa activamente en este masterclass y únete a los procesos de pensamiento del instructor.
Masterclass de Serverless para Desarrolladores de React
107 min
Masterclass de Serverless para Desarrolladores de React
WorkshopFree
Tejas Kumar
Tejas Kumar
Introducción a serverlessAntecedentes: Docker, Contenedores y KubernetesActividad: Construir una aplicación con Docker y desplegarla en un proveedor de nubeAnálisis: ¿Qué es bueno/malo de este enfoque?Por qué se necesita/mejora ServerlessActividad: Construir la misma aplicación con serverlessAnálisis: ¿Qué es bueno/malo de este enfoque?