What is MEAN?

Maximilian Schwarzmüller
A free video tutorial from Maximilian Schwarzmüller
Professional Web Developer and Instructor
4.6 instructor rating • 37 courses • 1,540,021 students

Lecture description

What does "MEAN" stand for? Let's explore the different pieces (MongoDB, Express, Angular & Node.js) that make up the MEAN stack and let's see WHY we combine them.

Learn more from the full course

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

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

12:41:09 of on-demand video • Updated March 2021

  • 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 So what does MEAN stand for? What are the different components we'll learn about in this course? MEAN comprises a set of four technologies and this is what it stands for, the M stands for MongoDB and it's the database we'll use in this course, so the part where we'll be able to persist the data the users of our application generate, like the user data itself but also like posts or messages they send, things like that. The E stands for Express and ExpressJS is hard to understand without the N, so let's quickly fast-forward. We've also got the A and the A stands for Angular now I'll come back to the N which is related to the E but Angular is our client-side technology, it is a JavaScript framework in the end which we will use to render a nice dynamic UI, User Interface, to our users. It runs entirely in the browser, not on the server at all and therefore it really has just one job, presenting a nice and pleasant, interactI've and reactive user interface. Now, what's the N then? Well, you probably already saw that something is missing. We've got a database and we've got something running in the browser, but we certainly also need to run some logic on the server, for example the authenticating users. This is not something we can do in the browser because A, browser code can easily be hacked or changed and B, it's way too complex, it would take up quite a significant amount of resources and slow down our front-end, our user interface. N stands for NodeJS and it's the JavaScript runtime, the server-side language we'll use in this course for our server-side code, so for our core business logic that runs on the server. And now the E also is related to it because whilst NodeJS is the language well use on the server, Express is a framework for NodeJS that makes working with it easier, you wouldn't need ExpressJS per se, but it makes working with it much easier, just as Angular is a framework for JavaScript in the browser, you don't need it, but it makes things easier but let's take a more detailed look at all these things. Now I want to look at Angular first. As I already said, Angular runs on the client-side, in the browser. it's a framework building up on JavaScript or using JavaScript and it's used to create so-called Single Page Applications, this essentially means that it handles the entire front-end logic. So, everything your user is going to see, Angular is responsible for it but I'll come back to it in a few seconds. Angular's job is to render the user interface with dynamic data and that dynamic data part is important of course, it's job is not just to render some static HTML and some CSS, we wouldn't need JavaScript for that, it's job is to update the UI whenever we have new information, let's sa, when you create a new post, we want to immediately update the UI to show that new post there. It is also responsible for handling user input, so validating that user input and also sending it to the server because that's the third part it does, it communicates with our backend, so with that Node, Express and MongoDB combination that seems to be responsible for that. Angular provides a mobile-app-like user experience because since we handle everything in the browser through JavaScript, we never need to reload the page, we just change parts of the page with JavaScript through Angular and therefore everything happens instantly in a very reactive way and that is the feeling we know from mobile apps. Now that is still only the front-end though. As I said, NodeJS is the language were going to use for the backend, so on the server-side which we also build in this course. NodeJS is a server-side library, JavaScript runtime and you know that Javascript can run in the browser, well NodeJS simply takes it, adds some things that are useful on the server like working with files, working with HTTP requests and now we can use JavaScript on the server too, pretty amazing. NodeJS listens to incoming requests and is able to send back responses, for example our Angular app could send a request to fetch a list of all the posts and Node could handle that request, do something, reach out to the database and send back a response with all these posts. NodeJS executes server-side logic in general, so authentication, anything we don't want to run in the browser for security or performance reasons and NodeJS is also able to interact with databases and files. Angular can't do this, it doesnt have access to any file system and especially not to a file system on some remote machine on a server and whilst theoretically, you could connect to a database from Angular, since all of your client-side JavaScript code is visible to the user, you can have a look at it in your developer tools of your browser, it would be very insecure to connect to your database because you would expose all your credentials and everything, you don't want to do that. Therefore, NodeJS is an alternative to PHP if you know that or Ruby on Rails, ASP.net, things like that and it's rarely used standalone, just like these languages, you typically use a framework along with it and that framework you typically use is Express. Express is a NodeJS framework, so it still uses NodeJS, the same language but it adds a lot of utility features. So it offers additional functionalities or in general, it makes things easier. ExpressJS is middleware-based and we'll see what this means once we dive into the code. It basically funnels incoming requests through a chain of middlewares, of steps where we can do something with the request, read some data from it, manipulate it, check if the user is authenticated or basically send back a response immediately, this chain allows us to write very structured code and you will learn everything about it in this course of course. And last but not least, it includes routing, which means that we could render views, so HTML pages with it, we're not going to do this in this course though because Angular should handle our entire front-end and again this is also something we'll see but more importantly, we can handle different requests to different endpoints which will be important for connecting Angular to the backend because if we want to fetch a list of posts, if we want to send some requests to /posts, so our-domain/posts, if we want to create a new post, we want to send a different request to our-domain/posts for example and ExpressJS allows us to implement this routing logic so that different requests to different URLs are handled correctly. Again, this will all be implemented step-by-step throughout the course. So to sum it up, ExpressJS simplifies the usage of NodeJS, it is a tool we definitely want to use. If you have a PHP background for example, you could compare it to Laravel for PHP, it makes things easier. Now there is one thing missing and that is MongoDB of course. MongoDB, as I already said, is a database. it's a NoSQL database to be precise and it stores so-called documents in so-called collections. Now, chances are you might have heard about SQL databases like MySQL, Microsoft SQL where you have records, rows which you store in tables. Now NoSQL has a different logic than SQL databases but in general, it's still a database, so you store your application data on a server, so that it persists across page reloads, across the user leaving your page, things like that. So any data that is not just temporary data definitely has to be stored in such a database. Now that NoSQL thing means that this kind of database enforces no schema, so you can have different documents with different pieces of information in the same table or collections as it is called here and it also doesnt really work with relations. You will see in this course that we can kind of relate different documents with each other, but in general it's way less strict and flexible regarding relations than a SQL database is. A NoSQL database is more about storing multiple unstructured documents, though you can get some structure into it and we will actually do that in this course. I'll come back to what exactly MongoDB is and how it works in the respective sections, no worries. Now last but not least, it is easily connected to Node, that's pretty cool, it's very easy to integrate or Node/Express and we don't connect it to Angular. I already said this, theoretically you could find a way but you don't want to do that because you don't want to expose your database credentials in your browser-side code which can easily be viewed by the user, it's accessible in the developer tools of the browser. So MongoDB is a powerful database which can easily be integrated into a Node/Express environment and it's very popular these days because it's very flexible and it's highly-scalable, it's able to handle a large amount of throughput, so requests per second or write-actions per second and read-actions per second and we'll dive deeper into this in the sections where we start working with it. Now you could theoretically replace it with a different database, you could use a SQL database in a Node/Express/Angular application too, you're not limited to MongoDB and I just want to really emphasize this. I'm using MongoDB because it's part of this popular MEAN stack and it has some advantages but depending on the application and the type of data you are storing, if it's a data with a lot of relations, maybe a SQL database might be better and whilst we will use MongoDB in this course, I just want to highlight this is not a must. You could use any database here, the core logic we'll dive in really is the connection of Angular and Node. So with that, let me quickly come back to what exactly that single page application thing meant and how the big picture of such a MEAN app looks like before we start diving into our setup of the course and start building our MEAN app.