How to Pick the Right Web Technology Stack for Your Product

Tech stack is the combination of programming languages, tools and frameworks that the developers use to create web and mobile applications. There are two main components to any application, known as client side and server side, also popular as front end and back end. A stack is created when one layer of application is built atop the other, with the help of codes and hardware modules ranging from generic to specific. A stack contains different layers of components/servers that developers use to build software applications and solutions. You have a rich choice of tech stacks in the web development world that it is quite easy to be confused when you are called up on to choose one of them to use on your web development project. The tendency is to pick something easier to learn, or maybe the newest. However, by the way things stand, that should not be the only criteria of selection. Teams that are already familiar with the tools and languages they work with will prefer to pick those first (like for example, embedded or desktop dev.). Things were much simpler on the development front a decade ago. Developers used ASP.NET on the front end, SQL Server on the backend and .NET on the middle tier. Then over the years, new tools and technologies came into existence and the need to select the right technologies for building software products emerged. After all, the main aim of a developer is not just to build a professionally, functioning software, but something more than that — maintainability, scalability and security of the app, the levels of which would be determined as per the requirements. It is important to have a foolproof plan in mind while choosing a tech stack, because the impact of this would be reverberated across various layers of business, including HR, finance, management and marketing. In fact, out of the three main steps in planning a web development project (two of which are understanding the project in a business perspective, and passing the baton {HR perspective on who holds the responsibilities for the project}), the third one, picking the stack (the technical perspective) must be given great care. ### Anatomy of a Tech Stack As hinted earlier, tech stack comes with two software components, — Frontend and Backend (also known as client side and server side). Now let’s get a deeper into the anatomy of a tech stack. ![](https://hackernoon.com/hn-images/0*jamo36fjvVMf5ctz.) #### Client-side (Front end) Client-side, as the name suggests is where the real interaction with the user happens. The user will interact with the website, the web app or a mobile app depending on what he is using. There are three main technologies in front end. * HTML — the markup language * CSS — the stylesheet * Javascript — browser scripting language The two main front end JavaScript frameworks in the market today are [AngularJS by Google and ReactJS by Facebook](https://www.cabotsolutions.com/2016/10/angularjs-reactjs-infographic). The main advantage of these frameworks is that they let you create highly intuitive user-interfaces. As both are language independent, it doesn’t matter what kind of tech stack you are using for the server side, it will still function optimally according to expectations. Twitter’s Bootstrap is the most favored framework for CSS ever since its launch because it has interactive components built on JQuery. Using the native language is generally the trend while building applications probably because it gives the developers more control and easier hardware access. Probably, this is the reason why Java is used for Android and Objective-C or Swift is used for iOS. #### Server-side (Backend) The back end consists of a server, an application (OS, Web server, Programming language, Web framework), and a database. Server side is the umbrella term used for websites where developers perform the following functions like programming the business logic, server side hosting and deployments, working with databases etc. The server side stack responds to user requests, accesses the database and executes simple CRUD (Create, Read, Update and Delete) operations. LAMP and Python are two of the most popular backend stacks used by developers (more will be discussed later). LAMP is the abbreviation for Linux, Apache, MySQL and PHP. Linux is the server operating system, Apache is the web server, MySQL is the database and P is for PHP, the scripting language. [Python-Django framework](https://www.djangoproject.com/) is used for whipping up a quick working prototype, mainly by the entrepreneurs. Instead of PHP, developers use Ruby or Python too. Developers prefer to use popular frameworks because they provide them with the vetted implementations of common features like data access, user authentication etc. Special mention must be made about JavaScript, which was just a browser scripting language until a little while ago. It then emerged as a popular server side programming language. JavaScript’s MEAN stack rose to popularity as one of the most popular choices for MVPs. MEAN is short for MongoDB, Express.js, Angularjs and Node.js. MongoDB acts as the NoSQL database, Express and Node runs on backend and AngularJS renders the interface. #### Middleware Middleware is a bit more esoteric and consists of application servers, content management systems, web servers, and similar tools that support app development and delivery. Written in Java and C#, Middleware facilitates standard communication and management of data between the front end and back end of tech stack; hence called the “software glue”. Middleware performs the following tasks — parsing, authentication or just providing a standard way to communicate data between systems. Interestingly, Middleware is not a developer tool, but actually integrated per-say into the systems it facilitates. Middleware technologies include TIBCO, CICS, Virtia and MQ. Middleware functions as a hidden translation layer, almost like the plumbing, which connects the two applications together; it enables communication between database and data. For example, when the user submits a form on a web browser, it is the middleware through which the dynamic web pages will be retrieved based on a user’s profile. Middleware also plays a crucial role in distributed processing with real time actions, so it definitely does something more than just sending data back and forth. ### Choosing a Web Tech Stack — Factors to be Considered As there are several kinds of tech stacks available for web developers, how do they go about choosing the right ones for their project? Here are some guidelines: ### #1. Type of Project The type of project is always a determinant in choosing the right stack. **Small projects** — If the project is a small one, and you need to deliver it in the shortest time possible, then simple technologies like CMS or Wordpress can be used; especially if the requirement entails a working prototype that has be delivered within a strict timeline. **Mid-range projects** — But when the project is small to mid-level, then it would need a combination of programming languages because the developers would need something that provides them with various functionalities and seamless integrations across multiple platforms. Apps for such projects could include e-commerce websites, financial industry, major government projects etc. In such cases, Java and C# are the commonly used programming languages. **Complex projects** — Then there are complex projects where the developers have to create web apps with several functions. Here too, they will be working with several programming languages and making use of different web technologies. Examples of such projects would be social networks, huge e-commerce marketplaces, etc. While deciding on the size of the project, it is imperative to look at the business goals as well. This is because the impact of technologies used would directly influence the business goals, because the aim is to provide seamless customer experience. Two main things to consider would include: **Processing heavy loads** — If the processing load is huge, then you need to rely on programming languages and frameworks that support this. **Low latency** — You may have to use a web stack that reduces latency and make the application highly responsive. ### #2. Team’s Expertise and Knowledge Base An important factor to consider is the level of expertise the developer team possesses on working with various technology stacks. Even after deciding on the tech stack, remember, the job doesn’t end there. The developer team will have to maintain the app after launch too. The reason why expertise is so important is that developer may trudge along issues when they are producing codes. And to find a solution, the team has to be really experienced, because the project runs on a deadline and work has to be done fast. So if you are about to choose a web tech stack, make sure it has huge developer community and rich documentation. Keeping tabs on Github and Stackoverflow would help you understand the strength of the developer community of different programming languages. It is also important to choose technologies that are easily testable. And certain technologies call for Test Driven Development (TDD) where you’ve got to test first and code later. Through TDD, you can be assured of project quality and speed. The developer team must be equipped and experienced to deal with the TDD approach. ### #3. Time to Market (TTM) Planning a date for the product launch and finishing product on time is a challenge. So consider the “[Time to market](https://en.wikipedia.org/wiki/Time_to_market)” factor when you pick a tech stack. If it consumes a lot of time for development and testing, remember there is a high chance you will not make it on time for the launch date. And the lesser time you take to develop an app, the cheaper it will be for the company. Time to market or TTM heavily depends on the technology stack you choose for the web app. Here are some factors affecting that: **Unique & innovative solutions** — If you stumble upon a tech stack that provides a unique solution for adding functionality to your app, then you can consider using it. An example will be RoR stack with its impressive open source libraries called gems. Gems really help in reducing TTM. **Third-party integrations** — If your app needs certain features from third-party solutions, then choose a tech stack that allows for seamless integration. This helps you to easily add the functions that you need for your app. **Developer expertise** — As mentioned above, developer expertise will directly influence your TTM. If you have an efficient developer team with a strong knowledge base, then you can release your product on time, free of bugs. ### #4. Scalability Scalability refers to the ability of the application or website to handle work. As the number of users goes up, the app must be able to handle the growth spurt, including the seasonal spikes. The developers should choose a stack that will accommodate future growth of the app. The dimensions of growth could be horizontal and vertical. Horizontal scaling means running the product on several servers at the same time to handle the influx of traffic. Vertical scaling means you add more programs to process new data. Both horizontal and vertical scaling are important to prevent a product collapse in the future. Before starting the app development, [build a developer team for the Minimum Viable Product (MVP)](https://www.cabotsolutions.com/2013/11/building-a-team-for-mvp-project-2). MVP is the core set of deliverables that you need for the deployment of the web app. It is based on the highest return investment and lowest risk factor. While considering all the your parameters in choosing the web stack consider the MVP first, and then grow from there. ### #5. Maintainability The maintainability of the app depends on a couple of factors: **Codebase** — If the code is too lengthy and complicated, then developers would need to spend a long time trying to process it; and if the code base is too concise, then debugging it correctly becomes an issue. So it is important to choose a language, that uses short, but easily maintainable and reusable codes. **Basic software architecture** — The software architecture supports the portability, scalability and reusability of the app, and it influences both the dynamic and static component configurations. Maintenance of the software structure must be done even when the apps are scaled, when more users are added, when porting takes places and when features get more dynamic. Users should be able to enjoy seamless performance of the app. ### \# 6. Overall Cost of Development While most of the popular tools and frameworks are free and open source, you may have to subscribe to them by paying fees to get access to the advanced features. So it is important to determine, how much you are willing to spend on an app development project. Depending on the technology stack that you use, you will have to get its license as well. So weigh the balance of cost of using a particular stack vs. the usability of its features before making the final decision. The cost incurred for the infrastructure is also a major point to be considered. And of course, you have to pay the salaries of the developers, and if you are getting more people on contract basis, you have to consider their cost as well. In short, if cutting costs is a major aspect, then you must [opt for open source technologies.](https://www.cabotsolutions.com/open-source/) You can even download free project cost estimation tools to gain insights into what your software development project will cost. ### Most Commonly Used Tech Stacks Given below are some of the most popular tech stacks that developers use in their projects. You can go through each of them and decide which is good for you. ### 1. .NET Stack [.NET is a feature rich, thoroughly battle tested framework](https://www.cabotsolutions.com/web-applications-net/) that lets you build dynamic and interactive web apps. And [.NET stack](https://github.com/unruledboy/DotNetStack) is a subset of [Overflow Stack,](http://overflowstack.github.io/) a comprehensive tech stack that fulfils all the requirements of web front-end, database and .NET developers. Both C# language and .NET framework form the centrepiece of this Microsoft’s technology stack. By combining .NET stack with other open source technologies, developers have built a wide variety of applications right from small scale server side web applications to huge enterprise-level, transaction processing systems. .NET Stack has about 60 frameworks, platforms, SDKs, IDEs, SOA, libraries, etc. spread over 13 layers. This includes CLI languages like C#, F#, VB.NET, Fantom, etc. Main features of .NET tech stack are **1\. Interoperability** — Interoperability among different platforms is a major advantage of .NET tech stack, enabling developers to make use of a full range of complementing features. **2\. Language independence** — .Net stack provides language independence giving the developers freedom to choose their language of choice. **3\. Portability** — It is compatible with a number of frameworks and platforms making portability easier. Developers can choose the framework and technology they are comfortable with. **4\. Security** — The stack is designed to repel luring attacks from hackers, providing various levels of trust on the difference codes running in the same application known as CAS or Code Access Security. **5\. Speed** — The high speed of .NET stack allows timely completion of projects, timely launches, and satisfied stakeholders. Speed plays an important role in developer time and runtime because what speed you gain in development time will be gained in runtime as well. ### 2\. LAMP Stack The [LAMP stack](https://en.wikipedia.org/wiki/LAMP_(software_bundle)) made of all open source software components is the one of the earliest stacks to get popular. The main components of LAMP are Linux operating system, the Apache HTTP Server, the MySQL RDBMS (relational database management system), and the PHP programming language. LAMP works well for both dynamic websites and applications. The software bundle LAMP can be combined with other open source and free software packages, making it highly flexible, customizable and very easy to use. It is also the most traditional stack model around, and very solid. PHP is interchangeable with the languages Perl and Python. Variations of LAMP include: * WAMP (Windows/Apache/MySQL/PHP): This is equivalent to Microsoft Windows OS, and all-inclusive and easy to get started with. The WAMP stack has the IIS server. * LAPP (Linux/Apache/PostgreSQL/PHP):This stack comes with a PostgreSQL database variation that’s configured to work with enterprise-level projects. * MAMP (Mac OS X/Apache/MySQL/PHP):This is a Mac OS X operating system variation and available for both Windows and Mac. * XAMPP (Linux, Mac OS X, Windows/Apache/MySQL/PHP, Perl): This stack makes a more complete bundle, and runs on Linux, Windows, and Mac operating systems. The stack is also equipped with FTP server, which is cross-platform. ### 3\. MEAN Stack [MEAN Stack](http://meanjs.org/) is an open source, free Javascript software stack developers use for building dynamic web apps and websites. The MEAN stack components are MongoDB — a NoSQL database, Express.js — a web app framework that runs on Node.js, Angular JS (or Angular) Javascript MVC framework that run in browser JavaScript engines, and Node.js — an execution domain for event-driven server-side and networking applications. As the support programs are coded in JavaScript, MEAN stack makes it easier for developers to code the application for both server side and client side execution environments — and that too in language uniformity. This also makes it easier for developer working on the client side, understand the codes of the server side. It supports MVC pattern, is open source and is also mobile friendly because AngularJS is flexible and developers can easily incorporate JS testing frameworks. MEAN uses NoSQL’s native JSON for data transfer and offers access to Node.js’ JavaScript module library making it the most probable solution for building scalable and agile apps. Switching to document-based NoSQL makes it easy for developers writing SQL, giving them the flexibility in structuring the data., thereby increasing the productivity of the team. The variation of MEAN include: MEEN: MongoDB, Express.js, Ember.js and Node.js. ### 4\. ROR Stack Ruby on Rails stack facilitates quick app development, thanks to its rich repository of gems — library integrations. The framework is highly scalable and it follows the [ActiveRecord pattern](https://en.wikipedia.org/wiki/Active_record_pattern#Ruby) and is compatible with MySQL on the back end. Ruby on Rails has its own built in database. It can abstract away the lower data base commands so you can write the codes in Active Record syntax and then swap it with lower level database specific queries, provided you don’t use too much database specific queries. Here’s a collated **list of some of the tools and frameworks** used in a tech stack. #### Frontend * Bootstrap * jQuery * Socket.IO * Backbone.js * CoffeeScript * Less CSS * HTML * CSS * JavaScript #### Middleware * Ruby on Rails * Node.js * JVM language (Java, Scala or Clojure or mix) #### Backend * Postgresql * MongoDB (if Postgresql is not used) * Redis * Some message bus (RabbitMQ, ZeroMQ, or Redis) * Solr (if search is needed) ### Conclusion Going through the factors that you need to consider while choosing a tech stack, and a study of the different tech stacks currently in use today would give you an idea of how to select the right one for your project. You need to understand your project requirements well in order to choose the technologies for it. Sometimes, time-proven technologies may not be enough, because you need to get realistic and understand the pros and cons of each. A talented team of skilled and professional web developers will be able to choose the right tools for creating a scalable and highly functional app that beats competition. Interested to know which is the perfect web tech stack for building your new product? We can help you.. [Contact Us Today!](http:// Contact Us Today! ) [![](https://hackernoon.com/hn-images/1*MizbXX6FLdg4vvw2cZsMUw.png)](https://www.cabotsolutions.com/designing-a-new-product-8-effective-steps-to-follow) _Originally published in_ [_Cabot Solutions Blog_](https://www.cabotsolutions.com/2017/08/how-to-select-the-best-web-technology-stack-for-your-product) _on August 30, 2017._

How to Pick the Right Web Technology Stack for Your Product

Too Long; Didn't Read

Companies Mentioned

Coins Mentioned

@hackernoon-archives

RELATED STORIES