Front-end toolkit: useful utilities and features to speed up development

Gone are the days when it was enough for the fronttender to open Notepad, write a few lines of code, check it in a browser and upload it to the server via FTP. Modern user interface development has become much more complicated. The JavaScript ecosystem is growing and changing so rapidly that it’s easy to get confused. In this post I will tell you what the frontend command uses. Parallels to optimize performance.

I am sure that right now, somewhere in the world, two front-end vendors are seriously arguing about which framework is better to use for the project. And the third one is connected to them – an ardent opponent of frames. He claims that you need to write in vanilla JavaScript, because all these progressive pribluds only inflate code with unnecessary dependencies and are generally designed for those who can not program. Their discussion is likely to end in nothing. An hour later, everyone will quietly disperse to jobs. Everyone will remain in their own opinion and will work as they used to.

In my opinion, such disputes are worse than disputes about what appeared earlier, a chicken or an egg. Because the only true effective solution for problem-free front-end development does not exist. I agree that all the basic functions can be done without using Angular, React, Vue.js and similar frameworks. But if the goal is cooperation, and you create a large-scale application not just one, but as a team, it’s easier with them.

Of course, you can do without them, but they make it possible not to waste time creating a standard, set the structure (you always know where it is), ease the routine and speed up the development. If we consider that language is an alphabet, then the framework can be considered as a phrasebook with cliche dialogs that make it easy to build communication.

In this post, I will share useful tools that the team and I use to create the user interface. They greatly simplify both joint development and further support of the project.

***
I think for starters it’s worth telling a little about yourself. I entered the world of IT nine years ago, in 2011. He started as a full stack in one small organization. Then he was engaged in hybrid mobile applications, he was responsible for the part of the logic that was in WebView. And a few years later he ended up in Parallels. Here I work in the Cloud team, which is a provider of web solutions for all products of the company. The bulk of business features require me to think through and implement front-end tasks. Now focused on developing the My Account portal.

As you probably already understood from the text above, the creation of the interface of this web application was not without its framework. We chose Vue.js. To make it pleasant to work with him, they also deployed additional tools. This is what helped us optimize the development process as much as possible.

Vue CLI

This command line utility includes a lot of useful features and is designed for quick project development. Roughly speaking, it creates a standard framework for launching and allows you to focus on creating an application without thinking at the initial stage about the tools and configuration of the assembly. They can be customized to the needs of the project later.

Vue CLI provides support for core web development technologies. Out of the box are tools such as Webpack, Babel, TypeScript, ESLint, Sass. And besides, there is built-in support for unit and end-to-end testing using Mocha and Nightwatch.

Vue devtools

An extension for the browser that allows you to debug the application in real time. It has access to the properties and methods of components, a list of all events. You can completely control the state of the application through a web page and not wait for a partition to see the result.

Works in Chrome and Firefox. There is no official extension for other browsers, but you can run Vue devtools through the Electron app. Then the tool will be available in any environment.

Zeplin

The service makes the transfer of layouts to development convenient. As in any large company, we have a set of UI components. Previously, it was in PSD files and because of this access to it was very chaotic. And in Zeplin there is such a thing called global style guide.

In it, you can collect all the rules for building enterprise interfaces. For each UI component, CSS code is automatically generated – the colors, sizes, indents and other properties of each block that make up the element are indicated. That is, styles no longer need to be implemented every time from scratch, which greatly speeds up the work. PSD era is over.

Plus, there is a history of all the changes. You can easily track how it was at the initial stage and what happened at the end.

Git url as dependency

This is the npm feature we are using. We needed to share a set of UI components so that colleagues within the company had access to it and could use it for their needs. The most obvious solution to this problem is the npm package. But we didn’t want it in the public registry, the local npm server was not a good idea, so we used the git + npm bundle.

Thus, each Parallels employee has access to the UI code base, and since it is git, the versioning problem is also solved. There will be no problems due to updates, nothing will break.

Sentry

To collect errors and logs that occur on the client side, without waiting for a complaint, we connected Sentry. This tool tracks code execution in custom browsers.

If a bug creeps out, a request is automatically sent to us with a full report that reflects both the essence of the incident and the list of actions that preceded it. Based on these data, it is very easy to find the reason and fix everything.

It also allowed us to relieve our technical support a bit, saved our colleagues from unnecessary calls and calls.

About the dangers of addictions

Finally, a little advice. Try to write utilities yourself. Recently libraries with ready-made solutions have become very popular. It comes to the fact that front-end tenders take dependencies even for “single-line” functions that they can write with their eyes closed. What does this threaten? A failure.

An instructive story happened four years ago. One person removed his 11-line package from the npm registry and thus broke about a thousand projects. Developers around the world began to receive error messages when trying to deploy their applications due to the lack of a tiny module called “left-pad”.

So do not be lazy, do not replace the code with a bunch of dependencies. Rely on yourself and write small utilities yourself, and use ready-made library solutions only for complex functions – where they really help not to reinvent the wheel.