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

Nivel de la masterclass: Intermedio
This talk has been presented at Vue.js Live 2024, check out the latest edition of this JavaScript Conference.
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.
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.
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.
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.
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.
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í.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments