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 combinations of technology.
Introduction
Let’s first discuss exactly what MEAN is, and how we can create a MEAN application. MEAN is essentially a combination 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 that 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 the 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:
- DataBase
- Server Side Technology (.net, Java, Node)
- 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
- 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 a different server.
- 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 people are contributing in JavaScript.
- Scalability All technology used in MEAN stack is open source, and many cloud providers give free space to deploy your app. Heroku is one of 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.
- IDE There are many editors that support the development using MEAN stack. VS Code/WebStorm are few examples. They are very lightweight as compared to VS studio/ eclipse or other development tools.
- 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.
- Angular is one of the best and complete frameworks for UI development. We get the advantage of using Angular framework. We can choose an AngularJs or Angular framework.
Here is a short explanation on how to get started with each framework:
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:
- 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 to download one for your OS make sure to use community edition as it is free.
- 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”.
- Now it has some binaries available, you can say application, as you can see in the Type column.
- The most important binaries are mongod.exe and mongo.exe.
- mongod.exe is your actual database, if you click on it will run DataBase locally for you, just wait as we need to do one more thing till we can use MongoDB.
- Now create a folder inside C: drive “data/DB”, this the path where all files created by MongoDB
- Now go ahead and click on mongod.exe, you will see a message “waiting for connections”, at the end of the line in cmd.
- Now click on mongo.exe, once this is opened, we will see “(1 connection now open)”, in the mongod.exe tab.
- 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 the mongo.exe shell, we have opened.
- db: this command shows the current db which is being used, you will get “test” when you fire this command.
- show dbs: it will show all db available.
- use “DataBaseName”: this will create a new database with name passed, or it will use the existing db if exists.
- once you are using the database, which you have selected you can fire below command to insert and select the data.
- 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.
- db[“myCollection”].find(): this will give all records present in myCollection, which is your table name.
You can refer to the above image for reference, or for a 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 the upcoming version of JavaScript.
Let’s go ahead and install and run our first Node app:
- Click here to visit and download the latest stable version on node, always prefer LTS for production and Current for development purposes.
- 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.
- Once we install node, NPM is automatically installed with node, so we don’t need to install it separately.
- We can use many editors, we will be using VS Code.
- 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.
- 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
- Node understands js files, so we can write and run all javascripts code using node.
- We will add 2 numbers and try to run the same.
function add(number1,number2){
return number1+ number2;
}console.log(add(1,2)); - 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.
- 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.
- 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.
- You can see all list of APIs from here. it also has examples with every API.
- 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!’);
}); - use the same command to run it again, a new file with message.txt will be created.
- 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 the command prompt and run the same, it will ask some questions, the first question is the name of the app, you can enter whatever you want, just remember it takes all small letters as a 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 the 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 its own framework to create a web application.
We can create Web Application and Web APIs, there are many combinations 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. To get 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 a few years ago!
You can mail me on santosh.yadav198613@gmail.com, in case you have any suggestion and improvement areas.
References:
