Angular V/S Vue.JS V/S ReactJS – Choose the Best in 2018

1
Angular V/S Vue V/S React Choose the Best in
2018
2
Intro

• 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

3
(No Transcript)
4
Strengths and Limitations of Angular, Vue and
React
5
Detailed Comparison

• The Component Lifecycle Comparison

6
Component Lifecycle of Angular
7
Component Lifecycle of React
8
Component Lifecycle of Vue
9

• Comparison through Used Cases

10
Code Re-usability Comparison

• Lets 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.

11
Angular - component for the button
3 4 5 6 7 8 9 10 11 import Component, Input from '_at_angular/core'   _at_Component(     selector 'my-button',     template         ltbutton type"button"gttitlelt/buttongt      ) export class MyButton     _at_Input() title string
12
React - component for the button
1 2 3 4 5 6 7 8 9 10 11 import React, Component from 'react'   export MyButton extends Component   render()     const title this.props       return (       ltbutton type"button"gttitlelt/buttongt     )   
13
Vue - component for the button
2 3 4 5 6 7 8 Vue.component('my-button',   template 'ltbutton type"button"gttitlelt/buttongt',   props 'title', )   new Vue(   el 'container' )
14

• 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.

15
Clean Code Comparison

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

16
Angular - ProductList Component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import Component, ngOnInit from '_at_angular/core'   import Product from '../../interfaces' import ProudctService from '../../services/product.service'   _at_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 gt this.products products)   

17
ProductList Template
1 2 3 4 5 6 7 8 ltdivgt   ltproduct-card     ngFor"let product of products"     title"product.title"     desc"product.desc"     price"product.price"   gtlt/product-cardgt lt/divgt

18
ProductCard Component
4 5 6 7 8 9 10 11 import Component, Input from '_at_angular/core'   _at_Component(   selector 'product-card',   templateUrl './product-card.template.html', ) export class productCardComponent   _at_Input() title string   _at_Input() desc string   _at_Input() price number
19
ProductCard Template
1 2 3 4 5 ltdivgt   lth2gttitlelt/h2gt   ltpgtpricelt/pgt   ltpgtdesclt/pgt lt/divgt

20
ProductInterface
1 2 3 4 5 export interface Product   title string   desc string   price number
21
ProductService
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import Injectable from '_at_angular/core' import Http from '_at_angular/http'   import Product from '../interfaces'   _at_Injectable() export class ProudctService   constructor(public http Http)          getProductList() PromiseltProductgt     return this.http       .get('https//example.com/api/products')       .toPromise()       .then(res gt res.json())   
22
React- ProductList Component

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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 gt this.setState(         products products       ))        render()     return (       ltdiv id"List-Card"gt         this.state.products.map(p gt ltProductCard titlep.title descp.desc pricep.price /gt)       lt/divgt     )   
23
ProductService
4 5 6 7 //Service export class ProudctService   getProductList()     return fetch('https//example.com/api/products')       .then(res gt res.json())   
24
ProductCard Component

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import React, Component from 'react'   //Card Component export class ProductCard extends Component   render()     const title, desc, price this.props       return (       ltdiv className"card"gt         lth2gttitlelt/h2gt         ltpgtpricelt/pgt         ltpgtdesclt/pgt       lt/divgt     )   
25
Vue - ProductCard Component
18 19 20 21 22 23 //Create Component import ProudctService from ProudctService   Vue.component('product-card',     template'ltdiv class"card"gt'             'lth2gttitlelt/h2gt'             'ltpgtpricelt/pgt'             'ltpgtdesclt/pgt'         'lt/divgt',     props 'title', 'price', 'desc', )   var productList new Vue(   el 'List-Card',   data       products   ,   created()       this.productService new ProductService()       this.productService.getProductList()         .then(products gt this.products products)    )
26
ProductService
1 2 3 4 5 6 7 //Service export class ProudctService     getProductList()       return fetch('https//example.com/api/products')         .then(res gt res.json())     
27
ProductTemplate
1 2 3 4 5 6 7 ltdiv id"List-Card"gt     ltproduct-card  v-for"listItem in products"         title"listItem.title"         price"listItem.price"         desc"listItem.desc"gt     lt/product-cardgt lt/divgt
As you can see in above examples, Angular and Vue
both have upper hands over React.
28
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

29
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.

30

• Original Source
• https//www.azilen.com/blog/angular-vs-vue-vs-reac
  t-best-javascript-framework-in-2018/

31
Thanks You www.azilen.com Let us know if you
have any Question! info_at_azilen.com
1-972-325-2243