In the past decade, Javascript frameworks and libraries have taken the tech world by storm. AngularJS, (Knockout + Durandal + RequireJS), Angular, React, Vue, etc are some of the frameworks which were either widely used in the past or are currently widely used. There are many supporting libraries such as loadash, etc., which support these frameworks and make them a complete modern web development framework.

The above-mentioned frameworks have come a long way. Some, such as AngularJS, were widely used a few years ago. Knockout, Durandal, and RequireJS were also popular. In the case of AngularJS, its earlier version was entirely rewritten with major, breaking changes. Angular v2.0 onwards (as compared to AngularJS v1.x) is a huge success and is widely used to create modern web applications. Now, the criteria for selecting either Angular, React, or Vue depends on various parameters.

One such library that is widely used these days is Vue.js. (Hereafter, we will refer it by its popular name Vue). So why Vue? What advantage does Vue bring when compared to Angular and React? Why should we adopt Vue? What is it learning curve? What kind of investment will be required by an organization to train their existing Angular or React resource to adopt Vue?

Briefly, Vue is a JavaScript library for building interactive web interfaces. Combined with other development tools, it also becomes a framework. Vue provides data-reactive components with a simple and flexible API. Moreover, it is lightweight and much easier to get started with when compared to other frameworks.

Vue is created by Evan You. According to You, “Vue is a more flexible, less-opinionated solution (than Angular) that allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It’s only an interface layer, so you can use it as a light feature in pages instead of a full-blown SPA.”

Our organization has rich experience of working with both Angular and Vue. The purpose of writing this blog is to help you understand conceptual similarities (rather than differences) between Vue and Angular. This blog can be helpful to understand the level of effort that will be required to train an Angular developer to adopt Vue, and vice versa.

You may also like:
Vue.js Tutorial 1 — Hello Vue.

Command Line Interfaces

A Command Line Interface (CLI) is used to speed up application development. Typically, by using a CLI, you don’t need to spend time installing and configuring all the required dependencies and wiring everything together.

In Angular, we have the Angular CLI. You can use the Angular Console in case you are not familiar with commands and prefer a UI. Whereas in Vue, we have the Vue CLI. And we have Vue UI in case you prefer a GUI.

This is the first similarity in the Vue vs Angular debate.

Components

In Angular we’re setting up a Module to wrap some component(s) with @NgModule and @Component decorators. In Vue, you’re using Vue.component() to register your components on the Vue instance.

Everything is based around components, nesting them within each other, passing data between them, and so on.

As a composition model, components are meant to be self-contained sections or “bits” of your application that you can then reuse in more specific contexts. The great thing they allow is a way to encapsulate logic, providing API guarantees: you pass x, y, and z into this component and you will get these a, b, c behaviours out of it. Anything the component does internally is its own business.

This is the most important similarity in the Vue vs. Angular debate.

Passing Data Between Components

Data passing patterns are simplified with a component-based application, as communication is done from a parent to a child as well as from child to parent.

In Angular, @Input and @Output bindings are defined in the component and bound in the template. @Input is used to pass data from parent template to child template. @Output is used to pass data from child template to parent template. @Output behaves like events in that they are emitted by the child and listened to by the parent.

In Vue, props are passed from parent to child and the child can emit events back to the parent. For example, from the following parent component, we are passing data as params:

It is handled in child component as below:

In and Out of Components Angular Vue
input property @Input() props
emit an event @Output() with EventEmitter this.$emit

Templates, Styles, and Tooling

Angular leans towards one folder per module/component, where your TypeScript, template (HTML) and style files live. Templates and styles can be written inline in an Angular component, but the best practice is to have separate files. This is a good idea for large SPAs.

Vue is called “the progressive framework” because it offers different features depending on the size of the application being developed. In the simplest case (Vue globally included using a CDN and script tag), writing templates inline is encouraged. Vue also offers a CLI and packages that integrate with build tools, such as webpack.

The preferred way to write components in this environment is the single-file component file with a template, a script, and a style tag. Vue-loader compiles the template into JavaScript along with the script section and extracts the contents of the style tag into a stylesheet at build time. You have a option to use typescript as well in case TypeScript is your choice over JavaScript.

Lifecycle

Component lifecycles are provided under different method names in both Angular and Vue.

Both provide a mounted/dismount, which refers to the component being initialized in the DOM, and it is not needed anymore. It’s also possible to listen to updates to data and props which usually trigger a re-render of the template.

Bindings

The bindings for Angular and Vue are indeed interesting. In Angular, we have a (click) binding syntax, while in Vue, we use @click. Here are some other similarities in the bindings, in the following table:

Binding Angular Vue
click event (click) @click
enter key-up event (keyup.enter) @keyup.enter
add/remove content *ngIf v-if
model binding [(ngModel)](Two way binding) v-model(Two way binding)
String interpolation {{ }} (one way binding) {{ }} (one way binding)
HTML element reference # ref

HTTP

In real-world applications, an HTTP library is used to communicate with other applications. In case of Angular and Vue, the HTTP library is mainly used for CRUD operations using APIs.

Mostly, those libraries have the same set of methods. Angular uses RxJS by convention to communicate with HTTP, while Vue uses Axios with promises by convention. That’s why, for asynchronous operations, we see subscribe for Angular and then for Vue in the calls to the service. These are just different techniques, and the code is very similar.

Custom Directive

In both Angular and Vue, the primary form of code reuse and abstraction is components. However, there may be cases in which you need some low-level DOM access on plain elements, and this is where custom directives would still be useful.

In Angular, we use the @Directive decorator to create a new directive. For example:

Whereas in Vue, we use Vue.directive to create directives. For example:

Filter/Pipe

Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. There are some built-in pipes, but you can also build your own pipes. A pipe takes in a value or values and then returns a value. This is great for simple transformations on data but it can also be used in other unique ways:

Similarly, Vue has filters for the exact same purpose. Vue allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: mustache interpolations and v-bind expressions (the latter supported in 2.1.0+). Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol: 

Routing

In an SPA, to navigate from one view to another, a routing system needs to be set up. Angular provides its own routing module; so does Vue, though it requires additional installation.

Angular and Vue’s routes are configured as part of the initialization of an app; it happens before any of the components are rendered. In Angular and Vue, the code pertaining to the router module and the routes doesn’t intermingle with that of components. To display the active view, Angular and Vue use a placeholder directive (router-outlet and router-view, respectively).

Both Angular and Vue supports lazy loading through routing.

State Management

State Management is a must-have for any enterprise application. But what is the application state? Theoretically, it is the entire memory of the application, but, typically, it is the data received via API calls, user inputs, presentation UI State, app preferences, etc.

Simply put, it is the data that can differentiate two instances of the same application. A simple concrete example of an application state would be a list of customers maintained in an application.

In the case of Angular, NgRx is widely used for state management. It is inspired by Redux, which is a framework-agnostic state management library.

Whereas in Vue, VUEX is a default state management technique.

DOM Rendering

Until now, we have only covered similarities between Angular and Vue. However, it is important to cover a major difference, i.e. DOM Rendering. Vue uses a virtual DOM (similar to React) as compared to the DOM being used by Angular. So, the question arises — what is virtual DOM and how is it different from DOM? What are its advantages?

A few years ago, React captured the excitement of the developer community by streamlining the idea of a virtual DOM. It is React, from which Vue 2.0 onwards has adopted the idea of a Virtual DOM. It is from a Virtual DOM that React and Vue derive better performance.

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from browser-specific implementation details. Since the DOM itself is already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.

Perhaps it’s better to think of the virtual DOM as Vue’s local and simplified copy of the HTML DOM. It allows VUE to do its computations within this abstract world and skip the “real” DOM operations, which are often slow and browser-specific. This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than it is really required.

How a Virtual DOM Helps 

As mentioned earlier, manipulating the DOM is slow. Manipulating the virtual DOM is much faster because nothing is drawn onscreen. Technically, when the virtual DOM updates, Vue compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.

By comparing the new virtual DOM with a pre-update version, Vue figures out exactly which virtual DOM objects have changed. This process is called “diffing.” Once Vue knows which virtual DOM objects have changed, then Vue updates only those objects on the real DOM.

This makes a big difference, as only updated parts of the DOM are redrawn. Also, the same principle applies when you navigate from one page to another page.  If you have common sections across pages, the DOM will not update and redraw it unless there is some update.

So, how quickly will an Angular developer be able to adopt Vue’s virtual DOM? According to our experience, it will be a very straight forward adoption with the HTML portion of the code in .vue files being written between:

In our experience, developers (Non-React developers working on React for the first time) faced little difficulty in adopting React Virtual DOM (i.e. JSX as compared to Vue’s Virtual DOM).

Nitor’s Experience of Using Vue

At Nitor, Vue has helped us in the following ways:

  1. It is globally proven that Vue is good for prototyping, and Nitor has the experience to prove this. Vue has helped us to create prototypes faster. This, in turn, has helped our customers to reduce their go to market time.
  2. In many cases, we were able to integrate and use Vue with legacy applications without introducing any breaking changes in the legacy architecture.
  3. Point 2 has proved to be a successful beginning of the modernization journey for many of our customers.
  4. Our developers found Vue to be simpler as compared to Angular or React. Our overall experience says that it took us around 40% to 50% less time to train a Vue developer as compared to an Angular or React developer.

Conclusion

We have tried to list similarities of both Angular and Vue within the above-discussed points. Conceptually, there is a 65 to 70% similarity between Angular and Vue.

Also, in many cases, we found Vue to be simpler and cleaner as compared to Angular. Therefore, we confidently assert that an Angular developer can very easily adopt Vue with a minimal learning curve.

Further Reading



Source link

Write A Comment