Angular vs React vs Vue

To compare Angular vs React vs Vue. I’ve created the application with the same component structure. using Angular 10 version, ReactJs 16.13.1 version, vue 3.0.0 version Javascript Framework, rickandmortyapi. hosted application using firebase.

rick and morty show episode list and character list application

Application URL

Angular https://rickandmorty-angular.web.app/

React https://rickandmorty-react-1fe27.web.app/

Vue https://rickandmorty-vue.web.app/

Version And Stable release Date

Angular 2.0v Initial released in September 2016 And the latest 11v released on June 1, 2020.

React 0.3.0v Initial released on May 2013 And the latest released on 16.13.1v February 26, 2020.

Vue 0.9v Initial released on February 2014 And the latest released on 3.0.0v October 20, 2020.

Author

Angular Miško Hevery now maintained and released by Google Developer(s)

React Jordan Walke now maintained and released by Facebook Developer(s)

Vue Evan You Initially maintained by him only, now maintained and released by vue Team Developer(s)

Features and Size

After creating an Angular project added 1137 packages in 145 sec and the folder size was 224 MB. Angular provides built-in feature :

(*) Routing & Navigation
(*) Internationalization (i18n)
(*) Animations
(*) Schematics
(*) Forms
(*) Service Workers & PWA

After creating a Reactjs project added 1137 packages in 183 sec and the folder size was156 MB. for additional features In Reactjs you can import the library separately likes routes (react-router-dom), forms(formik), Axios, react-i18next. Reactjs provide built-in features :

(*) JSX
(*) Function and Class Components
(*) State and Props
(*) Forms
(*) Redux

While creating a Vue project provide you the option to check the features needed for your project :

(*) Choose Vue version
(*) Babel
(*) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
(*) Unit Testing
(*) E2E Testing

After creating the Vue project added 1269 packages in 58.921s and the folder size was 114MB. for the additional feature, you can import library separately likes vue router, Axios,vuetifyjs for forms, i18n.

Vue has an awesome feature vue ui.

vue ui preview

Run time

Angular 8.022 sec

React 7.43 sec

Vue 15.38 sec

Build time

Angular 7.79 sec

React 6.55 sec

Vue 9.68 sec

Build size with the source map file

Angular 8.23 MB (heaviest files vendor.js 3.6MB, vendor.js.map 3.7MB)

React 641 KB

Vue 771 KB

You can create a smaller size bundle by removing unwanted imported libraries.

Performance recorded on chrome dev tool

Angular performance

React performance

Vue performance

Memory usage recorded on chrome dev tool

Angular memory

React memory

Vue memory

Summary

Every javascript framework has the same feature with different syntax. If you have good experience with one javascript framework then you can easily learn other js frameworks.

Claps help other people finding it and encourage me to write more posts