MEAN Stack — Zero to One in 10 minutes

Wondering about learning a new javascript framework? Why? Ohh because someone told you it’s a new future of development. Yes, that someone is correct, the web frameworks have become so strong, you can create websites, web applications, progressive web applications, and also android, ios native applications with these javascript frameworks. And there are a lot of frameworks and tech stacks in web-like, MERN, MEAN, MEVN, etc. Don’t worry it's just the combination of various technologies.

I would be guiding you through one of the stacks used for rapid and reliable development. I am about to start learning journey to MEAN Stack. I will try to keep it as simple as possible and fun to learn. So Let’s get started?

What is this MEAN?

In simple words, MEAN is an abbreviation for?Mongo?Express?Angular?And?Nodejs. These are the libraries and technologies used together to create modern web applications.

Why is everyone going crazy about the JAVAScript framework?

So the reason is the web has evolved a lot, web technologies are not limited to just websites, it has become web applications. With the help of techniques of web-like

SPA-?Single Page Application( Website which doesn't load every time on navigation)

PWA- Progressive Web Applications ( Websites that can be installed on your systems)

Now your browser works as an operating system on its own.

Cross-Platform Support

Also with the help of this web technology you are not just limited to browsers, you can create cross-platform applications i.e. REACT NATIVE, NATIVE SCRIPT, IONIC are a few of the libraries which help you convert your javascript into an executable Android and Ios Application. So it’s like code once and deploy it everywhere.

A lot of libraries and community support

And Offcourse there are a lot of libraries, I literally mean a lot,

And while you are reading this article, some developers might have launched a new javascript framework.

Ok, I think you are convinced?

So with MEAN stack, you can create a single-page application. Let’s see how does this SPA I was talking about actually work

A single-page application (SPA) is a website design approach where each new page’s content is served not from loading new HTML pages but generated dynamically through JavaScript’s ability to manipulate the DOM elements on the existing page itself. ( I copied it from some website) Wait I will show you how does that work.

Example of A Traditional Website

Visit php.net

In the above gif you can see that when I visit a new page, the whole website gets loaded again. Causing additional API calls.

Example of Single Page Application

angular.io

So if you see the above gif you can see, a single page application is not loaded on every page change. It gets only the data that is required for that page.

Okay so now you know the difference between a traditional and a single-page application. But you might be thinking what’s the big deal.

Because traditional applications eat up your server resources while SPA’s use your client's resources and optimized server calls minimizing your server cost.

So how does this works behind the scene?

So when you visit any single page application (let say angular.io) it loads all the resources at first load, all the layouts, pages. So when you change a page, instead of sending a request to the server, it calculates it and displays it, and it required any data for that page it requests only that through XHR request.

Simple enough? right.

What you need a diagram, cool. See this.

Okay, I guess it's enough for understanding what is going around on the web.

STRUCTURE OF A WEB APPLICATION

In Order to develop an application, you will always need

• Client- It can be a browser, a phone, android, ios, or a tv os.
• Server- Think server as your mom, whatever you ask for she gives you. Don’t worry I will explain it to you in brief.
• Protocol — Medium through which client and server get connected, in most of the cases it is HTTP.
• Database- The place where your actual data will be stored.

MEAN is a combination of multiple technologies, used together to create awesome web applications.

MongoDB ExpressJs Angular Node

So we will see how does this works.

Simple Explanation -

Let’s suppose you had developed a social networking site named “MEANstagram”, similar to Instagram. So how does the app will work?

When a user opens up a browser or a mobile application and types meanstagram.com behind the scenes the browser is making a request to the server, in this case, its a nodeJs environment server, now that NodeJS environment server will parse ( understand in simple words) your request and forward it to app logic, where all your app logic is defined, like getting all the post you had liked or maybe your profile detail, now the app logic will check for authorization and get your data from the mongo database, once it has all the data requested by you it will return the data to node js which will return the data to your browser and you will see all your pictures and comments, and likes and everything you had requested for. Simple enough right?

Now let’s understand all the components in a bit more detail.

Mongo (Database)?— Mongo is a NoSQL database meaning the data is stored in any form there is no relation between two individual data. Data is saved in JSON format and it doesn’t necessarily have a defined structure.?See the simplest way on earth to use mongo DB :), Not kidding.

Express ( The Logic)?— Express js is a library of node js, in simple words that means someone has written some code in NodeJs to perform certain actions, and now you don’t have to write that, simple enough?.?Let’s create a simple app with it, don’t worry I won’t write too much code, I am too lazy to do that.

Angular?(Client) — Angular is a frontend web framework, which is used to create a single page application, that's what everyone says about him. All the display, UI, logic you will write in angular, all the black and blue and green background you will be writing in angular. To Write angular code you will need to know the basics of

• HTML
• CSS/SCSS
• TypeScript ( Don’t get scared with the name, its the javascript but its a little strict about its syntax)
• And of course a little bit of your interest.

Let’s create a basic angular application then

NodeJs (The Environment)?— Initially javascript was meant to be only for browsers, a simple real-time example would suppose you have a fish that can only survive in the river because there is water, but then someone thought we can put the fish in a bowl because its dependency is with water. I think you got the idea, javascript was only built for browsers but then Ryan Dahl thought why limit it for the only browser, so he created a javascript executable runtime with the help of chromes v8 engine and removed the dependency. So now Javascript can be run anywhere, on your phone, on servers, on your watch, on your laptop. So if you see out.

There is a lot of javascript out there.

Click here to get the code of the above tutorial.

So a quick recap, mean is a collection of technologies like mongo, express angular, and node to create awesome single-page applications, mean stack applications are fast, reliable, open-source, and now you know how to create an app so why not do it.?

Let me know?what you are building, maybe I can contribute something to your project too, who know we can make a billion-dollar application with mean :)

A bit about me, A coder by passion and a psychology student to be, You can connect me on?Linkedin?or Instagram, know more about?my work.

See you then.