zenika / grenoble-hands-on-front-clean-architecture Goto Github PK

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

JavaScript 1.55% TypeScript 88.92% HTML 4.76% SCSS 0.08% Shell 0.01% Vue 4.68%

clean-architecture angular react vuejs tdd typescript architecture-hexagonal

grenoble-hands-on-front-clean-architecture's Introduction

Hands-on Frontend Series : Clean Architecture

Slides FR

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

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

Backend

Contributing

grenoble-hands-on-front-clean-architecture's People

Contributors

Stargazers

Watchers

grenoble-hands-on-front-clean-architecture's Issues

Problème pour "npm install"

Juste après avoir cloné le dépôt, je lance npm i et j'ai une erreur :

> @grenoble-hands-on/root@ postinstall /xxxx/grenoble-hands-on-front-clean-architecture
> lerna bootstrap

lerna notice cli v3.22.1
lerna info Bootstrapping 5 packages
lerna info Installing external dependencies
lerna ERR! npm install exited 1 in '@grenoble-hands-on/web-adapters'
lerna ERR! npm install stderr:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @grenoble-hands-on/[email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /xxxxx.npm/_logs/2021-04-20T17_46_49_013Z-debug.log

lerna ERR! npm install exited 1 in '@grenoble-hands-on/web-adapters'
lerna WARN complete Waiting for 4 child processes to exit. CTRL-C to exit immediately.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @grenoble-hands-on/root@ postinstall: `lerna bootstrap`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @grenoble-hands-on/root@ postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /xxxx/.npm/_logs/2021-04-20T17_46_49_119Z-debug.log

NPM version : 6.14.4

Merci

[Advice]: Using eslint to prevent dependencies from Domain to Adapters

Hello 👋

I've seen your talk at SnowCamp 2022 and I asked if you used any tools to prevent breaking the rule of the Domain dependencies: no dependencies from Domain to the outside world. I think there is actually a tool that can help with that: eslint and one of its plugins, eslint-plugin-import. You probably already know eslint which is widely-used to lint files and detect problems. eslint-plugin-import has many rules but one rule is of particular interest to this problem: import/no-restricted-paths. It allows you to define "zones" from either a folder or a glob, and define specific restrictions on each zone. You can prevent files from one folder from importing files from other defined folders. Using this rule, we can prevent the Domain from importing files from the Adapters.

Shortly before the talk, I watched your video "Hands-on Front : La clean architecture dans le web" and was really inspired to give it a try. I did not go for the full "Clean Architecture", just "Hexagonal Architecture" for now. Anyway, please check out this example of an .eslintrc file that defines rules to prevent dependencies from the Domain to the Adapters. There are also separate rules for each "type" of adapters to prevent adapters from the UI depending directly on other adapters from REST API for example.
The rules do not prevent all dependencies though: you are still allowed to depend on libs from node_modules. If one wants to completely isolate the Domain from libs, the rule should be refined to make it stricter.

I hope this can help ! 🙂