https://github.com/zenika/grenoble-hands-on-front-clean-architecture

Attempt to clean architecture in frontend application & comparison between angular / react / vuejs
https://github.com/zenika/grenoble-hands-on-front-clean-architecture

angular architecture-hexagonal clean-architecture react tdd typescript vuejs

Last synced: 1 day ago
JSON representation

Attempt to clean architecture in frontend application & comparison between angular / react / vuejs

• Host: GitHub
• URL: https://github.com/zenika/grenoble-hands-on-front-clean-architecture
• Owner: Zenika
• Created: 2020-12-15T07:51:47.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-08T20:31:06.000Z (almost 3 years ago)
• Last Synced: 2024-10-13T01:48:51.259Z (about 1 month ago)
• Topics: angular, architecture-hexagonal, clean-architecture, react, tdd, typescript, vuejs
• Language: TypeScript
• Homepage:
• Size: 5.9 MB
• Stars: 87
• Watchers: 7
• Forks: 25
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hands-on Frontend Series : Clean Architecture

- [Slides FR](./doc/clean_architecture_slides.pdf)

After having discovered the main frontend application development frameworks through the previous hands-ons, we will now see how to architect our application. 

The goal of a good architecture is to gain in testability, scalability and maintainability. We will also see that a good architecture will allow us to depend less on frameworks and tools to develop applications that are more resilient to changing technologies.

The concept of "Clean Architecture", also known as "Hexagonal Architecture" or "Ports / Adapters Architecture" has already proven its worth in the development of backend applications.

While this technique has gained in popularity in recent years, it has not become much democratized in frontend application development.

We therefore invite you to come and discover the fundamentals of Clean Architecture and see how to implement it in a web application. 

Through this repository, we redevelop the weather forecast application from the concepts of "Clean Architecture".

## Prerequisite

- nodejs > 10

## Install

```

npm install

```

## Usage

### Angular

```

npm run angular 

```

### React

```

npm run react

```

## Structure

![clean-archi](./doc/clean-archi.png)

* **packages/domain** : Core of business application (city, weather, port)

* **packages/web/adapters** : Class used to make infrastructure communicate with domaine 

* **packages/web/infrastructure** : Weather app with frameworks usage 

## Technologies

### Langage

* Typescript

### Tools / Libraries

* Lerna

* Angular

* React

* Jest

* @testing/library

## Other Hands-on

### Front

* [VueJS](https://github.com/Zenika/grenoble-hands-on-vuejs)

* [Angular](https://github.com/Zenika/grenoble-hands-on-angular)

* [React](https://github.com/Zenika/grenoble-hands-on-react)

### Backend

* [Spring](https://github.com/Zenika/grenoble-hands-on-spring)

* [Quarkus](https://github.com/Zenika/grenoble-hands-on-quarkus)

## Contributing