6 Niveles de Reutilización

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.

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.

Entonces, tu feed de noticias de Twitter será diferente cada vez que lo veas, aunque las props de configuración utilizadas en esos componentes serán las mismas. Una pregunta útil para evaluar si esto es una prop de estado o no es si se podría almacenar en una database, porque típicamente los datos de la aplicación como este pueden almacenarse en una database. Aquí tengo algunos ejemplos más.

Tenemos datos de usuario, tweets o publicaciones, dependiendo de cómo lo llames, y películas. Entonces, si tienes una aplicación que muestra una lista de películas, todas las películas se obtienen de tu database. Eso cambia con el tiempo. Y esos son datos que pasarías como props.

El tercer y último tipo de prop es la prop de plantilla. Pero para eso, primero necesitamos cubrir y entrar en el nivel tres, que es la adaptabilidad. Así que solo para recapitular rápidamente dónde estamos ahora, tenemos estos seis niveles de reutilización. Hemos pasado por el nivel uno, que es la plantilla, y el nivel dos, que es la configuración. Y ahora estamos en el nivel tres, que es la adaptabilidad. El objetivo principal de este nivel es usar slots para hacer que nuestros componentes sean más flexibles. Los haremos más flexibles y adaptables a casos de uso futuros. Y esto nos permite no estar tan limitados por las props, que son muy limitadas en lo que permiten, sino expandir lo que se puede hacer en un componente mediante la inclusión de un slot.

Permíteme darte un ejemplo aquí. Aquí tenemos un botón, y este es un ejemplo de una prop de plantilla, porque prometí que lo cubriríamos, y lo haremos. Este ejemplo de prop de plantilla muestra un botón, y tenemos esta prop de texto. Ahora, esta es una prop de plantilla, y la razón por la que es una prop de plantilla es que solo se utiliza en nuestra plantilla. No la pasamos a ningún componente como prop. No la usamos en una referencia computada o en un observador ni en ninguna lógica similar. Simplemente la incluimos en esa plantilla, y eso la convierte en una prop de plantilla.

Lo interesante de una prop de plantilla es que podemos convertirla directamente en un slot uno a uno. Y esto nos permite hacer algo más que solo pasar texto, una cadena, ahora podemos pasar un icono y un poco de texto a este componente de botón. Podemos pasar lo que queramos. Esto hace que nuestro componente de botón sea mucho más flexible porque ahora tratamos a HTML, y a los componentes como un tipo de data de primera clase, mientras que antes no podíamos hacer eso solo con props. Estábamos limitados con las props, y los slots nos permiten abrir eso. Y lo más importante aquí, por qué lo llamo adaptabilidad, es que cuando creas un componente como este, es posible que no esperes agregar iconos a tus botones. Pero ahora, debido a que tenemos este slot, no tenemos que volver atrás y editar nuestro componente. Simplemente podemos agregar un icono a ese slot, y listo.

El componente es adaptable a casos de uso futuros que ni siquiera has pensado. Un buen truco que puedes hacer con estas props de plantilla es usar la prop original como valor de respaldo predeterminado para este slot. Y esto nos permite agregar este slot sin romper la funcionalidad existente, y también nos permite hacer una transición ordenada y agradable a este uso de slot. Pero veremos más sobre esto un poco más adelante en esta charla.

Entonces, nivel cuatro. Nivel cuatro es donde las cosas comienzan a ponerse realmente interesantes con la inversión. Aquí vamos a invertir el control de nuestra aplicación. ¿Y qué significa esto realmente? En el desarrollo de software, tenemos este concepto llamado inversión de control, y puedes buscar en Wikipedia o en cualquier número de libros de ingeniería de software, seguramente tienen esto descrito. Y es esta idea donde en lugar de controlar el flujo de nuestro code y seguir línea por línea, en realidad cedemos el control de la aplicación a otro code. Permíteme mostrarte lo que quiero decir. Aquí en esta línea, estamos llamando al método read sync para leer este archivo. Aquí estamos en control.

Estamos utilizando este método y le estamos diciendo exactamente qué hacer, cuándo hacerlo, cómo hacerlo y lo estamos leyendo. Tenemos el control de este programa. Este programa de una sola línea. Pero si usamos un watch desde la vista, ya no tenemos el control de lo que sucede aquí. No decidimos cuándo se llama este console.log. Estamos cediendo eso a la vista. La vista determina cuándo se llama y en qué circunstancias.

Entonces, en este primer caso, tenemos un control regular, pero con este watcher, hemos invertido el control. Hemos renunciado al control del framework, a la vista. Ahora hacemos esto en los componentes utilizando slots con ámbito. Aquí tienes un ejemplo de un componente de lista. Vamos a pasarle una matriz que contiene todos los data de nuestra lista. En realidad, esto es una prop de estado, una prop de data. Luego vamos a tomar ese elemento del slot con ámbito y lo renderizamos aquí dentro. Lo interesante de esto es que no sabemos qué está haciendo este componente de lista con nuestra lista de elementos aquí. Podría estar ordenándolos, podría estar filtrándolos. Podría estar haciendo cualquier cantidad de cosas. No tenemos conocimiento del orden en el que vamos a recibir estos elementos. Y ahí radica la belleza de esto. Estamos dando control a este componente de lista en lugar de dictar completamente todas las diferentes cosas que este componente debería hacer y cómo funcionará este slot. Renunciamos a todo ese control y solo retenemos este pequeño control. Pero ahí es exactamente donde entra toda esa flexibilidad. Porque luego podemos crear fácilmente variaciones en esto simplemente cambiando algunas cosas pequeñas. No tenemos que conocer todo lo demás que está sucediendo dentro de este componente.

Entonces, el nivel cinco es la extensión. Y aquí vamos a tomar todo lo que hemos aprendido y lo vamos a hacer tanto como sea posible dentro de un solo componente. Y la forma en que lo hacemos es a través del uso de puntos de extensión. Y estos nos permiten anular partes específicas de nuestra aplicación de la manera que consideremos adecuada. Aquí tengo un ejemplo de un componente de diseño muy básico. Y renderiza esta página realmente, realmente simple.

Podemos envolver esta primera sección aquí en un slot con nombre y establecer el contenido predeterminado como lo que era antes. Luego también vamos a envolver esta parte del medio en un slot, pero lo mantendremos como el slot predeterminado. Y de manera similar, vamos a tomar esta parte del pie aquí y convertirla en un slot de pie.

Entonces, ahora nuestro componente de diseño hace exactamente lo que hacía antes porque no hemos establecido ningún contenido de slot. Por lo tanto, utilizará ese contenido de respaldo. Por lo tanto, el componente hace lo que hacía antes. Sin embargo, ahora es mucho más flexible y reutilizable porque podemos anular selectivamente diferentes aspectos de este componente. Te mostraré a qué me refiero. Podemos cambiar el encabezado si queremos, simplemente agregando este slot con nombre aquí. Y, por supuesto, podemos poner este pie si no nos gusta.

Y también el slot predeterminado, podemos agregar contenido allí. Lo interesante de esto es que no tenemos que establecer todo o ninguno de estos. Podemos establecer las diferentes piezas que queramos. Depende completamente de nosotros cómo queremos personalizar cómo funciona este componente de diseño.

El último y nivel final es la anidación. Entonces, aquí estamos tomando todo lo que hemos aprendido y maximizándolo, no dentro de un solo componente, sino en todo nuestro árbol de componentes. Y para hacer eso, vamos a anidar nuestros slots con ámbito y slots regulares también.

Entonces, si tenemos esta estructura, tenemos un abuelo, tenemos un padre y un componente hijo. Queremos pasar un slot desde el abuelo hasta el hijo. Así que primero echemos un vistazo a este componente hijo. Vamos a hacerlo muy simple, vamos a tener un div y vamos a tener un slot. Eso es todo. Y sabemos que nuestro abuelo, queremos que renderice el componente padre y queremos poner algún contenido en ese slot predeterminado. Pero, ¿qué hacemos exactamente para obtener este contenido en ese slot inferior? ¿Cómo pasamos desde ese componente abuelo hasta ese componente hijo?

Bueno, sabemos que este componente padre vamos a necesitar renderizar este componente hijo de alguna manera. Y también sabemos que queremos poner algún contenido en ese slot predeterminado, pero, ¿qué exactamente ponemos allí? Bueno, resulta que podemos tomar ese punto de salida del slot para el componente padre y simplemente ponerlo en ese slot. Y esto es similar a un bloque try-catch donde capturas el error, haces algo con él y luego puedes volver a lanzar ese error. Así que es algo muy similar. Capturamos el slot de alguna manera y luego lo renderizamos nuevamente y lo pasamos hacia abajo en la cadena.

Y también podemos simplificar esta sintaxis si lo hacemos de esta manera. Entonces, ¿por qué querríamos hacer esto? ¿Por qué querríamos tener que anidar estos slots y complicar la estructura de nuestros componentes? Y la razón es la misma por la que querríamos tomar nuestras funciones y dividirlas en funciones más pequeñas y es que podemos reutilizar estos componentes intermedios. Entonces, tenemos componentes abuelo, padre, hijo. Si tenemos alguna funcionalidad en el componente padre que queremos reutilizar por sí sola, podemos hacerlo. No tenemos que usar este componente abuelo todo el tiempo. Y esos son los seis niveles de reutilización.

Recientemente actualicé este curso de Componentes Reutilizables, que habla sobre estos seis niveles con mucho, mucho más detalle, mucho más detalle de lo que puedo cubrir en una charla de 20 minutos. Y este curso lo creé originalmente hace cuatro años, pero recientemente hice esta enorme actualización para él. Y voy a tomar un momento para mostrarte cómo se ve esta actualización. Así que tenemos un conjunto completo de ideas y conceptos, algunos de los cuales ya hemos cubierto en esta charla. Y están organizados por el diferente nivel de reutilización. Y cada herramienta diferente que obtienes tiene un video, una explicación de qué es esto, cuál es el patrón de componente base, por ejemplo.

Pero luego también entramos en un ejemplo de refactorización. Vamos a mostrarte exactamente paso a paso cómo aplicar esto a un ejemplo del mundo real. Lo hacemos a través de esta interfaz de pasos de refactorización aquí, donde puedes ver exactamente con diferencias cómo funciona esto. Así que vamos paso a paso para ver todas las cosas diferentes en esta refactorización.

Y luego hay un cuestionario que puedes usar para evaluar tu comprensión del material. Y por último, terminamos con un video donde profundizo en estos conceptos. Aún más a fondo de lo que hice anteriormente.

Así que ese es el curso de componentes reutilizables. Es el más reciente, pero también tengo Dominando Nuxt 3, que creé en colaboración con Vue School y Nuxt Labs. Así que este es el curso oficial sobre Nuxt, y si quieres aprender Nuxt, es la mejor manera de hacerlo.

Así que gracias a todos por escuchar mi charla. Espero que hayan obtenido mucho valor de ella. Y aquí hay algunos enlaces a diferentes cursos y cosas que tengo, así como algunos enlaces si quieres encontrarme en línea en cualquier otro lugar. Y revisa las diapositivas nuevamente si quieres. Así que gracias, y espero que tengas un buen día.