Atomic Design Pattern

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

The five stages of atomic design are:

Atoms -> Molecules -> Organisms -> Templates -> Pages

At Listen360 we have adopted the Atom Design Pattern for composing our interfaces. We feel this pattern gives us the most flexible path for composing the most basic to the most complex reusable interfaces.

You can learn more about the Atomic Design Pattern at Atomic Design Pattern.

Where should they live?

Depending on where you are building new Components, the answer is different. Let's go over a couple examples.

Building new Components in Alexandria

As you know Alexandria is our UI Component Library. If you are adding new Components into this project, those would live in the src/components directory.

src/components
|- MyNewComponent
  |- index.vue
  |- index.spec.js

We compose our new Component as listed above. We have a parent folder for the new component, MyNewComponent. Inside of that we have index.vue which is the component itself. Finally we have index.spec.js, this is the Jest Unit and/or Jest Snapshot test for our new Component.

This folder pattern allows us to maintain all the related files for this component in one place.

Atoms and Beyond

As stated above, the simplest type of component you can build is an atom, which might look something like:

<template>
  <button class="base-button">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'BaseButton'
}
</script>

or:

<template>
  <input class="base-input" />
</template>

<script>
export default {
  name: 'BaseInput'
}
</script>

If you look closely, you'll notice that these individual components do not make use of any other components. They are very simple components that only use native html elements within their template.

As you can imagine, however, you might want to combine atoms together to create something more complicated and feature-rich. That might look something like:

<template>
  <div class="input-button">
    <BaseInput />
    <BaseButton />
  </div>
</template>

<script>
import BaseButton from './BaseButton'
import BaseInput from './BaseInput'

export default {
  name: 'InputButton',
  components: {
    BaseButton,
    BaseInput
  }
}
</script>

In this example, we have imported both of our example components and are using them within the template of this new InputButton component. Pay special attention to the components section when declaring our new component within the script tag. Vue uses this components sections to locally register any outside components you may want to use within your template. It is important to always register ALL components any new component may use so that individual components always behave properly inside a consuming app, be it a small atom or a more complicated molecule or organism component.

Building new Components in new Applications

When building new Components inside of an Alexandria Consuming Application we tend to follow the pattern the Vue has put in place. Any reusable components would live in src/components. Any composed Components, such as Pages or larger single use Components would live in src/views.

// Reusable Component

src/components
|- InputField.vue

// Single Use Component or Composed Page

src/views
|- TheDashboard.vue
|- TheSettingsPage.vue
|- TheReportsPage.vue