MEAN, MERN, MEVN – What they’re all about…

00:00:00 if you want to build a full stack web
00:00:02 application with JavaScript technologies
00:00:04 you typically find the mean stack the
00:00:06 myrn stack the method stack sometimes
00:00:08 and that's it and in this video I'll
00:00:11 explore what these acronyms actually
00:00:13 stand for how these stacks work why they
00:00:16 are popular and why you maybe still
00:00:19 should think out of the box and not
00:00:22 limit yourselves to these stacks because
00:00:24 as you will also see in this video these
00:00:27 stacks are simply just possible
00:00:29 combinations not must-do solutions so
00:00:34 let's see what they are actually all
00:00:35 about
00:00:42 so what do these fancy terms mean myrn
00:00:46 Madden stand for the M stands for
00:00:50 MongoDB and that is a database solution
00:00:53 you can spin up a MongoDB server or use
00:00:56 some hosted services and then use this
00:00:58 as a database where you store data
00:01:01 MongoDB basically is an alternative to
00:01:04 other database solutions like my sequel
00:01:07 the main difference is that MongoDB is a
00:01:09 no sequel database which means it does
00:01:11 not work with relations not with records
00:01:15 and tables instead with documents and
00:01:17 collections and below the video you also
00:01:20 find links to detailed videos and
00:01:22 tutorials on MongoDB if you want to
00:01:24 learn more about that so it is our
00:01:26 database where we put the core data of
00:01:29 our application de which we also find in
00:01:32 all these terms stands for Express Jas
00:01:35 Express Jas is a node.js framework and
00:01:39 that takes us to the N n stands for
00:01:42 nodejs unsurprisingly and that in turn
00:01:45 is a JavaScript runtime so it's an
00:01:48 environment where we can run JavaScript
00:01:49 code
00:01:50 however it's not in the browser where we
00:01:52 typically run JavaScript code but it can
00:01:55 run anywhere and for example you can use
00:01:57 no trace to spin up a web server and in
00:02:00 the end write some server-side
00:02:02 JavaScript code so you can write your
00:02:04 entire back and logic the entire
00:02:06 server-side logic with JavaScript here
00:02:09 with the same syntax you use in the
00:02:11 browser but with a different set of
00:02:13 features you can use for example unlike
00:02:16 in the browser on the server side you
00:02:18 can work with files with HTTP requests
00:02:21 and so on of course they're yours can
00:02:23 work with MongoDB which is your database
00:02:25 well and expressjs is just a framework
00:02:28 for note reyes to make working with no
00:02:31 trace simpler because if you would work
00:02:33 just with noches
00:02:34 you would have to reinvent the wheel
00:02:36 over and over again and implement
00:02:38 everything on your own from scratch with
00:02:41 expressjs certain things like
00:02:42 manipulating incoming requests parsing
00:02:45 data manipulating responses routing all
00:02:48 these things become much easier and of
00:02:50 course justice with MongoDB I do have
00:02:52 complete tutorials in courses on node.js
00:02:55 and Express
00:02:56 and you'll find link to these resources
00:02:58 below the video as well well and that
00:03:01 leaves us with the blank here with the a
00:03:04 with the R with the V that stands for
00:03:07 angular react and view and these are all
00:03:10 front-end which means browser site
00:03:12 JavaScript frameworks or in the case of
00:03:15 react it's of course a library as I know
00:03:17 is important to some of you now what's
00:03:19 the idea behind these frameworks or
00:03:21 libraries these allow us to write
00:03:24 powerful client-side which means browser
00:03:27 side applications fully driven by
00:03:30 JavaScript the idea here is that we can
00:03:33 build mobile app like experiences where
00:03:36 everything updates and happens instantly
00:03:38 without a new page being rendered and
00:03:40 returned by the server because we run
00:03:43 all the logic that updates the UI and
00:03:45 that effects the UI in the browser
00:03:48 with the ALB of javascript and these
00:03:50 frameworks or libraries so if we have a
00:03:52 look at the big picture here at the
00:03:54 example of myrn but it would be the same
00:03:56 for the mean stack and for the mavim
00:03:58 stack we have two ends that communicate
00:04:01 with each other
00:04:02 we get the front end which is our client
00:04:04 the browser and we got the back end
00:04:06 which is our server here now on the

00:04:09 client side we would use react or
00:04:12 angular or few J's and in the end
00:04:15 therefore we use JavaScript because all
00:04:16 these frameworks and libraries use
00:04:18 JavaScript on the server side we would
00:04:21 use d3 our technologies note Reyes
00:04:24 Express and MongoDB now on the client
00:04:27 side with react in this example here
00:04:29 we're responsible for the presentation
00:04:31 for the user interface for updating it
00:04:33 for validating user input there for
00:04:36 showing feedback to the user so if we're
00:04:38 doing everything which the user sees and
00:04:41 we're using a framework or a library
00:04:43 they're like react or angular to provide
00:04:46 an experience that is really really good
00:04:48 and really fast where unlike in
00:04:51 traditional web apps you don't have to
00:04:53 fetch a new HTML page for every click
00:04:55 instead you can update the existing page
00:04:58 which of course is faster we do that
00:05:00 with an approach which is called a
00:05:02 single page application we build a
00:05:04 single page application there which
00:05:06 means we only ever get one HTML file
00:05:08 returned by as
00:05:09 server and then JavaScript is loaded to
00:05:13 continuously update the HTML code in
00:05:16 there to re render the UI when needed
00:05:18 this single page by the way is not
00:05:20 necessarily served by our node back and
00:05:23 it could be served from any server a
00:05:25 simple static host of vices here now
00:05:28 back to the server side dear we ran our
00:05:31 business logic as you could call it all
00:05:33 the logic that doesn't belong to the
00:05:35 client because of security reasons or
00:05:37 because it's too heavy to run in the
00:05:40 browser that runs on the server dear we
00:05:43 also store data that could be files that
00:05:46 could be data in the database side node
00:05:48 MongoDB runs on a separate server a
00:05:51 database server but our web server made
00:05:54 up of node and Express talks to that
00:05:56 database server our front end our client
00:05:59 side application does not directly talk
00:06:02 to MongoDB I also got a video on that of
00:06:04 course all the link below this video if
00:06:07 you want to learn why our front end does
00:06:09 not directly talk to the backend well
00:06:12 and what we would also do in the server
00:06:13 is manage any authentication logic
00:06:16 verifying password email combinations
00:06:19 that's of course something we want to do
00:06:21 in a place where the user can't access
00:06:23 or manipulate our code and that's only
00:06:25 the case on a server-side because on the
00:06:27 client-side as you also learned in an
00:06:30 average video well I got many videos as
00:06:32 it seems like well on the client-side
00:06:34 you can't hide your code so therefore we
00:06:37 do that on the server-side now how do
00:06:40 these two sides communicate then how are
00:06:43 they connected they communicate through
00:06:45 requests and responses that's how the
00:06:47 web works in the end now important
00:06:49 though since we build a single page
00:06:52 application on the front-end we send
00:06:55 background requests which means we send
00:06:57 requests via JavaScript which don't
00:07:00 cause a rear ender of the page or a
00:07:02 reloading of the page to happen or a new
00:07:05 HTML page to be fetched instead we stay
00:07:08 on the existing page in the existing
00:07:10 JavaScript app and just send the request
00:07:12 and eventually get back some data which
00:07:14 we can use to then update and manipulate
00:07:17 the existing page with the help of
00:07:19 JavaScript and our chosen library or
00:07:21 framework now there of course
00:07:23 instead in these requests and responses
00:07:25 we don't exchange any HTML code instead
00:07:29 we typically exchange data in the JSON
00:07:31 format that's a machine readable format
00:07:33 based on JavaScript in the end it looks
00:07:36 a bit like JavaScript objects and that
00:07:38 is perfect for exchanging data like for
00:07:41 example user data that was entered in
00:07:43 the client and needs to be sent to the
00:07:45 server or a list of products that we
00:07:47 might be storing on the server which we
00:07:49 want to send back to the client so this
00:07:51 is the big picture this is how these
00:07:53 pieces are connected and how they work
00:07:55 with Java now let's zoom in on the bakit
00:07:58 because there the question is how
00:08:00 exactly does the back and look like if
00:08:02 it does not send back HTML pages but
00:08:05 instead JSON data well keep in mind we
00:08:08 get these decoupled ends and they offer

00:08:10 we actually need a back-end which is an
00:08:12 API which simply means an interface a
00:08:16 web server which we can send requests to
00:08:20 to trigger different actions on this
00:08:23 back and web server and we can build
00:08:25 such an API in two different ways well
00:08:29 it were at least there of two very
00:08:30 popular ways of building that these days
00:08:33 approach number one is that we built a
00:08:35 restful api rest stands for
00:08:38 representational state transfer and i
00:08:41 got a full series on this channel where
00:08:43 i built a rest api with no trace and
00:08:46 MongoDB from scratch the alternative to
00:08:49 building a REST API is to build a graph
00:08:51 QL API now the difference is here can be
00:08:56 viewed in a separate video which I also
00:08:58 released and which is linked below this
00:08:59 video as well but the main difference is
00:09:01 that for a REST API we provide multiple
00:09:04 entry points so called endpoints which
00:09:07 are made up of different URLs different
00:09:10 paths on our domain where our web server
00:09:14 runs and HTTP words which are used for
00:09:17 the requests that are sent to these URLs
00:09:20 so that you could send a post request to
00:09:22 slash product to for example trigger a
00:09:25 create new product action or a get
00:09:28 request to slash products to return a
00:09:31 list of products and it's up to you the
00:09:34 creator of the API which
00:09:36 and points which combinations of URLs
00:09:39 and HTTP words you want to support for a
00:09:42 graph you LAPI it's not the word path
00:09:45 combination that matters instead you
00:09:48 have exactly one path one URL and one
00:09:51 HTTP word post typically which accepts
00:09:55 requests but since you accept the post
00:09:58 request this post request body then
00:10:02 contains a query it contains a query
00:10:05 written in a standardized query language
00:10:07 graph QL which can be parsed and
00:10:10 understood by your web server to then do
00:10:13 different actions based on the query you
00:10:16 wrote now just as in the rest case it's
00:10:18 of course up to you the developer of the
00:10:20 API to decide which kind of careers you
00:10:23 want to support you don't expose your
00:10:25 full database through this graph QL API
00:10:29 to the front-end instead you then run
00:10:31 logic on the web server and then you
00:10:33 might communicate with your database
00:10:35 there do anything else or send back an
00:10:37 error if you don't support this kind of
00:10:40 query so that's the difference a query
00:10:43 which we receive on the backend where is
00:10:45 this different URL HTTP web combinations
00:10:48 that trigger different actions on the
00:10:50 backend in both cases we execute code on
00:10:53 the server when a request reaches our
00:10:56 server and therefore this back-end is
00:10:58 detached from the front end it just
00:11:01 exposes its endpoints or its single
00:11:04 endpoint and to supported queries and
00:11:05 then any client can be connected not
00:11:09 just our signal to each application but
00:11:11 a mobile app could be connected to the
00:11:13 same API as well because this back-end
00:11:16 in the end then does not care about the
00:11:18 exact client that talks to it so now
00:11:21 that we know how it looks like how it
00:11:23 works technically the questioners why
00:11:26 would we use the myrn the mean or the
00:11:28 mavin stack well one big advantage is
00:11:31 the separation of concerns we have a
00:11:33 separate front-end and a separate back
00:11:36 end and therefore if we're working in a
00:11:38 team parts of our team can focus on the
00:11:40 front-end our parts can focus on the
00:11:42 backend and of course that is possible
00:11:44 in a vertex tax as well but here it's
00:11:47 particularly easy because we have that
00:11:49 strong cept
00:11:50 raishin between these two ends in
00:11:52 addition we use technologies that allow
00:11:54 us to build a powerful front and if you
00:11:57 want to call it like this with that I
00:11:59 really just mean that we build a front
00:12:01 end which is a single page application
00:12:02 which gives us this mobile app like
00:12:05 experience offers a great user
00:12:07 experience updates instantly and
00:12:09 therefore in general tends to well just
00:12:12 feel good to our users of course
00:12:15 if done right for the back and we have
00:12:18 the advantage that it's really flexible
00:12:20 since it's an API which as I explained
00:12:22 does not care about the client at all
00:12:25 you can connect any client to it you can
00:12:28 send requests to the right endpoints or

00:12:31 with the right query command queue this
00:12:33 API from any client could be your single
00:12:36 page application built with react or
00:12:38 angular or view but it could also be a
00:12:41 mobile app built with any technology
00:12:43 dear it could be anything it could be
00:12:45 another server talking to your server
00:12:48 even if you need a debt so you got a
00:12:50 really flexible and reusable API there
00:12:53 well in last but not least this entire
00:12:55 stack when using MongoDB Note Express
00:12:58 and such a framework is made up of high
00:13:01 performance technologies now that's a
00:13:03 difficult turn though because you
00:13:05 actually can build any kind of web
00:13:08 application with any kind of text stack
00:13:10 in a good performant or in a bad way if
00:13:13 you're doing it right or wrong and so
00:13:16 therefore it would be wrong to say that
00:13:18 you couldn't use other technologies and
00:13:20 achieve the same or better results it's
00:13:23 just that for these technologies we also
00:13:25 got a lot of resources to learn them we
00:13:28 also get a lot of patterns which we can
00:13:29 follow that typically result in good
00:13:32 performance and in well-written code and
00:13:35 they offer I'd say it's particularly
00:13:37 easy to use these technologies and build
00:13:40 good applications with them but as
00:13:42 always with programming you can
00:13:44 definitely also mess up things if you
00:13:46 want to or if you're not careful now
00:13:49 that we know how these stacks work and
00:13:51 why we in general might want to use one
00:13:53 of these stacks the question is which
00:13:55 one is the best one we have to mean the
00:13:58 myrn into mavin stack which one should
00:14:00 you use I'd say at this point it's time
00:14:03 for
00:14:04 really detailed analysis so let's have a
00:14:06 look at what's different the mean stack
00:14:09 uses angular the myrn stick uses react
00:14:12 and the mavin stack uses view what does
00:14:15 this tell us it tells that the choice
00:14:18 about which stack you want to use only
00:14:21 depends on the front-end framework or
00:14:24 library you want to use and therefore
00:14:26 the mean stack is best if you prefer to
00:14:29 work with angular the myrn stack
00:14:31 surprise is best if you prefer to work
00:14:34 with react and now when what you think
00:14:36 is the mavin stack the best one indeed
00:14:39 and I know this comes as a surprise it's
00:14:42 best if you want to work with view so it
00:14:45 all comes down to the question which of
00:14:47 these choices angular where is this
00:14:50 react versus view is the best one and
00:14:53 here the answer in the end just is it
00:14:56 really does not matter or to be precise
00:14:58 it comes down to personal preferences
00:15:01 you can build any kind of web app with
00:15:04 any of these technologies there is no
00:15:06 best or worst one there are strong
00:15:09 opinions in the community some people
00:15:11 love angular hate rest
00:15:13 some people love react and hate the rest
00:15:17 and the same is true for view now I
00:15:19 don't feel as strongly about this as
00:15:21 other people I like all three options
00:15:23 but in the end this is up to you and I
00:15:26 do have a complete article and video
00:15:27 where I compare these free alternatives
00:15:30 so that might be interesting to you if
00:15:32 you're not sure with which of these
00:15:34 technologies you want to get started or
00:15:36 want to hear my opinion on that but in
00:15:39 the end it really just comes down to
00:15:41 which front-end technology you want to
00:15:43 use and Dad in the end as I just
00:15:45 mentioned comes down to personal
00:15:46 preferences there always one other thing
00:15:50 that really matters to you and that is
00:15:52 the ML RP stack never heard of that well
00:15:56 I just invented it or at least I think I
00:15:58 did well this could be the acronym for
00:16:01 my sequel which all is a database
00:16:04 solution laravel which is a PHP
00:16:07 framework therefore PHP which is a
00:16:10 server-side programming language and
00:16:11 then all the react or of course if you
00:16:14 wanted to angular or view instead and
00:16:17 what I really want to
00:16:18 say with this slide here is just ad
00:16:20 whilst the mean stack of the myrn stack
00:16:23 and also a bit the mavin stack are
00:16:25 popular it's not like you have to use
00:16:28 these technologies you can combine all
00:16:31 these technologies that are out there in
00:16:33 any way you want you can also build an
00:16:36 API with PHP and level a rest or a graph

00:16:39 QL API you can then connect that to your
00:16:42 react or angular front-end because you
00:16:45 just sent the same kind of requests this
00:16:48 API does not care about your client and
00:16:50 your client does not care about the
00:16:52 language or the technologies you used
00:16:54 for creating your API so you're really
00:16:56 flexible there and of course instead of
00:16:58 MongoDB you could also be using my
00:17:00 sequel because both with nodejs and
00:17:03 Express as well as with PHP or level or
00:17:06 any other server-side programming
00:17:08 language out there you can talk to any
00:17:11 database solution not just to MongoDB or
00:17:14 just to my sequel just because certain
00:17:17 combinations are are popular or you find
00:17:20 a lot of tutorials on them does not mean
00:17:22 that you're restricted to them and I I
00:17:26 feel like a lot of people think that you
00:17:29 can only use MongoDB with note you can
00:17:32 only use a note Express API with react
00:17:35 or with angular and that is simply wrong
00:17:37 you can build your back-end with any
00:17:40 tech stack of your choice and connect it
00:17:43 to any front-end you're not limited
00:17:46 there so definitely think outside of the
00:17:48 box there take the existing stacks or
00:17:51 the popular stacks explore if they are
00:17:54 good for you if they make sense for your
00:17:56 next project if you like the
00:17:58 technologies but if they don't also
00:18:00 consider alternatives like this one so
00:18:04 that's it for this video I hope it was
00:18:05 helpful I hope you now have a good
00:18:07 understanding of what the mean stack
00:18:09 timer in seconds are on are all about
00:18:10 what your options are when it comes to
00:18:13 them why they are popular and why you
00:18:15 still might also want to consider some
00:18:18 alternatives or at least you should be
00:18:21 aware that there are alternatives and
00:18:23 that you're not forced to sticking to
00:18:25 these stacks if you liked the video
00:18:28 leave a like subscribe to channel and I
00:18:30 hopefully see
00:18:31 our videos to buy

You may also like