6 Niveles de Reutilización

Rate this content
Bookmark

Domina el arte de hacer tus componentes altamente reutilizables. Los 6 Niveles de Reutilización nos muestran cómo podemos hacer progresivamente nuestros componentes cada vez más reutilizables, según sea necesario, e incluir patrones y herramientas poderosas para ayudarnos a reutilizar nuestro código más fácilmente.

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

Michael Thiessen
Michael Thiessen
23 min
25 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy explora el concepto de componentes reutilizables, centrándose en niveles de reutilización como inversión, extensión y anidamiento. Se discuten las props como un medio para lograr flexibilidad y configuración en los componentes. Se introducen la inversión de control y los slots con ámbito para dar adaptabilidad a los componentes. Los puntos de extensión proporcionan la capacidad de anular partes específicas de una aplicación dentro de un solo componente. La charla también cubre el uso de slots y anidamiento para la flexibilidad y reutilización de componentes.
Available in English: 6 Levels of Reusability

1. Introducción a los Componentes Reutilizables

Short description:

Hoy hablaremos de los componentes reutilizables y cómo nos ayudan a escribir menos código siendo más efectivos y eficientes. La diferencia entre componentes reutilizables y limpios radica en la mantenibilidad versus la reusabilidad. He desarrollado un marco de trabajo para determinar el nivel apropiado de reusabilidad para nuestros componentes. Nos enfocaremos en los últimos tres niveles de reusabilidad: inversión, extensión y anidamiento. El nivel uno es la plantilla, donde reutilizamos diferentes partes de nuestra plantilla. El siguiente nivel es la configuración, donde creamos diferentes variaciones de un solo componente.

Hola, mi nombre es Michael Thiessen y hoy les hablaré sobre los componentes reutilizables. Si no saben quién soy, les daré un poco de información sobre mí antes de adentrarnos en esto. Soy un educador a tiempo completo de Vue, lo que significa que paso todo mi tiempo escribiendo artículos, enviando mi boletín semanal, creando cursos y, por supuesto, dando charlas como esta.

Hoy hablaremos sobre los componentes reutilizables. Y la razón principal por la que queremos hacer esto es para poder escribir menos código pero lograr más. Queremos que nuestro código sea más efectivo. Queremos utilizar nuestro tiempo de manera más eficiente. No queremos pasar todo este tiempo reescribiendo funciones una y otra vez. Por lo tanto, esta charla se enfoca más en ese aspecto. La reusabilidad de nuestro código.

A menudo, algunas personas me preguntan sobre la diferencia entre componentes reutilizables y componentes limpios porque tengo otro curso llamado Clean Components Toolkit. Y a menudo preguntan cuál es la diferencia entre estas dos cosas. Y la diferencia radica realmente en la mantenibilidad versus la reusabilidad. Los componentes limpios se centran más en la mantenibilidad a largo plazo, mientras que los componentes reutilizables se centran más en ser más efectivos, ser más eficientes con nuestro tiempo, escribir menos código y lograr más. En los últimos años, he desarrollado este framework para pensar en la reusabilidad de manera que podamos determinar mejor la cantidad de reusabilidad que debemos agregar a nuestros componentes. Porque no queremos agregar toneladas y toneladas de reusabilidad a componentes muy simples. Y también queremos asegurarnos de agregar el nivel apropiado de reusabilidad a aquellos componentes que sabemos que vamos a utilizar una y otra vez.

El primer nivel es la plantilla. Aquí queremos reutilizar las diferentes partes de nuestra plantilla. Esto es exactamente lo que están acostumbrados a hacer al construir componentes y encapsular diferentes partes de UI y marcas y lógica dentro de sus componentes para poder colocarlos en diferentes lugares de nuestra aplicación y reutilizarlos. Esto es bastante sencillo y no hay mucho más que decir sobre esto. Aunque, por supuesto, hay muchos matices en cómo dividimos estos diferentes componentes ¿Dónde ponemos los límites? ¿Deberíamos crear un nuevo componente o no? Y no tenemos tiempo para profundizar en esos matices en esta charla, pero están ahí. El siguiente nivel es la configuración. Y en este nivel vamos a crear diferentes variaciones de un solo componente, diferentes variaciones en el comportamiento de ese componente.

2. Props: Configuración y Datos

Short description:

Utilizaremos props para lograr reutilización y flexibilidad. Las props de configuración nos permiten alternar comportamientos y configurar componentes. Pueden ser de tipo booleano o enumerado con múltiples valores aceptables. Las props de datos o estado implican pasar datos de la aplicación, que pueden variar entre usuarios y ejecuciones de la aplicación.

Lo haremos utilizando props. Y con esto hay una distinción entre los tres tipos diferentes de props que tenemos. Así que tenemos props de configuración, tenemos props de datos o estado, también tenemos props de plantilla. Las props de configuración son las protagonistas aquí, como probablemente puedas adivinar por el nombre. Estas props de configuración son las que impulsan este nivel de reutilización. Son las que nos permiten alternar entre diferentes tipos de comportamiento y obtener mucha más reutilización y flexibilidad de cada componente.

Por lo general, son de tipo booleano, donde estamos alternando algo activado o desactivado. Buenos ejemplos de esto podrían ser un is primary en un botón. Así que puedes tener un botón primario, puedes tener un botón secundario. Además de cosas que van a cambiar, como la interfaz de usuario de un componente. Así que es posible que desees tener una vista más compacta. Tal vez tengas un reproductor de video y quieras mostrar u ocultar los controles del reproductor. Diferentes cosas como esas. Estas son props de configuración, porque nos permiten configurar y cambiar ese comportamiento. El otro tipo de prop de configuración son los tipos enumerados o tipos de enumeración. Estos son aquellos en los que tienes una lista de valores aceptables. No es solo una alternancia de verdadero o falso, sino que tenemos cualquier número de valores que podemos pasar a esto. Un ejemplo es el software que estoy usando para presentar esta presentación de diapositivas es Slidev. Y viene con un componente incorporado para mostrar una tabla de contenido. Y eso tiene una prop llamada modo, que tiene tres valores diferentes que puedes pasarle. No se admiten otros valores. Así que solo puede ser todo, solo el árbol actual o solo los hermanos. Ese es un buen ejemplo de una prop de configuración.

A continuación están las props de datos o estado. Y esto es probablemente exactamente lo que piensas que es. Así que estamos tomando los datos de nuestra aplicación. Por lo general, los estamos obteniendo de algún otro lugar, tal vez una API, tal vez tu propia API. Tal vez sea ingresado por el usuario. Y estamos pasando esos datos. Estos datos suelen ser diferentes cuando diferentes usuarios acceden a esta aplicación o en diferentes ejecuciones de la aplicación.

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.
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.
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.
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

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 Kuznetcov
Mikhail Kuznetcov
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
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
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.
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
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.