How Does the MEAN Stack Work?

-: With that, let's have a look at the big picture. How does the entire MEAN stack look like in this course or in general, not just in this course? We have the client side, and the server side, that's important. Client side is what the user sees. The webpage as it runs in the browser. Server side is somewhere on a server we deploy where we run our business logic and which the user only indirectly accesses. We'll see how that access works in a second. So on the client, we use Angular, which is a JavaScript framework. So we also use JavaScript implicitly and we use it to built that user interface. On the server side, we use Node Express and MongoDB. Node Express for the logic and MongoDB as a database. As I said, you don't want to connect directly to it from Angular. Now the client side, Angular is responsible for the user interface, so for the presentation, it's a single page application, as I explained in the last lectures and that single page application can be rendered by our Node Backend. So we could have one route, which essentially returns that single HTML page, but it can also be totally decoupled from that and be served from a totally different host, some static host like AWS Free, for example. Now on the node application, we have our core business logic, especially the logic that should not be exposed to the client, due to security reasons or performance reasons. We have our persistent data storage, so that database and we also put our authentication logic there, for example, it's of course part of our business logic. I just wanna really emphasize that here. The logic where we decide whether an email and a password is valid happens on the server, because it can easily be fiddled with on the client, not so much on the server. How do we connect the two pieces then? Well, we exchange requests and responses and these requests and responses are sent behind the scenes, so-called AJAX requests. You might have heard of this before, and we use exactly the same pattern in Angular. These are requests which can be sent without us needing to reload the page, which is of course exactly what we want. They afford the type of data we exchange is not HTML, because we never want HTML code. We do all that presentation and re-rendering logic with Angular. Instead, what we get is so-called JSON data. That's a data format that's really efficient for encoding data, like a list of posts. And you will see how it looks like in this course. This is the big picture, this is how the MEAN state works, and this is exactly what we will implement in this course. So with that, I'd say enough of the words, let's get started and let's start setting up the base development environment, we'll work within this course and let's start building our MEAN stack application.