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.
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:
5 mins
