This article was co-authored by Chris Samuel Salcedo.
TECH STACKS? WHAT?
Ready to build your web app? Choosing the right technology stack for web development is important for developing a robust, scalable web application and helps in avoiding your business or project in future headaches.
But first, what even are tech stacks? Let us guide you through the concepts of tech stack and on the quest in finding the best one.
UNDERSTANDING TECH STACKS
A tech stack is a collection of technologies used to develop a software application or a web app. This typically includes a mix of programming languages, frameworks, databases and other technologies that work together to deliver the desired functionality with robust performance.
Here are the major components of a tech stack for web development to jumpstart your project:
1. FRONTEND FRAMEWORK
The frontend part of the web app is generally based upon the holy trinity; HTML, CSS and JavaScript. Using vanilla JavaScript or CSS can be quite tedious and there are frameworks available to make your time easier.
For example, Tailwind CSS which simplifies the process of building a modern web interface by its utility classes and tools. There is also React.js where it has component-based architecture where the UI is broken down into reusable components, its ease of usage makes it one of the most popular frameworks for front-end development.
2. BACKEND FRAMEWORK
In making the stack it does not only include the frontend, unless you want to make a static website. An inclusion of a backend component will serve as a foundation for the functionality of your web app. Included in the backend is the web server, the logic of your application and the interaction with the database.
Examples of a backend framework is the famous Express.js and Node.js which has one the biggest developer community and documentation.
3. DATABASES
The database is considered part of the back end. Those data you get from the user must be stored somewhere and this component will handle it. They are stored in a structured and organized manner so you will not be sued by the user.
Examples of these include MongoDB, which is a NoSQL database, and MySQL and PostgreSQL, which are SQL databases.
Now that we’re familiar with the concept and the components of tech stacks, let’s now explore the popular tech stacks right now. All of these stacks are open-source technologies which help you in making a cost-effective stack for building your web app. Additionally, in this section, you will notice why JavaScript is one of the most popular programming languages right now.
UNDERSTANDING TECH STACKS
1. MEAN STACK
Source: MongoDB. (n.d.). What is a technology stack? Tech stacks explained. https://www.mongodb.com/basics/technology-stack
The MEAN stack:
- MongoDB: A noSQL database that stores data in a usable manner.
- Express.js: A minimalist web application framework for Node.js that provides features for building web servers.
- Angular.js: A front-end framework for building single-page applications.
- Node.js: The runtime environment for developers to run JavaScript code on the server side.
In this stack, Angular is used for the front-end framework which is developed and maintained by Google. Express.js will serve as the backend framework that will handle server-side logic and interact with the MongoDB database.
2. MERN STACK
Source: Metral, K. (2023, March 1). Top 5 tech stacks for web app development in 2023.
https://www.linkedin.com/pulse/top-5-tech-stacks-web-app-development-2023-kenneth-metral/
The MERN stack:
- MongoDB: A noSQL database that stores data in a usable manner.
- Express.js: A minimalist web application framework for Node.js that provides features for building web servers.
- React.js: A front-end framework with a library for building user interfaces based on modular UI components.
- Node.js: The runtime environment for developers to run JavaScript code on the server side.
This stack is quite similar with the MEAN stack except that it uses React.js that has a bit different functionality which is maintained and developed by Facebook (Meta).
Quite a fun fact, the MERN stack is the most popular stack right now with React.js as the most popular framework in general based on stack overflow.
3. PERN STACK
Source: What is PERN Stack. (2020, April 30). GeeksforGeeks; GeeksforGeeks. https://www.geeksforgeeks.org/what-is-pern-stack/
The PERN stack:
- PostgreSQL: An open-source relational database management system (RDBMS) that utilizes SQL (Structured Query Language) for querying and managing data.
- Express.js: A minimalist web application framework for Node.js that provides features for building web servers.
- React.js: A front-end framework with a library for building user interfaces based on UI components.
- Node.js: The runtime environment for developers to run JavaScript code on the server side.
Another primarily JavaScript stack that only differs in its database where it uses PostgreSQL where data is organized into tables with predefined schemas and supports relationships between them. This can be important in some use cases where data is needed to be more structured for data validity compared to a NoSQL database.
4. MEVN STACK
Source: Metral, K. (2023, March 1). Top 5 tech stacks for web app development in 2023.
https://www.linkedin.com/pulse/top-5-tech-stacks-web-app-development-2023-kenneth-metral/
The MEVN stack:
- MongoDB: A noSQL database that stores data in a usable manner.
- Express.js: A minimalist web application framework for Node.js that provides features for building web servers.
- Vue.js: A lightweight JS framework for creating modular UI components and building interactive user interfaces.
- Node.js: The runtime environment for developers to run JavaScript code on the server side.
Compared to the other 3 tech stacks, MEVN has a more gentle learning curve as Vue is easier to learn. Its syntax is HTML-centric with single-file components, that means if you are familiar with HTML and CSS, you can get quite a hang of the Vue framework.
You can also check out Petite Vue, a more lightweight version of Vue that is useful if you only aim to build smaller-scale applications where performance and bundle size are critical considerations.
5. LAMP STACK
Source: Metral, K. (2023, March 1). Top 5 tech stacks for web app development in 2023.
https://www.linkedin.com/pulse/top-5-tech-stacks-web-app-development-2023-kenneth-metral/
The LAMP stack:
- Linux: The foundation of the stack that also provides an environment for runner web servers, managing resources and executing the web app.
- Apache: A web service software responsible for serving web content to user over the internet.
- MySQL: A relational database management system (RDBMS) used for storing and managing structured data.
- PHP: Server-side scripting language used for developing dynamic web pages and web applications.
In a world dominated by JavaScript, we need to find some stack that doesn't utilize it don't we? Here comes the champ LAMP, it is one of the first open-source software stacks for building web applications. Even though it is considered as one of the oldest stacks, it is still considered as reliable, stable and secure.
Expectedly, some of its technologies are outdated, and it is slower compared to the stacks above. And it uses PHP for its scripting that has limitations compared to JavaScript that has a vibrant ecosystem with its frameworks and tools.
Now that we’ve discussed some of the most prominent web application tech stacks. It is time to make the verdict as to who will win as the best web app tech stack.
THE BEST TECH STACK
Imagine you are walking down the street, in search of the best tech stack there is sold in the Silicon market right now. As you start checking out the products, the developer vendors began advertising their products like the shiny MERN stack, with its unwavering aesthetic front-end and back-end brawn. Or is the answer, the similar, MEAN stack boasting its agility and speed? You continue your quest in searching and you are blinded by the brightness of the LAMP stack with its familiar comfort masking potential clunkiness. But wait, you are distracted by PERN stack’s offer for a unique blend of power and flexibility.
But alas! You can’t decide which stack is the best one, that’s when you decided to take a look at your project and realized that the “best” tech stack isn’t some pre-packaged, mass-produced gadget. That’s because the best one is the one that fits your project like a tailor-made suit that perfectly fits your project’s unique needs and goals.
Still lost? We’ve got you covered! Let’s discuss some of the factors to consider when formulating the best tech stack for your project.
BEST PRACTICES FOR TECH STACK SELECTION
The development of each individual coding language is done for specific reasons, to address and solve specific sets of problems that are likely to be encountered by the web app.
One of the most prominent programming languages deployed currently is Python, which is a high-level language which is known for its general-purpose programming. While it is true that you can use Python to code anything, ranging from AI, Web scraping tools, or even IoT products, imagine trying to code a front-end page or a mobile app using Python.
Similar to Python, there are other coding languages that have better suitability when it comes to developing more fitting solutions. This can be also said to trying to paint a portrait with your fingers when there’s brushes that could offer control and finer detail, right? Well, suitability is only one of the many factors that we have to consider before arriving at the right tech stack.
1. PURPOSE AND COMPLEXITY OF THE PROJECT
In choosing your tech stack, you must consider the project’s scope and its purpose as well as the niche the project is in. This gives you the needs that you have to focus on, setting limits or parameters in which your web app needs such that simple static websites can be developed using just HTML, CSS, and vanilla JavaScript while more complex web apps might need powerful frameworks and databases.
2. SCALABILITY
Planning to expand the functionality of your web app? Then you should consider investing in a tech stack composition that is flexible that enables you to scale horizontally and vertically. Anticipating growth in your project ensures that your web platform remains agile especially in a time wherein the web landscape is moving swiftly.
3. TECHNOLOGY COST
Just like any other projects, it is important to consider the allotted budget not only for initial expenses but as well as long-term factors such as maintenance, hosting, and the shifting prices of technology costs. One thing to also consider is the resources available to you as the developer, such as time and skills, as these may affect maintenance and troubleshooting.
4. PROJECT NEEDS
Being up to date with the current tech trends isn’t bad, albeit it is in fact, a good practice. However, with the project needs still on top of the priority, it is important to sort out if these upcoming trends are really suitable for this project model and if so does the developer or the team have enough resources to realize this project?
WRAPPING IT UP
The success of a web application is not only attributed to the concept behind it but to also how it is delivered. Tech stacks are collections of technologies used to develop a software or a web application. Currently there are popular tech stacks such as MERN, MEAN, PERN, LAMP stacks.
We’ve also discovered that the best stack is the one that suits your project the most. There are various factors to consider in composing your tech stack such as resources, project goals, and scalability. This ensures that your tech stack really serves its purpose as the most suitable stack for your project.
Top comments (0)