A domain-driven Vue.js Architecture

Thomas Holland
Bauer + Kirch
Published in
13 min readNov 25, 2019

--

The view from an inner courtyard, enclosed by buildings, themed in Vue’s brand colors. In the sky, there thrones the Vue logo
The sky is the limit once you internalize Domain-Driven Design.

The advent of a sustainable software project

For one of our current Vue apps, we set ourselves a couple of goals that should ideally improve our long-term development performance. This story focuses on the architectural side of things. We’ve got subsequent stories about effective team processes, documentation and others in the making, so stay tuned and follow our Bauer + Kirch publication on medium. But first, let’s take a look at some of the goals that still function as our North Star to this day:

  • Mutual understanding: At times, our team had difficulties in finding common ground on how to tackle different challenges in our code. Which is not to say that we were overwhelmed with the tasks at hand. It’s just that different team members would have solved problems in different ways. This lead to prolonged discussions in code reviews, further code changes and so forth. To spare us from all that, we set ourselves out to establish a framework that enforces guidelines for standard tasks without being too restrictive at the same time.
  • Maintainability: Some of the code of our legacy projects that run stable in production makes it pretty hard to incorporate changes in a timely manner since everything is so intertwined and obfuscated. For this new app, we wanted to make sure to prevent such cases from the get-go.

--

--

Thomas Holland
Bauer + Kirch

Software Developer @bauer-kirch. Enthusiastic about the web™ and everything JavaScript.