Note: I am using this project to experiment with different architectural concepts. This is my attempt at implementing Robert C. Martin (Uncle Bob) Clean Architecture guidelines in an Angular project that uses serverless functions to communicate with a MongoDB cluster.
Serverless functions allow for cost-effective, scalable, and event-driven execution of backend logic ... in short, they are cool, making them ideal for Angular projects where the focus is on delivering a smooth frontend experience. But you may soon discover that your application will eventually grow and they will need constant modification or the addition of new features. Without a good structure in place for your application, you will begin to notice:
- Tight coupling between components, making the code difficult to modify and maintain.
- A lack of separation of concerns, leading to complex, hard-to-test code.
- Poor scalability, as the codebase grows and becomes more complex over time.
- Difficulty in adapting to changing requirements, as the codebase becomes harder to modify.
- Lack of maintainability, as the codebase becomes harder to understand and debug.
- Developer productivity decreases, as they struggle with complex and poorly organized code.
To learn how to prevent these concerns mentioned above, I am using Clean Architecture Design Pattern as an architectural style that provides some set of guidelines for the project. This is my own way of interpreting The Clean Architecture Design Pattern in a Serverless Angular Blog Website.
Read More on clean architecture: Clean Architecture
- Angular CLI
- Angular
- Netlify Edge Functions
- MongoDB
- Typescript
- Netlify CLI
The core is the layer where you can create your configuration-related code, utilities, and params.
The domain is the layer for all application-wide entities, use cases, and repository contracts.
Data is the layer that supports and directly utilizes the domain layer. Here we can have our different data source implementation and the interactors that expose data to the outer layer.
This is the layer where you write your UI code.
You can read this article explaining my idea of how this code can be used. A typical programming workflow for a new feature would look like this:
- You start in the domain layer and write the entities, use cases, and repositories.
- You set up the data layer that should implement the contracts in the domain layer
- You write the UI codes in the presentation layer.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
All the functions used in this project can be found in netlify/functions directory
To learn more, check out this Blog Post From Netlify
Run ng test to execute the unit tests via Karma.
Give this project a star if you like it or find it useful.
This project is licensed with the MIT license