How Does the MEAN Stack Work?

A free video tutorial from Maximilian Schwarzmüller
AWS certified, Professional Web Developer and Instructor
Rating: 4.6 out of 5Instructor rating
62 courses
2,990,971 students
How Does the MEAN Stack Work?

Lecture description

So what's the big picture of the MEAN stack? How do the different things work together? Time for a closer look!

Learn more from the full course

Angular & NodeJS - The MEAN Stack Guide [2024 Edition]

Learn how to connect your Angular Frontend to a NodeJS & Express & MongoDB Backend by building a real Application

12:39:59 of on-demand video • Updated April 2024

Build real Angular + NodeJS applications
Understand how Angular works and how it interacts with Backends
Connect any Angular Frontend with a NodeJS Backend
Use MongoDB with Mongoose to interact with Data on the Backend
Use ExpressJS as a NodeJS Framework
Provide a great user experience by using Optimistic Updating on the Frontend
Improve any Angular (+ NodeJS) application by adding Error Handling
English [CC]
-: 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.