Skip to content

Latest commit

 

History

History
71 lines (54 loc) · 2.39 KB

index.md

File metadata and controls

71 lines (54 loc) · 2.39 KB

Documentation

Welcome to the project documentation! This page provides an overview of all available documentation for front-end technologies used in the project. Select a topic below to learn more about how to use and contribute to each part of the project.

Front-End Technologies

React

Vue

Angular

Svelte

Understanding Clean Architecture in Front-End Frameworks

Clean Architecture promotes the separation of concerns by dividing the software into layers with clear responsibilities. This approach aims to create systems that are:

  • Independent of Frameworks: The architecture does not depend on the library stack, allowing UI and business logic to be independent of the database or any other external agency.
  • Testable: The business rules can be tested without the UI, database, web server, or any other external element.
  • Independent of UI: The UI can change easily without much impact on the rest of the system.
  • Independent of Database: You can swap out Oracle or SQL Server, for example, without changing the business rules.
  • Independent of any External Agency: The business rules simply don’t know anything about the outside world.

Folder Structure Using Clean Architecture

Here is a generic folder structure that can be adapted to various front-end frameworks like React, Vue, Angular, and Svelte:

src/
│
├── app/
│   ├── core/
│   │   ├── domain/
│   │   │   ├── entities/
│   │   │   ├── useCases/
│   │   │   └── interfaces/
│   │   ├── infrastructure/
│   │   │   ├── api/
│   │   │   ├── persistence/
│   │   │   └── common/
│   │   └── application/
│   │       ├── services/
│   │       └── di-container.js
│   │
│   ├── ui/
│   │   ├── components/
│   │   ├── layouts/
│   │   └── pages/
│   │
├── assets/
│   ├── images/
│   └── fonts/
│
├── styles/
│   ├── global.css
│   └── variables.css
│
└── main.js