Angular vs. React vs. Vue (Part VI: Payload Size)

I took the three “To Do” apps built with Angular (version 6.0.3), React (version 16.4.1), and Vue (version 2.5.16), applied some form validation, and generated a production build for each app. In this article, I’m comparing the build size and the payload size of each app.

Framework Files Generated Number of Requests Payload Size (KB)
Angular 7 files (290 KB) 5 284
React 9 files (1.98 MB) 4 406
Vue 8 files (962 KB) 4 180
Table 1. Build artifacts and payload summary

Files Generated are the files produced by the build process and the ones to be deployed to the production server. React and Vue have a lot larger total file size because the build process of the two frameworks produce a .map file for every minified JavaScript file and/or CSS file.

Once the app is deployed to a production server, accessing the app on its URL triggers requests to several static resources (JavaScript, CSS file, etc); these requests are Number of Requests on Table 1 above, excluding requests to remote API.

The Payload Size is the total size of all those static resources. JavaScript files (the framework and application code) makes up the most of payload. The React app has the most payload, and Vue app the least.

Table 2. Build artifacts
Framework Filename Size (KB)
Angular 3rdpartylicenses.txt 2.12
favicon.ico 5.30
index.html 0.61
main.3584cb656b4d762e14c3.js 222.00
polyfills.2f4a59095805af02bd79.js 58.10
runtime.a66f828dca56eeb90e02.js 1.02
styles.34c57ab7888ec1573f9c.css 0.02
React asset-manifest.json 0.20
favicon.ico 3.77
index.html 0.64
main.65027555.css 0.09
main.65027555.css.map 0.28
main.8a73369a.js 400.00
main.8a73369a.js.map 1580.00
manifest.json 0.32
service-worker.js 3.18
Vue app.c9980c65.css 0.02
app.c4cbf4c9.js 4.15
app.c4cbf4c9.js.map 19.30
chunk-vendors.d8813c49.js 173.00
chunk-vendors.d8813c49.js.map 762.00
favicon.ico 1.12
index.html 0.87

Angular vs. React vs. Vue (Part V: Form Validation)

Taking user input using a form is a standard feature in a single page application. In this article, I’m comparing how client-side form validation can be implemented in Angular (version 6.0.3), React (version 16.4.1), and Vue (version 2.5.16).

I’ve created a simple form with the following fields and the associated validations.

Field Name Validations
Name Required
Phone Must be in a specific format: XXX-XXX-XXXX
Username Must not be registered before (the actual validation is done on a remote server)
Password No validations
Confirm Password Must match Password field
Form

Form with client-side validation

Sample Code

Angular

Angular comes with FormsModule which provides the framework to validate your form. When you add the directive NgForm to your form, the state of the controls within the form is tracked which allows invoking the validation process at the right moment. When a control enforce multiple validation rules, the specific violated rules are also tracked.

State Description
Touched Whether the control has been visited.
Changed Whether the control’s value has changed
Valid Whether the control’s value is valid.

Angular not only provides several built-in validators, but it also provides the framework to create a custom validator. This custom validator is implemented as a directive and the new validation rule can be added to a control by adding its selector to that control. When validation involves two controls (such as comparing the values in two controls), the custom validator directive (in this case, PasswordConfirmedValidatorDirective) must be applied on the form element. I’ve got more intuitive way in mind (as implemented in React and Vue app) to do it, but that’s what the documentation suggests.

React

React doesn’t come with any form validation feature. Its documentation doesn’t provide recommendation for third-party validation libraries either.

When I was looking for a React validation library, I found several libraries with different paradigms. Based on your programming experience, one paradigm will feel more intuitive than the other. I decided to use React Advanced Form to enable form validation on this app. I also installed the companion library react-advanced-form-addons which provides form controls with support to display validation errors.

Vue

Vue doesn’t provide a built-in form validation library, but its documentation provides an example how to do it by hand. It also lists a couple third-party validation libraries. I use Veevalidate for this Vue app. VeeValidate ships with a lot of built-in validation rules, including one that you can use to make sure a user enters new password correctly.


The form validation functionality provided by Angular is a good start toward a complete validation framework customized to your app. I also like the reusability of an Angular directive, but the boilerplate code adds so much noise.

Phone number validator. (Left to right: Angular, React, Vue)

Phone number validator. (Left to right: Angular, React, Vue)

To start from a scratch, React and Vue needs implementation of events (such as touched, changed, and valid) and only then we can implement the actual validation process. Finding a thirdy-party validation library may not be easy even when there are plenty of options. One solution seems more intuitive than then others and it feels like it’s better to pick the most basic one which can be used as a foundation.

Angular vs. React vs. Vue (Part IV: Routing)

In a single-page application, to navigate from one view to another, a routing system needs to be set up.

In all three frameworks–Angular (version 6.0.3), React (version 16.4.1), and Vue (version 2.5.16)–, each view is represented by a component; so, those terms are interchangeable in this article.

Angular provides its own routing module; so does Vue, though it requires an additional installation. React lists several third-party routers–I chose react-router.

I’ve created a simple app which incorporates a simple routing setup. The app has the following three views.

  • Dashboard: displays tasks which are due soon.
  • Tasks: displays all tasks.
  • Task Detail: displays the detail of a task.
Dashboard view

Dashboard view

Task detail view

Task detail view

Sample Code

Angular

Angular’s documentation recommends creating a separate module (app-routing.module.ts) within the app to configure the routing.

React

react-router takes a different approach (called “dynamic routing”) as to when/where to apply the routing configuration. Its Router library provides routing-related components and you add them within the template (JSX code). The configuration (mapping of paths to components) is specified using directives within the template.

Vue

For a Vue app, the routing configuration is specified within main.js where the app is initialized.


Angular’s and Vue’s routes are configured as part of initialization of the app; it happens before any of the components are rendered. React’s react-routers provides its functionalities via components–the same component concept that you use to declare a view. In a React app, you will see the declaration of router and routes within app components (whether it’s the top-level or a lower-level component). In Angular and Vue, the code pertaining to the router module and the routes don’t intermingle with that of components.

Routes definition. (Left to right: Angular, React, Vue)

Routes definition. (Left to right: Angular, React, Vue)

To display the active view, Angular and Vue use a placeholder directive (router-outlet and router-view, respectively) while react-router uses the same route components to define route mapping and render the selected view.

Active view placeholder. (Left to right: Angular, React, Vue)

Active view placeholder. (Left to right: Angular, React, Vue)