If you’ve been in the learn-to-code world for a little while, you may have come across the terminology of a “tech stack.” They’re essentially combinations of tools that developers use for various projects.
There are all kinds of different stacks out there, and the right one for you depends on your goals. If you’re learning JavaScript, then of course you’ll specifically want a JavaScript stack.
But even among JS stacks, there are so many out there…all with their own capital-letter acronyms. Like — what is the MERN stack vs MEAN stack vs MEVN stack?!
In this guest post, Kolade Chris Kayode guides us through three of the most popular full stack JavaScript stacks and the tools they use.
Here’s Kolade!
Table of Contents
- What Is a ‘Stack’?
- What Is Full Stack JavaScript?
- 3 Most Popular JavaScript Stacks
- Why Learn a JS Stack?
- Choosing the Right JS Stack
- Next Steps After Learning a Stack
Disclosure: I’m a proud affiliate for some of the resources mentioned in this article. If you buy a product through my links on this page, I may get a small commission for referring you. Thanks!
What Is a ‘Stack’ in Tech/JavaScript?
What is a tech stack? From a web development perspective, a stack is the combination of tools a developer works with. Ideally, a developer’s stack is a combination of an operating system (OS), a programming language, a database, and a web server.
They are usually abbreviated since at least four different tools are involved. Some popular examples include:
- LAMP (Linux, Apache, MySQL, and PHP)
- WAMP (Windows, Apache, MySQL, and PHP)
- XAMP (Cross-platform, Apache, MySQL, and PHP),
WAMP and XAMP are popular in backend development with PHP and are widely used by WordPress developers to make WordPress run offline.
Start coding now
Stop waiting and start learning! Get my 10 tips on teaching yourself how to code.
JavaScript Stacks
In the context of JavaScript, a stack is the combination of a database, a JavaScript runtime framework, a frontend framework or library, and the JavaScript runtime itself.
Examples are:
- MERN (MongoDB, Express, React and Node JS)
- MEAN (MongoDB, Express, Angular and Node JS)
- MEVN (MongoDB, Express, Vue, and Node JS)
There are many other variations of JavaScript stacks. For example, Svelte is another JavaScript framework getting popular day by day in recent times and could also be combined with MongoDB, Express, and Node JS. Fastify is a framework that can be used instead of Express.
There’s also Deno, a JavaScript runtime that can be used in the place of Node. Released in 2018, it was created by Ryan Dahl, who also created Node. Deno has frameworks such as Oak, Opine, and Serverest, which could be used instead of Express or Fastify. It is just not common yet, as Deno is still new in the web development ecosystem.
☝️ Back to the table of contents
What Is Full Stack JavaScript?
Before we dive into more info on JavaScript stacks, themselves, let’s quickly review what JavaScript is and what it’s used for.
JavaScript is an interpreted programming language for adding functionalities to websites and web applications. It is designed to run in the browser but it can also run in the command line with Node JS and Deno JS.
A lot of beginners think JavaScript is the same as Java, but as Kyle Simpson joked in his book You Don’t Know JS, “JavaScript is as related to Java as carnival is to car.” They may sound alike, but they’re totally separate languages! 🎡 ≠ 🚗
At first, JavaScript was only used by a few people to do things like display alert popups on websites. Today, JavaScript is one of the most widely used programming languages for both frontend and backend development, making it a great full stack language.
According to the 2020 Stackoverflow Developer Survey, JavaScript is the most used programming language for a whopping 8th year in a row.
☝️ Back to the table of contents
3 Most Popular JavaScript Stacks
There are many stacks one could pick up and utilize in full stack JavaScript development, but in this article, we’ll be covering the three most popular ones: MERN, MEAN, and MEVN.
Beyond these three, any frontend JavaScript framework/library could replace React, Angular, or Vue. Svelte could combine with MongoDB, Express, and Node to make MESN, or Ember to make MEEN. You know the drill.
Since all three JS stacks share MongoDB, Express, and Node JS, let’s talk about each of those first before moving on to the frontend framework/library that sets each JS stack apart!
M = MongoDB
MongoDB is a NoSQL cross-platform and document-oriented database. Instead of storing data in an advanced Excel-like table, data is stored in a JSON-like document called BSON (Binary JSON), a superset of JSON. The difference between BSON and JSON is that BSON can accept extra data types such as dates and timestamps, which JSON can’t. Read about the extra data types BSON accepts here.
MongoDB is actually written in C++, but it provides a shell through which the user can carry out database operations such as creating, reading, querying, updating, and deleting, all in JavaScript. So with MongoDB, one is writing JavaScript through the Mongo Shell.
MongoDB has a very easy learning curve, especially when one knows JavaScript already. To start, you must first install MongoDB from the official website.
With MongoDB comes the Mongo Shell, a CLI (Command Line Interface) tool for interacting with documents in the database. In addition, there are GUI (Graphical User Interface) tools such as Mongo Compass and Robo 3T, with which users can interact with the database.
E = Express JS
Express is an open-source backend framework for Node JS. It is a popular go-to for web API development. Despite the fact that Fastify came around and was proven to be a few seconds faster, Express remains the de facto framework for Node JS.
It is easy to get started with and has a very easy learning curve because you are writing the same JavaScript with it. Today, Express is used by many popular companies such as IBM and PayPal.
N = Node JS
Node JS is an open-source and cross-platform JavaScript runtime that enables JavaScript to run in the command line instead of the browser. Built upon Chrome’s V8 engine, it is written in C, C++, and JavaScript. Take a look at Node as the JavaScript you can write in the Chrome developer tools console.
Founded in 2011, Node has quickly climbed up the ladder and is becoming the de facto server-side language for modern applications. Due to the fact that it does not run in the browser, the browser object model (BOM) and document object model (DOM) are not available in Node JS.
Node JS does not have a steep learning curve. Vanilla JavaScript is the prerequisite; once that is learned appropriately, getting familiar with Node JS is ridiculously easy.
With Node JS also comes Node Package Manager (NPM). NPM is a registry containing a lot of reusable JavaScript codes that can be used in JavaScript development instead of reinventing the wheel.
In the web development ecosystem, when Node JS comes into discussion, the server is what comes to everybody’s mind. However, Node can be used for several other purposes such as real-time chat applications, web-based games, streaming, and even desktop applications. The most popular code editor, Visual Studio Code, is a Node App!
The MERN Stack
The MERN stack comprises 4 technologies: MongoDB, Express, React, and Node JS. Since MongoDB, Express, and Node have all been discussed as extensively as possible in this article, I will be talking about React here to round out this stack.
React is an open-source front-end JavaScript library for making user interfaces (UIs). It was released by Facebook in 2011. React quickly became very popular in the web development community because it is quite easy to get started with compared to its then competitor, Angular. The StackOverflow Developer Survey of 2020 made it clear that React is the most used JavaScript library in the world after jQuery.
React forms a powerful combination with MongoDB, Express, and Node JS to create fast and scalable web applications.
React does not meet the full requirements of a framework because it is only concerned about rendering the state of an application to the DOM (through virtual DOM). Due to this, it requires additional libraries for routing and a lot of other frontend functionalities. These additional libraries are often found in the NPM registry.
The UIs built with React and other libraries installed from NPM are connected to the Node and Express server by making API requests.
Apart from React for web apps, a variation known as React Native exists for making cross-platform mobile apps. React Native is so powerful that you can write the same code for both Android and iOS with it, so you don’t have to learn separate languages or frameworks for them. How awesome is that?
React has a drawback when it comes to SEO. (But it’s not alone: Angular and Vue JS have the same issue.) All the components are rendered in a single div element, so all web crawlers see is that single div, which is bad for SEO. There are some workarounds available to fix the issue, of which Next JS and Gatsby are the most popular around.
Start coding now
Stop waiting and start learning! Get my 10 tips on teaching yourself how to code.
The MEAN Stack
Just like the MERN stack, MEAN is a combination of the three server-related tools – MongoDB, Express, and Node — with Angular filling in the A.
Angular is an open-source front-end framework currently being maintained by Google. It combines the powerful features of TypeScript, a superset of JavaScript, and HTML in making Single-Page Applications (SPAs) and Progressive Web Applications (PWAs). In fact, the name “Angular” comes from the two angle brackets of HTML tags (<>). In addition to SPAs, Angular is also capable of being used to make mobile applications.
Unlike React, Angular is a full-fledged and robust framework. So you don’t need to bring in additional packages for routing and a lot of other frontend functionalities.
The obvious downside of Angular is the steep learning curve. Angular is even robust enough to be referred to as a platform, so it demands a lot of expertise in order to get things done and fully take advantage of its capabilities.
The MEVN Stack
The MEVN Stack is a combination of MongoDB, Express, Vue, and Node JS. Let’s talk about the V in MEVN!
According to its official website, Vue is a progressive framework for building user interfaces (UIs). It was created by Evan You after he spent time working with Google using Angular; he described Vue as the good part of Angular. Despite coming later to the party than Angular and React, Vue has gained huge popularity in the last few years and its users are very passionate about it.
Out of the three trendy JavaScript frontend libraries/frameworks, Vue stands out as the easiest to pick up due to its simplicity and user-friendly nature. It does not require a steep learning curve compared to Angular and React, so a basic knowledge of JavaScript is enough to get started with it.
Vue connects to the rest of the tools in the stack by making AJAX requests to the server.
☝️ Back to the table of contents
Why Learn a JS Stack?
Learning a stack makes things easier for a JavaScript developer in a lot of ways. Whichever one learns, be it MEAN, MERN or MEVN, they all solve problems better and are readily in demand in the web development labor market.
When you learn a stack, you are a step ahead of others who rely on their vanilla JavaScript skills to get hired in tech. But these days, it’s uncommon to see full-stack web developer job postings based on JavaScript that don’t require knowledge of a frontend library/framework and Node JS.
Another massive advantage of learning a JavaScript stack is that with them, a developer writes the same language in the database, frontend, and backend. How cool is that?
☝️ Back to the table of contents
Choosing the Right JS Stack for Your Needs
There’s nothing to say that every single JavaScript developer should learn a particular stack over another. The best JS stack for each person depends on their goals, skills, and local job market. For instance, MERN (using React) is one’s best bet in getting a job according to Google Trends, but the demand for it varies by geographical locations.
I would advise anyone wanting to pick up a stack to look into their locality before deciding. For example, Angular is more popular in India, so I would advise anyone living there to pick up the MEAN Stack.
Vue’s popularity is increasing steadily in Europe, so MEVN could be the stack for a Europe developer.
React is the most popular in the United States and Africa, and so I would advise Americans and Africans to pick up the MERN stack.
If your aim is to get a remote job, then learn whichever of the three major stacks you’re finding the most remote job listings for.
☝️ Back to the table of contents
Next Steps After Learning a Stack
After learning a stack, the next step is to be on the lookout for opportunities to practice it in the real world. One could get started freelancing with their stack skills, or look for full-time jobs. Of course, the learning does not end when you get the job offer, as web development is a lifelong learning journey. Continue seeking out knowledge and improving your skills in your JS stack and beyond!
Thank you for reading. If you are an aspiring web developer or a beginner, I have an eBook called The Beginner’s Guide To Getting Started In Web Development. It comes with a 30% discount for all LTCWM readers when you buy via the link above. You can connect with me by following me on Twitter, where I spend most of my time engaging and tweeting about web development.
About the Author
Kolade Chris Kayode is a career switcher from Environmental Biology to Web Development. Currently focusing on frontend technologies.