[Vue]October 2024 - VueJS Introducing Dynamic Layouts using the Atomic Design Principles

Sources: [https://atomicdesign.bradfrost.com/chapter-2/, https://www.vuemastery.com/blog/dynamic-layouts-with-vue-jsx/#introducing-dynamic-layouts]

For this month, Niclas - a frontend developer from the Sysarb SWE team has introduced a new architecture in the project client that can help scale and maintain the project better in the long-run.

The Problem: Fast-paced implementations but frequent changes in the UI.

Creating UIs might be easy, but the hard part is maintaining them. The problem I frequently address when working on tasks during a sprint is mostly when there are scope changes - usually when I am currently working on. While we had moved to use a more centralized way of fetching and managing data thru the use of vue-composables and pinia-stores , it doesn’t really help making the new changes fast since most of it involves the UI.

The Solution? Using Dynamic Template Layouts

Introducing the new atomic design principles, we can make views by abstracting them thru templates. This way we separate component-views to sections of the templates, and that way we also segregate certain data and reusability of certain parts. This helps us especially when there are new layout changes - if the changes are top-level layouts, we can easily move/create new templates and punch in the existing view-components.

The Down-sides of the approach

It involves another layer of abstraction in the view. Meaning you can’t create pages without declaring a template for it first. While this is helpful if you have different views with the same layout template, it is kind of redundant to add it if you only want a single-view template. But the thing here is that, we are prepared to move things around should there be new scope changes. And that saves us time 😄.

Take-away

Using Atomic Design Principles together with Dynamic Layout Templates in this way allows you to create highly reusable and maintainable components and page-views, which are essential for scalable design systems in Vue.js applications.

We are currently using this approach, and is somewhat of an experimental period. So far, it has worked, together with the ongoing migrations from foundation-css library to the new Bootstrap v5 library. I also think this will continue to help the client when the Sysarb UI Library is published by Niclas.