Web monolith or SPA strategy, a short overview about software architectures
Published: 2023-12-29 18:18:12

When we pretend to start a new project, i guess that all of us think the same thing. Which technologies should i use in this project? How to build it? How big, and how many users can have? Personaly, i prefer to idealize my projects thinking in a MVP, but not forget to developing it scalable. Therefore, during my career two architectures alternate between my choices, and I would like to share my knowledge about this.

Web monolith and SPA (Single Page Application) are two development architectures that you can use, different paths that you can choose based on the size and maintainability of your project.

## Web monolith
As the name itself says, monolith, it's a unique piece, all the logic, structure, models, controllers and views, stay in the same place (at the project). That is the architecture who domains the major part of the internet. Each page is built separately, requiring, despite allowing to segregate parts of the body that compose the page, to reload all content every time it is requested by the user.

When accessed through requests, all content coming from a database should be sent along with the page request, thus limiting the dynamic behavior of the page's information. To work around this, the use of JavaScript on these pages is common, whether to display custom alerts or submit forms in modals.

Here are some points about monolithic architecture.
**Ease of Implementation:** It is simpler to deploy and maintain, especially for smaller projects or in early stages os a project.

**Simplified Debugging:** Troubleshooting and debugging can be easier since all the code is in same place.

**Technological Rigidity:** It can be difficult to adopt new technologies as the entire application is tied to a specific set of technologies.

**Scalability Challenges:** Scaling the project can be challenging due to the need to scale the entire project.

Monolithic web architecture offers initial advantages in implementaion and simplicity, but encounters challenges with scalability and maintenance as projects grow.

## SPA (Single Page Application)
SPA it is a CSR (Client Side Rendering) architecture strategy. The main purpose behind this strategy, is to enhance the user experience when navigating throught the application, but how?

SPA are designed to load a single HTML page and dinamically update the content as the user interacts with the application, that way, eliminating the need to reload the entire page, in contrast to the monolithic architecture.

This architecture is built using front-end frameworks, such as the popular VueJS, React, and Svelte for user interface development. The communication with the database takes place through a RESTful API interface, which may not necessarily be developed in parallel, as in this scenario, we are dealing with two completely segregated projects.

The communication between the front-end and the database of your application will occur through the API created in your back-end and will be accessed by your interface through HTTP requests.

This form of communication brings another advantage over monolithic architecture, because, the communication between mobile device applications also occurs through HTTP requests, thus reusing a significant portion, if not all, of the requests for both your desktop application and your mobile app.

#### So, SPAs are awesome, right?
Yes, they are great. They bring an amazing user experience with clear definitions regarding content loading, a significant improvement in performance by updating only the necessary parts of the page. Furthermore, modular development and the ability to use components to reduce code rewriting and facilitate maintenance attract developers.

But we must not forget that communication with the database depends on a REST API to be intermediated, as well as operations such as CRON jobs and email sending, which are carried out through your back-end. If triggered manually, these operations should also be performed through HTTP requests.

### Conclusion
The choice of using a monolithic architecture or a CSR architecture with SPA depends on the size and, especially, the requirements of your application. Like the ones mentioned, there are other architectural models such as microservices, which are based on decentralization and modular development, allowing the use of various languages for different parts of an application.

#### Suggestion

If you prefer building monolithic applications but would like to achieve better performance and some of the dynamics of SPAs, I suggest taking a look at InertiaJS. Enhanced for the Laravel framework, it features various page loading and content updating functions similar to SPAs, yet reduces the complexity of your development and leverages the communication advantages of monolithic architecture.

If you want to learn more about the mentioned technologies, I send the links below.

[Framework Laravel](https://laravel.com/)
[InertiaJS](https://inertiajs.com/)
[VueJS](https://vuejs.org/)
[React](https://react.dev/)
[Svelte](https://svelte.dev/)