Fast-Track to Vue.js

Vue.js as the name rhymes with View, similar is the concept. It is an open-source javascript framework for creating user interfaces in an organized and simplified way.

It was created by an ex-employee from Google named Evan You in Feb 2014.

Vue.js is an approachable, versatile and performant framework that helps to create maintainable and testable codebase.

Performance optimization in Vue.js is not dependent on the developers due to DSL (Domain-Specific Language) which allows getting more done with less code (e.g. v-on modifiers).

Components can be categorized into two major parts at a higher level:

  1. Presentational Components, and
  2. Logical Components.

Presentational components use templates and logical components use JSX. Though the percentage depends on the app, generally presentational are more common.

Following are the features available with Vue.js:

Virtual DOM

Any changes done are not directly reflected in the DOM, instead, a JavaScript data structure is created/updated which is nothing but the mirror-image of the DOM and compared with the original data structure. Later on, the real DOM is updated with the final changes as observed by the user. This made the changes to take place at a faster rate with less expense and optimally.

Data Binding

With the help of binding directive, v-bind HTML attributes can be manipulated and style can be changed.

Components

It provides the concept of splitting the page into reusable components each having its own HTML, CSS, and js.

Event Handling

The DOM elements are provided with attribute v-on to listen to the events.

Animation/Transition

It has an inbuilt transition component to provide the transition effect to the element. We can also add external animation libraries to provide more interactivity to the interface.

Computed Properties

Vue.js listens to the changes made to the UI elements without any overhead of coding.

Templates

Vue.js bind the DOM with the instance data by using HTML-based templates.

Directives

Vue.js has built-in directives to perform various actions on the frontend. Eg. v-if, v-else, v-model, v-on, v-bind, v-show etc.

Watchers

Watchers are attached to the data that keeps changing which makes the code fast.

Routing

Vue-router is used to navigate between the pages.

Vue-CLI

Vue.js can be installed, build and compiled at the command line using the dedicated command line interface vue-cli.

Vue.js vs React

Virtual DOM

Both Vue.js v/s React uses virtual DOM which makes it faster.

Template v/s JSX

Vue.js uses HTML, JS, and CSS separately for each component but in React all are a part of JavaScript which is a JSX approach.

Installation Tools

React uses create react app and need web pack for the build whereas Vue.js uses vue-cli /CDN/npm without any requirement of web pack build.

Popularity

The big name, Facebook behind React i.e. which makes it more popular than Vue.js.

Vue.js vs Angular

Directives

Vue.js and Angular have a lot of similarities such as directives v-if and ngIf, v-for and ngFor.

Complexity

Vue.js is very easy to learn but for Angular, one should be comfortable with typescript first. Also, Angular installation is a bit tacky process.

Popularity

At present, Angular is used by several organizations making it more popular than Vue.js.

Dependencies

Angular has a lot of inbuilt features but Vue.js needs to depend on third-party libraries.

Backward Compatibility

Vue.js is good with backward compatibility but Angular versions don’t support it due to the core differences.

Installation Tools

Angular uses angular-cli, so as Vue.js with vue-cli

Framework, library for Vue.js:

Vuex

Vue.js can be used to build SPA’s but as the size increases, it becomes tedious to manage the state of components and communication between them. Then there comes Vuex which works as a centralized state management in the application.

Vuex is a library which is more like a state management pattern based on Flux architecture. Flux architecture is used by Facebook for client-side web applications. The object created in Vuex is termed as a store.

Nuxt.js

It is a higher-level framework that enables us to generate static website pages which are good for SEO and extremely fast. The main scope is UI rendering without letting know about the client and server code distribution. Nuxt.js comes with features like Asynchronous Data, Middleware, Layouts, etc. It configures libraries needed for developing aVue.js application. It uses Webpack along-with loaders to bundle, split and minify the code.

Vuetify

It is an another progressive, reusable semantic component framework. It aims to provide semantic and reusable components forVue.js. With the help of either npm or yarn one can include Vuetify by pulling it in node_modules into an existing project.

Why Vue.js?

Vue.js is very flexible and simpler both in terms of design and  API. The modular approach of Vue.js makes it adaptable to a wide range of projects, while also providing the advanced features such as linting, hot module reloading, CSS extraction etc. It makes data flow easier by enforcing a one-way data flow between components It is much easier to optimize as it doesn’t involve dirty checking. In a smaller-scale app, typescript may lower the productivity due to unnecessary overhead which can be overcome by Vue.js. Though Vue.js is comparatively new but is already being used in various large-scale projects eg.  Alibaba, Baidu, Xiaomi, and Tencent.

Vue.js has take the position in the market and can be a good competitor for Angular and React.

Mapu

I am a technology freak with passion for UI technology.

Leave a Reply