Legends of VueJS

Bogdan Steblovskiy

Bogdan Steblovskiy

Senior Frontend Developer

Legends of VueJS

A long time ago the world of a frontend reminded a set of chaotic pieces of a code designed to create functionality for a client part of a web application. There was a lack of practices and methodologies able to standardize somehow the process of writing code. May be said, that functional inquiries of a web application were considerably in advance of its opportunities.

Fortunately, these nasty times have passed and the era of ripeness for application`s client part has come. Now in frontend developer`s hands, there are more than enough tools and specifications for a writing of everything that is necessary for solving business challenges. However, it isn’t always possible to keep pace with dynamically developing branch and to choose the optimum tool for writing frontend. This article will tell us all the secrets of copying pretty large application for start-ups from familiar for most developers jQuery to VueJS.

For completeness, let’s spend some sentences to describe a story of the project, which has endured so exciting metamorphoses. This startup was created by us from scratch on the basis of Ruby on Rails. At a stage of MVP it wasn’t still up to the end clear what this application will turn into, besides, investors needed to quickly create functionality to demonstrate the project. Due to all this, the project was initially written on jQuery.

Eventually, the code base expanded and the functionality became complicated. As a result, the situation became almost critical. Each new part of functionality took more and more time, especially if integration with already existing parts of the application was required. It was time to think of using a tool from the modern world of a frontend.

 

The matter is, that from the standpoint of a frontend developer, the framework of Ruby on Rails focuses on writing a monolithic application with static pages including code “sewed” inside the frontend. One can say, that there is a settled rails-way method of frontend writing, which is designed for creating a client part in an application of any complexity, but ways of achieving the goals aren`t customary for a usual frontend developer. The situation changes fundamentally while VueJS in Rails was used for the project, however, let`s tell this in order.

 

Certainly, there is a plenty of methods for manipulations with frontend code inside Rails monolith. It is possible to dynamically update pieces of the page without reset, to load data from the server, to process a CSS and JS code and, generally, to complete all tasks. However, for keeping up with the time a frontend developer all this is more similar to hacks. They bring more difficulties in development and can have negative consequences in the future. So what is the reason of using hacks from the world of Rails applications if exist settled client’s code writing practice?

 

Fortunately, this development approach allowed us to migrate on VueJS without serious consequences. It is worth to mention directly, that a client part of the project did not represent itself the endless incomprehensible spaghetti code. At the initial stages, we applied the best practices of code division so the project consisted of separate independent modules. Each of them was in charge of the UI component and concentrated in it a part of business logic that allows interacting through clear API. Besides, much attention was paid to the writing of qualitative CSS with using of BEM methodology, as CSS is very often a narrow place in productivity of most web applications. However, even intelligently and periodic refactoring did not save code writing from problems of the difficult projects based on low-level jQuery.

The question is, that during creating of any web application in an imperative way you will reach a point sooner or later when you start creating your own frontend framework, step by step. If for large projects bringing stable income, writing of own tools is an acceptable option, then for dynamically developing start-ups it becomes a stumbling block. Due to it, each separate part of functionality becomes not fully reliable, writing of a code takes disastrous a lot of time. Furthermore, it requests for changing already existing functionality become a real problem for the developer and for the fixed deadlines. Considering all these factors, good frontend tool usage is a fundamental point.

Why VueJS has been chosen? Actually, any web development tool has to be chosen wisely and individually for the project, but not taking into account trend or pretty name. That`s why we have chosen VueJS. This tool is only gaining popularity, but isn’t fashionable and “progressive”. As React, that most of the developers start using just to use and most of startups` founders demand just because of everyone around talks about it.

 

VueJS is perfect for writing frontend code in Rails the application, it is much better than any other framework. VueJS is unpretentious, it doesn’t need code bundler or any other tools. VueJS can just be connected with the page as jQuery, and begin to use at once, without any workarounds. Besides, VueJS allows rewriting the existing project using modern frontend tool with surprizing straightforwardness. It`s able to do it step by step, without breaking terms, without providing the allocation of the budget on migration and without breaking the habitual rate of product`s development. By the way, the advertised React can’t manage these tasks. Migration with jQuery on React will be more problematic for developers and sad for the budget. Therefore, unfortunately, many projects still remain with a low productivity and a confusing code. But there is already VueJS which, by the way, is more productive than the competitors, so why don’t we begin to use it already today?

 

What have we achieved by moving with jQuery to VueJS? First of all, creating of functionality began to take several-fold less time, and the code at the same time has made a quantum leap in quality. Besides, we have received a productive and responsive web application which is convenient for use, and, as we know, the more happy users, the more increasing sales.A frontend code has achieved at last stable architecture with which it is convenient to work, support and make changes if necessary. And the most important is, that usage of VueJS has allowed keeping the pace of development at the previous level, without spending funds from investors for improvement of code base. Do you still doubt whether it is worth to use VueJS?

 

Summing up, it is possible to tell that VueJS is the optimum choice as the tool for writing frontend code in a web application in 2017, especially during the work with Ruby on Rails. It is capable of solving all business challenges set for the project, it gives the chance to write modern highly productive frontend and also, thanks to the simplicity, allows to spend less money for development. Besides, VueJS is perfectly suitable as for small startups, that only making first steps, as well as for the big high-loaded projects with a difficult client part of the application. Well, let`s begin to write on VueJS?

Join our Newsletter