Confused about what combination of technologies used to make your next web app?
This article makes the case for one very popular stack called MERN (MongoDB, Express, React and Node). We’ll also look at a couple of considerations for making your choice of stack.
The “Why” and “What” of MERN
A “stack” is simply a combination of front and backend technologies used to make an app. One thing that’s affected stack choices has been the growing popularity of
Single Page Applications (SPAs). A SPA avoids the need to refresh the page every time new content is displayed. In addition, but unrelated to SPAs, NoSQL databases such as MongoDB have become very popular. In the past few years, MERN is a common stack choice especially for building smaller apps.
Here is a bit more about each of the components of the MERN stack:
React
React anchors the MERN stack and it is the component that renders the view of your app. Although sometimes mistaken for a framework, it is really a library meaning it does not dictate a pattern, but simply offers pieces of utility you can pick and choose from.
React stands out from its declarative nature of updating views. So instead of the old jQuery way of doing things using some DOM manipulation, you don’t have to do anything. React will figure out what the new view should look like and just applies the changes and voila!
React accomplishes this by creating a super-fast virtual DOM which React can update very quickly. Once the virtual DOM is updated, then React can update the traditional DOM all at once. React can “react” very quickly!
Node.js
Very simply, Node.js is JavaScript(JS) outside of a browser. Node creates a runtime environment where JavaScript code can be run. Before Node, JS was strictly a front-end technology that ran in the browser. With Node, JS can now also run behind the scenes in the backend. It's like JS has “grown up”.
It’s All About the Events in Node.js
JavaScript is single-threaded by itself, meaning it can do only one thing at a time. However, when we add Node to the mix, another dimension is added to the code which will allow for more than one thing to be done at a time.
This semblance of multi-tasking is done through callback and the event-loop. Think of the event-loop as a “waiting room” for events. So if we write a line of code to open a file, we’ll give that code a callback telling it what to do once the results come back. While waiting for the file to come in, we run other tasks. In the meantime, Node found the file and put it in the “waiting room”. When “set off” the call back will grab that file from the “waiting room” and bring it out to do whatever it was supposed to do, e.g. display, update, etc.
Express All the Way
Node is just the environment that can run Javascript. If you wanted to write a full-fledged web server in Node, it would be a lot of code. Express simplifies that task by providing a framework for the job. Express also lets you write things like routes and specifications of what ot do when a HTTP request matching a certain pattern comes in. Express can also set response codes, set cookies, send headers and more.
MongoDB*
MongoDB is the database used in the MERN stack. It is characterized as a noSQL document oriented database with a flexible schema.
What is NoSQL?
You are probably used to the usual databases with tables consisting of rows and columns. What noSQL MongoDB does is take what would be a row in the traditional database and put that row into a separate document or object. Then, take a pile of those documents and put them into a “collection”.
The best thing about MongoDB is its compatibility with the rest of the MERN stack. That is: React is based on JavaScript, Node.js is based on JavaScript, Express is based on JavaScript. Well, guess what? MongoDB’s language is also JavaScript. MongoDB uses JSON(JavaScript Object Notation) to interchange data with the rest of the stack. It’s so nice when we all speak the same language!
Are you Ready?
If you’re like me, you want to learn it all-- not just front OR backend, but all of it . Getting down with the MERN stack is a great way to go. Not only can you use just one basic language through all the stacks -- JavaScript -- but each technology is relatively easier to learn in that they come from the same “family.” For those of you looking for a resource to start learning, try Free Code Camp. The name says it all!
Keep on coding out your dreams!
*I always have to know where names of technologies come from. So where does the word “mongo” come from? “Mongo” is just a piece of the word “humongous”
Top comments (0)