This content originally appeared on DEV Community and was authored by IagoLast
Si tuviese que elegir primer tema a la hora de hablar de arquitectura de software lo tendría claro: Inversión 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 código. En este primer artículo me gustaría intentar explicar este concepto de la forma más sencilla posible y poner ejemplos que faciliten su comprensión.
Abstracciones, detalles e interfaces
Antes de entrar en materia es importante definir una serie de conceptos que nos permitirán entender correctamente en que consiste el la inversión de la dependencias.
- Abstracción (del latín abstrahere, 'alejar, sustraer, separar') es una operación mental destinada a aislar conceptualmente una propiedad o función concreta de un objeto, y pensar qué es, ignorando otras propiedades del objeto en cuestión.
- Detalle es una parte, hecho o circunstancia que contribuye a formar o completar una cosa pero no es indispensable en ella.
- Interfaz es la conexión funcional entre dos sistemas, programas, dispositivos o componentes de cualquier tipo, que proporciona una comunicación de distintos niveles de abstracción, permitiendo el intercambio de información.
Vamos a ejemplificar estos conceptos aplicados al mundo de la automoción. Para la mayoría de los conductores el motor de sus coches es una abstracción, 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 configuración de cilindros en línea o una configuración en V. Simplemente necesitamos saber cuatro cosas sencillas como si es diésel o gasolina y cada cuantos kilómetros necesita un cambio de aceite. El coche en sí es una abstracción para los conductores y esta abstracción es posible porque los coches nos ofrecen una serie de interfaces que nos permiten conducirlos sin necesidad de conocer sus detalles de implementación.
¿Os imagináis 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 implementación...
...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 eléctrico o de cuántos cilindros tenga...
En el mundo del software sucede exactamente lo mismo. Las funciones son abstracciones que conociendo su interfaz (parámetros de entrada y valor de retorno) nos permiten realizas tareas complejas obviando los detalles de implementación. Por ejemplo sabemos que la función btoa de javascript recibe como parámetro un string y devuelve su representación en base64 pero no necesitamos conocer el RFC donde se define el algoritmo para utilizarla ya que para nosotros es un detalle de implementación sin importancia.
DIP
¿Qué nos dice el principio de la inversión de la dependencia?
A grandes rasgos nos dice que nuestro código 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 módulos intermedios que sirvan como abstracción de una implementación concreta. Pongamos un ejemplo:
// LoginPage.tsx
import ReactGA from 'react-ga';
/**
* Componente de react que contiene una página de login
*/
export default function LoginPage() {
/**
* Función de login que se ejecutará cuando el usuario haga click en el botón 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 página de login que registra un evento cada vez que el usuario envía el formulario de login al servidor. Esta página utiliza react-ga para monitorizar los eventos del usuario.
El problema de esta aproximación es que los componentes (páginas) están acoplados a google-analytics. Una forma sencilla de eliminar este acoplamiento sería crear un módulo intermedio llamado analytics y que sea este módulo quien dependa de google-analytics.
// LoginPage.tsx
import analytics from './analytics.ts';
/**
* Componente de react que contiene una página de login
*/
export default function LoginPage() {
/**
* Función de login que se ejecutará cuando el usuario haga click en el botón de "login"
*/
function login(e: React.FormEvent<HTMLFormElement>) {
/**
* ¡¡Enviamos eventos a nuestra abstracción de analíticas!!
*/
analytics.event({ category: 'User', action: 'login' });
// ...
}
/**
* Omitimos la UI dado que no es relevante para este ejemplo
*/
return <form onsubmit={login}> ... </form>;
}
// analytics.ts
import ReactGA from 'react-ga';
/**
* Exponemos una función que nos abstrae de la implementación concreta.
*/
function track(args: {category: string, action: string}) {
ReactGA.event(args);
}
De esta forma nuestro código no depende directamente de Google analytics, si no que depende de una abstracción llamada analytics.
Aunque puede parecer una tontería hemos desacoplado la lógica de las analíticas del resto de nuestro código y si por ejemplo dentro de unos meses decidimos migrar a cualquier otro proveedor de analíticas basta con hacer cambios en el archivo analytics.ts y si estos cambios mantienen la misma interfaz el resto del código funcionará perfectamente. Volviendo a la metáfora 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 artículo hemos visto en que consiste la inversión de la dependencia, los conceptos de abstracción, detalle de implementación, interfaz y cómo se relacionan entre sí. También hemos visto una forma sencilla de abstraer el código de los detalles de implementación utilizando módulos intermedios.
Espero que os haya servido de algo :)
This content originally appeared on DEV Community and was authored by IagoLast
IagoLast | Sciencx (2021-10-04T08:49:30+00:00) Arquitecturas de Frontend : DIP. Retrieved from https://www.scien.cx/2021/10/04/arquitecturas-de-frontend-dip/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.