VueJS: Cómo crear un plugin

35684019921_23be5f8210_o.jpg

Foto de portadaa de phaminhduy

Aunque la serie de Vue haya terminado, no significa que dejemos el tema de Vue por ahora. Lo que en esa serie aprendimos es una guía con los temas más generales y que más uso vas a poder dar.

Sin embargo, existe mucha funcionalidad transversal que puede que no utilices en tu día a día, pero que en cualquier momento tengas que hacer uso de ella. Entramos en una sección de “Otras funcionalidades que quizá te sea útil conocerlas”.

Hoy empezamos con la creación de plugins en Vue:

¿Para qué necesitamos un plugin?

Muchas veces, somos muy reacios a soltar jQuery, porque su sistema de plugins nos permite extender la funcionalidad por defecto con nuestro propio código. En unos sencillos pasos, creábamos módulos y hacíamos que el sistema tuviese una forma homogénea.

Cuando miramos las nuevas herramientas de desarrollo, lo primero que solemos analizar es la facilidad con que podemos ampliarla. Al descubrir que un framework o una librería es extensible, nos relajamos, nos llegamos a decir: “Bueno, quizá no cumpla con todos mis requisitos, pero tengo un sistema, más o menos fácil, que me permite incluir estas necesidades en cualquier momento dado sin yo tener que tocar el core”.

En Vue hay muchas formas de extender nuestra funcionalidad por defecto: podemos extender nuestro HTML por medio de directivas, filtros y componentes, podemos también hacer que estos componentes hereden de otros componentes y podemos mezclar objetos con otros objetos para crear composiciones más complejas y ricas en comportamiento.

Sin embargo, estas son formas de extender y componer más específicas, son acciones más ligadas con un módulo o vista en particular que al funcionamiento total de nuestro sistema. Cuando deseamos añadir una funcionalidad al propio framework, es buena idea hacer uso de plugins.

El sistema de plugins de Vue está hecho para que podamos meter funcionalidad de manera global y transversal para ser usada por todos y cada uno de los componentes de nuestro árbol.

Por tanto ¿Qué cosas podemos incluir en Vue como un plugin? Pues muchas cosas. Por ejemplo, durante estos meses, no hemos hablado sobre cómo internacionalizar nuestra aplicación. Incluir un plugin que nos ofrezca esta posibilidad puede ayudarnos mucho a la hora de crear aplicaciones.

No hemos hablado sobre cómo lanzar notificaciones o como guardar datos (cache, localStorage, bases de datos…) de una forma que sea cómodo trabajar con Vue.

No hemos hablado de nada de esto porque Vue no lo trae por defecto (lógico, ya que son funcionalidades especificas del contexto en el que nos encontramos), pero si existe gente de la comunidad que se ha encargado de hacer estas funcionalidades de forma genérica para que todos las podamos usar. Lo han hecho por medio de plugins.

Los plugins no os resultarán un sistema raro porque, aunque no hemos creado ninguno todavía, sí hemos hecho uso de ellos. Recordad que Vue es un framework progresivo. La forma que ha tenido Vue de añadir funcionalidad extra como Vue-Router o Vuex ha sido por medio de plugins.

Pero metámonos en acción.

¿Qué puedo hacer con un plugin en Vue?

Hay 5 tipos de plugins que yo puedo desarrollar para Vue:

  1. Puedo añadir métodos globales o propiedades nuevas. Un ejemplo de este tipo de plugins es vue-custom-element. Este plugin permite crear componentes Custom Elements que cumplan el estándar Web. Si observáis la librería, existe un nuevo método en Vue si usáis el plugin: Vue.customElement.
  2. Puedo añadir directivas, filtros o transiciones de manera global. Por ejemplo vue-touch que nos permite añadir los eventos de la librería HammerJS (librería con eventos multi-touch) con la nueva directiva.
  3. Añadir nuevas opciones a un componente como hace vue-router.
  4. Añadir nuevos métodos de instancia a Vue.
  5. O Añadir librerías que proporcionan su propia API como también hacen vue-router y vuex.

¿Cómo creo un plugin en Vue?

Vamos a crear un plugin para crear un Logger más personalizado y no dejar todo el código con console.log.

Para crear este  plugin lo único que tenemos que hacer es  crear un objeto JSON que cuente con la función install.

Dentro de mi proyecto creo una nueva carpeta llamada plugins (si vemos que el plugin es muy genérico, podríamos llevarlo a un módulo propio de NPM para que más gente lo use):

Captura de pantalla de 2017-08-10 12-25-03.png

Dentro vamos a crear un nuevo fichero llamado vue-logger.js. En este fichero crearemos este objeto. De la siguiente manera:

export default {
    install(Vue, options) {

    }
}

Es importante que a la función install le pasemos estos dos parámetros:

  • Vue: es la propia librería y donde vamos a insertar nuestra funcionalidad genérica.
  • options: Puede que nuestro plugin necesite configuración por parte del usuario, por tanto se lo permitiremos gracias a este objeto que Vue le inyectará.

Dentro de install podemos hacer todo lo explicado en el apartado anterior. Lo haríamos es de esta manera:

export default {
    install(Vue, options) {
        // 1. Añadir un método global o una propiedad
        Vue.miMetodoGlobal = function () {
            // mi lógica ...
        };

        // 2. Añadir un asset global (directiva, filtro, ...)
       Vue.directive('mi-directiva', {
           bind (el, binding, vnode, oldVnode) {
               // mi lógica ...
           }
       });

       // 3. Inyectar más opciones a un componente
       Vue.mixin({
           created: function () {
               // mi lógica ...
           }
       });

       // 4. Añadir un método de instancia
       Vue.prototype.$miMetodo = function (opciones) {
           // mi lógica
       }
    }
}

En nuestro casó, necesitamos un plugin que nos permita ejecutar el Logger en todos los componentes y también en lo que no tenga que ver con el componente, por tanto, lo mejor es incluir un nuevo método en la instancia de Vue o de sus componentes como si fuese otra propiedad.

Para conseguir esto, creamos un método de instancia que se llame $log:

// src/plugins/vue-logger.js

export default {
    install(Vue, options) {

        Vue.prototype.$log = {
            info: (text) => console.info(text),
            error: (text) => console.error(text),
            debug: (text) => console.log(text),
            warn: (text) => console.warn(text)
        }
    }
}

Es bastante tonto, pero muy simple de entender. Se está añadiendo un objeto $log que tiene 4 niveles de log.

Con esto tendríamos terminado nuestro plugin.

¿Cómo lo uso?

Una vez que hemos creado el plugin, lo último que tenemos que hacer es indicarle a Vue que lo use. Si vamos a nuestro fichero main.js podemos hacerlo de esta manera:

// src/main.js

import Vue from 'vue';
import App from './App';
import logger from './plugins/vue-logger';

Vue.use(logger);

const vue = new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});

La clave está en decirle a Vue que use mi plugin con la línea Vue.use(logger). Internamente, lo que use está haciendo es lo siguiente (no es código real de la aplicación, es para que nos hagamos una idea de lo que hace internamente):

// vue.js

...
Vue.use(plugin, options) {
    plugin.install(Vue, options); 
}
...

De esta manera se registra todo de una manera muy desacoplada. Si ahora quiero usar mi logger en un componente en particular, lo haría así:

// src/App.vue

...

export default {
    name: 'app',
    created: function () {
        this.$log.info('functiona correctamente')
        this.$log.error('functiona correctamente')
        this.$log.warn('functiona correctamente')
        this.$log.debug('functiona correctamente')
    }
};

...

Como es un método de estancia, mi logger se encuentra dentro de su contexto, por tanto, uso el this.$log para hacer uso de él.

Ya está, no hay más, simplemente crear módulos bajo tu necesidad y tu imaginación.

Conclusión

Como conclusión 3 consejos respecto a los plugins en el desarrollo de software:

No entres nunca a una librería a pelo para adaptar su funcionalidad, harás que no puedas actualizar nunca más un recurso de terceros. Las dependencias tienen que estar desacopladas lo máximo de tu negocio.

Busca dependencias que te permitan extender su funcionamiento fácilmente sin que tengas que destripar nada por el camino. Qué sean fáciles de reutilizar, de mantener, de quitar y poner.

Cuantos más plugins genéricos puedas generar de tu aplicación, más reutilizable será tu código. Ojo! No te obsesiones tampoco, hay mucho código muy acoplado a su dominio que quizá esté bien encapsularlo para su propio uso, no te vuelvas loco si hay un código repetido dos veces en tu proyecto, quizá tenga sentido que se encuentre así.

Nos leemos 🙂

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s