Three-tier architecture, Spring and Angular

Question

I have a question about three-tier architecture.

I have a app using Spring Boot and Angular. I wonder if :

• Presentation layer = angular
• Application layer = spring boot

Or if there are TWO three-tier architecture : angular is one and spring boot is one too.

I know Angular is not technically three-tier architecture since it's not made to interact with database which is why I would say it is only presentation layer. But I haven't read anything confirming it.

Answer 1

The architecture of a Spring MVC + Angular single page web app
Form-intensive enterprise class applications are ideally suited for being built as single page web apps. The main idea compared to other more traditional server-side architectures is to build the server as a set of stateless reusable REST services, and from an MVC perspective to take the controller out of the backend and move it into the browser:

The client is MVC-capable and contains all the presentation logic which is separated in a view layer, a controller layer, and a frontend services layer. After the initial application startup, only JSON data goes over the wire between client and server.

source: https://blog.angular-university.io/developing-a-modern-java-8-web-app-with-spring-mvc-and-angularjs/

Answer 2

Short answer: it depends on the quality of your implementation.

For a longer answer I'd like to wrap up the purpose of software architecture first. The separation of a project into multiple tiers in software engineering serves the purpose of separating your code "physically" before you and your team start coding. The process of determining your architecture beforehand can give you insights on how exactly your entire project will be structured and what languages or frameworks can/should be used.

An example for a three-tier architecture:

• Presentation Layer: The frontend of your application. Could be in HTML/CSS or a web framework like Angular or React. You want this layer to display the data it retrieves and do as little "thinking" as possible.
• Application Layer: This is the middleware of your application. Can be implemented in any language you like such as PHP, Java, C#, Python etc. This layer is the "engine" of your software and it connects the presentation layer to the data layer. You do not want any Views or UI in this layer, as this is the "great thinker" of the squad.
• Data Layer: Your database or storage system. Can be in MySQL, PostgreSQL, MongoDB, etc. The data would be accessed by the application layer via API calls (note: the API call itself is triggered by the presentation layer, but the presentation layer doesn't know what the application layer will do with that call, it's a blackbox between the two).

For semantic reasons I cannot say that Angular/Spring "is a three-tier architecture", since that completely depends on your implementation. Both can be three-tier if you want them to. In your case however it is correct to state that Angular should be the presentation layer while Spring Boot should be the application layer.

Using Angular as your presentation layer (and your presentation layer only) makes a lot of sense. Your Angular app shouldn't care about the data it receives, it should only display it. Spring Boot would therefore be the component which delivers the data from the data layer to the presentation layer.

A good implementation makes a three-tier architecture interchangeable. Don't want to use Angular anymore? Just upgrade to another framework and the data your customers see will still remain the same. That's the strength of a well-designed architecture and what you want to achieve with it.

Wikipedia describes software architecture as follows:

"Software architecture refers to the high level structures of a software system and the discipline of creating such structures and systems. Each structure comprises software elements, relations among them, and properties of both elements and relations. The architecture of a software system is a metaphor, analogous to the architecture of a building. It functions as a blueprint for the system and the developing project, laying out the tasks necessary to be executed by the design teams."

Therefore, to finally answer your question: Your setup determines your architecture. If you use Angular as your UI, Spring Boot as a collection of Services and a database to store your data you will have three-tier architecture. If you decide to generate your frontend in Spring Boot without Angular you will still have a three-tier architecture, but Spring Boot takes up two of those layers (which is why Spring closely follows the MVC pattern).