Introducción

Los mixins sustituyen a los behaviors de Polymer 1. 

Bien, ¿y que es un behavior en Polymer 1?. Pues los behaviors en Polymer 1 se usan para compartir código entre componentes de Polymer.

Bien una vez entendido esto, vamos a estructurar que vamos a ver en este módulo de mixins en Polymer 2:

• Que es un mixin
• Como usar un mixin
• Como crear un mixin
• Compartir un mixin

Ya que la idea de los mixins es compartir código entre componentes, vamos a explicar como podemos extender los elementos a través de la herencia de clases y poder genera componentes extendidos en base a otros.

Si nos fijamos, esta extensión o herencia lo hacemos siempre que creamos un nuevo componente al extender de Polymer:

Para comprobar como funciona mejor la extensión de los elementos vamos a crear un componente muy simple y vamos a extender (heredar) de el.

index.html

app-extend-app.html (componente que heredara del siguiente)

text-extend.html

Que es un mixin

Como habíamos dicho al principio, los mixins nos permite compartir código entre los componentes.

Nos podemos encontrar componentes que sean parecidos y que puedan compartir código por funcionalidad, o también componentes que no tengan nada que ver entre ellos pero igualmente tengan ciertos comportamientos que se puedan repetir.

Un mixin lo podemos definir con una class factory (factoría de clases), y no es mas que una función que nos devuelve una clase.

Esta función recibe como parámetro una superclase y no devuelve una clase que extiende esa clase, incluyendo todos los métodos del mixin.

Ahora puedes ver el sentido a la breve introducción en este módulo sobre herencia en Javascript.

Como podemos usar un mixin

Lo llevamos haciendo durante casi 8 módulos con el resto de componentes y es usando un import.

Vamos aprovechar el mixin que usamos cuando importamos el event gesture en un módulo anterior.

Una vez importado tendremos una nueva función que la llamaremos de la siguiente forma:

Con la sentencia anterior tenemos la definición de un mixin.

Una función Polymer.GestureEventListener, que le pasamos una superclase Polymer.Element, y esto nos devolverá todo el código de Polymer.Element mas el código del mixin.

En el ejemplo anterior hemos usado un mixin para los eventos de gestos, pero, ¿si nosotros tenemos otros mixins y necesitamos usarlos?.

Pues la solución es muy simple, ya que podemos encadenar varios mixins seguidos para usarlos todos.

Vamos hacer un ejemplo para entenderlo mejor:

Como el código anterior puede parecer raro vamos a explicar como internamente se ejecutaría:

1. Le pasamos la clase Polymer.Element a el mixin CustomMixin2 y esto nos devuelve una clase
2. Le pasamos la clase devuelta de CustonMixin2(Polymer.Element) a CustomMixin1 y esta ejecución nos devuelve otra clase
3. Ahora le aplicaremos a Polymer.GestureEventListeners la clase que nos devolvió el CustomMixin1

Como crear un mixin

Sabiendo que es un mixin y como usar un mixin, vamos hacer una parte importante, crear un mixin.

Con el ejemplo anterior tenemos una plantilla para definir un mixin, pero que podemos añadir dentro del mixin.

Dentro del mixin podemos crear cualquier código Javascript que necesitemos:

• Ciclo de vida.
• Observers.
• Propiedades.
• Constructores.
• Métodos que usemos para el mixin.

Como un mixin es una clase debemos invocar siempre a la superclase, por ejemplo ready() a super.ready(), o en el constructor() con super().

A continuación algo de código muy simple para entender y comprobar como funcionan los mixins:

index.html

app-extend-app.html

text-extend.html

mixins.html

Si observamos el código veremos como extendemos ademas de los métodos también lo hacemos con las propiedades.

Par finalizar este módulo vamos aprender a preparar nuestro mixin para compartirlo.

Compartir nuestro mixin

Cuando desarrollamos nuestros mixins normalmente si es nuestro desarrollo propio y no lo van a usar otras personas, posiblemente sepamos donde esta cada parte del código y podamos evitar repetir nombres y código.

El problema aparece cuando nuestro mixin lo comienzan a usar otras personas, y que a su vez esas personas desarrollan nuevas funcionalidades que pueden coincidir en nombre, ya que un mixin al final es como tener una declaración global de todo nuestro Javascript.

Para nuestra suerte Polymer tiene una función que realiza un cacheo del mixin, evitando de esta forma que se aplique más de una vez.

La función es Polymer.dedupingMixin() y su funcionamiento es el siguiente:

1. Memoriza la clase generada por el mixin, de esta forma no se tiene que volver a ejecutar la función.
2. Si el mixin ya fue usado en una clase, evitar volver a usarlo.

Perfecto, ¿pero como uso esta función?. Pues igual que hacíamos para encadenar mixin, le pasaremos la declaración del mixin como parámetro.

Otra de las soluciones que es una buena practica cuando queremos o necesitamos compartir nuestro código, es usar el patrón módulo.

El patrón módulo tiene una estructura sencilla, ya que es una función que trabaja como un contenedor.

Esto quiere decir que en su interior, se declaran una serie de variables y funciones que solo son visibles desde dentro del mismo.

Un pequeño ejemplo aplicando el patrón módulo: