What is MERN Stack? - MERN Stack Chat App with Socket.IO #2

in today's video we're going to see what is this thing called mern or mern stack we're going to demystify each of these technologies one by one and understand why is moint stack so famous and used by so many companies and has such a huge demand so as far as full form goes merlin means mongodb express js react js and node.js now what are all these technologies let's go on each of these one by one so here's what a basic flow of a mern stack application looks like in our front end we use react.js for our back end we use node.js as our web server and express.js as our web framework and for our database we use mongodb where all of our applications data is going to be stored now let's first move on towards react.js and understand what react.js is all about so react.js is a front-end library built and maintained by facebook it has a feature of reusable component now what do i mean by reusable component let's find out so here's the screenshot of instagram so instagram if you don't know is also made by using react so as you can see here we have got tons of stories so what do you think when we need to render all of these stories on our webpage does someone create each and every one of them separately no obviously not we create one of them and then reuse that component again and again and again so this is what reusable component is all about react.js makes it too easy to make components like this so for example if we see over here suggested for u column we have created this one component and then we are rendering it again and again and again and again so this is what reusable component is all about so our next point is that it provides us with virtual dom now what is virtual dom now you might have heard about dom before javascript is used to manipulate our dom if you want to change anything in our html file so react.js provides us with this virtual dom let's search what this virtual dom is all about let's go on over here and search virtual dom and we have got react documentations so the virtual dom is a programming concept where an ideal or virtual representation of a ui is kept in memory and synced with real dom so what do you mean by that so let's see over here when i click on this tutorial button what do you think will happen let's see did you notice that the page did not refresh this was because of the virtual dom let me click it again and the page did not refresh it got changed in a blink of an eye so this is what virtual dom does it keeps the ui components already pre-rendered in our memory so it helps react make the website super fast and hence our fourth point it is super fast let's move on to our next technology node.js node.js is javascript runtime built on chrome's v8 engine it's basically a scalable web server so what is the web server web server plays a role of managing our apis connecting our front end with our database basically it is the heart and brain of our application so node.js provides us with something called node package manager let's see what node package manager is so i'm gonna go to browser again and search npm or notepackage manager so here we are and pmjs.com so what npm is it contains all of the packages that are built with help of node or javascript so let's go on over here and search a package called express so express is a web framework that we already mentioned so as you can see express is hosted in npm's repository and we can see the documentation as well and how you can install it and etc etc so this is the power of node.js it provides us with this huge library of packages called npm or node package manager and we can use it to develop real-time systems such as a chat application it works super fast let's move on to our next technology stack that is express js we already saw what express is it's a node.js framework that's why it is hosted on npm so express.js helps us to build powerful routing apis now what is api we will understand in just a moment so basically the api means application programming interface whenever front end requests some things from the back end api plays a role of carrying that information from back end to the front end so the third point being that express.js has a really really good documentation let's go and have a look at the express.js documentation so i'm gonna go to google and search express js let's go to its website and let's go to guide and here you can see we have got this beautiful looking documentation i mean it's not so for example if you want to create an api we just want to do a get request and then pass a function i know you won't be able to understand all of this right now so don't worry in so in our next video we are going to create our first web server and we are going to use all the power of express.js in that video so you can go through this documentation if you want it's really really helpful fourth point being is that it provides a super high performance it's super scalable doesn't matter if your website has thousands of people or lacks of people visiting express.js will not break and it has many third party plugins as well now let's move on to our last technology that is db so mongodb is a cross-platform nosql and document oriented database what do you mean by nosql you might have heard of sql databases such as mysql postgresql so it's completely opposite from that sql database it doesn't provides us that good of a performance but mongodb is super fast and super scalable we're going to see the difference between nosql and sql in just a moment so this is a very important feature of mongodb is that it's always on it's not hosted on your let's say on your server because it has a completely different website called mongodb.com so it's always on it's always 24 7 maintained so it's a really good feature of mongodb and as i already mentioned it's highly scalable it won't break so one of the difference between sql and nosql is that in sql we create tables so we have fixed row and columns but that is not the case in nosql in nosql we have document oriented database so it goes on to scales doesn't matter how many information you throw into it it's gonna scale according to that and the fourth point is flexible schema we can define schema for our data very easily let's go on to chrome again and i'm going to search sql versus versus nosql let's go over here and here we can see differences between sql and nosql so first and the major difference being that i told you already sql has tables with fixed rows and columns and no sql has document based so it contains json documents in key value pairs so it was sql was developed in 1970s but the nosql was developed in late 2000 so it's really advanced in nature so i would encourage you to go on to read more about this you're gonna learn a lot of things if you do so here were our four technologies now let's see how these four technologies work and coordinate with each other so here's what a basic one stack data flow looks like so let's take an example for our chat application here's our react app in the front end what it's gonna do it's gonna send a request to our web framework that is express.js it's gonna send this request to fetch all of the chats from the back end from our database so expressjs takes that request interprets it and sends it to our web server now our web servers uses something called mongoose in the back end to connect to our mongodb database it establishes a connection with the mongodb database and makes a query to our mongodb database to get all of the chats from there now then mongodb compiles that query and sends back the data to the web server which is then sent to our web framework and is sent to our front end in form of adjacent data our chats json data and then our front end that is our react.js app displays all the json data now you might be wondering what is this get over here now there are four types of request get post put and delete now get is used when we want to get something from the back end and not send something to the back end right so in this case we are getting all of our chats from this api endpoint and then there's a post request where we can send something to our backend for example if you want to create a new chat then we can hit this end point and we can create a new chat with all of the data such as name of the chat or the users involved etc then there is this put request as you can see there is one id over here so put request is usually used for updating something so we are providing this id so take this id and search in the database and update that particular chat for example if you want to update the name of the chat so we're gonna send a put request and update the name of the chat and the fourth one is delete that is self-explanatory this is used for deleting a particular chat or anything in our database so these are four types of request get post put and delete and this was a basic flow of a merged stack application now in our next video we're gonna go ahead and set up whole of our environment that will be used for developing a month stack app and then we're gonna go on to create our very first web server so click the link in the description to access the whole of the playlist because this playlist is going to be absolutely awesome also if you like this video click the like button and subscribe to the channel and i'll see you in the next video bye bye

Channel: RoadsideCoder

Views: 61,767

Keywords: mern chat app, mern chat app tutorial, what is mern, what is mern stack, how to learn mern stack, mern stack full form, mern stack definition, mern stack tutorial, mern stack project, mern, mern stack, mern tutorial, react full stack, full stack, mongodb tutorial, mern stack tutorial 2020, mern stack full course, react js, express js, node js, mongo db, learn full stack web development

Id: 02MoKBaU3SY

Length: 11min 2sec (662 seconds)

Published: Mon Nov 08 2021