Patrón fachada en JavaScript (Facade)

Es uno de los patrones más comunes en todo tipo de sistemas. Se utiliza para simplificar una interfaz compleja y reducirla a las funciones necesarias en nuestro sistema o a funciones mejor diseñadas y más simples que las originales. También puede utilizarse para desacoplar un sistema de un subsistema/componente concreto.

La librería jQuery proporciona ejemplos muy bien diseñados de este patrón. El más conocido y más utilizado es el selector de elementos del DOM: $("selector").

Hasta que el W3C definió el Selectors API Level 1, encontrar elementos concretos en el DOM era bastante engorroso si no tenian una id asignada. Por ejemplo, algo tan común como seleccionar todos los elementos que tengan la clase 'example' requería:

• Seleccionar todos los elementos de la página con getElementsByTagName('*')
• Iterar sobre los elementos comparando sus clases con la clase que buscamos
• Tener en cuenta que puede haber una lista de clases separadas por espacios

La cosa se complica mucho si queremos buscar algo más complejo, como todos los elementos con clase 'example' que son hijos de un elemento ul con clase 'offer'.

jQuery ha abstraido toda esta complejidad del API del DOM en una fachada de uso simple e intuitivo: $("selector"). Podemos escribir simplemente:

$('.example')

$('ul.offer .example')

El uso es sencillo y elegante. De echo, el excelente diseño de las fachadas que proporciona jQuery es la razón principal de su éxito.

El excelente diseño de las fachadas que proporciona jQuery es la razón principal de su éxito

Como comentamos antes, también puede utilizarse para desacoplar un subsistema/componente/librería que utilizamos, reduciendo nuestra dependencia. En este caso se crea la fachada como un intermediario. Nuestro sistema realiza todas las llamadas a nuestra fachada y es la fachada la única que utiliza el componente específico.

De esta forma, si en el futuro dedicimos utilizar otro componente que provea esa funcionalidad, sólo tenemos que cambiar la parte de nuestra fachada que interactua con él. El interfaz que se ofrece hacia nuestro sistema no se modifica. De hecho, el sistema no necesita conocer nada del componente, sólo conoce el API que ofrece la fachada.

Diferencia entre librería y framework

Una entrada corta para aclarar un par de conceptos que parece que mucha gente confunde: librería (o biblioteca) y framework.

He encontrado en multitud de sitios referencias a jQuery como un framework y esto es un error, jQuery es una librería. Por si tenemos alguna duda, en la própia página de jQuery nos lo aclaran:

What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library.

Una librería normalmente proporciona una serie de funciones/métodos muy concretos para simplificar tareas complejas. Podemos utilizarlas desde nuestro código respetando el API que proporcionan pero sin necesidad de adaptar/modificar nuestra estructura de aplicación.

Un ejemplo podría ser una librería matemática que ofrezca funciones avanzadas para cálculos estadísticos. JQuery es otro ejemplo, es una librería que proporciona funciones sencillas para manejo del DOM, para comunicación AJAX y algunas otras utilidades.

Un framework aporta una estructura completa en la que nosotros "encajamos" nuestro código, implementando la lógica concreta de la aplicación. Es mucho más que una librería. Impone unas condiciones a nuestra aplicación e incluso puede definir su arquitectura. Es un marco (framework) en el que nosotros vamos a definir piezas. El marco define las reglas del juego a las que nos tenemos que atener.

Un ejemplo serían los frameworks MVC (o MV*). La mayoría definen la forma en que tenemos que estructurar nuestra aplicación y la forma en la que los elementos de esta estructura se comunican. Deberemos crear modulos, modelos, vistas, etc, siguiendo unos patrones concretos y escuchar eventos predefinidos que marcan el flujo global en el que debe integrarse nuestra aplicación.

A veces un framework condiciona sólo una parte de nuestro programa, por ejemplo la parte gráfica en el caso de Bootstrap.

Simplificando mucho podríamos decir que nuestro código llama a las funciones de una librería mientras que un framework llamará a nuestro código, que sería algo así como piezas integradas en su estructura.

En una librería tu código es el que está al mando y utiliza las funciones de la librería cuando y como quiere. En un framework, éste es el que está al mando y tu código debe encajarse en su estructura y normas.

En cierto modo la diferencia principal es que un framework implica una forma de inversión de control porque nuestro código será invocado por él, que actua como coordinador de la actividad de nuestro programa.