This article was originally published at https://www.blog.duomly.com/how-to-select-right-tech-stack-for-web-application/

Intro

Before every project in IT starts, there is a lot of planning and decision-making processes. This planning phase is critical and can have a significant impact on the project’s future.

Selecting the right technology stack can affect the time of development, cost, quality of the application, and also the scalability, that’s why it’s so essential to make this decision right, even if you need to spend more time, analyzing all the pros and cons of available solutions.

In this article, I’d like to explain to you what is actually the technology stack of the web application, and besides that, we will go through the available technologies, their pros, and cons, and try to select which technology is appropriate in which case. Besides that, I’ve selected a few important factors that should be considered before the tech stack decision is made.

When the technologies are selected, each frontend project still needs some more decisions, like the structure of your frontend application, that will help you maintain and scale it. Here’s the link to my previous article on this subject.

How to create a front end project structure that scales and is easy to maintain?

Let’s start by explaining what technology stack is in the frontend project.

What is a technology stack?

Technology stack is a combination of programming languages, frameworks, and software used to build the application.

Every web application consists of two parts, client-side and server-side. Client-side is everything that users can see on the screen. The essential elements of client-side tech stack are

• HTML which is responsible for how the browser displays content,
• CSS styles the content,
• Javascript is responsible for the interactive part of the web application.

Those technologies can be used with helpful frameworks like Bootstrap or React.js.

The server-side part of the application is not visible for the final user, and it powers and provides data for the client-side part. On the backend side, we have to take into consideration the selection of:

• backend programming language like Java or C#,
• frameworks like Spring or .NET,
• database like PostgreSQL or MongoDB,
• server like Apache or Nginx, or decide on serverless architecture.

When you are planning the next application tech stack, you have to consider the server and client-side. In this article, I’ll go deeper into the frontend technology stack and go through different frontend development possibilities.

Frontend frameworks overview

Modern frontend frameworks can control the whole three elements of the UI; they have HTML templates, styles, and interactive functionality.
Right now, there are three most common frontend frameworks to choose from; it’s ReactJS, Angular, and VueJS.

To be able to select any of them, it’s good to know more about each of the technologies, that’s why I’d like to go through them, one by one and describe them in terms of frontend technology stack and frontend architecture.

ReactJS

ReactJS is not a framework; it’s a UI library created by Facebook and supported by a huge community. ReactJS is suitable for less complex applications and is more focused on advanced user interface and reusable components on highly complicated frontend logic.

ReactJS doesn’t have a solid development workflow, which can bring lots of problems for less experienced developers. It’s worth considering that if you decide to build the project with ReactJS, you need at least one senior developer in the team, who will be able to plan the workflow and decide on the external tools that have to be used in the project and which are not necessary. But on the other hand, the lack of a highly defined workflow gives big flexibility of development.

ReactJS has a rich ecosystem, which consists of ReactJS itself and React-DOM library for DOM object manipulation. Next, React-Router which is responsible for routing. Besides that, it comes with JSX, which is a syntax extension for Javascript to create templates in ReactJS. To make development easier and faster, React Developer Tools come very helpful.

Also, if you are planning the mobile app for your project, ReactJS has a framework for mobile development called React Native, which is very similar to ReactJS itself.

From the company's point of view, the most significant advantages of ReactJS are the relatively low cost of development and short time of development. Besides that, it’s not difficult to find developers with ReactJS knowledge, and the technology is on the market for a long time, supported by a big creator and huge community. It means that ReactJS won’t disappear and won’t stop to be supported soon.

Let’s quickly summarize when selecting ReactJS for your next project will be a good idea and why.

• If the application you are planning has an advanced UI with many reusable components and lots of DOM manipulation, it’s good to use ReactJS.
• If you have a tight deadline, ReactJS is also a good idea.
• If you have a medium budget, and at least one senior developer with experience in planning and building ReactJS applications.

It’s not the best choice when the application has an advanced logic or cannot hire an experienced developer who would be able to plan the workflow of the application.

It’s easy to learn ReactJS, but it doesn’t force developers to write the best quality code, that’s why you always need an experienced person in the team, who will take care of that.

Angular

The big competitor of ReactJS is Angular. In contrast to the first described technology, Angular is a framework, and it’s good for complex projects, with more advanced logic.

Angular has a built-in solid development ecosystem, like routing or state management. It also has a very clean architecture, and everything is broken into three different files (logic, template, and styles).

Another point that is an advantage on the Angular site is that it’s easy to integrate with MVC backend.

Angular also forces developers to plan and design applications before they start working on it, which prolongs the development and raises the quality of the project.

From the company and management point fo view, Angular brings a very high quality of the developed project, but it raises the cost of the application, and the time of development is slightly longer. Angular was created by Google, and it is supported by one of the biggest IT companies, so there’s no need to worry that our code will be outdated fast. The disadvantage of selecting Angular for the main technology of the project is that it’s not easy to find developers who know this technology, and learning is not very easy.

Let’s summarize the Angular as well.

• If the project is large and complex, with complicated logic but rather simple UI, Angular will be a good solution.
• If you care about the quality of the code and want your project to have reliable scalability, Angular is the choice.
• If you have Angular developers in the team, it’s a great idea to select this framework.

If the application you are planning is more UI focused and has a lot of DOM manipulation, then it would be much better to select something else.

VueJS

The last of the most popular technologies used in frontend currently is VueJS. It’s the youngest from those three. VueJS, similar to ReactJS, is a UI library, and it’s a mix of ReactJS and Angular concepts.

Vuex, which is the state manager for VueJS, is much more simple to maintain than Redux.

VueJS, similar to ReactJS, needs external liberties to create a full ecosystem, but there are much less ready solutions that make it a little bit risky.

Also, VueJS doesn’t have any big company behind, and it’s not supported by a huge community, so it’s not very certain how long it will be supported.

From the management and company perspective, VueJS is a low budget solution, and developers can easily learn the framework, so you don’t need a highly experienced developer with years of experience in the technology. Also, if not too time consuming, so if you want to cut the time of development and the project is small, VueJS will be a great solution.

Let’s summarize the VueJS solution.

• If the application you are developing is a small, side project or small MVP, then VueJS is a great solution.
• If you have a small budget and only beginner developers, it’s also a great idea to select VueJS.
• If the project doesn’t have a big logic and no big UI requirements, and the deadline is close, VueJS is a solution.

Javascript or Typescript?

There are two solutions when selecting the main programming language for the frontend project; it’s Javascript and Typescript, which is a syntactic superset of Javascript.

In some cases, Typescript is required; for example, when you decide to build your project with Angular. But VueJS and ReactJS don’t require using Typescript, although it can have many advantages.

First of all, using Typescript decreases the time of development because it reduces sill bugs, affects the maintenance of the application, and makes it easier. Besides that, all modern frameworks support this technology. Also, it can be easier to develop frontend with Typescript if the backend is not ready yet, but we know what type of data we will get.

The only disadvantage or Typescript is that it’s not very easy to set up with ReactJS or VueJS.

The good news is that Typescript is created by Microsoft, so it’s a very small chance that it will be forgotten, and you’d have to rebuild your application.

Summarizing, selecting Typescript can make the development process easier and faster, and help avoid a lot of debugging, which can be very important, especially before the deadline.

CSS, Less, or Sass?

Although modern frontend frameworks can provide you all the elements important in your frontend project tech stack, it’s still a field to decide how you would like to write the styles in the application.

Writing styles in pure CSS is not very comfortable in the bigger projects. Having huge CSS files can make every project development a nightmare, prolonging the process.

To make it easier, it’s a great idea to decide on using any of preprocessors like Less or Sass. It’s very easy to implement them in the project that uses Webpack, and the code becomes much cleaner.

Both Less and Sass allow us to use mixins, inheritance, or variables, so if any urgent change of branding and colors in the whole app needs to be changed, it’s not a pain anymore.

The only difference between Sass and Less is that Sass is written in Ruby, so it needs it installed on your computer, and Less is written in Javascript, so it needs Node.js installed to run it.

From the company's point of view, the biggest advantage of using preprocessors is time-saving, and it allows us to avoid difficulties with maintaining the application, especially when it will grow.

What you should take into consideration choosing tech stack for the project?

At this point, I’d like to go through some factors that should be important for everybody who makes the decision about the technical stack of frontend applications.

Application size

The first factor that should be taken into consideration when selecting the technical stack is probably pretty obvious because the most important thing is application size because, with the size of the project, the complexity grows as well.

Time to market

Another important factor while selecting the tech stack for the project is time to delivering an app to the market.

If the time is short, you have to select technology that doesn’t require long planning, development is not complicated, and you can access developers who know the technology.

In the case of a long time to market, you can consider more factors to make the right choice.

Security

Considering that you spend a lot of money on the application, you need it to be secure. Especially since the number of cyberattacks still grows, you need to take it seriously to care about your data safety.

Most of the popular frontend frameworks provide some guidelines about security and best practices. You need to take care of following all those guidelines during the development process.

Cost

For many companies, it’s one of the most important factors. Most of the frameworks and tools are free and open-source, but still, you have to hire developers, so you need to calculate how many developers you’ll need to complete the application in a given time with the selected technology.

Besides the building cost, you need to take into consideration the maintenance costs and server costs. If you’d like to cut costs on maintenance, maybe it’s a good idea to think about serverless architecture for your application.

Scalability and maintainability

It’s also essential to think about the future of the application. If you’d like it to grow, it has to be scalable easily and maintainable. You can achieve it easily, just have to select a good structure of the project and care about using reliable technologies.

Depending on the type of project, there may be some more factors you need to pay attention to, like performance. Remember to rethink every aspect of the application so you can plan it before it starts, and implementing any architecture changes becomes really expensive.

Conclusion

Selecting the right technical stack is important for the success of the application you’re planning to build and for the smooth development process finished before the deadline.

To make the right choice among all the frontend technologies available on the market, you have to carefully go through the most important features for the application and look at the factors that can somehow affect the decision.

Different applications need a different approach, so it’s worth remembering that if the previous project was done with Angular and was successful, the current one may need different technology.

It’s also worth to take a look at the difference between Javascript and Typescript and consider which one will be a better choice for the app.

The most important is to remember that making good decisions on the planning phase will save you from scary moments before the deadline.

I hope you’ll find this article useful before planning your next front-end project.

Thanks for reading,
Anna