Official Blog of Azilen

The Techie Explorations

Angular V/S Vue V/S React – Choose the Best in 2018

Since JavaScript has already transpired as one of the most popular programming languages, the number of its frameworks and libraries has increased furnishing the developers with maximum potential to build the modern day applications. In order to find out the most suitable framework for your application, you need to go through an in-depth and comparative study evaluating their strengths and limitations.

In this blog, I am sharing my observations regarding the three most prevalent JavaScript frameworks Angular, React and Vue. Let me start with the basic comparison, described in the two tables below:

Strengths and Limitations of Angular, Vue and React

Detailed Comparison

[1] The Component Lifecycle Comparison

Component Lifecycle of Angular

Component Lifecycle of React

Component Lifecycle of Vue

[2] Comparison through Used Cases

  • Code Re-usability Comparison

Let’s take a simple component as described below. It is the button, which can be reused with dynamic title over it. To explore how Angular, Vue and React will execute it, please find the code snippets below. Similarly, you can bid the events as well.

Angular component for the button

import { Component, Input } from '@angular/core';

@Component(
    selector: 'my-button',
    template: `
        <button type="button">{{title}}</button>
    `
)
export class MyButton {
    @Input() title: string;
} 

React component for the button

import React, { Component } from 'react'

export MyButton extends Component {
  render() {
    const { title } = this.props

    return (
      <button type="button">{title}</button>
    )
  }
}

Vue component for the button

Vue.component('my-button', {
  template: '<button type="button">{{title}}</button>',
  props: ['title'],
})

new Vue({
  el: '#container'
})

Three of these button components are having almost equal level of reusability. However, when it comes to coupling them with dynamic events, Angular offers much ease of reusability. Vue also offers moderate possibilities of reusing the code whereas React makes the process complex.

  • Clean Code Comparison

In order to compare the Code Readability and Clean Code attributes, let’s consider the simple component that can be used to create ProductCard list.

Angular

ProductList Component

import { Component, ngOnInit } from '@angular/core';

import { Product } from '../../interfaces';
import { ProudctService } from '../../services/product.service';

@Component(
  selector: 'product-list-screen',
  templateUrl: './product-list-screen.template.html',
)
export class ProductListScreenComponent implements ngOnInit {
  products: Product[];

  constructor(public productService: ProudctService) {

  }

  ngOnInit() {
    this.productService.getProductList()
      .then(products => this.products = products);
  }
}

ProductList Template

<div>
  <product-card
    *ngFor="let product of products"
    [title]="product.title"
    [desc]="product.desc"
    [price]="product.price"
  ></product-card>
</div>

ProductCard Component

import { Component, Input } from '@angular/core';

@Component(
  selector: 'product-card',
  templateUrl: './product-card.template.html',
)
export class productCardComponent {
  @Input() title: string;
  @Input() desc: string;
  @Input() price: number;
}

ProductCard Template

<div>
  <h2>{{title}</h2>
  <p>{{price}}</p>
  <p>{{desc}}</p>
</div>

ProductInterface

export interface Product {
  title: string;
  desc: string;
  price: number;
}

ProductService

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { Product } from '../interfaces';

@Injectable()
export class ProudctService {
  constructor(public http: Http) {

  }

  getProductList(): Promise<Product[]> {
    return this.http
      .get('https://example.com/api/products')
      .toPromise()
      .then(res => res.json());
  }
}

React

ProductList Component

import React, { Component } from 'react'
import ProudctCard from 'ProudctCard
//main Component
export class ProductListScreen extends Component {
  state = {
    products: [],
  }
  productService = new ProudctService()
  
  componentWillMount() {
    this.productService.getProductList()
      .then(products => this.setState({
        products: products
      }));
  }

  render() {
    return (
      <div id="List-Card">
        {this.state.products.map(p => <ProductCard title={p.title} desc={p.desc} price={p.price} />)}
      </div>
    )
  }
}

ProductService

//Service
export class ProudctService {
  getProductList() {
    return fetch('https://example.com/api/products')
      .then(res => res.json())
  }
}

ProductCard Component

import React, { Component } from 'react'

//Card Component
export class ProductCard extends Component {
  render() {
    const { title, desc, price } = this.props

    return (
      <div className="card">
        <h2>{title}</h2>
        <p>{price}</p>
        <p>{desc}</p>
      </div>
    )
  }
}

Vue

ProductCard Component

//Create Component
import ProudctService from ProudctService;

Vue.component('product-card', {
    template:'<div class="card">'+
            '<h2>{{title}}</h2>' +
            '<p>{{price}}</p>' +
            '<p>{{desc}}</p>'+
        '</div>',
    props: ['title', 'price', 'desc'],
});

var productList = new Vue({
  el: '#List-Card',
  data:{
      products: []
  },
  created(){
      this.productService = new ProductService();
      this.productService.getProductList()
        .then(products => this.products = products); 
  }
});

ProductService

//Service 
export class ProudctService {
    getProductList() {
      return fetch('https://example.com/api/products')
        .then(res => res.json())
    }
}

ProductTemplate

<div id="List-Card">
    <product-card  v-for="listItem in products" 
        title="listItem.title" 
        price="listItem.price" 
        desc="listItem.desc">
    </product-card>
</div>

As you can see in above examples, Angular and Vue both have upper hands over React.

Which framework you should choose and when?

Of course, these three frameworks have their own strengths and limitations. You can make choices based on your preferences and requirements. Better, you opt for:

Conclusion

In this blog, I have shared a comparative analysis, encompassing several aspects of Angular, React and Vue. Three of them have their individual characteristics to empower your development process. Additionally, when you are building a complex application, you also need to find out that which framework is valid for the particular application and how will it respond as a part of an integrated technology solution.

Comments on this post

  1. Well, Azil no offence but I think your biggest experience is with Angular and it seems like you didn’t touch much of both React and Vue. I mean that’s fine unless you do posts that others might take seriously.

    As for Vue I really don’t know how long it must be for a framework to not be the new kid on the block because in your eyes 4 years aren’t long enough. This is, however, a bit funny considering JavaScript scene is the faster changing and everybody holds that as against it. Unless you’re obviously comparing Vue/React/Angular to Ember.js – then yes: they are new(er).

    One thing I can tell you right up front is you would never ever exercise this style of coding in a Vue app. I leads to unmaintainable code and total disaster. I am sure that wasn’t your intention but it came up this way.

    In regard to both React and Vue you didn’t mention POI which quite frankly surprises me a lot. This is the de-facto build system (based on Webpack) that serves very well both of those libraries. If you have not seen it I suggest you check it out.

    Cheers!

    Matthias Hryniszak
    • Hey Matthias, Thanks for your comments and appreciate your point as well as share my experience here soon.

      Kishan Bhimani

Leave a reply