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 utilizar 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 y la arquitectura basada en componentes de Vue

Mejores Prácticas para Implementar DDD en Vue 3

  • - Estrategias para organizar el código de acuerdo a 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 aplicaciones Vue 3
14 min
15 May, 2023

Video Summary and Transcription

Bienvenido a esta charla sobre diseño dirigido por dominio en aplicaciones Vue.js. Hoy vamos a explorar el diseño dirigido por dominio, sus beneficios y cómo funciona con Vue.js en comparación con el modelo MVVM. Vue.js se destaca en el diseño dirigido por dominio, un enfoque de diseño que modela el software para que se ajuste a un dominio específico. 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 de dominio y una incorporación y propiedad más sencillas.

Available in English

1. Introducción a Domain-driven Design en Vue.js

Short description:

Bienvenido a esta charla sobre el diseño orientado al dominio en la aplicación Vue.js. Hoy vamos a analizar el diseño orientado al dominio, sus beneficios y cómo funciona con Vue.js en comparación con el 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 orientado al dominio. Hay varios patrones de diseño que sabemos que existen en el ciclo de desarrollo de software.

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

Hoy vamos a analizar el diseño orientado al dominio, sus beneficios y cómo funciona con Vue.js en comparación con el 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 orientado al dominio.

Hay 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 o aplicación de software utilizando el paradigma orientado a objetos, el MVC, que son los modelos Vue y los controladores, es un patrón de diseño utilizado para desarrollar interfaces de usuario que dividen la lógica del programa relacionada en tres elementos conectados, que son los modelos Vue y el controlador, el MVVM, que es el modelo Vue Vue, que es como el patrón para Vue.js, el patrón para aplicaciones Vue.js por defecto, que es un patrón que ayuda a separar de manera limpia la lógica de aplicación, negocio y presentación de su interfaz de usuario.

2. Introducción a DDD en Vue.js

Short description:

Vue.js prospera en el diseño orientado al 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. En comparación con MVVM, DDD sigue un enfoque centrado en el dominio, lo que resulta en un código más limpio y fácil de mantener. La integración de DDD en Vue.js ofrece beneficios como la modelización efectiva de dominios empresariales complejos, un código estructurado que refleja la lógica del dominio y una incorporación y propiedad más sencillas. Los casos de uso de DDD en Vue.js incluyen aplicaciones de comercio electrónico, financieras y de atención médica. Un ejemplo de código simple demuestra cómo se puede implementar DDD en una aplicación Vue.js.

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.

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

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.
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!
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.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

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
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
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
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.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
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.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- 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
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
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.
Vue.js London Live 2021Vue.js London Live 2021
116 min
Building full-stack GraphQL applications with Hasura and Vue 3
Workshop
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.