Si tuviese que elegir primer tema a la hora de hablar de arquitectura de software lo tendra claro: Inversin de la dependencia. Este concepto no es nuevo y sin embargo mucha gente sigue sin tenerlo claro y son pocos los que lo aplican en su cdigo. En este primer artculo me gustara intentar explicar este concepto de la forma ms sencilla posible y poner ejemplos que faciliten su comprensin.

Abstracciones, detalles e interfaces

Antes de entrar en materia es importante definir una serie de conceptos que nos permitirn entender correctamente en que consiste el la inversin de la dependencias.

• Abstraccin (del latn abstrahere, 'alejar, sustraer, separar') es una operacin mental destinada a aislar conceptualmente una propiedad o funcin concreta de un objeto, y pensar qu es, ignorando otras propiedades del objeto en cuestin.
• Detalle es una parte, hecho o circunstancia que contribuye a formar o completar una cosa pero no es indispensable en ella.
• Interfaz es la conexin funcional entre dos sistemas, programas, dispositivos o componentes de cualquier tipo, que proporciona una comunicacin de distintos niveles de abstraccin, permitiendo el intercambio de informacin.

Vamos a ejemplificar estos conceptos aplicados al mundo de la automocin. Para la mayora de los conductores el motor de sus coches es una abstraccin, un concepto del que no necesitan conocer todos los detalles para poder conducir correctamente. Estoy seguro de que muy pocos sabemos si nuestro coche tiene un motor con una configuracin de cilindros en lnea o una configuracin en V. Simplemente necesitamos saber cuatro cosas sencillas como si es disel o gasolina y cada cuantos kilmetros necesita un cambio de aceite. El coche en s es una abstraccin para los conductores y esta abstraccin es posible porque los coches nos ofrecen una serie de interfaces que nos permiten conducirlos sin necesidad de conocer sus detalles de implementacin.

Os imaginis tener que estudiar absolutamente todos los detalles de cada coche para poder conducirlo? Gracias a las abstracciones podemos pasar de tener que conocer todos los detalles de implementacin...

...a tener una interfaz que nos permite abstraernos de los detalles.

De esta forma podemos conducir cualquier modelo de coche, independientemente del tipo de motor, de si es de gasolina o elctrico o de cuntos cilindros tenga...

En el mundo del software sucede exactamente lo mismo. Las funciones son abstracciones que conociendo su interfaz (parmetros de entrada y valor de retorno) nos permiten realizas tareas complejas obviando los detalles de implementacin. Por ejemplo sabemos que la funcin btoa de javascript recibe como parmetro un string y devuelve su representacin en base64 pero no necesitamos conocer el RFC donde se define el algoritmo para utilizarla ya que para nosotros es un detalle de implementacin sin importancia.

DIP

Qu nos dice el principio de la inversin de la dependencia?

A grandes rasgos nos dice que nuestro cdigo debe depender de abstracciones en lugar de depender de detalles.

En lenguajes como Java este principio suele ser mas sencillo de aplicar porque el propio lenguaje dispone del concepto de interfaz pero en el mundo del frontend puede no estar tan claro como aplicarlo. Personalmente me gusta crear mdulos intermedios que sirvan como abstraccin de una implementacin concreta. Pongamos un ejemplo:

// LoginPage.tsximport ReactGA from 'react-ga';/** * Componente de react que contiene una pgina de login */export default function LoginPage() {    /**     * Funcin de login que se ejecutar cuando el usuario haga click en el botn de "login"     */    function login(e: React.FormEvent<HTMLFormElement>) {        /**         * Enviamos eventos a Google Analytics         */        ReactGA.event({ category: 'User', action: 'login' });        // ...    }    /**     * Omitimos la UI dado que no es relevante para este ejemplo     */    return <form onsubmit={login}> ... </form>;}

Imaginemos una pgina de login que registra un evento cada vez que el usuario enva el formulario de login al servidor. Esta pgina utiliza react-ga para monitorizar los eventos del usuario.

El problema de esta aproximacin es que los componentes (pginas) estn acoplados a google-analytics. Una forma sencilla de eliminar este acoplamiento sera crear un mdulo intermedio llamado analytics y que sea este mdulo quien dependa de google-analytics.

// LoginPage.tsximport analytics from './analytics.ts';/** * Componente de react que contiene una pgina de login */export default function LoginPage() {    /**     * Funcin de login que se ejecutar cuando el usuario haga click en el botn de "login"     */    function login(e: React.FormEvent<HTMLFormElement>) {        /**         * Enviamos eventos a nuestra abstraccin de analticas!!         */        analytics.event({ category: 'User', action: 'login' });        // ...    }    /**     * Omitimos la UI dado que no es relevante para este ejemplo     */    return <form onsubmit={login}> ... </form>;}

// analytics.tsimport ReactGA from 'react-ga';/** * Exponemos una funcin que nos abstrae de la implementacin concreta. */function track(args: {category: string, action: string}) { ReactGA.event(args);}

De esta forma nuestro cdigo no depende directamente de Google analytics, si no que depende de una abstraccin llamada analytics.

Aunque puede parecer una tontera hemos desacoplado la lgica de las analticas del resto de nuestro cdigo y si por ejemplo dentro de unos meses decidimos migrar a cualquier otro proveedor de analticas basta con hacer cambios en el archivo analytics.ts y si estos cambios mantienen la misma interfaz el resto del cdigo funcionar perfectamente. Volviendo a la metfora de los coches, mientras los pedales funcionen de la misma forma podemos cambiar el motor por otro totalmente diferente de forma transparente para el conductor.

Resumen

En este artculo hemos visto en que consiste la inversin de la dependencia, los conceptos de abstraccin, detalle de implementacin, interfaz y cmo se relacionan entre s. Tambin hemos visto una forma sencilla de abstraer el cdigo de los detalles de implementacin utilizando mdulos intermedios.

Espero que os haya servido de algo :)