Atomic Design with Vue
As Brad Frost said “Atomic design is like mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.”
Atomic design is a methodology for creating a design systems based on chemistry, starts from very basic and become more complex. There are 5 (five) distinct levels in atomic design:
- Atom (chemistry-based naming)
- Molecule (chemistry-based naming)
- Organism (chemistry-based naming)
- Template (web-based naming)
- Page (web-based naming)
Atomic design can be implemented in many frontend frameworks. In this article, we will give the examples of every component with Vue framework code.
Atom
Atom is the smallest unit that composes our application. It can’t be used by itself to build the application, but the collection of it can. In code, atom means the HTML tag with customize style and dynamic content that will be reused throughout our application.
Examples of atom:
Molecule
Molecule are group of atoms that linked together. In our application, molecule is the smallest component, composed from one or more related atoms, consists of combinations built for reuse.
Organism
Organism is the collection of atoms and/or molecules joined together to form a relatively complex component, distinct section of an interface.
Template
Template is group of organisms and/or molecules to form the common structure of a page. We usually called template as a layout.
Page
Page is the instance of out template. This is the final level of an atomic design steps. The difference between template and page is the content of component inside. Template still use dummy content, while page will replace dummy content with the real one to give the depiction of what user will see. In this step, we can test the effectiveness of the design that we applied and check if the content is built as we expected.
Atomic Design File Structure
The atomic design concept from Brad Frost does not state how we should divide our file in the project. This is my personal preference to divide the file to make component search easier.
We divide components folder to atoms, molecules, and organisms. For templates and pages, we treat it as the same file in the code. Every file name will use related atomic design level as the prefix.
Advantages & Disadvantages
The advantages of using Atomic Design pattern are maintain consistency throughout application, reusability, and easy to updates. The form in page A will be the same as the form in page B if we use the same molecule. We only build that form molecule once and import it in multiple pages. If we want to update the form component in our application, we only need to update it once and will be applied to the whole pages that used.
The disadvantage of using Atomic Design pattern are it can create long lists of components if our application is getting more complex and can take a while to search. Create full documentation of the components can help to minimize this issue. At the start, implement the components will require extra effort to divide and implement.
Summary
Atomic design levels divided into atom, molecule, organism, template, and page (from basic to complex). To implement atomic design in our web development, we broke down the page design into components visually. Then, we started to build the components from atom, all the way up to page. For easier component search, we can structured our folder to follow Atomic Design pattern.
