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

This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.

FAQ

Domain-Driven Design (DDD) is a software development approach that focuses on understanding and modeling the business domain accurately. It emphasizes creating a domain model that reflects the language, concepts, and relationships within the domain, helping teams better understand complex business entities, leading to improved software design and maintainable code.

In Vue.js applications, the MVVM model splits the folder structure by functional aspects such as router, store, pages, and components. In contrast, DDD organizes the application by core domains or models, where each domain contains its own components, store, router, pages, and tests. This makes the codebase more maintainable, scalable, and flexible.

The benefits of integrating DDD into a Vue.js application include more effective modeling of complex business domains, a more structured and organized codebase, improved maintainability, scalability, and flexibility, and easier onboarding and ownership of product domains by the engineering team.

You should use DDD in a Vue.js application when building larger, more complex applications. If you know that your project will grow significantly over time, starting with a DDD approach can help maintain code quality and manage complexity as the application scales.

Use cases for DDD with Vue.js applications include e-commerce applications with complex products and inventory management systems, financial applications with complex data models and regulatory requirements, and healthcare applications with complex patient data and pervasive concerns.

Abdurazak Mostafa, also known as Geekmarrers, is a frontend engineer at Papershift and a content creator on YouTube. He posts videos on coding tutorials, productivity, and careers, and he is also active on GitHub under the username Geekmarrers.

The default folder structure for a Vue.js application using the MVVM model includes folders for assets, components, router, store, and views. This structure is suitable for simple applications but can become difficult to maintain for larger, more complex projects.

DDD improves maintainability in Vue.js applications by organizing the codebase into domains, where each domain contains its own components, store, router, pages, and tests. This separation makes it easier to manage and update specific parts of the application without affecting others.

In a Vue.js application structured using DDD, the codebase is divided into domains or modules. For example, a simple application might have a 'blog' module and a 'product' module. Each module contains its own API, components, constants, pages, routes, and store, making it easier to manage and maintain.

Philip Will created a repository that demonstrates a simple implementation of DDD in a Vue.js application using TypeScript. His approach includes writing a plugin to register routes, modules, services, and events, further enhancing the maintainability and scalability of the application.

Abdulrasaq Mustapha
Abdulrasaq Mustapha
14 min
15 May, 2023

Comments

Sign in or register to post your comment.
  • Kirk Bushell
    Kirk Bushell
    Where's the domain modeling in vue 3? Where's the domain logic stuff when working with vue reactive data model? Just another video/page stating "DDD" by introducing a folder structure... Bollocks.
  • 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.

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.

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
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
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 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
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
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
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
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

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.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
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.