React Vs Angular Vs Vue

React

Overview

React was developed by facebook. Initially released in 2013 to create a dynamic UI for different websites. React is based on the virtual DOM(Document Object Model)which is an in memory representation of DOM elements generated with react components. React is used by facebook, twitter, paypal and many others. 

Syntax

Below are the commands for creating a new project for reactJS.

     npx create-react-app hello-world
     cd hello-world
     npm start

React uses JSX which combines javascript with HTML. Here the below code is for hello world.

import React from “react”
function HelloWorld(props) {
return < li >Hello World< / li >
}
export default HelloWorld;

Advantages of React

  1. Update process is optimised and accelerated
  2. JSX makes components/blocks code readable
  3. Using React+Es6/7 the application gets high-tech and is suitable for highload systems.
  4. Reacts data binding establishes conditions for creation of dynamic applications.
  5. Prompt rendering using a complete method to minimise number of DOM operations helps to optimise the updating process and accelerate it.
  6. Testable React native tools are offered for testing debugging code.

Disadvantages of React

  1. Learning curve. Being not a full-featured framework. It requires depth knowledge for integration user interface free library into mvc framework
  2. View-orientedness is one of the cons of reactjs. It should be found model and controller to resolve view problem
  3. Lots of developers dislike JSX REact’s documentation, manuals are difficult to understand for newcomers.
  4. React is a large size library.

Angular

Overview

Angular was developed by Google. Initially released in the year 2010. This is an open-source javascript framework used mainly for single page application development. In 2016 the angular functioning model was changed by the google team and today the angular algorithms are based on typescript,RxJS and Zone.js only. The angular framework uses both javascript and typescript.

Syntax


Below are the commands for creating a new project in AngularJS.   

ng new hello-world
    cd hello-world
    ng serve –open

Angular uses both javascript and typescript. This project code compiles typescript into browser compatible javascript code. Here the below code is for hello world in angular 

import { Component } from ‘@angular/core’;
@Component ({
  selector: ‘my-app’,
 template: `< h1 >Hello World<  /h1 >`,
})
export class AppComponent{};

Advantages of Angular

  1. It is very easy to develop applications in Angular.
  2. Angular can distribute a single block into multiple blocks. Hence, gives the developer the ease to act on the components individually.
  3. Angular enjoys large community support since it is the oldest framework available.
  4. Since it has a component-based structure, its components can be used again.
  5. The programming quality on Angular is very high, thus it gives good programming feel to the programmers.
  6. It consists of built-in functionalities.

Disadvantages of Angular

  1. It requires a lot of learning and study because of its complex syntax.
  2. Angular consists of a steep learning curve

Vue

Overview

Vue also known as vue.js. Vue is the youngest out of the three. It was developed by ex-google ‘Evan You’ in 2014 and has increased in popularity over the past few years. 

It was not popular to react. Vue is used by large companies like alibaba , qGag and Gitlab

.

Syntax

Below are the commands for creating a new project in Vue.

     vue create hello-world
     cd hello-world
      npm run serve

Here the below code is for hello world in vue. 

new Vue({
   el: ‘#app’,
   data: {
     message: ‘Hello Vue.js!’
   }
 })


Advantages of Vue

  1. Vue is the lightest framework at 20KB and simple to work.
  2. It integrates with other programming languages very easily.
  3. It is easier to work on Vue Since it has an easy learning curve.
  4. Vue gives faster performance due to its small size.
  5. Users have started switching over to it over other options.
  6. It has good documentation.

Disadvantages of Vue

  1. It has a small community of users and developers in comparison to React and Angular.
  2. It is not very flexible when teaming up with large projects.
  3. Vue has very limited features.

Differences

        React          Angular          Vue  
Current Version16.6.382.17
official Sitereact.organgular.iovue.js.org
complexity levelMediumHighEasy
Initial heap size(MB)8.38.77.6
Heap size after action(MB)15.115.416.4
Load timeMediumHighLow
Data bindingUni-directionalBi-directionalBi-directional
ModelVirtual DomMVCVirtual DOM
Used byFacebook,UberGoogle,MixAlibaba,Gitlab

Survey

According to the stack overflow survey the number of developers using web frameworks is React.

Leave A Comment

Your email address will not be published. Required fields are marked *