But like any other innovation this leap in development has two sides. In this article we'll try to sort out what are the advantages and disadvantages of working with the newest front-end technologies and how to avoid problems when you start using them.
Let's talk about the benefits of using cutting-edge front-end tools.
- speed-up development process;
It is one of the main reasons why all the tools mentioned above were developed. Thanks to them, the time spent on routine work is greatly reduced. For example, karma allows you to run tests in watching mode on all available browsers at once (as well as on your virtual machine and even on your mobile devices connected to the same local network as your computer). Whenever you save changes in the code, the tests will run automatically again. It is very helpful for cross-browser applications development.
Or you can use yeoman (a project generator) to create a new project. It turns this stage of a project's life cycle into running one command in the terminal, which will give you a ready folders structure and a pre-installed set of tools. It's quite convenient when you create many projects of the same kind.
- improvement of code quality;
Linters (jslint, jshint, eslint) have gained wide popularity in recent years. These are tools that help you to identify the coding style in your application and detect the places where the chosen style is not kept. Depending on the environment settings, it can be done when you push the changes to the repository, during the deployment to the server or in real time right in your text editor/IDE.
Linters allow you to significantly improve your code and avoid simple errors. However, linters won't solve all your problems – they will only point out the places where your code definitely stinks. You will still have to study the patterns and best coding practices, read other people's code, communicate with more experienced colleagues and refactor previously written code. Only in this way you can achieve really and truly improved code quality.
- significantly reduced code duplication;
- possibility to program in real time;
The newest achievement in modern front-end development is hot reload. It is the ability to make changes in the code and see them in the browser window without reloading the page and losing the current application state. This feature is now available only to those who use webpack as a project builder. If you're interested in how it looks, check out the example with React.js.
- high barrier to entry into the environment;
- wide choice of module configuration methods;
We had doubts, whether to consider it a pro or a con. However, as this article is for newbies, it was eventually decided to label it as a disadvantage. The reasons are the following.
Almost any large dependency (webpack, karma, gulp, eslint and so on) in your project will provide more than one configuration method: via its configuration file; through the configuration file of parent module; with the help of flags in shell scripts, etc. It would seem to give additional flexibility – it's always nice, isn't it? But not in this case. On the initial stages you will definitely face situations when after setting tool A, you will want to add tool B to extend the functionality of the first one. And then you will realize that your new tool doesn't work. It often happens because the documentation of these tools doesn't provide complete information on how they should interact and, therefore, you may not be aware of the possible ways to configure this interaction.
- lack of FAQ resources;
The modern front end tools list is immense, it is hardly possible to keep in mind the knowledge about all of them. In order to solve this problem, programmers often resort to the help of proven Q&A resources (stackoverflow.com, experts-exchange.com, superuser.com, github.com and other websites). In our case, the problem is that tools and their new versions spring up so fast that, actually, we take on the role of their beta testers. As a result, we can bump into a problem that has never been described before and we can't even figure out if it is possible to solve it or it is just a bug of the currently used library.
How to avoid problems
Try to use a minimal required set of tools. At first, it may seem that in order to solve a problem, it is much easier to execute the command:
npm install brilliant-module-that-will-solve-my-problem-by-one-string
And it is really so, on the first stage of the project. But as your project grows and time passes, tools become outdated and you will face the need to update them. At that moment you will realize the terrible outcomes of your decision. It may happen, that your module is not supported anymore or it is not yet updated to match the new versions of other more important tools used in your project. Or the developer decided to introduce some crucial changes to the module's interface and now your solution with its help doesn't look elegant enough.
If you have just taken your first steps into the world of modern front-end development, try to avoid using application boilerplates. Their main problem is that they are stuffed full of tools that you have never used before. And when you need to make even small changes, it may turn out that you can't get the desirable result due to high dependency between tools and a lack of knowledge in configuring them.
Modern front-end development went far beyond pure js/html/css. The number of tools and frameworks designed to help developers is growing exponentially. But it brings not only positive effect. The more tools there are, the more difficult it is to make out which of them are really worthy and will be able to serve you faithfully throughout the whole life of the project and won't let you down at a crucial moment. Exactly such kind of tools we will help you to choose in the next article.