Llevando el Desarrollo Orientado a Componentes un Paso Más Allá

Rate this content
Bookmark

Vamos a ser sinceros, React es una forma de construir aplicaciones orientadas a componentes. Técnicamente, todos estamos haciendo desarrollo orientado a componentes. Pero, ¿realmente nuestros componentes están aislados, compuestos y probados en aislamiento o todavía están un poco acoplados entre sí? Echemos un vistazo a cómo puedes ser realmente orientado a componentes para poder construir, escalar y reutilizar componentes de React en todas tus aplicaciones de React.

This talk has been presented at React Advanced Conference 2021, check out the latest edition of this React Conference.

FAQ

El desarrollo orientado a componentes es un enfoque en el cual se estructura una aplicación como una colección de componentes más pequeños e independientes, cada uno con su propia funcionalidad, que pueden ser reutilizados y combinados de diversas maneras para crear aplicaciones más complejas.

React es una biblioteca de JavaScript diseñada específicamente para facilitar el desarrollo de interfaces de usuario mediante componentes. Permite a los desarrolladores construir encapsulados que manejan su propio estado, lo que promueve la reutilización y la gestión eficiente de código en aplicaciones web.

Los monorepos pueden llevar a un IDE más lento debido a la gran cantidad de código, conflictos de fusión frecuentes cuando muchos desarrolladores trabajan simultáneamente y tiempos de compilación largos debido a la necesidad de compilar múltiples aplicaciones y componentes.

Bit permite un desarrollo basado en componentes más eficiente al facilitar la reutilización de componentes entre aplicaciones, proporcionar un entorno aislado y versionado para cada componente, y ofrecer herramientas para la fácil integración y gestión de estos.

Bit ofrece una plataforma donde los componentes están documentados y se puede interactuar con ellos en un entorno de playground en vivo. Esto permite a los desarrolladores explorar, entender y reutilizar componentes fácilmente, mejorando la visibilidad y descubrimiento dentro de la organización.

Bit enfrenta los desafíos de los monorepos al permitir que cada componente funcione como un mini-repositorio independiente, facilitando la gestión de versiones, reduciendo los conflictos y optimizando los tiempos de compilación al centrarse solo en los componentes necesarios.

La estandarización asegura que todos los componentes se construyan con las mismas herramientas y sigan las mismas reglas, lo que ayuda a mantener la consistencia en la calidad y el diseño a lo largo de las aplicaciones, facilitando la colaboración y mantenimiento del código.

Debbie O'Brien
Debbie O'Brien
20 min
25 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

React fue creado para el desarrollo orientado a componentes. Los desafíos de compartir componentes incluyen la incapacidad de compartir fácilmente componentes entre aplicaciones. Los monorepos tienen beneficios pero también pueden presentar desafíos como el rendimiento lento del IDE y conflictos de fusión. La integración de nuevos desarrolladores y el proceso de implementación pueden llevar mucho tiempo. Bit resuelve estos desafíos al permitir componentes aislados y versionados en un monorepo, proporcionando una búsqueda fácil de componentes, filtrado y versionado, y habilitando el desarrollo orientado a componentes.

1. Introducción al Desarrollo Orientado a Componentes

Short description:

React fue creado para el desarrollo orientado a componentes. Nos estamos moviendo hacia una web orientada a componentes. Así es como estamos construyendo actualmente.

♪♪ Llevando el desarrollo orientado a componentes un paso más allá... Hola a todos, mi nombre es Devi O'Brien, soy la Jefa de Defensoría del Desarrollador en Bit. También soy una Estrella de GitHub y MVP de Microsoft, Experta en Desarrollo de Google y Experta en Desarrollo de Medios. Y puedes seguirme en Twitter en devs underscore O'Brien. Así que empecemos.

¿Cómo va todo, y ups, me he robado completamente las diapositivas de Matt Billman, el CEO de Netlify. Me he robado sus diapositivas de su charla principal. Lo siento, Matt. Lo que él dijo es cómo va todo. Número uno, dijo que los monolitos se están moviendo hacia las APIs. Número dos, Git ha transformado la web. Número tres, componentes. Número cuatro, pre-construcción en JS. Y lo que quiero que te enfoques es en el número tres, pensar en componentes. Y como él dijo, el mundo se está moviendo hacia un mundo orientado a componentes. Nos estamos moviendo hacia una web orientada a componentes, y realmente necesitamos que todos estemos pensando y trabajando en componentes. Ahora, es posible que ya estés diciendo, pero estoy construyendo en React, y tienes toda la razón. React fue creado para el desarrollo orientado a componentes. React fue creado para componentes. Y básicamente, lo que estamos haciendo es construir en componentes. Así que sí, si ya estás construyendo en React, estás haciendo un gran trabajo. Ahora estamos construyendo aplicaciones orientadas a componentes con React.

Genial. Entonces, ¿cuál es el problema? Esta es nuestra aplicación. Es increíble. Esta es mi hermosa tienda de zapatos, y he creado esta aplicación a partir de componentes. Entonces, ese componente de botón es en realidad solo un componente que se reutiliza dentro de ese componente de héroe en el interruptor de tema en la parte superior y también en la tarjeta de producto. Así que estamos construyendo en componentes, y así es como estamos construyendo actualmente. Y esto es genial. Esto es fantástico.

2. Desafíos de Compartir Componentes

Short description:

El problema es que los componentes no tienen valor fuera de la aplicación. Una vez que he construido esa aplicación, todos esos componentes quedan atrapados dentro de esa aplicación. Eso es un problema. Eso no está realmente haciendo que los componentes sean lo primero. ¿Sabes qué sucede cuando tenemos que construir múltiples aplicaciones? Tenemos esta increíble aplicación y todos estos componentes. ¿Qué hacemos? Así que realmente necesitas otra solución. Básicamente, quieres poder compartir fácilmente esos componentes entre esas aplicaciones. Y hay un par de opciones disponibles, por supuesto.

El problema es que los componentes no tienen valor fuera de la aplicación. Una vez que he construido esa aplicación, todos esos componentes quedan atrapados dentro de esa aplicación. Eso es un problema. Eso no está realmente haciendo que los componentes sean lo primero. ¿Sabes qué sucede cuando tenemos que construir múltiples aplicaciones? Ya sabes, llega el gerente de producto y dice que necesitamos construir otra aplicación. ¿Qué hacemos ahora? Tenemos esta increíble aplicación y todos estos componentes. ¿Qué hacemos?

Así que ahora tenemos tres aplicaciones y muchos de estos componentes son similares. Estamos construyendo una aplicación de comercio electrónico similar. Así que tenemos componentes grandes como ese carrito de compras. No quiero reconstruir ese componente una y otra vez. Quiero decir, sí, solo un botón simple, copiar y pegar, ponerlo ahí, y listo. ¿O no? Habrá inconsistencia en todas tus aplicaciones eventualmente. Especialmente si escalas y creces y creces. Así que realmente necesitas otra solución. Básicamente, quieres poder compartir fácilmente esos componentes entre esas aplicaciones. Y hay un par de opciones disponibles, por supuesto. Ya sabes, podrías simplemente empaquetarlos en NPM y esperar lo mejor. Quiero decir, hay mucho trabajo involucrado en eso. Es posible, pero es doloroso y no queremos dolor, ¿verdad? Así que hay un par de opciones, como dije.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced Conference 2021React Advanced Conference 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Node Congress 2022Node Congress 2022
34 min
Hacia una Biblioteca Estándar para Runtimes de JavaScript
Top Content
There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.
Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub
React Summit 2024React Summit 2024
29 min
Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub
The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
React Summit 2022React Summit 2022
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.
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
React Advanced Conference 2021React Advanced Conference 2021
21 min
Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React
Top Content
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.
El componente de React más caro del mundo y cómo dejar de escribirlo
React Advanced Conference 2021React Advanced Conference 2021
23 min
El componente de React más caro del mundo y cómo dejar de escribirlo
Top Content
Today's Talk discusses expensive React components and API design, with a focus on the cost of coordination and overcoming imposter syndrome. The speaker shares a story about a cat trying to fix salted coffee, highlighting the importance of finding simple solutions. The billion dollar component on ReactJS.org is examined as an example of an expensive component. Techniques for customizing messages, improving accessibility, and using polymorphic props are discussed. The Talk concludes by emphasizing the cost of communication and the need to evaluate if props and components are the right tools for the job.

Workshops on related topic

Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI
React Summit 2023React Summit 2023
137 min
Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI
Top Content
WorkshopFree
Sam Sycamore
Siriwat (Jun) Kunaporn
2 authors
Aprende cómo utilizar el ecosistema completo de MUI para construir un tablero de gestión de proyectos hermoso y sofisticado en una fracción del tiempo que tomaría construirlo desde cero. En particular, veremos cómo integrar la Rejilla de Datos de MUI X con Joy UI, nuestra biblioteca de componentes más nueva y hermana del estándar de la industria Material UI.
Tabla de contenidos:- Presentando nuestro proyecto y herramientas- Configuración de la aplicación e instalación del paquete- Construcción del tablero- Prototipado, estilos y temas - Características de Joy UI- Filtrado, ordenación, edición - Características de la Rejilla de Datos- Conclusión, pensamientos finales, P&R
Práctica con AG Grid's React Data Grid
React Summit 2022React Summit 2022
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
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
Workshop
Maurice de Beijer
Maurice de Beijer
En esta masterclass práctica, Maurice te guiará personalmente a través de una serie de ejercicios diseñados para empoderarte con una profunda comprensión de los Componentes de Servidor React y el poder de TypeScript. Descubre cómo optimizar tus aplicaciones, mejorar el rendimiento y desbloquear nuevas posibilidades.
 
Durante la masterclass, realizarás:
- Maximizar la mantenibilidad y escalabilidad del código con prácticas avanzadas de TypeScript
- Desatar los beneficios de rendimiento de los Componentes de Servidor React, superando enfoques tradicionales
- Potenciar tu TypeScript con el poder de los Tipos Mapeados
- Hacer tus tipos TypeScript más seguros con Tipos Opacos
- Explorar el poder de los Tipos de Plantillas Literales al usar Tipos Mapeados
 
Maurice estará virtualmente a tu lado, ofreciendo una guía completa y respondiendo a tus preguntas mientras navegas por cada ejercicio. Al final de la masterclass, habrás dominado los Componentes de Servidor React, armado con un nuevo arsenal de conocimientos de TypeScript para potenciar tus aplicaciones React.
 
No pierdas esta oportunidad de elevar tu experiencia en React a nuevas alturas. Únete a nuestra masterclass y desbloquea el potencial de los Componentes de Servidor React con TypeScript. Tus aplicaciones te lo agradecerán.
Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue
Vue.js Live 2024Vue.js Live 2024
163 min
Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue
Workshop
Juan Andrés Núñez Charro
Juan Andrés Núñez Charro
Los Composables (funciones de composición) son funciones con estado/sin estado que pueden aprovechar la API de reactividad de Vue, desacoplándola de los componentes.Este cambio de perspectiva abre la posibilidad de abordar escenarios comunes de una manera nueva y creativa. En este masterclass, aprenderás cómo resolver problemas típicos que enfrenta cada desarrollador de Vue, utilizando composables:
- Almacenamiento de datos;- Comunicación entre componentes;- Funciones de utilidad (DOM, API, etc);Y más.
De la Idea a la Producción: Desarrollo de React con un Toque Visual
React Summit 2023React Summit 2023
31 min
De la Idea a la Producción: Desarrollo de React con un Toque Visual
WorkshopFree
Omer Kenet
Omer Kenet
Únete a nosotros para un masterclass de 3 horas que explora el mundo del desarrollo creativo de React utilizando Codux. Los participantes explorarán cómo un enfoque visual puede desbloquear la creatividad, agilizar los flujos de trabajo y mejorar la velocidad de desarrollo. Sumérgete en las características que hacen de Codux un cambio de juego para los desarrolladores de React. La sesión incluirá ejercicios prácticos que demuestran el poder de la renderización en tiempo real, la manipulación visual del código y el aislamiento de componentes, todo en tu código fuente.
Tabla de contenidos:- Descarga e instalación: Preparando Codux para el masterclass- Selector de proyectos: Clonación e instalación de un proyecto de demostración- Introducción a los conceptos principales de Codux y su interfaz de usuario- Ejercicio 1: Encontrando nuestro camino- Descanso- Ejercicio 2: Realizando cambios de manera efectiva- Ejercicio 3: Reutilización y validación de casos especiales- Resumen, Cierre y Preguntas y Respuestas
Curso intensivo de TypeScript para contenido de un CMS sin cabeza
React Summit 2022React Summit 2022
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