Modern front-end development technology stack


These days we have a lot of frameworks, libraries and tools available to help us in the development process. This is especially apparent in the front-end development world where GitHub repositories are full of solutions which support our work.

It’s no wonder that someone less experienced could feel lost among all those available options… That’s why I decided to look more closely at this subject and create a subjective list of tools which are in my opinion worth to be used in our projects.

Why is it good to use tools which help development?

As we all know, the developer is a very lazy and pragmatic person… so, needless to say, he always tries to achieve his goal with the least possible effort. That’s why developers started to create tools to simplify their work and, when they finally created them, they decided to share them with the community (you know, open source, etc.). As a result, we are now living in times when we can focus on being creative and just writing code. Everything else can be taken care of by tools!

How can we categorise the tools which support the work of front-end developers?

For the purpose of this blog post I decided to propose the following groups of tools which are currently the most popular in front-end development work:

  • editors / IDE
  • version control systems
  • package managers
  • linters
  • CSS preprocessors
  • JavaScript preprocessors
  • minificators
  • task runners
  • CSS frameworks
  • JavaScript frameworks

Later in this post you will find more about each of these groups with a list of their most popular representatives. However, the above proposal is subjective and it is not imperative that we should use the tools belonging to all groups in all our projects – the requirement should always dictate the use.

Editors / IDE

Before we start our work with the front-end, we must choose the tool in which we will start to create the code. We are faced with a choice between simple editors and complete IDEs (Integrated Development Environment). Editors contain features such as syntax highlighting or expandability by plugins. In contrast, IDEs contain a lot more features, e.g. supporting refactoring, highlighting errors and warnings, and allowing navigation through the solution. However, they are often guilty of a lower performance in comparison to editors.

Below you can find a list of the most popular editors and IDE’s:

Version Control Systems

If we want to prevent a sudden loss of our code and to simplify collaboration with other team members, we should use a Version Control System. Such a tool will allow us to store code in a repository so that it can be shared with others. It will also help us to merge our changes with changes made by someone else. Another important advantage of these types of tools is the ability to revert the current version of code to the old one (e.g. if the current version contains errors).

Currently the most popular version control systems are:

However, I should mention that Git is at present the most popular and most widely used.

Package Managers

In order to always have the newest versions of tools, libraries and frameworks, we should think about using a package manager. As the name suggest, a package manager is a tool which allows us to manage the packages in our project – it lets us download, update and delete them.

When it comes to currently available package managers, we don’t have many choices:

Please note that npm is a manager that manages packages of nodejs while Bower is just the npm package so if we want to use Bower, we have to install npm first…


Another group of tools supporting front-end developer work are linters. With them on board we can monitor the quality of both JavaScript as well as CSS code. They contain a list of rules which the source code should follow. They can then scan the code and show errors and warnings based on these rules.

As I mentioned before, there are linters that check JavaScript as well as CSS. Please see the list of the most popular ones below:

CSS Preprocessors

For me, this is one of the most important front-end developer’s tools. CSS preprocessors are tools which make working with CSS pleasant. They expand the CSS syntax with new commands which increases its ability to be reusable and reduces the amount of repetitions (which is a nightmare with CSS). Furthermore they also add the capability to modularise the code, thus giving us the ability to load distinctive CSS rules only if they are really needed.

The following are considered the most popular CSS preprocessors:

The main advantages of SASS / SCSS are its capabilities so if you really want to benefit from using a CSS preprocessor, your choice might be simple. On the other hand, LESS might be sufficient for smaller projects.

JavaScript preprocessors (transpilers)

Like CSS preprocessors, JavaScript preprocessors also change the syntax of JavaScript. Thanks to this, we have the ability to write code in a more familiar language which is then transformed into the real JavaScript code. All available JavaScript preprocessors have a lot of different advantages which is why I won’t to go into all of the details today… All of them deserve a separate post.

Below you can find a short list of the currently most important JavaScript preprocessors available on the market:

I personally prefer a clean JavaScript which is why, for me, the most interesting solution is Babel. It allows us (amongst other things) to write code using the new version of JavaScript – ECMAScript 6 / ECMAScript 2015 (at the moment there is no native support for it in modern web browsers and that’s why we still have to use such solutions).


In terms of the performance of our solutions, we shouldn’t forget about the minification of JavaScript and CSS files. What is minification? It is a process of transforming nice, formatted and easy to read code to a short, one line version with shortened variable names, etc. Consequently, the resulting files are significantly smaller and can be loaded much faster by the browser. After all, there’s no difference for a compiler if it has beautifully formatted code or not.

We have plenty of minificators on the market but the most popular are:

Task runners

Another group of tools which every front-end developer should be familiar with are task runners. These types of tools help us with automation of various kinds of tasks. Thanks to them we can, for example, run a code analysis by linters (mentioned before) every time a certain JavaScript or CSS file is saved. They can also be used to automatically run JavaScript or CSS preprocessors or minificators.

If we are talking about these types of tools we are, in fact, faced with the choice between two products:

It will be better if I don’t write which one is better… Generally speaking we can say that Gulp is currently more on top than Grunt 😉

CSS frameworks

These tools can give rise to controversy. I think that supporters and opponents of these solutions are distributed evenly… The general assumption of CSS framework is to help in the creation of a responsive HTML structure using predefined CSS classes. On top of this, we get a set of classes which can be used to easily build various elements of the site such as menus, forms, etc.

In fact, there is only one framework which divides and rules these days (Bootstrap) but we can also find some interesting alternatives:

JavaScript frameworks

We finally got to the most important part of this post. JavaScript framework is a tool on which we want to build our application. It has to provide us with instruments to easily modularise the solution and to enable separation of concerns. That’s why JavaScript frameworks are usually based on MVC or MVVM patterns. We can divide them into two groups: one group contains frameworks which provide us everything we need to create a single page application (e.g. AngularJS); the second group contains frameworks which provide only a core solution and the remaining parts have been moved to external libraries (e.g. BackboneJS). Before we start a project we have to think about our needs and choose if the first (all in one) or the second (more work at the beginning but better capability to adjust) approach would be better for us.

As usual at the end I provide you with a couple of examples of the most popular JavaScript frameworks:


Everything I mentioned today is only a casual consideration about what might be useful in front-end developer work and what kinds of tools are popular these days. I believe there are some projects in which there is no point in using all of these groups of tools. In contrast, I can imagine groups of tools which I have not mentioned here but they can be useful. Luckily the front-end environment is very flexible and there are so many tools that we can almost always find everything we need at any given moment.
In future posts I will try to discuss some of these tools…

Related Post

I recommend Nozbe

Simply Get Everything Done

Get your tasks and projects done thanks to Nozbe system and apps for the Mac, Windows, Linux, Android, iPad and iPhone.

If you want to know more about Nozbe and its capabilities, please take a look at my article about this great application.

  • Very nice list, some tools looks new to me 🙂

  • Andrzej

    Poleciłbyś Bartek jakieś kursy on-line, ewentualnie książki, osobie stawiającej pierwsze, a może już drugie kroki w Angular ? Coś co naprawdę Ci pomogło ?

    • Na moim starym blogu opisywałem jeden kurs – jest ok na początek… Poza tym uczyłem się po prostu czytając jakieś tutoriale i blogi…
      A na przyszłość prosiłbym o komentarze po angielsku skoro blog jest w tym języku – komentarze też mogą być przydatne dla odwiedzających a ci nie koniecznie znają polski…