What Is Clean Web Application Architecture And How To Use It In Web Apps?

As a result of using this approach, you will not be tied to a specific framework and will be able to easily switch view library inside your application, such as React, Preact, Vue, Mithril, without rewriting business logic and in most cases cases and views. You can easily port the application to a more popular library without rewriting the business logic.

Clean web application architecture

Testability

Business rules can be tested without a user interface, database, web server or any other external component.

Independent of the user interface

The user interface can be easily changed without changing the rest of the system.

Database independent

You can replace Oracle or SQL Server with MongoDB, BigTable, CouchDB or whatever. Your business rules are not related to the database.

Independence from any external service

Business rules simply know nothing about the outside world. For many years, the ideas described in this book have been the basis for creating complex applications in a wide variety of fields. This flexibility is achieved by dividing the application into Service, Repository, and Model layers.

Controller

Responsible for interacting with the user through IO.

Service

Responsible for business logic and its reuse between components.

Storage

Responsible for retrieving data from external sources such as database, API, local storage, etc.

Models

It is responsible for the transfer of data between layers and systems, as well as the logic of processing this data.

Who is clean architecture intended for?

And now web applications are so big that the amount of business logic has become comparable or even better than server, desktop and mobile applications.

How to use clean architecture in web applications?

Angular is a monolithic framework

It was simply moved as is, without considering the peculiarities of web applications and ignoring the modular import system of modern Javascript.

Terrible view engine

It is very primitive and falls far short of the simplicity of JSX. Data is not written in the code writing phase and compilation phase.

What about other frameworks?

Extending the functionality of framework components

As a bonus, we got the ability to add or change the behavior of presentation library components. Using the Clean Architecture approach, React renders more than just the component where the error occurred. You can add monitoring, analytics and other features just as easily.

Data validation

In addition to describing data and transferring data between layers, models have great possibilities. For example, if you include the class-validator library, then just by hanging decorators you can validate data in these models, incl. with a little tweaking you can validate web forms.

Create entities

If you need to work with a local database, you can link the typorm library and your models will be transformed into entities with which the database will be generated and operated.

Conclusion

If your business logic is on the backend and your job is to receive data, display it to the client and process button clicks, then you will not feel the flexibility of Clean Architecture.