In the last few years, front-end development has progressed greatly. Traditional markup of html pages using CSS with minimal dynamics, defined by javascript/jquery, almost died out. If you haven't worked with at least one of the front-end builders (grunt, gulp, webpack), haven't heard the word "transpiler" (babel), don't know that you can write tests on front end as well (jasmine, mocha, chai) and automatically run them in any browser (karma), you are seriously behind the age. In addition, there is React.js (a wonderful library for creating interfaces), ES6 (the latest javascript language standard which is not yet supported by the majority of browsers, but if you really want, you can already use it in production code), Node.js (a platform which can make the dream of a front-end developer come true – to write both the front and the back end of a project in beloved javascript). These are just some examples of front end tools and there are far more of them.

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.

The scope of projects that we work on in Anadea allowed us to try not only everything mentioned above but also many other tools for front-end developers. It was a long, thorny path and now we'd like to share our experience in order to help you to get a foot in the door to the world of modern javascript development.

Let's talk about the benefits of using cutting-edge front-end tools.

Pros

• 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;

One more useful thing you can get from using linters is their ability to detect and get rid of duplicate code. But that's not the main tool for reducing code duplication in the world of modern javascript development. One of the principal ones is Node.js which, in case of correct architecture, allows you to use the same code both on front and back end. A component-based approach applied in many libraries (for example, React.js) as well as a convenient package manager (npm) also allow you to reduce code duplication. The component-based approach helps to encapsulate the logics, style and view. In its turn, npm provides a simple way of sharing such components.

• 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.

However, as it has been stated above, modern front end has its reverse side. Let's take a look at the drawbacks that we discovered while working with the latest javascript tools.

Cons

• high barrier to entry into the environment;

Be that as it may, there are only three technologies behind all the diversity of tools for modern front end development: javascript, html, css. But in order to display a simple "Hello, world!" on your screen using novel methods, you will have to read a dozen of documentations, write a few non-obvious configuration files and run a number of commands in the terminal. All this scares away newbies and sometimes even hard boiled programmers who are unwilling to learn something new. Setting the environment is really an important stage in the modern world of front end. The good news is that you will only have to do it almost only once. The bad one: if you try to skip this stage and mindlessly copy paste someone else's code, it will eventually turn into hours of Internet surfing in search of solutions to trivial problems.

• javascript fatigue;

A term "javascript fatigue" is used more and more frequently in javascript community. It means being tired from all the diversity of javascript tools and their countless versions. Some authors call 2016 "the year of combating" against the side effects of an increase in the number of tools. They expect that this year javascript community will focus its efforts on resolving this issue.

The essence of javascript fatigue comes down to the fact that if you don't control the number of modules involved in the project, managing dependencies turns into living hell. If one tool is updated to a new version, you'll have to update three other tools as well, which, in their turn, also have dependencies and so it can continue indefinitely. If you have several projects, you have to keep in mind not only the specifics of the connections between all modules but also the specifics of the connections between the versions of these modules, which are often dramatically changed in major versions.

• 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

In fact, you can easily avoid the drawbacks of modern javascript by following some simple rules.

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.

Conclusion

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.