MEAN: Everything You Need to Know About the Full-Stack Web Framework.

25.05.2017

MEAN is one of the top full-stack web frameworks that everyone should be learning to utilize. In this post we’ll cover exactly what MEAN is, and why it should be our choice for creating applications. We’ll also each component which makes the MEAN technology so powerful and one of the widely-used combination of technology.



Introduction

Let's first discuss exactly what MEAN is, and how we can create a MEAN application. MEAN is essentially acombination of 4 popular application development frameworks or tools available. We will cover each framework in detail below.

MEAN stands for:

M: MongoDB, an Open source document DB which allows you to save and retrieve documents in the form of json data.
E: Express, an open source web framework for creating API's and Web Application with Node.
A: Angular, an open source framework developed by Google Team for web applications.
N: Node, another open source server side technology. Node can be used to write code using java-script to write server side code to interact with your back-end.

All above frameworks are open source, and use JavaScript, which makes the total combination far more powerful as an application. To create a fully-fledged interactive web application, it requires 3 components:
  1. DataBase
  2. Server Side Technology (.net, Java, Node)
  3. UI (HTML)
If all of these criteria are covered, we can create an application for the web. The best thing here is that you don't need to learn any other language apart from JavaScript!
 

Advantages of Using MEAN

  1. Platform Independent

    For a long period of time, the platform which we chose for our application was more of a constraint as most of the technologies are dependent on some platforms, like .net needs IIS to run, and java needs tomcat. However, MEAN applications can be deployed on any server of your choice. We don’t need different configurations on different server.
     
  2. Community Support

    MEAN technology also has one of the most supportive communities. JavaScript is always the first choice for open source contributors, and people still love JavaScript. If we refer GitHub data, most of the people are contributing in JavaScript.
     
  3. Scalability

     All technology used in MEAN stack is open source, and many cloud providers give free space to deploy your app. Heroku is one the providers. Even if we go for Azure/AWS or Google cloud there will be no licensing cost for OS/SQL as we can host it on linux box.
     
  4. IDE

    There are many editors which support the development using MEAN statk. VS Code/WebStorm are few examples. They are very light weight as compared to VS studio/ eclipse or other development tools.
     
  5. JavaScript as Common Language 

    Previously to MEAN, our code used to be in multiple languages, like .Net + Angular/Java + Angular or PHP + angular.  Now with MEAN, we can write server and client code in one common language which is javascript.
     
  6. Angular 

    Angular is one the best and complete framework for UI development. We get the advantage of using angular framework. We can choose AngularJs or Angular framework.


Here is a short explanation on how to get started with each framework:
  1. MongoDB:

MongoDB is an open source document DB. It is different from traditional relational DB like SQL or ORACLE.  as it stores data in the form of JSON, which is the format easily recognizable by JavaScript, making it the perfect for the MEAN stack.
Let's see how to install Mongo on Windows:
  1. Click here to go to download page; you can download the version which fits your requirement. It also has the setup files for other OS like Linux and OSX, feel free todownload one for your OS make sure to use community edition as it is free.
  2. Once setup is downloaded, follow the steps to complete the setup, it is very easy, once it is installed mongo will be available at "C:\Program Files\MongoDB\Server\3.2\bin".
  3. Now it has some binaries available, you can say application, as you can see in Type column.
  4. The most important binaries are mongod.exe and mongo.exe.
    1. mongod.exe is your actual database, if you click on it will run DataBase locally for you, just wait as we need do one more thing till we can use mongoDB.
  5. Now create a folder inside C: drive "data/db", this the path where all files created by MongoDB
  6. Now go ahead and click on mongod.exe, you will see a message "waiting for connections", at the end of line in cmd.
  7. Now click on mongo.exe, once this is opened, we will see "(1 connection now open)", in mongod.exe tab.
    1. mongo.exe is the client.
We've completed the installation!

One problem you could encounter here is if you have used SQL Server, as the client works on cmd command. We will cover some basic commands below. If you are not good with remembering commands, don't worry there are many GUI clients available as well, robomongo being one of them. You can download robomongo from here.

Let's see some basic commands, which can be fired from mongo.exe shell, we have opened.
  1. db: this command shows the current db which is being used, you will get "test" when you fire this command.
  2. show dbs: it will show all db available.
  3. use "DataBaseName": this will create a new database with name passed, or it will use the existing db if exists.
  4. once you are using the database, which you have selected you can fire below command to insert and select the data.
  5. db.myCollection.insert: this command will create a table named myCollection, or insert the data into myCollection if it already exists. you can pass json data.
  6. db["myCollection"].find(): this will give all records present in myCollection, which is your table name.


You can refer the above image for reference, or for complete list of commands click here.

If you are using robomongo, I would still advise you to read these commands at least once, as you will still find them being used in mongoose as well.

Mongoose: a microORM (Object Relation Mapping) framework for mongoDB. We will be using it so don't worry about it as of now.

The next framework in Express, but before we cover it, we will see what is node as we need to have idea of NPM and bower.

2. Node:

Node.js is a java-script runtime built on V8 engine, created by google for chrome. It also has NPM (Node Package Manager) one of the biggest and largest eco-systems for node packages.

Node is designed to build scalable network application, you can create a local server, use any OS, any server to deploy your application, making your application compatible for all OS/Server. Node.js also uses most of the features from es6 or ECMAScript 2015 which is the official name for upcoming version of JavaScript.

Let's go ahead and install and run our first Node app.
  1. Click here to visit and download the latest stable version on node, always prefer LTS for production and Current for development purpose.
  2. We can write and run JavaScript using node, the advantage we get is we can compile the JavaScript, and check compile time error if any like syntax errors. Which was not possible earlier.
  3. Once we install node, NPM is automatically installed with node, so we don't need to install it separately.
  4. We can use many editors, we will be using VS Code.
  5. Create a new folder as NodeApp anywhere as per your wish, I will suggest not to use C:\ drive if possible, as we may get rights issue.
  6. Now open VS Code and click on Open Folder from File menu. Now we are into our App folder, now click on New File and name it as myFirstNode.js
  7. Node understands js files, so we can write and run all javascripts code using node.
  8. We will add 2 numbers and try to run the same.
    function add(number1,number2){
    return number1+ number2;
    }console.log(add(1,2));
  9. To run the code, you can go to the App path in cmd or open View -> Integrated Terminal from VS Code. and type node myFirstNode.
  10. We will be able to see the result on command prompt. Node also offers some API, which can be used, let’s use File System API.
  11. To use any node API, we need to require it first, the syntax is var _varname = require('node_api'), where _varname is giving access to all methods within node_api, means you are creating an object and can use it.
  12. You can see all list of APIs from here. it also has examples with every API.
  13. To create a file using File System API, we can use below code.                                      var fs = require('fs');
    fs.writeFile('message.txt', 'Hello Node.js', (err) => {
    if (err) throw err;
    console.log('The file has been saved!');
    });
  14. use the same command to run it again, a new file with message.txt will be created.
  15. Simple right, you just created a file using Javascript, we can also download external packages as well.

    Let’s see how to use NPM commands to download the external packages.

    To create a node application, the first command we need to run is npm init, let's go to command prompt and run the same, it will ask some questions, the first question is name of the app, you can enter whatever you want, just remember it takes all small letters as valid name, for rest you can just accept the default values by pressing enter.

    Once we've done this, we will get a file called package.json, this file is used to save the reference to the packages.Let's install first package, which is going to be express. run npm install express --save

     --save will mark the package as production dependency, next run npm install mongoose --save-dev to mark it as dev dependencies.Once these 2 packages are installed, we will see the package.json file modified to have these 2 entries.Also a new folder node_modules is created, where all modules downloaded using npm is saved.If we want to uninstall any package, just run npm uninstall "package_name". To search any package, we can refer to this link.

3. Express:

The next framework is Express. We discussed DB and server side technology, but a web application is incomplete without a web framework. For a long-time java and .net have been there and each has their own framework to create a web application.
We can create Web Application and Web APIs, there are many combination of technologies used with express to achieve it.

We can create our first app using the below code:

var express = require('express')
var app = express()
 
app.get('/', function (req, res) {
  res.send('Hello World!')
})
 
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

We can create a file named and server.js, and move this code there, to run simply type node
server.js

4. Angular

The last piece in these technologies is Angular, we can use any version of Angular as per our choice. For Getting started with angular you can refer my blog on Getting started with Angular.
 

Conclusion:

In this blog, we've covered the 4 frameworks used in MEAN, and what makes it so powerful. 

The biggest advantage we are getting now is that we can create a full end to end application using JavaScript, something which was not possible few years ago!
In next post, we will create our first application using these technologies, to see how it works.

You can mail me on santosh.yadav198613@gmail.com, in case you have any suggestion and improvement areas.
 
<div class="well center" style="font-size:20px;">Join our <strong>freelancer community</strong> today! Create your freelance profile in just <strong>2 minutes</strong>.&nbsp;&nbsp; <a class="btn btn-info" href="/registration?utm_source=blog&utm_campaign=CTA&utm_medium=banner&utm_content=English" onclick="ga('send','event', 'CTA', 'RegLinkKlickAusContent', 'Content');" style="color:#FFF; font-size:20px"><strong>Sign up for free</strong></a></div>



References: 
You can refer below resources:
https://nodejs.org/api/assert.html
http://expressjs.com/
http://mongoosejs.com/
https://www.mongodb.com/
Create your freelance profile and land new projects without any fees!

 Sign up now

More articles

  • How to travel and protect your data: 5 Security Tips

    Being a travelling freelancer can be great. You get to experience new cultures, dip into the international freelancing community and serve clients from all over the globe. However, protecting your data is an essential part of doing all that carefree. There is nothing worse than losing all of your hard work, getting your gadgets stolen or your email compromised.
  • Alternative Financing Methods – Invoice Factoring Pros and Cons

    Freelancers, especially at the beginning of their career, are very reliant on cash flow – how much money comes in and how quickly it does so. This is a factor that will make or break businesses. One of the ways freelancers can speed up their cash flow is invoice factoring.
  • Writing an Invoice for Freelancers – Tips, Tricks & Templates

    What would a freelancer do without invoices? Absolutely nothing! Learning how to write a special invoice is a crucial skill for any freelancer. Not receiving the correct amount of payment or not receiving it on time is a problem many freelancers face. A good invoice is often the key to solving these problems.

Comments

  • Commented by Name Name on 26.05.2017 at 13:31 h

    comments are made fo comments

Comment this article