MEAN Stack Architecture and Best Practices: AngularJS, NodeJS, ExpressJS, and MongoDB

MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications. MEAN is very simple and easy to use, single language for both back end and front end while in other technologies, there are different languages used for front and back end. This not mean MEAN dominates other languages. We need to think about the use cases. Mean is open source technology and hence plenty of frameworks or custom stack already built out on top of it which we can use easily. In this blog, We will go through the use cases and best practice of developing an application in MEAN while configuration with different database architecture. In order to begin, let’s discuss the basic architecture of a web application.

Basic Architecture

From the figure itself, We can think the overall request-response architecture and finally what we see in the browser. Typically, We divide application into two separate servers. Angular serves in one port while node serves in other port. Now let go little deep in Angular first.

Angular

Angular (JS, 2, 4, 6 and now 7) is a SPA framework which helps us and ease the developing of application which is very difficult to write in native JS. We will not go deep down but will see the best approach of working. If you work on Angular or any front-end application, you will definetly know how request and response works asynchronously. Angular creates an AJAX request and just update the particular view rather than to upload a new page for updating that particular piece of view. Now, what happens in AJAX request is a simple browser creates an HTTP request to a server and server sends back with some response. Browser running on => localhost:4200 (https://xyzangular.com) Server running on => localhost:3000 (https://xyznode.com) In this process, various things happen with the browser. Browser does not have the right to request a resource which is cross domain. Now, let see how it resolve.

• A handshake Option request is sent before the actual call.
• If the server allows the request then only it is accessible.
• Most time sever sets some custom header which needs to send while requesting any resource.
• Server can be configured to allow some custom origin.

Now, What new angular version provides is Proxy. A proxy is a piece of software which is in between your JavaScript/Angular app doing the Ajax request and your backend API. This is the choice to go in a classic app. What the dev-server proxy does is to simply take the browser request at the same domain+port where you frontend application runs and then forwards that request to your backend API server. CORS is a browser security issue and does not apply when doing “backend to backend” communication as is the case with a proxy in between. To set the Proxy in Angular, create a proxy.config.js in root and add the following line. You can alse set it for socket connection.

{ "/api/*": { "target": "http://localhost:3000", "secure": false, "logLevel": "debug", "changeOrigin": true } }

Coming to Back-end, Let’s see the different DB architecture.

SQL & NoSQL

Nowadays, NoSQL is very in-demand for its ease in use. Also, lots of people say ones who know JS can easily adapt Mongo. But the real scenario is very very different. Mongo works well with JSON. Again, It’s true until your application and relationship are too small. Once your DB grows up, you will fall in trouble. In my 3 years of experience, I always have seen the people just sent the whole document and front-end guy just manipulating the essential data. If you are developing an application and you definitely know the use cases of the application. In mongo, It’s very difficult to understand the relationship between the different data. It’s hard for any type of transactions as well. Most people do not know how to normalize it because there is very less document out there at the time. Now, Come to Postgres which is built in top of SQL and Mongo. It uses and supports both SQL as well as NoSQL based structure. It supports JSON as well and using the BookShelf framework, We can ease our work without doing any native code. It supports relation, transaction out of the box without compromising any type of security too.

NodeJS

Node provides a runtime environment built on google v8 engine which is very fast. A simple example of this engine can be seen in the browser console. It’s built on a single thread and worked as a event-based system. When we say, Event-based System that means every request is termed as the event and handled by some callback function. A most basic example you can see in the browser is button click. Running on single thread make it super fast as it does not need to handle and share any thread. Now, What happens when you want to do some task which takes a very long time. Suppose, you need to send 100 emails or process some 100 type of images. In your development phase, you definitely heard or see this type of issue right, RTO ( Request timeout).

What is RTO?

RTO stands for Request timeout which means the time of the request is over and the server automatically cancels the request and returns back with this error. To handle this type of issue, A superb technology which is built out and the name comes from the favorite story which we all know is ‘Rabbit MQ’.

Many libraries like Redis Queue supports this and many operating systems already uses it. It is built on top of the Queue. Every request is added on the queue and once it finished, It gets rid out. That means, first in first out (FIFO). We can easily use a third party library where we can assign a JOB. This job will run in the background and will not affect the main thread. This makes our task easier rather to handle the time etc. That’s it.

In our next blog, We will see various type of backend authentication and how to ensure our application is secure. Thank you!.