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
- CSS preprocessors
- task runners
- CSS 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.
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…
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.
We have plenty of minificators on the market but the most popular are:
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 😉
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:
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…