Vue.js in 10 Minutes

Vue.js is a quite progressive open-source JavaScript framework that ensures the opportunity to develop web applications quickly. This framework is capable of adapting to the developers’ needs. Besides, Vue.js is regarded as one of the most approachable front-end frameworks.

In this article, we will highlight the key advantages and disadvantages of Vue.js and examine the reason for its extreme popularity.

Getting started

The first great feature which comes to attention is that we can connect Vue as a regular library, for example, as jQuery:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

Moreover, we can use directives and almost all common methods and properties of Vue.js object. Yes, we say object, as right after connecting the framework to the project, we need to create an instance of Vue:

let app = new Vue({
  el: 'css_selector',
});

After that, we can extend our instance with specific properties predefined by the framework and affect everything inside the element selected by 'css_selector'.

If you look at the examples of the code/projects on Vue, you may notice the readability of the code, so that it would be easy to understand and supplement it if necessary. Therefore, new developers may easily join the project without any problems.

Comparison with jQuery

Executing the task requiring dynamic control of many elements on the page using jQuery, the developer has to carry out various operations with DOM. As far as we are concerned, these are still the most “heavy” operations in client-side JavaScript. This problem has been solved with the help of Virtual DOM presented by React.js developers; however, Vue also has its own Virtual DOM. You can learn more about the concept of this approach using the following link.

Let’s suppose that while changing some data, we need to display these changes on the page in a particular form. No matter if the changes are received as a response to some asynchronous request or as a result of the users’ actions. In jQuery, we would most likely use .bind() to bind to the event which concerns the data changed in order to perform some action accordingly. When using Vue, we don’t need to do this. The data is synchronized and the framework itself will display the changes. This is clearly visible if we display them to the user somewhere in the Vue template. You can learn how to work with templates here.

So, Vue.js is an ideal instrument for rebuilding legacy code as we can easily connect Vue to any old project and start rewriting tones of jQuery code to a simpler and more intuitive Vue.js code.

Catching the best features of Angular and React

Okay, we know that Vue is very fast, but is it that convenient and extendable as Angular? Running ahead - yes. When developers were switching to Angular at the very beginning, many of them stated that the idea of directives is very successful. So, this is present in Vue as well and looks even more fresh with the variety and flexibility of the directives. This means that in case if it would be very difficult to solve some task with standard directives, the developers have a chance to create their own.

In Vue.js, all the best approaches of the modern frontend are implemented, namely component approach, props, one-way data flow for an obvious hierarchy of components, performance, the opportunity of rendering on the side of the backend as well as an understanding of good state management. Besides the directives, the idea of two-way binding was borrowed from Angular, and only where it may actually be needed. In general, we think that it is more difficult to write bad code in Vue.js than in React with its JSX or in Angular with its sufficiency of freedoms for the developer.

Also, Vue may be easily used for small web pages where jQuery is often used as well as big resources or SPA where js-frameworks are widely utilized. This becomes possible due to the fact that Vue-components have their life cycle like the components in React.

For more information on Vue hooks follow the link.

Installing via npm (and a little bit about Vue-cli)

If you work on the intermediate level projects or higher, you need to conduct the installation via npm. At this stage, you should have Node and npm installed. You can install the latest version of Vue using the next command:

npm install vue

Then you have to adjust the project settings from scratch.

However, you can also use Vue-cli, which allows fast creating of the project by choosing the initial structure. It can be installed with the command

npm install -g Vue-cli

Now, you have to create a project directory and execute an initialization command from it:

vue init webpack-simple myFirstApp

Vue init serves as an instruction for the creation of a new project. Then, you should specify the template which will be used for the basic structure and the name of the project. For the template name, you have to choose one of the existing:

• simple: the project is a single html-file.

• webpack-simple: Webpack and vue-loader are added to the project; only basic settings here.

• webpack: Webpack and vue-loader are added to the project, but there is a full-featured configuration for testing and hot reloading of project.

• browserify-simple: there are Browserify + Vueify in the template, with basic settings.

• browserify: there are Browserify + Vueify in the template with full configuration for testing and hot reloading.

• pwa: a blank for PWA, made on the basis of the template with webpack.

In the example, we use the webpack-simple template, which installs the configuration of the Webpack collector.

For interactive installation process, you need to enter the project name, description, author and whether to use sass:

As a result, you get the following structure:

You can now start the project with the command:

npm run dev

And start the collection process:

npm run build

Vue-cli details

Let's consider this tool in more detail. The official modules Vue CLI 3 offer TypуScript, PWA, Vuex, Vue Router, ESLint, unit tests, etc. Naturally, all of them are initially configured in the best possible manner. Moreover, you can install additional plug-ins at any time during the development process with the next command:

vue add plugins-name

Thus you are not limited by the pull selected at the beginning. In case you have a preferable scope of plugin settings which you would like to reuse, for example, Vuex, TypeScript and ESLint with a preset by Airbnb, you can save these settings in the local file ~ / .vuerc. After that, you will be able to deploy fully configured projects for several commands in your terminal.

After the first installation of the Vue-CLI project, you may notice that there is no webpack.config.js in the project root. The matter is that the majority of the project settings for Vue-CLI are abstracted into plugins and combined into a basic configuration at run-time. The additional configuration of Webpack may be performed in the new vue.config.js file. For example, when you want to add the Webpack plugin, add the necessary code to the configureWebpack property.

vue.config.js:

module.exports = {
	configureWebpack: {
		// will be added to the final config file
		plugins: [
			new my-plagin()
		]
	}
}

More details can be found here.

Comparison with Angular and React

As a result, we have prepared a comparative table of the characteristics of some of the most popular JavaScript libraries and frameworks.

Despite the lag of Vue.js in the number of contributors on GitHub, it is worth mentioning that it is the newest framework among the existing. In addition, it is gaining popularity much faster than its counterparts. This is indicated by the number of stars collected in a fairly short period of time.

These frameworks are essentially designed to solve the same tasks. A significant difference is in the approach to the solution and the threshold of entry. Thus, we would use Vue.js to write SPA of small and medium size. This doesn’t mean that it is not appropriate for large projects; it’s just that it is slightly inferior to Angular and React.js, according to the general and subjective opinion of the js-community. If the project is of a rather large scale, then developers are inclined to choose React or Angular. For such cases, it is already easier to decide, since many initially understand whether they need MVC approach or some kind of freedom of choice in implementing architectural solutions with React. Angular is well established in the enterprise, and there are reasons for this. For example, it uses TypeScript by default and its strict typing is well perceived by backend developers who write for example in C# or Java.

Conclusion

Vue.js is an open source JavaScript framework allowing easy development of interactive web interfaces. In this article, we explored the main characteristics of Vue, showed how to start working with Vue, and compared it with some of the most popular JavaScript libraries and frameworks.

Share your thoughts and ideas in the comment section below and tell us about your experience with JavaScript frameworks.