Patrones de Diseño de Componentes

Rate this content
Bookmark

¿Cómo se escribe un buen componente? En esta charla exploraremos varios patrones diferentes para escribir componentes mejores. Analizaremos técnicas para simplificar nuestros componentes, hacerlos más fáciles de entender y aprovechar al máximo los componentes que ya tenemos.

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

Hace un año, el orador renunció a su trabajo para dedicarse a tiempo completo a enseñar, escribir artículos, crear cursos y libros.

El tema principal de la charla es sobre cómo escribir componentes más limpios y simplificar el código.

Los patrones VIP se refieren a la práctica de extraer código de las ramas de una condicional, lo cual es posible porque cada rama está semánticamente relacionada y sirve a un propósito unificado.

El orador descubrió un error en el uso de la condicional 'V show' en su código, debido a la complejidad generada al combinar dos componentes que realizan funciones diferentes.

El orador menciona el principio DRY (No te repitas), enfatizando que este principio se refiere más a evitar la repetición del conocimiento y la intención detrás del código, no simplemente los caracteres en la pantalla.

Se discutió que un error común es combinar componentes que cumplen con funciones distintas, lo que puede aumentar la complejidad y llevar a errores en el código.

El orador recomienda extraer la lógica de componentes grandes utilizando 'composables', lo que permite una organización más clara y facilita la comprensión del código.

Integrar nuevos patrones en una biblioteca de componentes involucra pensar cuidadosamente en la API y en cómo los patrones pueden afectar la estructura de los componentes para mantener la facilidad de uso.

Michael Thiessen
Michael Thiessen
18 min
12 May, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla cubre componentes limpios y cuándo crear nuevos componentes, así como patrones para escribir componentes más limpios y los beneficios de los patrones VIP. La refactorización y la separación del código en componentes separados puede hacerlo más corto y más fácil de leer, reduciendo la complejidad. Se discute la importancia de no repetirse y los beneficios de usar componentes más pequeños para el rendimiento y la experiencia del desarrollador. Los componibles pueden ayudar a extraer lógica en componentes grandes y complejos, y los patrones se pueden incorporar en bibliotecas de componentes y sistemas de diseño.
Available in English: Component Design Patterns

1. Introducción a Componentes Limpios y Patrones VIP

Short description:

Hablaré sobre componentes limpios y cuándo crear nuevos componentes. Cubriremos patrones para escribir componentes más limpios y cuándo no crear nuevos componentes. También exploraremos los patrones VIP y sus beneficios.

Gracias por esa introducción. Es realmente genial estar aquí hoy porque exactamente hace un año, renuncié a mi trabajo y me dediqué a enseñar y escribir artículos, crear cursos y libros y cosas por el estilo a tiempo completo. Así que, gracias por tenerme aquí. Me gustaría hablarles sobre los componentes limpios. Al hablar con diferentes personas en la community y ver las preguntas que se hacen en Twitter y las cosas que recibo en mi correo electrónico, he visto que surgen dos preguntas fundamentales una y otra vez. La primera es que queremos saber cuándo creamos nuevos componentes. ¿Creamos componentes más pequeños? ¿Creamos componentes más grandes? Y, ¿este componente es demasiado grande o demasiado complicado? ¿Deberíamos sacarlo y ponerlo en algo más? Y esto es algo con lo que lidiamos todos los días. Pero una vez que lo hemos descubierto, también necesitamos descubrir cómo hacerlo bien. Y no se trata solo de mover trozos de código en nuestro sistema de archivos y hacer todo tipo de cosas así. Sino que realmente queremos simplificar nuestra base de código y hacer que nuestro código sea más fácil de usar. Así que en esta charla, cubriremos tres cosas principales. Patrones y métodos para escribir componentes más limpios y simplificar nuestro código. Y solo rascaremos la superficie de estas dos preguntas porque son bastante grandes preguntas. Pero espero que te vayas de aquí con un par de cosas que puedas aplicar. Así que vamos a cubrir algunos patrones aquí. Y al final, también vamos a hablar sobre cuándo no crear nuevos componentes. Así que el primer conjunto de patrones se trata de VIPs. Y son realmente agradables porque básicamente podemos ver las diferentes ramas. Y la mayoría de las veces, podemos extraer el código que está en el cuerpo de cada rama sin necesidad de saber mucho más sobre el código que está sucediendo allí. Y sabemos que podemos hacer esto debido a dos cosas. La primera es que cada rama de esta condicional está relacionada semánticamente. Entonces, el código que va en cada rama diferente funciona junto para el mismo propósito. Puede que conozcas esto como cohesión. Pero realmente, solo estamos hablando de código que funciona junto. Y la segunda razón es similar. Relacionada con eso. Y es que no solo cada rama funciona junto, sino que cada rama diferente es distinta. De lo contrario, no tendríamos una condicional. Simplemente, ya sabes, ejecutaríamos tu código. Para ver esto en

2. Explicación del Código de Componentes y Refactorización

Short description:

Es un componente que muestra una lista de artículos en mi blog. Tiene una vista expandida y una versión colapsada. Al refactorizar y separar el código en componentes separados, se vuelve más corto y más fácil de leer. También podemos trasladar la lógica al componente hijo, reduciendo la complejidad en el componente padre. El resultado es un componente de visualización de artículos con código combinado y una condicional basada en la propiedad de colapso.

Para más detalles, vamos a ver un ejemplo. Y este ejemplo es, oh, olvidé conectarme al Wi-Fi aquí, así que no veremos este ejemplo. Así que solo te daré una explicación rápida. Es un componente que muestra una lista de artículos en mi blog. Puedes tener una vista expandida que muestra, como, la fecha y la descripción, o puedes tener la versión colapsada que muestra al final de la publicación del blog, todas las, como, los diferentes artículos relacionados. Entonces este es el código para ese componente. Y no espero que lo leas completo en este momento. Tendré mis diapositivas disponibles más adelante, así que solo para que lo sepas. Sí, puedes ver que en el nivel superior tenemos un VF allí con los dos cuerpos diferentes de esta rama aquí. Y hacen cosas diferentes. Uno es una versión colapsada. Uno es una versión expandida. Pero aunque son similares, aunque son diferentes, comparten algo de código allí. Entonces, se ven similares. Pero podemos refactorizar eso extrayéndolo en componentes separados. Y no solo este código es más corto, sino que es mucho más fácil de leer a simple vista. Podemos ver fácilmente 'article-collapsed' y 'article-expanded' y saber que esa es la intención de lo que hace este código. Y así es como es el código autoexplicativo. Nos dice qué hace a medida que lo leemos sin tener que pensar profundamente en las diferentes condiciones y todas las cosas diferentes que están sucediendo.

Y un patrón rápido que quería mencionar aquí pero no tengo tiempo para profundizar es que podemos tomar toda esta lógica de V4 aquí y realmente podemos empujarla al componente hijo. Y el razonamiento detrás de esto es similar a preferir métodos como filter y map y reduce en lugar de escribir tu bucle for cada vez. Entonces, ¿qué hacemos cuando las ramas, aunque sean distintas, son bastante similares? Bueno, algo que podemos hacer con este VF aquí es tomar ese VF y realmente empujarlo hacia abajo en el componente hijo. Entonces estamos tomando la complejidad de este componente padre y poniéndola en el componente hijo. Entonces, en nuestro caso, tenemos este componente padre con nuestros componentes colapsados y expandidos. Y respectivamente, se ven algo así. Entonces tenemos un enlace de Nuxt en cada uno. Y el expandido también tiene algunos párrafos allí. Y si lo combinamos, podríamos obtener algo como este componente de visualización de artículos, donde hemos tomado el código que es similar y lo hemos juntado y lo hemos convertido en un componente un poco más largo, pero no está mal. Y, por supuesto, tenemos que tomar esa condicional y ahora moverla al componente hijo. Entonces tenemos algunas cosas diferentes sucediendo aquí. Tenemos este v-show, donde tenemos

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

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
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.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.

Workshops on related topic

Domina los Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Domina los Patrones de JavaScript
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.