Todos sabemos que esto es algo en lo que Vue.js prospera. El tema principal del día es el diseño orientado al dominio, que es un enfoque de diseño que se centra en modelar software para que coincida con un dominio según la información proporcionada por expertos en el dominio. Con esto, vamos a explicar más detalladamente en las diapositivas.
Cuando miramos DDD, que es el Diseño Orientado al Dominio, es un enfoque para el desarrollo de software que enfatiza la comprensión de la lógica empresarial y el modelado del dominio del problema. El objetivo es crear un dominio que refleje con precisión el lenguaje, los conceptos y las relaciones dentro del dominio, lo que ayuda al equipo a comprender mejor las entidades empresariales complejas, lo que conduce a una mejor diseño de software y a escribir códigos mantenibles.
Cuando comparamos la estructura de diseño orientado al dominio con el MVVM por defecto, el MVVM divide la estructura de carpetas por relación con los aspectos funcionales de la base de código, como el enrutador, el almacenamiento, las páginas, los componentes, los activos y muchas otras carpetas personalizadas que queremos agregar a nuestra aplicación. Bueno, el enfoque DDD sigue un dominio en lugar de un MVVM suelto, lo que significa que nuestra aplicación está realmente desintegrada en los dominios principales de nuestras aplicaciones. Y estos dominios pueden contener carpetas, y estas carpetas son como los modelos principales que nuestras aplicaciones están utilizando, por lo que podríamos tener un dominio de pagos, un dominio de productos, un dominio de pedidos, un dominio de perfiles de usuario y muchas otras características dependiendo de los modelos o dominios de las aplicaciones que estamos construyendo.
Cuando miramos la estructura de carpetas por defecto para el MVVM por defecto, que es básicamente lo que obtendrías al generar una aplicación Vue.js, los activos, componentes, enrutadores, almacenes, vistas. Con esto, si estás construyendo una aplicación más grande, podrías tener dificultades cuando la aplicación crezca y, sin embargo, si construyes según esta estructura por defecto, podría ser difícil de mantener a largo plazo. ¿Verdad? Y esto es una de las cosas en las que el diseño orientado al dominio prospera. Y eso se debe a que para cada uno de nuestros dominios o para cada uno de nuestros modelos, va a tener su propio componente. Va a tener su propio almacenamiento. Va a tener su propio enrutador. Va a tener sus propias páginas y sus propias pruebas y muchas otras características personalizadas que podríamos querer agregar a nuestros diferentes dominios. Y con esto, es más limpio y más fácil de mantener a largo plazo.
Entonces, el beneficio de integrar el diseño orientado al dominio en nuestra aplicación Vue.js es porque es una modelización más efectiva de dominios empresariales complejos. Es una base de código más estructurada y organizada que refleja la lógica del dominio. Es más fácil de mantener, escalable y flexible en el desarrollo de aplicaciones de software. Es más efectivo en la construcción de interfaces de usuario. Creo que una de las cosas maravillosas de DDD es que facilita la incorporación y propiedad de los productos dominados por los ingenieros dentro del equipo.
Entonces, ¿cuáles son los casos de uso de DDD con la aplicación Vue.js? Este patrón se puede utilizar para construir aplicaciones de comercio electrónico con productos complejos y sistemas de gestión de inventario, aplicaciones financieras con modelos de datos complejos y requisitos regulatorios. También se puede utilizar en aplicaciones de atención médica con datos de pacientes complejos y preocupaciones omnipresentes, y muchos otros dominios empresariales complejos en los que podemos incorporar el patrón DDD en nuestro software.
Echemos un vistazo rápido a un código base o una estructura simple de cómo se puede implementar DDD en una aplicación Vue.js. Voy a empezar con esta aplicación simple, y cuando echemos un vistazo a nuestra estructura de carpetas aquí, veremos que no es como el patrón regular que tiene una aplicación Vue.js, que debería tener, por defecto, las rutas, el almacenamiento, los componentes y muchos otros. Porque esta aplicación ha sido convertida o se ha implementado el enfoque DDD en esta aplicación simple, donde tenemos en nuestra fuente, tenemos una aplicación, tenemos una carpeta llamada core, que es como el modelo de la aplicación y es como la capa superior de nuestra aplicación, y en esa ruta vamos a tener nuestros módulos, nuestros módulos que son la parte central o los dominios principales de nuestra aplicación. Y este ejemplo simple viene con solo dos dominios, que son el módulo de blog y el módulo de productos, y encontraremos aquí que para cada modelo tiene su propia API, sus propios componentes, sus propias constantes, sus propias páginas, sus propias rutas y su propio almacenamiento. Y con esto, es mucho más fácil ver la aplicación adaptada a un dominio específico y también asegurarse de que se cumplan la lógica empresarial y los requisitos empresariales. Y una de las cosas maravillosas es que cuando miramos nuestro archivo de entrada, que es el main.js, encontraremos una hermosa función de importación, que es la carga automática de rutas, que básicamente mira todos los dominios que tenemos, todos los modelos que tenemos en nuestra aplicación, obtiene la ruta y luego podemos agregar esas rutas a nuestra aplicación a gran escala. Y cuando echamos un vistazo a esto en Entonces, solo voy a echar un vistazo a esto, vamos a ver el dominio de productos, vamos a ver el blog.
