MEAN, MERN, MEVN - What they're all about...

if you want to build a full stack web application with JavaScript technologies you typically find the mean stack the myrn stack the method stack sometimes and that's it and in this video I'll explore what these acronyms actually stand for how these stacks work why they are popular and why you maybe still should think out of the box and not limit yourselves to these stacks because as you will also see in this video these stacks are simply just possible combinations not must-do solutions so let's see what they are actually all about so what do these fancy terms mean myrn Madden stand for the M stands for MongoDB and that is a database solution you can spin up a MongoDB server or use some hosted services and then use this as a database where you store data MongoDB basically is an alternative to other database solutions like my sequel the main difference is that MongoDB is a no sequel database which means it does not work with relations not with records and tables instead with documents and collections and below the video you also find links to detailed videos and tutorials on MongoDB if you want to learn more about that so it is our database where we put the core data of our application de which we also find in all these terms stands for Express Jas Express Jas is a node.js framework and that takes us to the N n stands for nodejs unsurprisingly and that in turn is a JavaScript runtime so it's an environment where we can run JavaScript code however it's not in the browser where we typically run JavaScript code but it can run anywhere and for example you can use no trace to spin up a web server and in the end write some server-side JavaScript code so you can write your entire back and logic the entire server-side logic with JavaScript here with the same syntax you use in the browser but with a different set of features you can use for example unlike in the browser on the server side you can work with files with HTTP requests and so on of course they're yours can work with MongoDB which is your database well and expressjs is just a framework for note reyes to make working with no trace simpler because if you would work just with noches you would have to reinvent the wheel over and over again and implement everything on your own from scratch with expressjs certain things like manipulating incoming requests parsing data manipulating responses routing all these things become much easier and of course justice with MongoDB I do have complete tutorials in courses on node.js and Express and you'll find link to these resources below the video as well well and that leaves us with the blank here with the a with the R with the V that stands for angular react and view and these are all front-end which means browser site JavaScript frameworks or in the case of react it's of course a library as I know is important to some of you now what's the idea behind these frameworks or libraries these allow us to write powerful client-side which means browser side applications fully driven by JavaScript the idea here is that we can build mobile app like experiences where everything updates and happens instantly without a new page being rendered and returned by the server because we run all the logic that updates the UI and that effects the UI in the browser with the ALB of javascript and these frameworks or libraries so if we have a look at the big picture here at the example of myrn but it would be the same for the mean stack and for the mavim stack we have two ends that communicate with each other we get the front end which is our client the browser and we got the back end which is our server here now on the client side we would use react or angular or few J's and in the end therefore we use JavaScript because all these frameworks and libraries use JavaScript on the server side we would use d3 our technologies note Reyes Express and MongoDB now on the client side with react in this example here we're responsible for the presentation for the user interface for updating it for validating user input there for showing feedback to the user so if we're doing everything which the user sees and we're using a framework or a library they're like react or angular to provide an experience that is really really good and really fast where unlike in traditional web apps you don't have to fetch a new HTML page for every click instead you can update the existing page which of course is faster we do that with an approach which is called a single page application we build a single page application there which means we only ever get one HTML file returned by as server and then JavaScript is loaded to continuously update the HTML code in there to re render the UI when needed this single page by the way is not necessarily served by our node back and it could be served from any server a simple static host of vices here now back to the server side dear we ran our business logic as you could call it all the logic that doesn't belong to the client because of security reasons or because it's too heavy to run in the browser that runs on the server dear we also store data that could be files that could be data in the database side node MongoDB runs on a separate server a database server but our web server made up of node and Express talks to that database server our front end our client side application does not directly talk to MongoDB I also got a video on that of course all the link below this video if you want to learn why our front end does not directly talk to the backend well and what we would also do in the server is manage any authentication logic verifying password email combinations that's of course something we want to do in a place where the user can't access or manipulate our code and that's only the case on a server-side because on the client-side as you also learned in an average video well I got many videos as it seems like well on the client-side you can't hide your code so therefore we do that on the server-side now how do these two sides communicate then how are they connected they communicate through requests and responses that's how the web works in the end now important though since we build a single page application on the front-end we send background requests which means we send requests via JavaScript which don't cause a rear ender of the page or a reloading of the page to happen or a new HTML page to be fetched instead we stay on the existing page in the existing JavaScript app and just send the request and eventually get back some data which we can use to then update and manipulate the existing page with the help of JavaScript and our chosen library or framework now there of course instead in these requests and responses we don't exchange any HTML code instead we typically exchange data in the JSON format that's a machine readable format based on JavaScript in the end it looks a bit like JavaScript objects and that is perfect for exchanging data like for example user data that was entered in the client and needs to be sent to the server or a list of products that we might be storing on the server which we want to send back to the client so this is the big picture this is how these pieces are connected and how they work with Java now let's zoom in on the bakit because there the question is how exactly does the back and look like if it does not send back HTML pages but instead JSON data well keep in mind we get these decoupled ends and they offer we actually need a back-end which is an API which simply means an interface a web server which we can send requests to to trigger different actions on this back and web server and we can build such an API in two different ways well it were at least there of two very popular ways of building that these days approach number one is that we built a restful api rest stands for representational state transfer and i got a full series on this channel where i built a rest api with no trace and MongoDB from scratch the alternative to building a REST API is to build a graph QL API now the difference is here can be viewed in a separate video which I also released and which is linked below this video as well but the main difference is that for a REST API we provide multiple entry points so called endpoints which are made up of different URLs different paths on our domain where our web server runs and HTTP words which are used for the requests that are sent to these URLs so that you could send a post request to slash product to for example trigger a create new product action or a get request to slash products to return a list of products and it's up to you the creator of the API which and points which combinations of URLs and HTTP words you want to support for a graph you LAPI it's not the word path combination that matters instead you have exactly one path one URL and one HTTP word post typically which accepts requests but since you accept the post request this post request body then contains a query it contains a query written in a standardized query language graph QL which can be parsed and understood by your web server to then do different actions based on the query you wrote now just as in the rest case it's of course up to you the developer of the API to decide which kind of careers you want to support you don't expose your full database through this graph QL API to the front-end instead you then run logic on the web server and then you might communicate with your database there do anything else or send back an error if you don't support this kind of query so that's the difference a query which we receive on the backend where is this different URL HTTP web combinations that trigger different actions on the backend in both cases we execute code on the server when a request reaches our server and therefore this back-end is detached from the front end it just exposes its endpoints or its single endpoint and to supported queries and then any client can be connected not just our signal to each application but a mobile app could be connected to the same API as well because this back-end in the end then does not care about the exact client that talks to it so now that we know how it looks like how it works technically the questioners why would we use the myrn the mean or the mavin stack well one big advantage is the separation of concerns we have a separate front-end and a separate back end and therefore if we're working in a team parts of our team can focus on the front-end our parts can focus on the backend and of course that is possible in a vertex tax as well but here it's particularly easy because we have that strong cept raishin between these two ends in addition we use technologies that allow us to build a powerful front and if you want to call it like this with that I really just mean that we build a front end which is a single page application which gives us this mobile app like experience offers a great user experience updates instantly and therefore in general tends to well just feel good to our users of course if done right for the back and we have the advantage that it's really flexible since it's an API which as I explained does not care about the client at all you can connect any client to it you can send requests to the right endpoints or with the right query command queue this API from any client could be your single page application built with react or angular or view but it could also be a mobile app built with any technology dear it could be anything it could be another server talking to your server even if you need a debt so you got a really flexible and reusable API there well in last but not least this entire stack when using MongoDB Note Express and such a framework is made up of high performance technologies now that's a difficult turn though because you actually can build any kind of web application with any kind of text stack in a good performant or in a bad way if you're doing it right or wrong and so therefore it would be wrong to say that you couldn't use other technologies and achieve the same or better results it's just that for these technologies we also got a lot of resources to learn them we also get a lot of patterns which we can follow that typically result in good performance and in well-written code and they offer I'd say it's particularly easy to use these technologies and build good applications with them but as always with programming you can definitely also mess up things if you want to or if you're not careful now that we know how these stacks work and why we in general might want to use one of these stacks the question is which one is the best one we have to mean the myrn into mavin stack which one should you use I'd say at this point it's time for really detailed analysis so let's have a look at what's different the mean stack uses angular the myrn stick uses react and the mavin stack uses view what does this tell us it tells that the choice about which stack you want to use only depends on the front-end framework or library you want to use and therefore the mean stack is best if you prefer to work with angular the myrn stack surprise is best if you prefer to work with react and now when what you think is the mavin stack the best one indeed and I know this comes as a surprise it's best if you want to work with view so it all comes down to the question which of these choices angular where is this react versus view is the best one and here the answer in the end just is it really does not matter or to be precise it comes down to personal preferences you can build any kind of web app with any of these technologies there is no best or worst one there are strong opinions in the community some people love angular hate rest some people love react and hate the rest and the same is true for view now I don't feel as strongly about this as other people I like all three options but in the end this is up to you and I do have a complete article and video where I compare these free alternatives so that might be interesting to you if you're not sure with which of these technologies you want to get started or want to hear my opinion on that but in the end it really just comes down to which front-end technology you want to use and Dad in the end as I just mentioned comes down to personal preferences there always one other thing that really matters to you and that is the ML RP stack never heard of that well I just invented it or at least I think I did well this could be the acronym for my sequel which all is a database solution laravel which is a PHP framework therefore PHP which is a server-side programming language and then all the react or of course if you wanted to angular or view instead and what I really want to say with this slide here is just ad whilst the mean stack of the myrn stack and also a bit the mavin stack are popular it's not like you have to use these technologies you can combine all these technologies that are out there in any way you want you can also build an API with PHP and level a rest or a graph QL API you can then connect that to your react or angular front-end because you just sent the same kind of requests this API does not care about your client and your client does not care about the language or the technologies you used for creating your API so you're really flexible there and of course instead of MongoDB you could also be using my sequel because both with nodejs and Express as well as with PHP or level or any other server-side programming language out there you can talk to any database solution not just to MongoDB or just to my sequel just because certain combinations are are popular or you find a lot of tutorials on them does not mean that you're restricted to them and I I feel like a lot of people think that you can only use MongoDB with note you can only use a note Express API with react or with angular and that is simply wrong you can build your back-end with any tech stack of your choice and connect it to any front-end you're not limited there so definitely think outside of the box there take the existing stacks or the popular stacks explore if they are good for you if they make sense for your next project if you like the technologies but if they don't also consider alternatives like this one so that's it for this video I hope it was helpful I hope you now have a good understanding of what the mean stack timer in seconds are on are all about what your options are when it comes to them why they are popular and why you still might also want to consider some alternatives or at least you should be aware that there are alternatives and that you're not forced to sticking to these stacks if you liked the video leave a like subscribe to channel and I hopefully see our videos to buy

Channel: Academind

Views: 71,031

Rating: 4.9372301 out of 5

Keywords: mean, mern, mevn, angular, react, vue, vue.js, vuejs, reactjs, react.js, angular 2, angular 8, angular vs react, react vs angular, angular node, react node, reactjs node, react nodejs, reactjs nodejs, angular nodejs, vue node, vue nodejs, vuejs nodejs

Id: 5XlYQRGgYrY

Length: 18min 34sec (1114 seconds)

Published: Wed Sep 11 2019