Demonstration of clean architecture in the frontend. This is a small example project that follows good practices suitable for larger codebases. I wrote an article to explain the main concepts I use here.
This project was generated using Nx. That's a usefull tool for managing large-scale frontend applications. At the same time, it's suitable for smaller projects too. It supports Angular, React, and several backend frameworks too. You can install nx CLI or use it by calling yarn nx ....
yarn installto install dependenciesyarn nx serve partsto run the main app fromapps/parts
You can run tests with yarn nx run <lib or app name>:test. For example: yarn nx run todos:test or yarn nx run todos-data:test.
There are apps and libs. Apps aren't supposed to contain almost any logic, and their main job is to bring features or libs together. Libs contain all the fun. It can be almost everything:
- Full feature for an application like
todoslibrary - Headless data library that can be re-used by several features:
todos-data - Very small helper library to handle basic initialization logic for a feature:
todos-registry - There even can be code that doesn't go to the build. It still can help with testing:
test-helpers.
Other typical packages are UI libraries, utility functions, and classic libraries if you build them in-house.
If you are interested in learning more, I encourage you to read the source code, run it locally and perhaps play with the code. You can also read the article where I explain the approach.
Author: Alexey Karpov.