Coding

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