1. Introducción a los Composables
Bienvenidos a esta charla relámpago, la navaja suiza de cada desarrollador de Vue.js. Los Composables son la navaja suiza de cada desarrollador de Vue.js. Te ayudan a construir aplicaciones Vue.js más extensibles, adaptables, controlables y confiables. Un composable es una función de JavaScript que utiliza la API de composición para encapsular y reutilizar la lógica con estado.
Bienvenidos a esta charla relámpago, la navaja suiza de cada desarrollador de Vue.js. Mi nombre es Juan Andrés Núñez, soy un ingeniero frontend y también creador de contenido en mi tiempo libre en mi plataforma, squalavue.es. Vamos directo al grano. ¿Qué es la navaja suiza de cada desarrollador de Vue.js? Esta es una afirmación audaz, ¿verdad? Bueno, en mi opinión, los Composables lo son. ¿Por qué? Por muchas razones que exploraremos en esta presentación, pero hay dos razones principales. La primera es por qué deberías aprender este patrón, ¿verdad? O por qué deberías prestarme atención durante los siete, ocho o nueve minutos. Y esto es un punto justo, lo entiendo. Así que hagamos un trato. Esta es la promesa. Si me prestas tu atención, tu completa atención, te prometo que este patrón te ayudará a construir aplicaciones Vue.js más extensibles, adaptables, controlables y confiables. Pero primero, vamos a lo que, ¿de acuerdo? Porque tal vez no estás familiarizado con este concepto de Composables. No sabes qué es. Bueno, un composable es una función de JavaScript que utiliza la API de composición. Por cierto, esta es la documentación oficial de Vue.js para encapsular y reutilizar la lógica con estado. Tres puntos clave aquí, súper importantes. API de composición. Tienes que usar la API de composición. No hay otra forma de hacerlo. Lógica con estado, debes tener algún tipo de estado que se modificará, ¿verdad? Y quieres reaccionar a eso. Si no tienes un estado, probablemente no necesitas la API de composición y probablemente no estás trabajando con un composable. Tal vez sea una función de utilidad típica, pero no un composable, en mi opinión, por supuesto. Esta es la implementación más básica de un composable que se me ocurre. Estamos importando las APIs de reactividad de Vue. Estamos exportando una función, en este caso, useAlert. Estamos haciendo nuestra tarea adentro. Luego hablaremos de este composable sin estado, con estado y devolvemos algo. Tenemos total libertad para devolver lo que realmente queremos devolver. Pero sigamos adelante. Tres últimos puntos clave.
2. Beneficios y Casos de Uso de los Composables
Los Composables no son lo mismo que los mixins, pero reemplazan completamente a los mixins. Puedes comenzar a usar los Composables en Vue 2.7, así que no hay excusas. Los Composables son útiles para conectar diferentes partes del sistema, compartir estado común, crear controladores, utilidades reactivas de la interfaz de usuario y cualquier otro uso creativo. Se pueden utilizar en todas partes y se deben aplicar cuando sean apropiados.
4 puntos sobre el qué. La convención es comenzar con use, useAlert, use lo que sea. No son lo mismo que los mixins. Se superponen. Eso es cierto, pero superan, reemplazan completamente a los mixins. Así que si estás acostumbrado a los mixins y comienzas a usar los Composables, no extrañ
arás los mixins, créeme. Seamos honestos. Ni siquiera necesitas
Vue 3 para comenzar a usar esta cosa componible. Desde
Vue 2.7, puedes usar los Composables, así que no hay excusa. Entonces, ¿cuándo? ¿Cuándo deberías comenzar a usar este patrón? Cuando pienso en los Composables, pienso en puentes, pero este no es el puente típico, ¿verdad? Este es uno reactivo. Lo que significa es que puedes desacoplar la reactividad de los componentes y comenzar a usarla en otros lugares. Y esto es si estás acostumbrado a
Vue 2 y la API de opciones, este es un cambio mental que es fácil de hacer. Pero al principio, esto es algo extraño. Entonces, si necesitas conectar diferentes partes del sistema, bueno, puedes usar un Composable. Algunos casos de uso son almacenes de estado. Por supuesto, quieres compartir algún tipo de estado común entre diferentes componentes o diferentes partes del sistema y tenerlo centralizado, por supuesto. Controladores que son más o menos lo mismo que un almacén de estado. Pero cuando pienso en un controlador, tal vez sea la puerta de entrada a una funcionalidad. Hacemos algunas consultas al
backend, transformamos los datos, tal vez servimos algunas propiedades computadas. Esto, para mí, es un controlador y es un candidato perfecto para un Composable. Y también utilidades reactivas de la interfaz de usuario. La clave aquí es la reactividad. Si no tienes reactividad, no tienes un Composable. Y, por supuesto, cualquier otro uso creativo de este patrón. En la última diapositiva, mencionaremos el uso de Vue.use. Eso, para mí, es el uso más creativo de este patrón componible. Pero estos son solo ejemplos. ¿Dónde? Bueno, en todas partes. Este es un
video de uno de nuestros proyectos principales y comenzamos despacio, pero luego algo hizo clic. Y comenzamos a usarlo cuando encajaba. Por supuesto, no puedes lanzar un
3. Versatilidad y Beneficios de los Composables
Los Composables son versátiles y se pueden utilizar tanto en la capa de dominio como en la interfaz de usuario. Son omnipresentes y pueden ser locales a una característica, globales a un sistema o cualquier cosa intermedia. Este patrón ayuda a construir componentes extensibles, adaptables, controlables y confiables. Permite comenzar de forma pequeña y crecer con el proyecto, y admite implementaciones tanto sin estado como con estado. Además, el patrón de Opciones se puede utilizar para simplificar el código y proporcionar valores predeterminados.
Cualquier situación es adecuada para utilizar los Composables. Pero son muy versátiles. Por lo tanto, en todas partes. Porque, bueno,
Vue es un concepto de interfaz de usuario, ¿verdad? Entonces, este Composable es un concepto de interfaz de usuario. Bueno, no tiene que ser así. Porque puede estar en la capa de dominio. Puede estar en la interfaz de usuario. Por supuesto, lo que quiero decir es que son omnipresentes. Rompen esa barrera. ¿Verdad? Por lo tanto, pueden ser locales a una característica, globales a un sistema o cualquier cosa intermedia, realmente. Eso es dónde. ¿Y por qué? Permíteme cumplir la promesa. Este patrón de Composable te ayudará a construir cuatro cosas. Componentes extensibles, adaptables, controlables y confiables. Permíteme cumplir mi palabra. ¿Extensibles? ¿Por qué? Porque puedes comenzar de forma pequeña y crecer con el proyecto. Y puede ser sin estado o con estado. Cuando digo sin estado, no quiero decir que este Composable no tenga un estado. No sería un Composable. Pero el estado en este caso está dentro de la función expuesta. Por lo tanto, cada vez que creamos una nueva implementación de este Composable, recrearemos este estado. Será privado para esa implementación. Pero simplemente moviendo este estado fuera de la función, esto es común para todas las implementaciones. Esto es extremadamente fácil de entender, pero muy poderoso. Y el patrón de Opciones. Este no es un concepto de Composable. Es un concepto de
JavaScript. Pero si quieres dejar de abusar de este patrón de argumento, puedes crear un objeto. Puedes tener algunos valores predeterminados agradables.
4. Composition, Adaptabilidad y Controlabilidad
Los Composables son muy versátiles y adaptables. Pueden adaptarse a cada capa de la aplicación y funcionar en cualquier entorno. Son controlables, lo que te permite exponer solo lo que necesitas. Los Composables son fáciles de probar y mantener.
Y esta es una práctica común, muy común en el mundo de los Composables. Nuevamente, muy fácil de entender. Composición. Es lo mismo que un componente de vista. Cuando es demasiado grande, quieres empezar a extraer a diferentes subcomponentes u otros componentes. Lo mismo ocurre con los Composables. Es una práctica común usar otro Composable dentro de tu Composable haciendo esa composición. En este caso, almacenamiento local, etc. Por lo tanto, esto es extensible. Esa es la primera parte de la promesa.
La segunda parte. Adaptabilidad. Son adaptables porque se adaptan a cada capa de la aplicación y funcionan en cualquier entorno en el que los utilices. Esa palabra no significa que esta sea la opción correcta, pero funcionan. Son muy versátiles. Por ejemplo, lógica de negocio del dominio, ¡comprobado! APIs nativas, ¡comprobado! Modelado de datos, ¡comprobado! Y podría seguir enumerando, para ser honesto, pero son muy adaptables.
Controlabilidad. El tercer punto. Decide qué exponer. Vimos esto al principio porque puedes devolver lo que necesites. Por lo tanto, puedes mantener privada, entre comillas, alguna parte del Composable y exponer solo lo que necesitas consumir externamente. Pero puedes hacer más. Si tienes que exponer esa parte de estado o cualquier otra cosa, una propiedad computada, un objeto reactivo, no importa, puedes hacer esta bonita API solo de autenticación desde Vue. Y también puedes cambiar el alias del nombre. Por supuesto, esto es JavaScript, ¿verdad? Por lo tanto, puedes cambiar el alias del nombre cuando lo estés utilizando, importando o exponiendo. Muy fácil, pero al mismo tiempo muy poderoso.
Y la última parte, la cuarta parte de la promesa, son confiables porque son fáciles de probar.
5. Testing and Conclusion
Los Composables son fáciles de probar y eliminan la necesidad de probar el entorno. Comienza a usar los Composables ahora. Echa un vistazo a Vue use para una biblioteca de Composables y considera construir tu propia colección para tus proyectos. Gracias por tu atención y nos vemos en la masterclass.
y más fácil de mantener. ¿Por qué? Porque no tienes que montar ese componente de
Vue o simular algunas dependencias. Por supuesto, no lo usas dentro de tu Composable, pero si los mantienes lo más confiables posible, es mucho más fácil de probar porque puedes probar solo el Composable, no el entorno donde vive el Composable. Y esto, nuevamente, es súper poderoso.
Espero que en este punto, estés convencido de este concepto. Y si nunca has usado esta cosa de los Composables, este es el mejor momento para comenzar a usarlos.
Algunas consideraciones finales. Por favor, revisa Vue use, porque es una biblioteca súper increíble de Composables, cientos de ellos, con una documentación súper agradable, puedes jugar con ellos. Y la categorización es estado, navegador, red, animación. Por favor, hazte un favor y revisa Vue use. Pero por supuesto, si quieres jugar, entiendo este patrón, lo mejor que puedes hacer es construir tu propia colección para tus propios proyectos. Así que nuevamente, gracias por tu atención y nos vemos en la masterclass donde pondremos en práctica esta cosa de los Composables. Nos vemos allí.
Vue.js London Live 2021
GraphQL Galaxy 2021
React Summit 2022
JSNation 2022
Comments