DEV Community: Arman Kuanysh

Why do I use Atomic Design?

Arman Kuanysh — Mon, 21 Feb 2022 16:47:11 +0000

It lasts for a couple of years, and I’m using an Atomic Design methodology to structure the components in the projects or products. So, that is why I want to discuss this topic.

What is the Atomic Design about?

Atomic Design is a methodology in UI to develop an optimal design system for a project or a product. This methodology’s concept was formulated by Brad Frost, and the main purpose of this methodology is to focus on components than pages of UI.

Nowadays, a lot of web applications were created using a component-oriented framework such as React.js, Vue.js, Angular or Svelte. So, with these frameworks creating reusable components is the main pattern to develop a web app.

However, having a components directory and storing all components of the project there could be uncomfortable with the lapse of time after project growth.

So, Atomic Design provides some principles and stages of component development.

Some principles

Atomic Design methodology in development is associated with Component Driven Development, so, the principles are also.

First of all, the component has to be reusable
The component has to be independent and encapsulated
The component has to be focused on one piece of logic
The component has to be easily testable

If we look at these principles, we can notice some similar meaning with SOLID principles.

It means if we keep our component independent and encapsulated our component will adhere to the Open-Closed Principle of SOLID. Also, if we keep our component focused on one piece of logic it means that our component has a single responsibility which is the first principle of the SOLID. If we can easily reuse our component, it means this component also follows the DRY principle.

What a fantasy! Knowing only one methodology can help us stick to the design principles and use their benefits.

Component development stages

So, by Atomic Design methodology we need to divide our components into next types:

atoms
molecules
organisms
templates
pages

Atoms

Atoms are the smallest components, that are built using HTML tags. You can’t decompose them, because atoms are the bricks of the UI. For example, some atom components could be buttons, badges, labels, headings, and so on. Usually, they are stateless, and only encapsulates appearance styles.

Molecules

Molecules are more complex components than atoms. Molecules can be built using atoms, and provide a unified piece of logic. For example, we need to create a navigation bar. So, we can use link atom components, group them together, and this would be our molecule component. Or, we need search input. We use an input atom component, button atom component, and the grouping of these components creates the molecule component.

Organisms

Organisms are complex components that can be built using atoms and molecules. If atoms or molecules can be some abstract pieces, which couldn't have concrete logic or meaning, molecules have a specific meaning. For instance, using some atoms and molecules we can build a header component. We know why do we need the header, and we know how this component should behave.

Templates

Templates are a composition of organisms, molecules, and atoms and provide a concrete UI structure. If we have a specific section in our project as ‘Latest news’ that could be rendered on several pages, this section has to be a template. So, we can simply reuse this template, and not be afraid that something could be messed up. Because all things that we need from this section are encapsulated inside of it.

Pages

Pages are complex of templates and other components with content. So, if we have some bugs or another mess in UI, we can easily locate that and fix it in a related component.

Conclusion

This methodology is really helpful to create some large UI. Because it increases code reusability, maintainability, it makes debugging easier and improves composability, so you can just extend a component for a specific use-case.

However, to keep your components clean, you have to avoid writing business logic in your components. Business logic should be placed at least at a store, better it should be decomposed for some repositories, services, and so on. UI should be UI, it’s a view layer of an app, left logic to the model, but it is an another story.

Boilerplate generator for Vue.js?

Arman Kuanysh — Mon, 21 Feb 2022 13:29:57 +0000

Hello!

The development of the web application is not only working with business logic, creating HTML layouts, and other interesting stuff. It also a facing a lot of routines such as creating directories, files, writing boilerplate code of a framework, writing documentation, and so on.

However, some parts of this routine work we can easily automate.

Somedays, I created a CLI tool to generate components for Vue.js projects only for personal use. And then, I realized, that this tool could be useful for other developers, to optimize their usual workflow.

So, now I want to introduce you – VGENT.

VGENT (Vue Agent) – is a CLI tool to generate boilerplate Vue.js components. VGENT is compatible with Vue.js 2 and Vue.js 3, also with Nuxt.js, and allows you to customize it for any project needs that you may have.

Installing

You can install VGENT to your local machine globally as npm package, and use it in any project. Besides, you can install it to your single project as a dev dependency.

So, to install it globally, you need to run:

npm install --global vgent

# or

yarn global add vgent

And to install it for a single project:

npm install --save-dev vgent

# or

yarn add --dev vgent

But, if you are going to use it in the project, you need to run the commands through npx or yarn:

npx vgent init

# or

yarn vgent init

So, how to use it?

First of all, you need to initialize VGENT in the project and configure it depending on your needs:

vgent init

In the configuration step, VGENT will ask you about your project structure and component template types. So, you have to provide info about directories, where to store generated components, which programming language are you using JS or TS, which component API as an Options API or Composition API, perhaps Class components, and also about style pre-processor or simply CSS.

Then VGENT will create a configuration file .vgentrc, where you can change some configurations lately.

So, after all the configuration steps, you can use commands to generate components and pages:

To generate component run:

vgent make -c <component_name>

But, if you are using an atomic design structure, you can provide also some arguments to declare a component type:

# to generate an atom component use -a argument
vgent make -c <component_name> -a

# to generate a molecule component use -m argument
vgent make -c <component_name> -m

# to generate an organism component use -o argument
vgent make -c <component_name> -o

# to generate a template component use -t argument
vgent make -c <component_name> -t

And let’s talk about page generation, it’s also simple, just run:

vgent make -p <page_name>

To generate dynamic pages, you can also provide some arguments:

# to generate a slug page use --slug argument
vgent make -p <page_name> --slug

# to generate an id page use --id argument
vgent make -p <page_name> --id

Conclusion

I tried to cover a lot of scenarios of use, however, some of you probably use some other structures of components, and it would be great for me if you share your opinion and help me to improve this project.

So, here are the links to GitHub and NPM