Diseño Dirigido por Dominio con Aplicaciones Vue

Spanish audio is available in the player settings
Rate this content
Bookmark
SlidesGithub

Introducción al Diseño Dirigido por Dominio

  • - ¿Qué es DDD?
  • - Principios clave de DDD
  • - Beneficios de usar DDD en el desarrollo de aplicaciones web

Modelado de Dominio en Aplicaciones Vue 3

  • - Cómo diseñar e implementar modelos de dominio en Vue 3
  • - Estrategias para integrar la lógica de dominio con el modelo de datos reactivo de Vue y la arquitectura basada en componentes

Mejores Prácticas para Implementar DDD en Vue 3

  • - Estrategias para organizar el código de una manera que siga los principios de DDD
  • - Técnicas para reducir el acoplamiento entre la lógica de dominio y la lógica de la aplicación
  • - Consejos para probar y depurar la lógica de dominio en las aplicaciones Vue 3
Abdulrasaq Mustapha
Abdulrasaq Mustapha
14 min
15 May, 2023

Video Summary and Transcription

Bienvenidos a esta charla sobre diseño dirigido por dominio en la aplicación Vue.js. Hoy vamos a explorar el diseño dirigido por dominio, sus beneficios y cómo funciona con el diseño dirigido por dominio de Vue.js versus el modelo MVVM. Vue.js prospera en el diseño dirigido por dominio, un enfoque de diseño que modela el software para que coincida con un dominio. DDD enfatiza la comprensión de la lógica empresarial y la creación de un dominio que refleje el lenguaje y los conceptos. La integración de DDD en Vue.js ofrece beneficios como el modelado efectivo de dominios empresariales complejos, código estructurado que refleja la lógica del dominio y una incorporación y propiedad más fáciles.

Available in English

1. Introducción al diseño dirigido por dominio en Vue.js

Short description:

Bienvenidos a esta charla sobre el diseño dirigido por dominio en la aplicación Vue.js. Hoy vamos a examinar el diseño dirigido por dominio, sus beneficios y cómo funciona con el diseño dirigido por dominio de Vue.js frente al modelo MVVM. También vamos a echar un vistazo rápido a un código simple basado en la estructura de una aplicación Vue.js escrita en un patrón de diseño dirigido por dominio. Existen varios patrones de diseño que sabemos que existen en el ciclo de desarrollo de software.

Bienvenidos a esta charla sobre el diseño dirigido por dominio en la aplicación Vue.js. Mi nombre es Abdurazak Mostafa, también conocido como Geekmarrers. Soy un ingeniero frontend en Papershift. Soy un creador de contenido en YouTube donde publico videos sobre tutoriales de codificación, portadores de productividad y muchos otros. También puedes encontrarme en GitHub como Geekmarrers.

Hoy vamos a examinar el diseño dirigido por dominio, sus beneficios y cómo funciona con el diseño dirigido por dominio de Vue.js frente al modelo MVVM. También vamos a echar un vistazo rápido a un código simple basado en la estructura de una aplicación Vue.js escrita en un patrón de diseño dirigido por dominio.

Existen varios patrones de diseño que sabemos que existen en el ciclo de desarrollo de software. Tenemos el diseño orientado a objetos, tenemos el MVC, tenemos el DDD, y el MVVM, y muchos otros. Cuando miramos el OOD, que es el diseño orientado a objetos, que es un proceso de creación de un sistema de software o aplicación, utilizando el paradigma orientado a objetos, el MVC, que es el modelo Vue controladores, es un patrón de diseño utilizado para desarrollar interfaces de usuario que dividen la lógica de programa relacionada en tres elementos conectados, que son los modelos de Vue y el controlador, el MVVM, que son los modelos de Vue Vue modelo, que es algo así como el patrón para las aplicaciones de Vue.js, el patrón para las aplicaciones de Vue.js por defecto, que es un patrón que ayuda a separar limpiamente la lógica de negocio y presentación de una aplicación de su interfaz de usuario.

2. Introducción al DDD en Vue.js

Short description:

Vue.js prospera en el diseño dirigido por dominio, un enfoque de diseño que modela el software para que coincida con un dominio. DDD enfatiza en la comprensión de la lógica empresarial y en la creación de un dominio que refleje el lenguaje y los conceptos. En comparación con MVVM, DDD sigue un enfoque centrado en el dominio, lo que resulta en un código más limpio y mantenible. La integración de DDD en Vue.js ofrece beneficios como la modelización efectiva de dominios empresariales complejos, código estructurado que refleja la lógica del dominio y una incorporación y propiedad más fáciles. Los casos de uso para DDD en Vue.js incluyen aplicaciones de comercio electrónico, financieras y de atención médica. Un ejemplo de base de código simple demuestra cómo se puede implementar DDD en una aplicación Vue.js.

Todos sabemos que esto es una de las cosas en las que Vue.js prospera. El discurso principal del día es el diseño dirigido por dominio, que es un enfoque de diseño que se centra en modelar software para que coincida con un dominio según la entrada de los expertos en el dominio. Con esto, vamos a explicar más en las diapositivas.

Cuando miramos el DDD, que es el Diseño Dirigido por Dominio, es un enfoque para el desarrollo de software, que enfatiza en entender la lógica empresarial y modelar el dominio del problema. El objetivo es crear un dominio que refleje con precisión el lenguaje, los conceptos y las relaciones dentro del dominio, y esto a su vez ayuda al equipo a entender mejor las entidades empresariales complejas, lo que lleva a un mejor diseño de software y a la escritura de códigos mantenibles.

Cuando miramos la estructura del diseño dirigido por dominio en comparación con el MVVM predeterminado, el MVVM divide la estructura de la carpeta por relación con los aspectos funcionales de la base de code como el router, la tienda, las páginas, los componentes, los activos y muchas más carpetas personalizadas que queremos añadir 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 centrales de nuestras aplicaciones. Y estos dominios, este dominio puede contener carpetas, y estas carpetas son como los modelos centrales en los que nuestras aplicaciones están utilizando, por lo que podrías tener un dominio de pagos, podrías tener como un dominio de productos, podrías tener un dominio de pedidos, podrías tener un perfil de usuario dominio, y muchas características dependiendo de los modelos o dominio de las aplicaciones que estamos construyendo.

Cuando miramos la estructura de carpetas predeterminada para el MVVM predeterminado, que es básicamente lo que obtendrías cuando generas la aplicación Vue.js, los activos, los componentes, los routers, las tiendas, las vistas. Con esto, si estás construyendo una aplicación más grande, podrías tener problemas cuando la aplicación se haga grande y aún si construyes con esta estructura predeterminada, podría ser difícil de mantener a largo plazo. ¿Verdad? Y esto es una de las cosas donde el diseño dirigido por dominio prospera. Y eso es porque para cada uno de nuestros dominios o para cada uno de nuestros modelos, va a tener su propio componente. Va a tener su propia tienda. Va a tener su propio router. Va a tener sus propias páginas y sus propias pruebas y muchas otras características personalizadas que podríamos querer añadir a nuestros varios dominios. Y con esto, es más limpio y más fácil de mantener a largo plazo.

Así que el beneficio de integrar el diseño dirigido por dominio a nuestra aplicación VGS es porque es una modelización más efectiva de dominios empresariales complejos. Es una base de code más estructurada y organizada que refleja la lógica del dominio. Es más mantenible, 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 hermosas del DDD es que es para una fácil incorporación y propiedad de los productos dominados por los ingenieros dentro del equipo.

Entonces, ¿cuáles son los casos de uso para DDD con la aplicación VGS? Este patrón puede ser utilizado para construir aplicaciones de e-commerce con sistemas complejos de productos e inventario de gestión, aplicaciones financieras con modelos de data complejos y requisitos regulatorios. También puede ser utilizado en aplicaciones de atención médica con data de pacientes complejos y preocupaciones pervasivas y muchos otros dominios empresariales complejos en los que podemos incorporar el patrón DDD en nuestro software.

Así que vamos a echar un vistazo rápido a una base de código simple o a una estructura simple de cómo se puede implementar el DDD en una aplicación VGS. Voy a empezar con esto, con esta simple aplicación, y cuando miremos nuestra estructura de carpetas aquí, encontraremos que no es como el patrón regular de la cual la aplicación VGS tiene, que va a tener como, por defecto deberíamos ver las rutas, deberíamos ver la tienda, deberíamos ver los componentes y muchos otros. Porque esta aplicación ha sido convertida o el enfoque DDD ha sido implementado en esta aplicación simple, donde tenemos en nuestra fuente, tenemos una aplicación, tenemos una carpeta llamada el núcleo, 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 modules, nuestros modules que son la parte central o los dominios centrales de nuestra aplicación. Y este simple ejemplo viene con solo dos dominios que son, o dos modules, que son solo el módulo de blog y el módulo de producto, y encontraremos aquí que para cada modelo es que tiene su propia API, sus propios componentes, sus propias constantes, sus propias páginas, sus propias rutas y su propia tienda. Y con esto, es bastante más fácil para nosotros ver la aplicación adaptada a un dominio particular y también asegurando que se cumplen la lógica empresarial y los requisitos empresariales. Y una de las cosas hermosas es que cuando miramos nuestro archivo de entrada, que es el main.js, encontraríamos una hermosa función de importación, que es la ruta de carga automática, que básicamente mira todos los dominios que tenemos, todos los modelos que tenemos en nuestra aplicación, obtiene la ruta, y luego podemos añadir esas rutas a nuestra aplicación en una escala más grande. Y cuando echamos un vistazo a esto en Así que solo voy a echar un vistazo a esto, veremos el dominio del producto, veremos el blog.

3. Detalles sobre Producto, Blog y el Informe de Philip Will

Short description:

Esta sección proporciona detalles sobre un producto y un blog obtenidos de APIs. El orador también menciona un informe de Philip Will, quien implementó el diseño de mentoría en la aplicación VGS utilizando TypeScript. El enfoque implica escribir un complemento para registrar módulos, servicios, rutas y otras configuraciones. La aplicación sigue una estructura de diseño orientado al dominio, lo que facilita la gestión y la incorporación de nuevos miembros del equipo. El orador anima a implementar el diseño orientado al dominio en aplicaciones Vue.js, especialmente para proyectos más grandes.

Entonces, esto es, básicamente, un detalle de un producto, un producto que proviene de la API ficticia. Correcto. Y también podemos pasar a la sección del blog. Y esto también es un blog que proviene de una API. Y también veremos en las herramientas de desarrollo que voy a recargar esto. Sí. También veremos que nuestra tienda está presente y también encontraremos que nuestras rutas en cada una de nuestras aplicaciones también están presentes. Y el segundo informe que les mostraré es de Philip Will. Philip Will pueden buscarlo en GitHub y seguirlo en Twitter. Vi un hermoso repositorio de Philip Will donde también hizo una implementación simple del diseño de mentoría en la aplicación VGS. Y al ver esto, también lo hizo con TypeScript, lo cual es bastante interesante y más seguro porque obviamente es TypeScript. Y una de las cosas más hermosas que vi en este enfoque es escribir un complemento que te ayuda a registrar, obtener las rutas y te ayuda a registrar las rutas. Te ayuda a registrar el módulo y también, si hay otros servicios en estos módulos o en estos dominios, también registra los servicios y registra y maneja los eventos y otras subentidades dentro de nuestra aplicación. Y cuando revisamos el archivo de entrada de esto, este complemento se utiliza para registrar los módulos, los servicios, las rutas y otras configuraciones que nuestra aplicación pueda tener. Y al igual que mencionamos en el repositorio anterior, también sigue la misma estructura de diseño orientado al dominio, que es que cada dominio tiene sus propios componentes, sus propios locales, sus propias páginas, sus propias rutas, sus propias tiendas. Y un enfoque similar para este subdominio, que son los dos dominios aquí, el ejemplo y los cuatro dominios. Y con esto, administrar una aplicación grande es mucho más fácil, escribir código mantenible está asegurado. Y una de las cosas más hermosas es la propiedad de estos dominios y es más fácil incorporar a nuevos miembros en un formulario más fácil. Es más fácil incorporar a nuevos miembros que se unen al equipo para comprender la estructura de la aplicación por dominios. Y sí, gracias por escuchar. Y espero que hayas aprendido una o dos cosas de esto y que intentes implementar el diseño orientado al dominio en tus propias aplicaciones VGS. Y otra cosa que podría agregar es que la estructura MVVM por defecto es bastante buena para una aplicación simple, no muy grande, no muy compleja. Pero a medida que comienzas a crecer o construir una aplicación más grande, o si sabes que el proyecto va a crecer definitivamente en las próximas semanas, meses o años, entonces es bueno comenzar tu aplicación con un patrón de diseño orientado al dominio desde el principio. Y eso es todo. Gracias por escuchar una vez más. Nos vemos en la próxima. Adiós.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Explain about NuxtJS codebase refactor and challenges facing to implement Vue 3, Vite and other packages.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The creator of Vue js gives an update on the new features of the technology.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Going on an adventure with Nuxt 3, Motion UI and Azure
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
Melanie de Leeuw
Melanie de Leeuw
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
TresJS create 3D experiences declaratively with Vue Components
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
Alvaro Saburido
Alvaro Saburido
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Building Vue forms with VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.