La navaja suiza de cada desarrollador de Vue

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.

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.

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