4

I am currently learning UML and Deployment/Component Diagrams and want to model my existing application into a 3- or 4-Tier-Architecture. My App has the following instances:

  1. Angular Application
  2. Java Spring Boot Application as REST-Webservice
  3. Database

All three instances can be deployed on different servers. In my mind, this is a 3-Tier-Architecture. But now I am confused, because I am not sure, if the Client with the Web Browser is the 4th tier of my architecture. Can the webbrowser and the angular application be in the presentation layer, like this:

enter image description here

I am thinking and confused about this, because in this post:

Is this okay to use UML component diagram for a 3-tier Architecture?

he summarizes the application and the browser in the presentation layer.

EDIT: This is how I would realize it as a 4-Tier-Architecture Deployment Diagram:

enter image description here

Cenasa
  • 531
  • 9
  • 27
  • does that answer to your question (not really linked to UML if I understand well) : https://stackoverflow.com/questions/10761440/example-of-4-tier-for-n-tier-architecture – bruno Aug 20 '20 at 11:52

1 Answers1

4

Your application has a 3-tier architecture. The browser is simply an execution environment that is running part of your front-end application code.

The front-end application is split between deployment on the web server (at a minimum, hosting the static files that comprise your front-end even if (because you are using angular) it is doing nothing more) and the web browser.

The API is the second tier. Your angular app is connecting to this to invoke logic and access data.

The Database is the third tier.

I would go with your top diagram, but put your angular app nested inside the browser.

muszeo
  • 2,312
  • 9
  • 13
  • Thanks for your answer, as it seems to make sense. In the comments, the following post is linked: https://stackoverflow.com/questions/10761440/example-of-4-tier-for-n-tier-architecture - In this post, the tiers "presentational" and "client" are splitted. As I expected the presentational layer is the angular application and the "client" is the web browser - how is this incorrect? – Cenasa Aug 21 '20 at 11:54
  • I edited my first diagram. Is it like you said, correct? – Cenasa Aug 21 '20 at 21:07
  • Yes that's looking good. Is your angular app served by Tomcat or something else? If it's served by Tomcat you might consider nesting the <> for your Angular App inside Tomcat as well (because Tomcat is in the model, I'm kind left wondering what is serving the Angular App on the web server). Also, does the Web Browser make a direct connection to the API or go through a layer on the Application Server, as you have shown? – muszeo Aug 23 '20 at 05:15
  • To be honest, I am not sure, which web server is serving the frontend. In my "pracitcal" example, the files are just uploaded in a S3 Bucket (AWS) as a static website. Do you have an idea on this? I am also not quite sure about your second question. How would a direkt connection to the API look like? Right now it is like, a user clicks a button. and the click + data gets handled by "services" from angular. these services handle the data and send them to the api. – Cenasa Aug 23 '20 at 11:07
  • I've done some research and found, that typically Apache or Nginx Web Servers are used for static websites, so I think that you are right. Can you eventually help me with the naming of both Angular Artifacts? How can I differentiate them? – Cenasa Aug 23 '20 at 11:52
  • Hey again, yes Apache or Nginx, either would be capable of performing that role. If it's in S3 you could simply name the web server (currently labelled "Apache HTTP") as AWS S3 Bucket. The second question -- if the Angular app files are sat in S3, then clearly S3 isn't making a connection to your API -- it's the Angular app that is running inside your browser that is making the connection to the API. So your Browser should be making two connections -- one to the S3 Bucket (straight HTTP, to load the app) and a second one to your API (what you have labelled REST / HTTP). Does that make sense? – muszeo Aug 27 '20 at 04:39
  • Following on from my comment above....the Angular App (inside the Browser) could be shown to make the connection to the API (what you call-out as Angular's "services") and the Browser itself is making the connection to S3 to pickup the Angular app's files. – muszeo Aug 27 '20 at 04:42
  • What do you exactly mean with "API"? So is it more logical to connect the Angular App inside the Browser to the Java Spring App (API) - Or do you mean, as it is now, the connection from the Angular App in the Browser to the Angular App in the S3 Bucket/Apache HTTP Server. And from there to the Java Spring App (API). @muszeo – Cenasa Aug 28 '20 at 13:15
  • Hey mate -- sorry for delay in reply -- by (Web) API I mean your Java Spring app that is serving your Web Services in a REST style. The connecting lines need to traverse the actual connections made between components as deployed on nodes in a Deployment Model such as this. The Browser (Angular App's JS) is making a connection to the API *directly*, not via the server that provides the static content to the Browser. The TCP connection is opened between the Client (Browser) machine and Server (API), over which the HTTP (REST) requests are made - it's this connection that the line represents. – muszeo Sep 07 '20 at 07:24
  • "The API is the second tier." Note that the API is itself not a tier or layer, but rather the interface between layers. The layer encapsulated by the REST API is the application layer (arguably also the data or database layer as well, indirectly via the application layer). – zr0gravity7 Jan 26 '22 at 07:43