Project Architecture

[00:00:00]
>> Maximiliano Firtman: Now we need to move one step up, because we don't want just a static server, we want something more complicated. So let's analyze the architecture of our app. So we have already mentioned a couple of things, but now we will get we will dig deeper into each of these steps.

[00:00:23]
So we have the user interface, we're using HTML, CSS and images. We're going to use Flexbox to lay out elements vertically or horizontally. We will also use template I'm not sure if you have ever used template before, the template tag and the dialog tag, that's for later. Then we have the front end the front end is JavaScript base.

[00:00:45]
We're going to be using events, web components, local storage, a router, system, routes and an API service. And I know that you still don't understand how everything fits together we will get there later, yes.
>> Speaker 2: Will you be including any testing on the go side?
>> Maximiliano Firtman: We will include testing on the last part, mostly for the web server, yeah, the transport layer will be HTTP, get them, post mainly, and then JSON on the back end.

[00:01:18]
That's the part that we are building right now, it's go. We will have model repositories, models, handlers, loggers and environmental variables, and we will see what's the be, what's the responsibility of each part in a second. And the database, we have just progress, progress equal for Foreign keys, just SQL language.

[00:01:43]
So this is the whole architecture and we will repeat this architecture a couple of times while we are building each part of the app, okay? So we have the user interface, that's HTML, CSS, and images and YouTube URLs, the user interface is connected with the front end. In JavaScript, the front end, we have a router that will be responsible for rendering different routes, and those routes will actually activate different web components, like every page, like the home page.

[00:02:19]
The details, movie, page, each page we have a web component, and that web component, at some point, will actually call an API through an API service that we have in the front end. That API service is just a JavaScript file, will actually use HTTP to talk to the back end, the back end, then we have a handler.

[00:02:44]
There is a handler for file system, that's the one that we have just developed. So we already here right now but also we have handlers for APIs for example, once you talk to a modern repository, what's that? For example, if I want the movie, there will be a movie repository.

[00:03:01]
The mobile repository will use TCP to connect to a post read database that it's in the cloud, it's in a different server, I don't know what it is, that will get the information from the tables. We'll populate a model, what's a model, just a value of type movie, and it will return that back to the API service that will actually update the user interface.

[00:03:25]
Okay, I know it feels complicated, but when we actually code every step one by one, it makes sense, okay? So just to follow the flow with another example, let's say we want to the, URL. So we type, really neat.com so the first action that we have here is actually that the browser, so the user interface is getting the root folder, okay?

[00:03:54]
So over HTTP, it goes to the back end, and the back end realize, this is for a static so I will just serve the file as we did with the HTML, okay, so that's simple. So then it that it takes the index HTML from the file system, from the Public folder, and sends it back to the browser, and the browser is rendering the HTML.

[00:04:17]
We don't have this one yet, but we will at one point, and but let's say now the user goes, and clicks on Deadpool clicks in one movie. Okay, so what's the flow in our architecture? Actually, what will happen is that click will kinda change the URL client side, and it will go to, for example, forward/movies, forward/ the ID of the movie let's say it's 234.

[00:04:48]
And that goes directly to the router, what's a router? Is that something from the browser? No, it's something that we will create. It's a service, it's just a class, an object that we will have JavaScript side that we will call from scratch that will actually read that URL, change and say, okay, I need to see what to do now.

[00:05:13]
Okay, so it will actually check in the in the routes, and the routes will tell them, hey, for that URL, you need to create the web component movie details page. So it will create that component it will create a new instance of it. First, we will code everything, and that web component will need the data from that movie.

[00:05:40]
So it will ask an API to a server, hey, I need the details of that movie, so it makes another get, and that goes to the movie handler. Again, what's a handler? It's a value in go that handles one particular route, one particular URL. So we will have a movie handler, they will say, that's mine.

[00:06:04]
It's asking me for the details of a movie, I will do that. So that movie handler will actually call the model repository, for example, get movie, hey, I need a movie. So I know that I'm handling the URL of a movie, now I need the data from a movie.

[00:06:22]
Getmovie is the one that makes the SELECT or the query from the database. It's downloading the data and it's populating the model, so it's creating a movie with all its properties coming from the table. We will close this, and then we will come back to the diagram to see that this is the flow that we are actually using.

[00:06:48]
So when we have the movie at the back end, we actually need to convert that into JSON and respond with that JSON so it goes back to the front end. And then the front end will, for example, design the HTML with that data, with, for example, an article HTML element and finally, we will see in action the details of the movie.

[00:07:16]
Okay, so that's kinda the architecture that we will be building for a full stack application. We can create a simpler solution with less steps, yes, it's possible. But with this architecture, we have different layers of abstraction. So it's easy in the future to update the app, to create new features for this app, because if we wanna create a new Page, we create a new route, and the whole system will work.

[00:07:47]
Okay, because if not, we can create just everything in one go file, everything in one JS file and everything will work. But it's going to be too tied together to this particular problem, and it's gonna be difficult to scale and maintain the future. So, that's why we are creating this diagram, so we are separating concerns both in the client and in the server.

[00:08:11]
Again, this is an overview I'm not expecting you to now understand everything that we see there, but later, we will be building each part separately. That's a full stack architecture, one possible full stack architecture for our app. We have already started with the back end. We've seen that we are using Go 1.20,1.24 but one of the problems that we have is that every time we make a change on the server, we have to restart the server, and that's really annoying.

[00:08:47]
So we will be writing a lot of Go files. Every time we add new file, every time we make a change, we need to use Ctrl+C and run the server again, this is a normal problem in Go, also in other frameworks as well. So that's why we are going to use a community based tool known as AR that will we automatically restart the server when we change the files.

[00:09:15]
This is similar to nodemon on the node side, so it's monitoring the file system. And if the file system changes, it stops the process and run it again, okay? So in that case, everything will be easier for us, so then we are just code and go, we save a file, and the server automatically restarts, and it will take those changes, okay?

[00:09:40]
Makes sense? We will see how to do that in second, but you will need to go on, install air, it depends if you're on Windows, Linux, or Mac. The way to install it differs but one quick way to do that is installing it through directly go I will show you that in a minute.

[00:10:03]
And we already mentioned that we will be using go.m, p sheet is the one for Postgres SQL, okay, and that's all, okay. Let's go back here to the backend, yeah.
>> Speaker 2: Will you be rendering the web pages server side for SEO or is it gonna be all client side?

[00:10:24]
>> Maximiliano Firtman: In this course, we are only doing single page application. There is another course, an intermediate course, that takes this particular project, and it's also making server side rendering as a pattern, for example, to increase SEO search engine optimization. So if you wanna see how to do that or how to mix both client and server side, check the intermediate course.