- 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