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

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

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.

Comments

[adam-biggs]

There’s a number of reasons Vue is so popular among the developer community. Specifically, Vue is well-loved because of its:

• Low learning curve
• Elegant programming patterns
• Comprehensive documentation
• Ability to enable the creation of lightweight applications
• Ease with which it can be incorporated into existing projects

According to a Stack Overflow survey, 22% of developers say React is one of their most desired frameworks. While React has maintained this status for the last five years, Vue continues to climb the ranks taking third place this year.

While React is better suited for large application development, has a larger ecosystem of add-ons and tools, and also is applicable for cross-platform development -- Vue.js continues to be better suited for projects that require flexibility when creating templates and rendering, as well as when a small bundle size and faster integration are limiting factors.

My colleague Eduardo wrote a great article on when to use each framework as well as providing insight into the job market for each framework. If you'd like to learn more about how these frameworks compare in 2022 and beyond, you can find it here: scalablepath.com/front-end/vue-js-...

[bob.ts]

Great information. Thanks!

[DAGr8]

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

[bob.ts]

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.

[RichardOey]

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

[bob.ts]

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