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:
- Installation Processes
- Setup Processes
- Code Management
- Routing
- Binding Props
- Binding Events
- Services (API Access, etc.)
- Referencing Assets
- Unit Testing
- Code Execution (Build Process and Size)
To do this, four separate builds of the same project were implemented. There were three "frameworks":
- Angular
- React
- 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 --openng testng 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 startnpm run buildnpm 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 --opennpm run testnpm 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.
Top comments (6)
There’s a number of reasons Vue is so popular among the developer community. Specifically, Vue is well-loved because of its:
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-...
Great information. Thanks!
So I see all the charts but I d like to hear a final thoughts. Would you say vanilla is all one needs?
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.
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
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).