FOLASAYO SAMUEL OLAYEMI
SV_D_CURIOUS_SOFTWARE_ENGINEER'S BLOG

SV_D_CURIOUS_SOFTWARE_ENGINEER'S BLOG

Major Differences Between ReactJS, VueJS And AngularJS That You Must Know as a Frontend Developer

Photo by Glenn Carstens-Peters on Unsplash

Major Differences Between ReactJS, VueJS And AngularJS That You Must Know as a Frontend Developer

FOLASAYO SAMUEL OLAYEMI's photo
FOLASAYO SAMUEL OLAYEMI
·Mar 11, 2022·

8 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Foremost, let's start with the definitions and some minimal examples.
  • 1. VueJS :
  • 2. ReactJS :
  • 3. AngularJS :
  • The differences between ReactJS, VueJS and AngularJS are:

Foremost, let's start with the definitions and some minimal examples.

1. VueJS :

What is VueJS?

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

Here is a minimal example:

JS

import { createApp } from 'vue'; 

createApp({ 

  data() { 

  return { 

   count: 0 

   } 

 } 

 }).mount('#app')

template:

<div id="app"> 

 <button @click="count++"> 

    Count is: {{ count }} 

  </button> 

</div>

The above example demonstrates the two core features of Vue:

- Declarative Rendering: Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.

- Reactivity: Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.

Vue is a framework and ecosystem that covers most of the common features needed in frontend development. But the web is extremely diverse - the things we build on the web may vary drastically in form and scale. With that in mind, Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways:

  • Enhancing static HTML without a build step
  • Embedding as Web Components on any page
  • Single-Page Application (SPA)
  • Full-stack / Server-Side-Rendering (SSR)
  • Jamstack / Static-Site-Generation (SSG)
  • Targeting desktop, mobile, WebGL or even the terminal

2. ReactJS :

What is ReactJS?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Here are minimal examples:

- React as a simple component:

React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.

JSX is optional and not required to use React, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. In my next article, I will explain much about JSX.

JSX

 class HelloMessage extends React.Component { 

  render() { 

   return ( 

      <div> 
        Hello {this.props.name} 
      </div> 
  ); 
  } 

}

ReactDOM.render( 
 <HelloMessage name="Taylor" />, 
 document.getElementById('hello-example') 
);

- React as a Stateful Component

In addition to taking input data (accessed via this.props), a component can maintain internal state data (accessed via this.state). When a component’s state data changes, the rendered markup will be updated by re-invoking render().

JSX

class Timer extends React.Component { 

  constructor(props) { 

    super(props); 

   this.state = { seconds: 0 }; 

 } 

 tick() { 

     this.setState(state => ({ 

       seconds: state.seconds + 1 

    })); 

 } 

  componentDidMount() { 

   this.interval = setInterval(() => this.tick(), 1000); 

  } 

  componentWillUnmount() { 

   clearInterval(this.interval); 

  } 

 render() { 

   return ( 

      <div>
        Seconds: {this.state.seconds}
      </div>
    ); 

  } 

 } 

 ReactDOM.render( 
 <Timer />, 
 document.getElementById('timer-example') 
 );

3. AngularJS :

What is AngularJS?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. AngularJS teaches the browser new syntax through a construct we call directives.

Examples include:

  • Data binding, as in {{}}.
  • DOM control structures for repeating, showing and hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching new behavior to DOM elements, such as DOM event handling.
  • Grouping of HTML into reusable components.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

AngularJS Extends HTML

  • AngularJS extends HTML with ng-directives.
  • The ng-app directive defines an AngularJS application.
  • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  • The ng-bind directive binds application data to the HTML view.

Here is a minimal example:

HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">

<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>

</body>
</html>

Now, you should understand the basic differences between the three JavaScript Frameworks.

The differences between ReactJS, VueJS and AngularJS are:

  • Angular is a JavaScript framework built using Typescript.

  • In Vue, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes. Each component can be considered to have shouldComponentUpdate automatically implemented for you, without the nested component caveats.

  • ReactJS is a JavaScript library and built using JSX.

  • Angular is mostly used to build complex enterprise-grade apps like single-page apps and progressive web apps.

  • Vue, also have render functions and even support JSX, because sometimes you do need that power. However, as the default experience, they offer templates as a simpler alternative. Any valid HTML is also a valid Vue template.

  • React is used to build UI components in any app with frequently variable data.

  • Angular ensures that data is always sync at all levels, with the two-way data binding.

  • The default method of styling in Vue is through more familiar style tags in single-file components. Single-file components give you full access to CSS in the same file as the rest of your component code.

<style scoped>

 @media (min-width: 250px) { 

    .list-container:hover { 

      background: orange; 

   } 

  } 

 </style>

The optional scoped attribute automatically scopes this CSS to your component by adding a unique attribute (such as data-v-21e5b78) to elements and compiling .list-container:hover to something like .list-container[data-v-21e5b78]:hover

  • ReactJS has an easier learning curve, so the ramp-up time is much shorter.

  • Vue offers a CLI project generator that makes it trivially easy to start a new project by featuring an interactive project scaffolding wizard. You can even use it for instantly prototyping a component.

  • React offers a better mobile cross-platform framework solution.

  • AngularJS is a structural framework for developing dynamic web apps.

  • ReactJS offers a single template with create-react-app that assumes you’re building a single-page application.

  • React is renowned for its steep learning curve. Before you can really get started, you need to know about JSX and probably ES2015+, since many examples use React’s class syntax. You also have to learn about build systems, because although you could technically use Babel Standalone to live-compile your code in the browser.

  • Vue provides unobtrusive reactivity on plain JavaScript objects and fully automatic computed properties.

  • Recent versions of Angular, with AOT compilation and tree-shaking, have been able to get its size down considerably.

  • To get started with Vue, all you need is familiarity with HTML and ES5 JavaScript (i.e. plain JavaScript).

  • Vue enforces a one-way data flow between components.

  • Some of Vue’s syntax will look very similar to AngularJS (e.g. v-if vs ng-if). This is because there were a lot of things that AngularJS got right, and these were an inspiration for Vue very early in its development.

  • ReactJS is a JavaScript library that allows you to build UI components.

  • AngularJS is based on MVC (Model View Controller).

  • React is based on Virtual DOM.

  • AngularJS provides testing and debugging for a complete project with a single tool.

  • React requires a set of tools to perform different types of testing.

  • AngularJS doesn’t provide adding JavaScript library to the source code.

  • Vue uses a transparent dependency-tracking observation system with async queueing - all changes trigger independently unless they have explicit dependency relationships.

  • Angular essentially requires using TypeScript, given that almost all its documentation and learning resources are TypeScript-based. TypeScript has its benefits - static type checking can be very useful for large-scale applications, and can be a big productivity boost for developers with backgrounds in Java and C#.

  • Vue offers official typings and official decorator for those who wish to use TypeScript with Vue

  • React allows adding JavaScript library to the source code.

  • AngularJS becomes slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to “stabilize” if some watcher triggers another update.

  • In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within JavaScript.

  • In AngularJS, directives do everything and components are just a specific kind of directive.

React and Vue share many similarities. They both:

  • utilize a virtual DOM.

  • provide reactive and composable view components.

  • maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries.

Check this ads to explore

Did you find this article valuable?

Support FOLASAYO SAMUEL OLAYEMI by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this