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

Angular

VERSION: 12.2.0

Installation Processes

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

npm install -g @angular/cli

The CLI can be updated via ng update ...

ng update @angular/cli @angular/core

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

The CLI can be updated via npm update ...

npm update @vue/cli @vue/cli-service-global

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

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.