¿Qué son los Patrones de diseño? ¿Es posible aplicarlos en Javascript?

Disclaimer! Este es un post introductorio, en próximos post hablaré mas en profundidad de los 23 patrones de diseño existentes y por supuesto desde un punto de vista de Javascript (y quizá Typescript) 😉

Los patrones de diseño en el software son algo tan viejo como las cadenas privadas de televisión en España. Cuenta la leyenda que allá por el año 1994 un grupo de programadores, amigos entre ellos, se reunían asiduamente para comentar como les había ido su día trabajo y en esas charlas de bar comentaban las dificultades con las que se habían encontrado y como habían resuelto esos problemas.

Imaginaos a 4 tipos en un bar después de currar hablando de lo que mas les apasiona: programar (Lo típico que solemos hacer aquí en España vaya). En eso que con el paso de los días se van dando cuenta de que mientras trabajan se encuentran con problemas bastante similares y que el problema que se encuentra uno de ellos un día se lo acaba encontrando otro de los 4 amigos en un futuro próximo. Los nombres de los cuatro amigos son Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides.

Y es así como a partir de problemas conocidos empezaron a poner en común la forma de resolverlos y es eso es lo que hoy en día conocemos como patrones de diseño. Entre los 4 amigos escribieron un libro ya muy famoso en la comunidad llamado: Design Patters con los 23 patrones que ellos idearon y se hicieron llamar así mismos como: The gang of 4 (La banda de los 4).

Si nos ponemos a pensar un poco, esas charlas de bar son lo que hoy conocemos como StackOverflow (salvando las distancias claro). Los programadores muchas veces reutilizamos la solución de otras personas para resolver nuestros propios problemas en nuestros proyectos. Normalmente recurrimos a StackOverflow para resolver problemas muy específicos y que no sabemos resolver. En cambio, los patrones de diseño están pensados para resolver problemas bastante más generales.

Abstrayendo nuestra vista a una forma mucho mas global y general encontraríamos los patrones arquitectónicos como podrían ser por ejemplo Módelo-Vista-Controlador (MVC), Módelo-Vista-Template (MVT), Módelo-Vista-VistaMódelo (MVVM) en el que dividimos las responsabilidades y como se interrelacionan entre los diferentes módulos definiendo la forma de la organización del proyecto.

La resolución de problemas a través de patrones de diseño a contribuido en gran parte a la aparición de lo que hoy conocemos como frameworks. Al final un framework es un módulo que pone a nuestra disposición un gran sistema de diseño con un código preparado para su reutilización y extensión. Nos provee de funciones y clases heredables entre otros recursos para resolver problemas comunes cómo por ejemplo el acceso a la base de datos, creación de vistas, etc.

Una curiosa de la que te das cuenta cuando te pones a aprender acerca de patrones de diseño es que posiblemente ya aplicaste algún patrón de diseño en el pasado sin saber de su existencia.

¿Por qué cuesta aprender patrones de diseño con Javascript?

Una de las razones por las que considero que he tardado tanto en aprender acerca de patrones de diseño es porque la mayoría de ejemplos están escritos en Java y yo ya tenía bastante por aquel entonces con estar aprendiendo Javascript en su especificación ES5.

A parte, coger un patrón de diseño escrito en Java y replicarlo en Javascript era bastante difícil por la naturaleza tan funcional que anteriormente tenía Javascript hasta la aparición de ES6.

Actualmente con las nuevas especificaciones de Javascript en el que ya se incorporan clases y este se vuelve mucho mas un lenguaje orientado a objetos es mucho más viable aplicar los 23 patrones. También ha sido de gran ayuda la aparición de Typescript que vuelve el código Javascript mucho más “Java-like” por decirlo de algún modo.

Muchos patrones eran muy difíciles de adaptar a Javascript así que deje un poco de lado el reto de aprender patrones de diseño hasta día de hoy.

Los patrones de diseño se dividen en 3 categorías

· Patrones creacionales
Se encargan de la instanciación de objetos abstrayéndola del resto de la aplicación.

· Patrones estructurales
Nos enseñan cómo unas clases se comunican con otras para así conseguir un software mas robusto.

· Patrones de comportamiento
Se usan para definir la comunicación entre objetos, responsabilidad de cada objeto y gestión del código en general.

El patrón (hijueputa malparido 😆)* singleton en Javascript

El patrón singleton consiste en limitar a una sola instancia la creación de un objeto a partir de una clase de forma que toda la aplicación tenga acceso a dicha instancia.

*broma en referencia a la serie de Netflix, Narcos. Lo siento, tenía que hacerlo 😂

Este es el ejemplo desarrollado en Javascript:

class Car {
  constructor() {
    if (typeof Car.instance === ‘object’) {
      return Car.instance;
    }
    Car.instance = this;
    return this;
  }
}
export default Car;

Como vemos en el constructor se comprueba que sí el valor de instance es ‘object’ significa que la instancia del objeto ya ha sido creada y por lo tanto nos devuelve la instancia de dicho objeto.

En caso contrario, asignamos this (la instancia del objeto) a instance por primera vez y devolvemos this.

Como podemos observar, actualmente es mucho mas fácil aplicar patrones de diseño en Javascript y esto solo es un aperitivo a mis siguientes post acerca del tema.

Creo que los patrones de diseño al final más allá de lo interesantes que puedan llegar a ser (aunque de primeras suelen parecer un tostón) y lo útiles que son; sobre todo nos hacen mejores programadores. Personalmente considero que una de las grandes diferencias entre un programador junior y un programador medio tirando a senior o senior es conocer acerca de patrones de diseño.

Espero que os haya gustado muy este artículo y os sirva.

¡Nos vemos!