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 debated whether to classify it as a positive or negative aspect, but ultimately we decided to categorize it as a disadvantage since this article targets beginners. The rationale behind this decision is as follows.
Most large dependencies (such as webpack, karma, gulp, eslint, and others) in your project offer more than one way to configure them. This can be done via their configuration file, the configuration file of the parent module, or with the help of flags in shell scripts, among other methods. At first glance, this appears to provide additional flexibility, which is always a good thing, right? However, in this case, it is not. In the initial stages of development, you will inevitably encounter situations where, after setting up tool A, you will want to add tool B to extend the functionality of the first one. This is when you will realize that your new tool is not functioning properly. Often, this happens because the documentation for these tools does not provide comprehensive information on how they should interact, which means 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.