Domain Driven Design with Vue Applications

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

Introduction to Domain Driven Design

  • - What is DDD?
  • - Key principles of DDD
  • - Benefits of using DDD in web application development

Domain Modeling in Vue 3 Applications

  • - How to design and implement domain models in Vue 3
  • - Strategies for integrating domain logic with Vue's reactive data model and component-based architecture

Best Practices for Implementing DDD in Vue 3

  • - Strategies for organizing code in a way that follows DDD principles
  • - Techniques for reducing coupling between domain and application logic
  • - Tips for testing and debugging domain logic in Vue 3 applications
Abdulrasaq Mustapha
Abdulrasaq Mustapha
14 min
15 May, 2023

Comments

Sign in or register to post your comment.
  • Baraka
    Baraka
    any link to the code??

Video Summary and Transcription

Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.

Available in Español

1. Introduction to Domain-driven Design in Vue.js

Short description:

Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. We're also going to take a quick look into a simple code based on structure of a Vue.js application written in a domain-driven design pattern. There are various design patterns that we know exist in the software development cycle.

Welcome to this talk on domain-driven design in Vue.js application. My name is Abdurazak Mostafa, also known as Geekmarrers. I'm a frontend engineer at Papershift. I'm a content creator on YouTube where I post videos on coding tutorials, productivity carriers and many others. You can also find me on GitHub as Geekmarrers.

Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. We're also going to take a quick look into a simple code based on structure of a Vue.js application written in a domain-driven design pattern.

There are various design patterns that we know exist in the software development cycle. We have the object-oriented design, we have the MVC, we have the DDD, and the MVVM, and many others. When we look at the OOD, which is the object-oriented design, which is a process of creating a software system or application, utilizing object-oriented paradigm, the MVC, which is the model Vue controllers, is a design pattern used for developing user interfaces that divide the related program logic into three connected elements, which are the Vue models and the controller, the MVVM, which is the models Vue Vue model, which is kind of like the pattern for Vue.js, the pattern for Vue.js applications by default, which is a pattern that helps cleanly separate an application, business, and presentation logic from its user interface.

2. Introduction to DDD in Vue.js

Short description:

Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Compared to MVVM, DDD follows a domain-focused approach, resulting in cleaner and more maintainable code. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership. Use cases for DDD in Vue.js include e-commerce, financial, and healthcare applications. A simple codebase example demonstrates how DDD can be implemented in a Vue.js application.

We all know that this is one of the things that Vue.js thrives in. The main discourse of the day is domain-driven design, which is a design approach that focuses on modeling softwares to match a domain according to input from domain experts. With these, we are going to explain further more in the slides.

When we look at DDD, which is Domain Driven Design, it's an approach to software development, that emphasizes understanding business logic and modeling the problem domain. The goal is to create a domain that accurately reflects the language, concepts, and relationship within the domain, and this in turn helps the team to better understand complex business entities, leading to improved software design and writing maintainable codes.

When we look at the domain-driven design structure in comparison to the default MVVM, the MVVM splits the folder structure by relationship to functional aspects of the code base such as the router, the store, the pages, components, assets, and many more custom folders we want to add to our application. Well, the DDD approach follows a domain rather than a loose MVVM, meaning that our application is actually disintegrated to the core domains of our applications. And these domain folders, this domain may contain folders, and these folders are like the core models in which our applications are using, so you could have a payments domain, you could have like a products domain, you could have orders domain, you could have user profile domain, and lots of features depending on the models or domain of which applications we are building.

When we look at default folder structure for default MVVM, which is basically what you'd get when you scaffold the Vue.js application, the assets, components, routers, stores, views. With this, if you're building a larger application, you might struggle when the application gets big and yet if you build by this default structure, it might be difficult to maintain at a long run. Right? And this is one of the things where domain-driven design thrive. And that is because for each of our domains or for each of our models, it's gonna have its own component. It's gonna have its own store. It's gonna have its own router. It's gonna have its own pages and its own tests and many other custom features that we might want to add to our various domains. And with this, it's cleaner and more easier to maintain in the long run.

So the benefit of integrating domain-driven design to our VGS application is because it's a more effective modeling of complex business domain. It's more structured and organized code base that reflects the domain logic. It's more maintainable, scalable, and flexible in developing software applications. It's more effective in building user interfaces. I think one of the beautiful things about DDD is that it's for easy onboarding and ownership of products domained by the engineers within the team.

So what are the use cases for DDD with VGS application? This pattern can be used to build e-commerce applications with complex products and inventory management system, financial applications with complex data models and regulatory requirements. It can also be used on healthcare applications with complex patient data and pervasing concerns, and lots of other complex business domains that we can incorporate the DDD pattern into our software.

So let's take a quick look into a simple codebase or a simple structure of how DDD can be implemented into a VGS application. I'm going to start with this, with this simple application, and when we take a look at our folder structure here, we would find that it's unlike the regular pattern of which VGS application have, which is going to have like, by default we should see the routes, we should see the store, we should see the components and many others. Because this application has been converted or the DDD approach has been implemented into this simple application, where we have on our source, we have an app, we have a folder called the core, which is like the model of the application and it's like the top layer of our application, and on that route we're going to have our modules, our modules which are the core part or the core domains of our application. And this simple example comes with just two domains which is the, or two modules, which is just the blog module and the product module, and we'll find here that for each model is that it has its own API, its own components, its own constants, its own pages, its own routes and its own store. And with this, it's quite easier for us to view the application tailored to a particular domain and also ensuring that the business logic and business requirement are met. And one of the beautiful things is that when we look at our entry file, which is the main.js, would find a beautiful import function, which is the autoload route, which basically looks at all the domains we have, all the models we have in our application, gets the route, and we can then add those routes to our application on a larger scale.

And when we take a look at this on So I'm just gonna take a look at this, we'll look at the product domain, I will look at the blog.

3. Details on Product, Blog, and Philip Will's Report

Short description:

This section provides details about a product and a blog retrieved from APIs. The speaker also mentions a report by Philip Will, who implemented mentoring design in the VGS application using TypeScript. The approach involves writing a plugin to register modules, services, routes, and other configurations. The application follows a domain-driven design structure, making it easier to manage and onboard new team members. The speaker encourages implementing domain-driven design in Vue.js applications, especially for larger projects.

So this is, this is basically the, this is basically a detail of a product, a product coming from the from from the dummy API. Right. And we can also move to the blog section. And this is also a blog coming from an API. And we'll also look at the the dev tools would find out that I'm just gonna hard reload this. Yes. So we'll also see that our store is presents will also find that our routes in each of our applications are also present.

And the second report which I'll be showing to us is by Philip Will. Philip Will you can check him on GitHub and follow him on Twitter. I saw a beautiful repository by Philip Will where he also did a simple implementation of the mentoring design in the VGS application. And on looking at this and he also made this with TypeScript which is quite more interesting and more safer and more safer because it's obviously TypeScript. And one of the most beautiful things I saw in this approach is writing a plugin that helps you register, gets the routes and helps you register the routes. Helps you register the module and also if there are other services in this modules or in these domains, it's also registered services and registers and meets the events and other sub entities within our application. And when we check the entry file to this, this plugin is then used to register the modules, the services, the routes and other configs that our application might have. And just like we mentioned in the previous repository, it's also follows the same design, domain designs structure, which is each domain of, we have about two domains here as well. Each domain has its own components, its own locals, its own pages, its own routes, its own stores. And similar approach for this subdomain, which is the two domains here are the example and the four domains. And with this managing a large application is much more easier writing, maintainable code is assured. And one of the most beautiful things, which is ownership of these domains and it's easier for onboarding of new members on easier form. It's an easier onboarding for new members within coming into the team to understand the application structure by domains.

And yes, thank you for listening. And I hope you're going to learn one. I hope you learned one or two things from this and try to as much as possible to implement domain driven design into your own VGS applications. And another thing is I might need to add is the default MVVM structure is quite good for a simple application, not too big, not too complex. But as you begin to go, as you begin to go bigger or build a bigger application, or if you know that starting the project is going to definitely grow bigger in the next few weeks, month or years, then it's a good thing to start your application with a domain-driven design pattern right from the onset. And that's it. Thank you for listening once again. See you in the next one.

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.