DEV Community

Cover image for Comparing Angular, React, Vue, and Vanilla-JS
bob.ts
bob.ts

Posted on • Updated on

Comparing Angular, React, Vue, and Vanilla-JS

Let's take an analytical look at several of the key library / frameworks and compare them to Vanilla JavaScript.

Concept

Basically, I want to explore these tools in various ways:

  1. Installation Processes
  2. Setup Processes
  3. Code Management
  • Routing
  • Binding Props
  • Binding Events
  • Services (API Access, etc.)
  • Referencing Assets
  1. Unit Testing
  2. Code Execution (Build Process and Size)

To do this, four separate builds of the same project were implemented. There were three "frameworks":

  1. Angular
  2. React
  3. Vue

And, the fourth build was Vanilla JS.

The core logic was complex enough to use several parts of the frameworks, but simple enough I could build this in a reasonable time frame.

Conclusions

There is a lot of data here and the first question I generally get as people look at the content is, "which library should I be using?"

My basic assessment is whichever fits your needs the best.

This is extremely vague; let's dig in a bit further.

From a general speed standpoint, all the library are about the same, so we need a different set of parameters to choose the best library.

These conclusions are my own opinion ...

Angular

Angular is geared to Test Driven Development and is well suited for Enterprise level development. Their documentation is excellent and the community is responsive.

React

React has suitable testing tools. Their documentation just got a major upgrade and their community can be best described as "fierce."

Vue

Vue has good test tools and reasonable documentation. The community is small but this can work as an advantage since changes don't come out as frequently as Angular or React; requiring less general updating of the code.

Vanilla JavaScript

Vanilla JavaScript is here for a reason. While it is not a library, with many of the more recent changes it has become a solid tool for development.

Recently, I worked with a client that had a CMS in-place and they had missed several upgrades to the core software. Upgrading was going to be an in-place replacement and very painful. I migrated them to a Vanilla JavaScript solution which keeps the software behind their site good for a long time.

Having given this example, Vanilla JavaScript is not a good solution for larger endeavors (although, I've seen some interesting implementations).

Finally ...

This article basically shows that many of the popular libraries are now more comparable than ever which allows organizations to truly select which pattern(s) work best for them.

tl;dr

Comparison Summary

Category Angular React Vue Vanilla-JavaScript
Code (assets 4.2M) 19k 28k 21k 232k
Build (assets 4.2M) 273k + assets 760k + assets 1.3M + assets ---
Development Time 8 Hours 8 Hours 8 Hours 3 Hours
Version 12.2.0 17.0.2 3.0.0 ---
Category Angular React Vue Vanilla-JavaScript
Transferred 25.7k 19.9k 16.5k 4.3M
Resources 7M 6.2M 7.7M 4.3M
Load Time 705-740ms 750-826ms 640-654ms 859-872ms
DOM Loaded 411-441ms 293-327ms 403-424ms 255-260ms
Category Angular React Vue Vanilla-JavaScript
Setup Process ng new <project-name> npx create-react-app <project-name> vue create <project-name> Manual
=> Routing Angular Router React Router Vue Router Folder / File Structure
=> Binding Props [attribute] attribute={} :attribute="" Manual
=> Binding Events (click)="" onClick={} v-on:click=fn() Manual (jQuery)
=> Services baked-in import class import class import class
=> Referencing Assets http-get, import http-get, import http-get, import Manual
Unit Testing baked-in (ng generate [type] [location]) simple example Manual Manual

Angular

VERSION: 12.2.0

Installation Processes

Installation is via the Angular CLI (ng) ...

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

The CLI can be updated via ng update ...

ng update @angular/cli @angular/core
Enter fullscreen mode Exit fullscreen mode

Setup Processes

A new project is started with ng new <project-name>. There are various options provided (routing and/or CSS).

  • ng new <project-name>
  • ng serve --open
  • ng test
  • ng build

Code Management

  • Angular Router
  • Binding of Props (via attributes)
  • Binding of Events (via attributes)
  • Services (built-in tooling)
  • Using http-get process as well as imports to retrieve JSON

Unit Testing

Built-in Unit Testing, as well as E2E testing. The CLI includes these as ng generate <type> <location/name> is used.

Code Execution

Build and Size:

  • Code: 19k
  • Build: 273k + assets
  • DEV Time: 8 Hours

Lighthouse Information

Performance: 71

  • Time To Interactive: 3.0s
  • Total Blocking Time: 170ms
  • First Contentful Paint: 0.4s
  • Speed Index: 0.7s
  • Largest Contentful Paint: 5.2s

Best Practices: 93

React

VERSION: 17.0.2

Installation Process

There is no real installation since the setup is via NPM/NPX.

Setup Process

Installation is via npx (installed with NPM) ... npx create-react-app <project-name>

  • npx create-react-app <project-name>*
  • npm start
  • npm run build
  • npm test

* npx -- runs a command from a local or remote npm package (SEE HERE).

Code Management

  • React Router
  • Binding and passing of Props (via attributes or functional level)
  • Binding of Events (via attributes using original attributes, e.g. onClick)
  • Services (trained to use cleaner data-model)
  • Using http-get process

Unit Testing

Jest is included in the base-build with one simple test.

This configuration allows for a VERY clean Unit Test and E2E Testing environment.

Code Execution

Build and Size

  • Code: 28k
  • Build: 760k + assets
  • DEV Time: 8 Hours

Lighthouse Information

Performance: 79

  • Time To Interactive: 1.0s
  • Total Blocking Time: 20ms
  • First Contentful Paint: 0.9s
  • Speed Index: 0.9s
  • Largest Contentful Paint: 3.4s

Best Practices: 100

Vue

VERSION: 4.5.13

Installation Process

Installation is via the Vue CLI (vue) ...

npm install -g @vue/cli @vue/cli-service-global
Enter fullscreen mode Exit fullscreen mode

The CLI can be updated via npm update ...

npm update @vue/cli @vue/cli-service-global
Enter fullscreen mode Exit fullscreen mode

Setup Processes

A new project is started with vue create <project-name>.

  • vue create <project-name>
  • npm run serve --open
  • npm run test
  • npm run build

Code Management

  • Vue Router
  • Binding of Props (via custom-attributes)
  • Binding of Events (via custom-attributes)
  • Services (simple, can handle)
  • Using http-get process

Unit Testing

No tests provided for the base installation.

Code Execution

Build and Size

  • Code: 21k
  • Build: 1.3M + assets
  • DEV Time: 8 Hours

Lighthouse Information

Performance: 46

  • Time To Interactive: 3.4s
  • Total Blocking Time: 10ms
  • First Contentful Paint: 3.2s
  • Speed Index: 3.2s
  • Largest Contentful Paint: 5.7s

Best Practices: 87

Vanilla JavaScript

VERSION: none

Installation Process

none

Setup Processes

Manual creation of all files and structure.

Code Management

Manual.

Unit Testing

No tests.

Code Execution

Build and Size

  • Code: 232k
  • Build: ---
  • DEV Time: 3 Hours

Lighthouse Information

Performance: 95

  • Time To Interactive: 0.6s
  • Total Blocking Time: 0ms
  • First Contentful Paint: 0.6s
  • Speed Index: 0.6s
  • Largest Contentful Paint: 1.5s

Best Practices: 93

Comparison Summary

Category Angular React Vue Vanilla-JavaScript
Code (assets 4.2M) 19k 28k 21k 232k
Build (assets 4.2M) 273k + assets 760k + assets 1.3M + assets ---
Development Time 8 Hours 8 Hours 8 Hours 3 Hours
Version 12.2.0 17.0.2 3.0.0 ---
Category Angular React Vue Vanilla-JavaScript
Transferred 25.7k 19.9k 16.5k 4.3M
Resources 7M 6.2M 7.7M 4.3M
Load Time 705-740ms 750-826ms 640-654ms 859-872ms
DOM Loaded 411-441ms 293-327ms 403-424ms 255-260ms
Category Angular React Vue Vanilla-JavaScript
Setup Process ng new <project-name> npx create-react-app <project-name> vue create <project-name> Manual
=> Routing Angular Router React Router Vue Router Folder / File Structure
=> Binding Props [attribute] attribute={} :attribute="" Manual
=> Binding Events (click)="" onClick={} v-on:click=fn() Manual (jQuery)
=> Services baked-in import class import class import class
=> Referencing Assets http-get, import http-get, import http-get, import Manual
Unit Testing baked-in (ng generate [type] [location]) simple example Manual Manual

Conclusions

Basically, it all boiled down to the simple fact that there's very little difference in complexity, functionality, and testability between each of these approaches.

There's no significant difference in selecting one package over another when it comes to the factors examined in this article.

There is a lot of data here and the first question I generally get as people look at the content is, "which library should I be using?"

My basic assessment is whichever fits your needs the best.

This is extremely vague; let's dig in a bit further.

From a general speed standpoint, all the library are about the same, so we need a different set of parameters to choose the best library.

These conclusions are my own opinion ...

Angular

Angular is geared to Test Driven Development and is well suited for Enterprise level development. Their documentation is excellent and the community is responsive.

React

React has suitable testing tools. Their documentation just got a major upgrade and their community can be best described as "fierce."

Vue

Vue has good test tools and reasonable documentation. The community is small but this can work as an advantage since changes don't come out as frequently as Angular or React; requiring less general updating of the code.

Vanilla JavaScript

Vanilla JavaScript is here for a reason. While it is not a library, with many of the more recent changes it has become a solid tool for development.

Recently, I worked with a client that had a CMS in-place and they had missed several upgrades to the core software. Upgrading was going to be an in-place replacement and very painful. I migrated them to a Vanilla JavaScript solution which keeps the software behind their site good for a long time.

Having given this example, Vanilla JavaScript is not a good solution for larger endeavors (although, I've seen some interesting implementations).

Finally ...

This article basically shows that many of the popular libraries are now more comparable than ever which allows organizations to truly select which pattern(s) work best for them.

Discussion (4)

Collapse
dagr8 profile image
DAGr8

So I see all the charts but I d like to hear a final thoughts. Would you say vanilla is all one needs?

Collapse
rfornal profile image
bob.ts Author

I upgraded the Conslusions on the article.

Given the comment that "vanilla is all one needs." I can say that in more scenarios that people give credit, Vanilla JavaScript can be an excellent solution. While good and getting better, it is not a good one-size-fits-all solution, however.

Thanks for the prompt for me to improve the conclusions area.

Collapse
richardoey profile image
RichardOey • Edited on

What do you mean with Vue v4.5.3? v3.2.22 is the latest one right? I think you refer to the vue cli version

Collapse
rfornal profile image
bob.ts Author

Great catch ... Fixed. I used Vue version 3.0.0 ... listed in the article is what was listed by the CLI (version 4.5.3).