DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Threat Modelling Tools Analysis 101
  • Safeguarding Web Applications With Cloud Service Providers: Anti-CSRF Tokenization Best Practices
  • The Power of Refactoring: Extracting Interfaces for Flexible Code
  • Client-Side Challenges in Developing Mobile Applications for Large User Bases

Trending

  • How the Go Runtime Preempts Goroutines for Efficient Concurrency
  • A Guide to Developing Large Language Models Part 1: Pretraining
  • Transforming AI-Driven Data Analytics with DeepSeek: A New Era of Intelligent Insights
  • Microsoft Azure Synapse Analytics: Scaling Hurdles and Limitations
  1. DZone
  2. Coding
  3. JavaScript
  4. Atomic Design: Benefits And Implementation

Atomic Design: Benefits And Implementation

In this article, we will explore how to apply Atomic Design to a VueJS project, one of the most popular frameworks for building web applications.

By 
Xavi Llordella user avatar
Xavi Llordella
·
Nov. 07, 23 · Analysis
Likes (1)
Comment
Save
Tweet
Share
3.3K Views

Join the DZone community and get the full member experience.

Join For Free

Atomic Design is a methodology for designing and developing user interfaces that has gained popularity in recent times. It was proposed by Brad Frost as a systematic approach to creating reusable and consistent components in web applications, following an analogy with the structure of atoms and molecules in chemistry.

This approach organizes the elements of an interface at hierarchical levels, from the most basic and simple components to the most complex ones.

In this article, we will explore how to apply Atomic Design to a VueJS project, one of the most popular frameworks for building web applications. one of the most popular frameworks for building web applications.

Benefits

  • Scalability and Consistency: Atomic Design’s modular approach facilitates the creation of reusable components. This makes it possible to build scalable interfaces that are easy to maintain since changes made to a component can be propagated to all instances where it is used.
  • Scalability: By dividing the interface into hierarchical components, atomic design allows for a scalable architecture. Atoms and molecules can be combined to build more complex organisms and, in turn, templates and pages. This facilitates the process of adding new features and functionality as the application grows and evolves.
  • Facilitates Teamwork: By following a clear structure and nomenclature for components, Atomic Design facilitates collaboration between designers and developers. All team members share a common vocabulary and understanding of how the different interface elements are constructed and composed.
  • Speed of Development: Atomic Design’s component reuse and organized structure accelerate the development process. Teams can build interfaces faster by using already-designed and tested components.
  • Facilitates Responsive Design: Atomic Design encourages the creation of components that easily adapt to different screen sizes and devices. Atoms and molecules can be individually designed and tested at different resolutions, which facilitates the creation of responsive and adaptive interfaces.
  • Clear and Complete Documentation: By having a well-defined component hierarchy, Atomic Design documentation becomes more structured and complete. Teams can create component libraries and maintain a consistent style guide, resulting in more useful and accessible documentation for future developments and new team members.
  • Improved Maintainability: By having a clear and organized structure, maintenance and refactoring of the interface become easier. Changes to an atomic component will affect only the instances where it is used, which reduces the risk of introducing errors in other parts of the application.
  • Encourages Creativity and Experimentation: While atomic design establishes structure, it also allows for creativity and experimentation within components. Designers and developers can try different combinations of atoms and molecules to achieve new solutions and innovative experiences.

Implementing Atomic Design With Vue.js

Vue.js is a progressive framework that facilitates the creation of reusable components. Let’s see how we can apply atomic design in Vue.js.

1. Atoms

 
<template>
  <button class="btn" @click="onClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
}
</script>


2. Molecules

Molecules use atoms; in this case, we will create a SearchInput.

 
<template>
  <div class="search-input">
    <input type="text" class="search-input__field" placeholder="Buscar" v-model="query" />
    <Button @click="onSearch">Buscar</Button>
  </div>
</template>

<script>
import Button from './Button';

export default {
  components: {
    Button
  },
  data() {
    return {
      query: ''
    };
  },
  methods: {
    onSearch() {
      // Lógica de búsqueda aquí
    }
  }
}
</script>


3. Organisms

Following the atomic design approach, we can create an organism that groups the molecule SearchInput along with other related components, such as a registration form.

 
<template>
  <form class="registration-form">
    <h2>Formulario de Registro</h2>
    <SearchInput />
    <Button @click="onSubmit">Registrarse</Button>
  </form>
</template>

<script>
import SearchInput from './SearchInput';

export default {
  components: {
    SearchInput
  },
  methods: {
    onSubmit() {
      // Lógica de envío del formulario aquí
    }
  }
}
</script>


4. Templates and Pages

The next level in atomic design is templates and pages. Templates define the overall structure and design, while pages are specific instances of those templates. 

 
<!-- Template -->
<template>
  <div class="app">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>


 
<!-- Page -->
<template>
  <App>
    <template v-slot:header>
      <h1>Mi Aplicación Vue</h1>
    </template>
    <RegistrationForm />
    <!-- Otras instancias de componentes aquí -->
    <template v-slot:footer>
      <p>Derechos de autor 2023 - Mi Aplicación Vue</p>
    </template>
  </App>
</template>


The illustration can be seen below to help assimilate the above examples.

Implementing Atomic Design With Vue.js

Directory Organization of a Vue.js Project Using Atomic Design

In this scheme, atomic components, molecules, and organisms are grouped inside the components folder. Templates are located in the layouts folder, and pages are located in the pages folder.

Remember that this structure may vary according to the size and complexity of the project, but by following this organization, you will maintain a clear and modular structure that will facilitate collaboration and maintenance throughout the development of the project.

 
src/
|-- assets/
|-- components/
|   |-- atoms/
|   |   |-- Button.vue
|   |   |-- Icon.vue
|   |   |-- ...
|   |
|   |-- molecules/
|   |   |-- SearchInput.vue
|   |   |-- ...
|   |
|   |-- organisms/
|   |   |-- Header.vue
|   |   |-- Form.vue
|   |   |-- ...
|
|-- layouts/
|   |-- DefaultLayout.vue
|   |-- ...
|
|-- pages/
|   |-- HomePage.vue
|   |-- AboutPage.vue
|   |-- ...
|
|-- router/
|   |-- index.js
|
|-- store/
|   |-- index.js
|   |-- modules/
|   |   |-- ...
|
|-- App.vue
|-- main.js


When Should We Use Atomic Design?

In the book “Atomic Design” by Brad Frost, it is suggested to use the Atomic Design methodology in the context of designing and developing user interfaces for web and mobile applications. The methodology can be applied in a variety of scenarios, and Brad Frost provides some specific situations where Atomic Design is especially useful:

  • Large-Scale Projects: In large-scale projects, where the interface contains numerous components and functionalities, atomic design is an effective way to maintain consistency and organization. The methodology facilitates the creation and management of reusable components, which reduces code duplication and improves the maintainability of the project as it grows.
  • Multidisciplinary Teams: Atomic Design is especially valuable when working in multidisciplinary teams that include designers, developers, and other specialists. The clear, hierarchical structure of the methodology facilitates collaboration and communication among team members.
  • Projects Requiring Flexibility: In projects where experimentation and frequent changes are necessary, Atomic Design Atomic Design offers a flexible foundation. Modular components allow you to iterate quickly and test different combinations to find the best solution. find the best solution.
  • Responsive and Adaptive Design: Atomic Design is suitable for projects that need to be compatible with different screen sizes and devices. The hierarchical and modular The hierarchical and modular structure of the methodology facilitates the creation of components that adapt to different contexts.
  • Creation of Design Systems: Atomic design is especially useful for developing consistent and scalable design systems. By organizing components into atoms, molecules, and organisms, a library of reusable components is created that can be used throughout the interface.
  • Long-term projects: For projects that require long-term maintenance, Atomic Design provides an organized structure that facilitates the addition of new team members and ongoing code management.

Conclusion

Overall, atomic design is a versatile methodology that can be applied to a variety of projects, but it especially excels in large, collaborative projects that seek to maintain a consistent and reusable interface. By following the methodology, teams can optimize their workflow and develop more efficient and robust user interfaces.

Atomic Design is a powerful methodology for developing scalable and reusable user interfaces. In Vue.js, we can apply these principles to build atomic components, molecules, organisms, templates, and pages. By following this organized structure, our code will be more maintainable, understandable, and easy to extend. Vue.js offers an incredibly flexible and powerful ecosystem for implementing Atomic Design, allowing developers to create sophisticated and consistent web applications.

Design Vue.js applications Interface (computing) teams Template

Published at DZone with permission of Xavi Llordella. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Threat Modelling Tools Analysis 101
  • Safeguarding Web Applications With Cloud Service Providers: Anti-CSRF Tokenization Best Practices
  • The Power of Refactoring: Extracting Interfaces for Flexible Code
  • Client-Side Challenges in Developing Mobile Applications for Large User Bases

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!