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

Posted on August 2, 2018 by Joshua Sigar

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

<h1>Application Form</h1>
<form #appForm="ngForm" appPasswordConfirmed>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" 
      name="name" 
      [(ngModel)]="model.name" 
      #name="ngModel" 
      required />

    <div *ngIf="name.invalid && (name.dirty || name.touched)">
      <div *ngIf="name.errors.required">
        Name is required.
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="phone">Phone</label>
    <input type="text"
      name="phone" 
      [(ngModel)]="model.phone"
      #phone="ngModel"
      appPhoneNumber />

    <div *ngIf="phone.invalid && (phone.dirty || phone.touched)">
      <div *ngIf="phone.errors.phoneNumber">
        Phone number must be in valid format (e.g., 123-456-7890).
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" 
      name="username" 
      [(ngModel)]="model.username" 
      #username="ngModel" 
      appUniqueUsername />

    <div *ngIf="username.invalid && (username.dirty || username.touched)">
      <div *ngIf="username.errors.uniqueUsername">
        Username is taken.
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input type="text" 
      name="password" 
      [(ngModel)]="model.password" />
  </div>

  <div class="form-group">
    <label for="confirm-password">Confirm Password</label>
    <input type="password" 
      name="confirm-password" 
      [(ngModel)]="model.confirmPassword" />

    <div *ngIf="appForm.errors?.passwordConfirmed && (appForm.touched || appForm.dirty)">
      Password must match.
    </div>
  </div>

  <button type="submit">Submit</button>
</form>

<h1>Application Form</h1>

<input type="text"

name="name"

[(ngModel)]="model.name"

#name="ngModel"

required />

Name is required.

</div>

<label for="phone">Phone</label>

<input type="text"

name="phone"

[(ngModel)]="model.phone"

#phone="ngModel"

appPhoneNumber />

Phone number must be in valid format (e.g., 123-456-7890).

</div>

<label for="username">Username</label>

<input type="text"

name="username"

[(ngModel)]="model.username"

#username="ngModel"

appUniqueUsername />

Username is taken.

</div>

<label for="password">Password</label>

<input type="text"

name="password"

[(ngModel)]="model.password" />

</div>

<label for="confirm-password">Confirm Password</label>

<input type="password"

name="confirm-password"

[(ngModel)]="model.confirmPassword" />

Password must match.

</div>

<button type="submit">Submit</button>

</form>

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.

import { Directive } from '@angular/core';
import { AbstractControl, Validator, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[appPhoneNumber]',
  providers: [{
    provide: NG_VALIDATORS, 
    useExisting: PhoneNumberValidatorDirective, 
    multi: true}]
})
export class PhoneNumberValidatorDirective implements Validator {
  validate(control: AbstractControl): {[key: string]: any} | null {
    const isValidPhoneNumber = /^\d{3}-\d{3}-\d{4}$/.test(control.value);
    const message = {
      'phoneNumber': {
        value: control.value
      }
    };
    return isValidPhoneNumber ? null : message;
  }
}

import { Directive } from '@angular/core';

import { AbstractControl, Validator, NG_VALIDATORS } from '@angular/forms';

@Directive({

selector: '[appPhoneNumber]',

providers: [{

provide: NG_VALIDATORS,

useExisting: PhoneNumberValidatorDirective,

multi: true}]

})

export class PhoneNumberValidatorDirective implements Validator {

validate(control: AbstractControl): {[key: string]: any} | null {

const isValidPhoneNumber = /^\d{3}-\d{3}-\d{4}$/.test(control.value);

const message = {

'phoneNumber': {

value: control.value

}

};

return isValidPhoneNumber ? null : message;

}

import { Directive } from '@angular/core';
import { AbstractControl, Validator, NG_VALIDATORS, FormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';

export const passwordConfirmedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const password = control.get('password');
  const confirmPassword = control.get('confirm-password');
  return password && 
    confirmPassword && 
    (confirmPassword.touched || confirmPassword.dirty) && 
    password.value !== confirmPassword.value ?
    { 'passwordConfirmed': true } : 
    null;
};
@Directive({
  selector: '[appPasswordConfirmed]',
  providers: [{provide: NG_VALIDATORS, useExisting: PasswordConfirmedValidatorDirective, multi: true}]
})
export class PasswordConfirmedValidatorDirective implements Validator {
  validate(control: AbstractControl): {[key: string]: any} | null {
    return passwordConfirmedValidator(control);
  };
}

import { Directive } from '@angular/core';

import { AbstractControl, Validator, NG_VALIDATORS, FormGroup, ValidatorFn, ValidationErrors } from '@angular/forms';

export const passwordConfirmedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {

const password = control.get('password');

const confirmPassword = control.get('confirm-password');

return password &&

confirmPassword &&

(confirmPassword.touched || confirmPassword.dirty) &&

password.value !== confirmPassword.value ?

{ 'passwordConfirmed': true } :

null;

};

@Directive({

selector: '[appPasswordConfirmed]',

providers: [{provide: NG_VALIDATORS, useExisting: PasswordConfirmedValidatorDirective, multi: true}]

})

export class PasswordConfirmedValidatorDirective implements Validator {

validate(control: AbstractControl): {[key: string]: any} | null {

return passwordConfirmedValidator(control);

};

}

import { Directive } from '@angular/core';
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS, ValidationErrors } from '@angular/forms';
import { Observable, of } from "rxjs";

@Directive({
  selector: '[appUniqueUsername]',
  providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: UniqueUsernameValidatorDirective, multi: true}]
})
export class UniqueUsernameValidatorDirective implements Validator {
  validate(control: AbstractControl): Observable<ValidationErrors | null> {
    // Let's pretend this validator hits a remote server and checks if 
    // username is taken
    const isUniqueUsername = control.value !== 'bob';
    const message = {
      'uniqueUsername': true
    };
    return of(isUniqueUsername ? null : message);
  }
}

import { Directive } from '@angular/core';

import { AbstractControl, Validator, NG_ASYNC_VALIDATORS, ValidationErrors } from '@angular/forms';

import { Observable, of } from "rxjs";

@Directive({

selector: '[appUniqueUsername]',

providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: UniqueUsernameValidatorDirective, multi: true}]

})

export class UniqueUsernameValidatorDirective implements Validator {

validate(control: AbstractControl): Observable<ValidationErrors | null> {

// Let's pretend this validator hits a remote server and checks if

// username is taken

const isUniqueUsername = control.value !== 'bob';

const message = {

'uniqueUsername': true

};

return of(isUniqueUsername ? null : message);

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ApplicationFormComponent } from './application-form/application-form.component';
import { PhoneNumberValidatorDirective } from './validators/phone-number.directive';
import { PasswordConfirmedValidatorDirective } from './validators/password-confirmed.directive';
import { UniqueUsernameValidatorDirective } from './validators/unique-username.directive'

@NgModule({
  declarations: [
    AppComponent,
    ApplicationFormComponent,
    PhoneNumberValidatorDirective,
    PasswordConfirmedValidatorDirective,
    UniqueUsernameValidatorDirective
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { ApplicationFormComponent } from './application-form/application-form.component';

import { PhoneNumberValidatorDirective } from './validators/phone-number.directive';

import { PasswordConfirmedValidatorDirective } from './validators/password-confirmed.directive';

import { UniqueUsernameValidatorDirective } from './validators/unique-username.directive'

@NgModule({

declarations: [

AppComponent,

ApplicationFormComponent,

PhoneNumberValidatorDirective,

PasswordConfirmedValidatorDirective,

UniqueUsernameValidatorDirective

imports: [

BrowserModule,

FormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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.

import React, { Component } from 'react';
import { Form } from 'react-advanced-form';
import { Input } from 'react-advanced-form-addons';
import { ConfirmPasswordInput } from './ConfirmPasswordInput';
import validationMessages from './validationMessages';
import validationRules from './validationRules';

export class ApplicationForm extends Component {
  validateUsername = ({ value, fieldProps, fields, form }) => {
    // Let's pretend this validator hits a remote server and checks if 
    // username is taken
    return Promise.resolve({
      valid: value !== 'bob'
    });
  }
  
  render() {
    return (
      <div className="App">
        <Form action={this.registerUser} rules={validationRules} messages={validationMessages}>
          <Input name="name" label="Name" required />
          <Input name="phone" label="Phone" />
          <Input name="username" label="Username" asyncRule={this.validateUsername} />
          <Input name="password" label="Password" type="password" />
          <ConfirmPasswordInput label="Confirm Password" passwordInput="password" />
        </Form>
      </div>
    );
  }
}

import React, { Component } from 'react';

import { Form } from 'react-advanced-form';

import { Input } from 'react-advanced-form-addons';

import { ConfirmPasswordInput } from './ConfirmPasswordInput';

import validationMessages from './validationMessages';

import validationRules from './validationRules';

export class ApplicationForm extends Component {

validateUsername = ({ value, fieldProps, fields, form }) => {

// Let's pretend this validator hits a remote server and checks if

// username is taken

return Promise.resolve({

valid: value !== 'bob'

});

}

render() {

return (

</Form>

</div>

);

}

export default {
  name: {
    'phone': ({value}) => {
      const isValidPhoneNumber = /^\d{3}-\d{3}-\d{4}$/.test(value);
      return isValidPhoneNumber;
    }
  }
}

export default {

'phone': ({value}) => {

const isValidPhoneNumber = /^\d{3}-\d{3}-\d{4}$/.test(value);

return isValidPhoneNumber;

}

export default {
  general: {
    missing: 'Please provide the required field.',
    invalid: 'Provided value is invalid.'
  },
  name: {
    'username': {
      async: 'Username is taken.'
    },
    'phone': {
      invalid: 'Phone number must be in valid format (e.g., 123-456-7890).'
    },
    'confirmPassword': {
      invalid: 'Password must match.'
    }
  }
};

export default {

general: {

missing: 'Please provide the required field.',

invalid: 'Provided value is invalid.'

'username': {

async: 'Username is taken.'

'phone': {

invalid: 'Phone number must be in valid format (e.g., 123-456-7890).'

'confirmPassword': {

invalid: 'Password must match.'

}

};

import React, { Component } from 'react';
import { Input } from 'react-advanced-form-addons';

export class ConfirmPasswordInput extends Component {  
  confirmPassword = ({value, fieldProps, fields, form}) => {
    if (fields[this.props.passwordInput]) {
      return value === fields[this.props.passwordInput].value;
    }
    else {
      return false;
    }
  }

  render() {
    return (
      <Input 
        name="confirmPassword"
        label={this.props.label} 
        type="password" 
        rule={this.confirmPassword} />
    );
  }
}

import React, { Component } from 'react';

import { Input } from 'react-advanced-form-addons';

export class ConfirmPasswordInput extends Component {

confirmPassword = ({value, fieldProps, fields, form}) => {

if (fields[this.props.passwordInput]) {

return value === fields[this.props.passwordInput].value;

}

else {

return false;

}

render() {

return (

<Input

name="confirmPassword"

label={this.props.label}

type="password"

rule={this.confirmPassword} />

);

}

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.

import Vue from 'vue'
import VeeValidate from 'vee-validate';
import App from './App.vue'

Vue.config.productionTip = false;
Vue.use(VeeValidate);

new Vue({
  render: h => h(App)
}).$mount('#app')

import Vue from 'vue'

import VeeValidate from 'vee-validate';

import App from './App.vue'

Vue.config.productionTip = false;

Vue.use(VeeValidate);

new Vue({

render: h => h(App)

}).$mount('#app')

<template>
  <div class="container">
    <h1>Application Form</h1>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" 
          name="name" 
          v-validate
          required />
        <div v-show="errors.has('name')">{{errors.first('name')}}</div>
      </div>
      
      <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" 
          name="phone" 
          v-validate="'phone_number'" />
        <div v-show="errors.has('phone')">{{errors.first('phone')}}</div>
      </div>
      
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" 
          name="username" 
          v-validate="'unique_username'" />
        <div v-show="errors.has('username')">{{errors.first('username')}}</div>
      </div>
      
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" 
          name="password" 
          v-validate="'confirmed:confirmation'" />
      </div>

      <div class="form-group">
        <label for="confirmPassword">Confirm Password</label>
        <input type="password" 
          name="confirmPassword" 
          ref="confirmation" />        
        <div v-show="errors.has('password')">{{errors.first('password')}}</div>
      </div>

      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script>
  import { Validator } from 'vee-validate';
  import VeeValidators from '../validators/vee-validators.js';

  Validator.extend('phone_number', VeeValidators.phoneNumber);
  Validator.extend('unique_username', VeeValidators.uniqueUsername);

  export default {
    name: 'application-form'
  }
</script>
<style>
body {
  padding: 2em;
}

h1 {
  font-size: 1.6em;
}

label {
  display: block;
}

input {
  margin-bottom: .2em;
}

input + div {
  color: red;
}

.form-group {
  margin-bottom: 1em;
}
</style>

<h1>Application Form</h1>

<form>

<input type="text"

name="name"

v-validate

required />

<div v-show="errors.has('name')">{{errors.first('name')}}</div>

</div>

<label for="phone">Phone</label>

<input type="text"

name="phone"

v-validate="'phone_number'" />

<div v-show="errors.has('phone')">{{errors.first('phone')}}</div>

</div>

<label for="username">Username</label>

<input type="text"

name="username"

v-validate="'unique_username'" />

<div v-show="errors.has('username')">{{errors.first('username')}}</div>

</div>

<label for="password">Password</label>

<input type="password"

name="password"

v-validate="'confirmed:confirmation'" />

</div>

<label for="confirmPassword">Confirm Password</label>

<input type="password"

name="confirmPassword"

ref="confirmation" />

<div v-show="errors.has('password')">{{errors.first('password')}}</div>

</div>

<button type="submit">Submit</button>

</form>

</div>

</template>

import { Validator } from 'vee-validate';

import VeeValidators from '../validators/vee-validators.js';

Validator.extend('phone_number', VeeValidators.phoneNumber);

Validator.extend('unique_username', VeeValidators.uniqueUsername);

export default {

}

</script>

<style>

body {

padding: 2em;

}

h1 {

font-size: 1.6em;

}

label {

display: block;

}

input {

margin-bottom: .2em;

}

input + div {

color: red;

}

.form-group {

margin-bottom: 1em;

}

</style>

import { Validator } from 'vee-validate';

export default {
  phoneNumber: {
    getMessage(field, args) {
      return 'Phone number must be in valid format (e.g., 123-456-7890).';
    },
    validate(value, args) {
      const isValidPhoneNumber = /^\d{3}-\d{3}-\d{4}$/.test(value);
      return isValidPhoneNumber;
    }
  },

  uniqueUsername : {
    getMessage(field, args, data) {
      return (data && data.message) || 'Something went wrong';
    },
    validate(value, args, data) {
      // Let's pretend this validator hits a remote server and checks if 
      // username is taken
      const isUniqueUsername = value !== 'bob';
      const message = {
        valid: isUniqueUsername,
        data: {
          message: 'Username is taken'
        }
      }
      return Promise.resolve(message);
    }
  }
}

import { Validator } from 'vee-validate';

export default {

phoneNumber: {

getMessage(field, args) {

return 'Phone number must be in valid format (e.g., 123-456-7890).';

validate(value, args) {

const isValidPhoneNumber = /^\d{3}-\d{3}-\d{4}$/.test(value);

return isValidPhoneNumber;

}

uniqueUsername : {

getMessage(field, args, data) {

return (data && data.message) || 'Something went wrong';

validate(value, args, data) {

// Let's pretend this validator hits a remote server and checks if

// username is taken

const isUniqueUsername = value !== 'bob';

const message = {

valid: isUniqueUsername,

data: {

message: 'Username is taken'

}

return Promise.resolve(message);

}

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)

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)

Posted on July 17, 2018 by Joshua Sigar

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

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.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TasksComponent } from './tasks/tasks.component';
import { TaskDetailComponent } from './task-detail/task-detail.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'tasks', component: TasksComponent },
  { path: 'detail/:id', component: TaskDetailComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  exports: [ RouterModule ],
  imports: [ RouterModule.forRoot(routes) ]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';

import { TasksComponent } from './tasks/tasks.component';

import { TaskDetailComponent } from './task-detail/task-detail.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },

{ path: 'dashboard', component: DashboardComponent },

{ path: 'tasks', component: TasksComponent },

{ path: 'detail/:id', component: TaskDetailComponent },

{ path: '**', component: PageNotFoundComponent }

];

@NgModule({

exports: [ RouterModule ],

imports: [ RouterModule.forRoot(routes) ]

})

export class AppRoutingModule { }

<h1>Routing App</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a> |
  <a routerLink="/tasks">Tasks</a>
</nav>
<router-outlet></router-outlet>

<h1>Routing App</h1>

<nav>

<a routerLink="/dashboard">Dashboard</a> |

<a routerLink="/tasks">Tasks</a>

</nav>

<router-outlet></router-outlet>

<h3>Due soon</h3>
<ul *ngIf="tasks && tasks.length > 0; else elseBlock">
  <li *ngFor="let task of tasks">
    <a routerLink="/detail/{{task.id}}">{{task.title}}</a> ({{task.dueDate}})
  </li>
</ul>
<ng-template #elseBlock>
  <p>All done!</p>
</ng-template>

<ul *ngIf="tasks && tasks.length > 0; else elseBlock">

<a routerLink="/detail/{{task.id}}">{{task.title}}</a> ({{task.dueDate}})

</li>

</ul>

<ng-template #elseBlock>

</ng-template>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { TaskService } from '../task.service';
import { Task } from '../task';

@Component({
  selector: 'app-task-detail',
  templateUrl: './task-detail.component.html',
  styleUrls: ['./task-detail.component.css']
})
export class TaskDetailComponent implements OnInit {
  task: Task;

  constructor(
    private route: ActivatedRoute,
    private taskService: TaskService,
    private location: Location
  ) { }

  ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    this.taskService.getTask(id)
      .subscribe(task => {
        this.task = task;
      })
  }
}

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Location } from '@angular/common';

import { TaskService } from '../task.service';

import { Task } from '../task';

@Component({

selector: 'app-task-detail',

templateUrl: './task-detail.component.html',

styleUrls: ['./task-detail.component.css']

})

export class TaskDetailComponent implements OnInit {

task: Task;

constructor(

private route: ActivatedRoute,

private taskService: TaskService,

private location: Location

) { }

ngOnInit() {

const id = +this.route.snapshot.paramMap.get('id');

this.taskService.getTask(id)

.subscribe(task => {

this.task = task;

})

}

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.

import React, { Component } from 'react';
import {
  BrowserRouter,
  Route,
  Switch,
  Link,
  Redirect
} from 'react-router-dom'
import './App.css';
import { Dashboard } from './components/Dashboard';
import { Tasks } from './components/Tasks';
import { TaskDetail } from './components/TaskDetail';
import { PageNotFound } from './components/PageNotFound';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div id="routing-app">
          <h1>Routing App</h1>
          <nav>
            <Link to="/dashboard">Dashboard</Link> | 
            <Link to="/tasks">Tasks</Link>
          </nav>

          <Switch>
            <Route exact path="/" render={() => (<Redirect to="/dashboard" />)} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/tasks" component={Tasks} />
            <Route path="/detail/:id" component={TaskDetail} />
            <Route component={PageNotFound}/>
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

import React, { Component } from 'react';

import {

BrowserRouter,

Route,

Switch,

Link,

Redirect

} from 'react-router-dom'

import './App.css';

import { Dashboard } from './components/Dashboard';

import { Tasks } from './components/Tasks';

import { TaskDetail } from './components/TaskDetail';

import { PageNotFound } from './components/PageNotFound';

class App extends Component {

render() {

return (

<h1>Routing App</h1>

<nav>

<Link to="/dashboard">Dashboard</Link> |

<Link to="/tasks">Tasks</Link>

</nav>

</Switch>

</div>

</BrowserRouter>

);

}

export default App;

import React, { Component } from 'react';
import taskService from './../taskService';
import { Link } from 'react-router-dom';

export class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: []
    };
  }

  componentDidMount() {
    const maxNumberOfTasks = 3;
    taskService.getTasks(maxNumberOfTasks)
      .then(result => {
        this.setState({
          tasks: result
        });
      });
  }

  render() {
    let output;
    let tasks = this.state.tasks;
    if (tasks && tasks.length > 0) {
      output = 
        <ul>
          {this.state.tasks.map((task) =>
            <li><Link to={`/detail/${task.id}`}>{task.title}</Link> {task.dueDate}</li>
          )}
        </ul>;
    }
    else {
      output = <p>All done!</p>
    }

    return(
      <div>
        <h3>Due Soon</h3>
        {output}
      </div>
    );
  }
}

import React, { Component } from 'react';

import taskService from './../taskService';

import { Link } from 'react-router-dom';

export class Dashboard extends Component {

constructor(props) {

super(props);

this.state = {

tasks: []

};

}

componentDidMount() {

const maxNumberOfTasks = 3;

taskService.getTasks(maxNumberOfTasks)

.then(result => {

this.setState({

tasks: result

});

}

render() {

let output;

let tasks = this.state.tasks;

if (tasks && tasks.length > 0) {

output =

<ul>

{this.state.tasks.map((task) =>

<li><Link to={`/detail/${task.id}`}>{task.title}</Link> {task.dueDate}</li>

)}

</ul>;

}

else {

output = <p>All done!</p>

}

return(

<div>

{output}

</div>

);

}

import React, { Component } from 'react';
import taskService from './../taskService';

export class TaskDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      task: null
    };
  }

  componentDidMount() {
    const id = +this.props.match.params.id;
    taskService.getTask(id)
      .then(result => {
        this.setState({
          task: result
        });
      });
  }

  render() {
    let output;
    let task = this.state.task;
    if (task != null) {
      output = 
        <div>
          <h2>{task.title}</h2>
          <p>Due date: {task.dueDate}</p>
          <p>Note: {task.note}</p>
        </div>;
    }
    else {
      output = <p>Task not found</p>;
    }
    return output;
  }
}

import React, { Component } from 'react';

import taskService from './../taskService';

export class TaskDetail extends Component {

constructor(props) {

super(props);

this.state = {

task: null

};

}

componentDidMount() {

const id = +this.props.match.params.id;

taskService.getTask(id)

.then(result => {

this.setState({

task: result

});

}

render() {

let output;

let task = this.state.task;

if (task != null) {

output =

<div>

<h2>{task.title}</h2>

<p>Due date: {task.dueDate}</p>

</div>;

}

else {

output = <p>Task not found</p>;

}

return output;

}

Vue

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

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Dashboard from './components/Dashboard.vue'
import Tasks from './components/Tasks.vue'
import TaskDetail from './components/TaskDetail.vue'
import PageNotFound from './components/PageNotFound.vue'

Vue.config.productionTip = false;
Vue.use(VueRouter);

const routes = [
  { path: '/', redirect: '/dashboard' },
  { path: '/dashboard', component: Dashboard },
  { path: '/tasks', component: Tasks },
  { path: '/detail/:id', component: TaskDetail },
  { path: '*', component: PageNotFound }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

import Vue from 'vue'

import VueRouter from 'vue-router'

import App from './App.vue'

import Dashboard from './components/Dashboard.vue'

import Tasks from './components/Tasks.vue'

import TaskDetail from './components/TaskDetail.vue'

import PageNotFound from './components/PageNotFound.vue'

Vue.config.productionTip = false;

Vue.use(VueRouter);

const routes = [

{ path: '/', redirect: '/dashboard' },

{ path: '/dashboard', component: Dashboard },

{ path: '/tasks', component: Tasks },

{ path: '/detail/:id', component: TaskDetail },

{ path: '*', component: PageNotFound }

];

const router = new VueRouter({

mode: 'history',

routes

});

new Vue({

render: h => h(App),

router

}).$mount('#app')

<template>
  <div id="app">
    <h1>Routing App</h1>
    <nav>
      <router-link to="/dashboard">Dashboard</router-link> | 
      <router-link to="/tasks">Tasks</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<h1>Routing App</h1>

<nav>

<router-link to="/dashboard">Dashboard</router-link> |

<router-link to="/tasks">Tasks</router-link>

</nav>

<router-view></router-view>

</div>

</template>

export default {}

</script>

<template>
  <div class="due-today">
    <h3>Due Soon</h3>
    <ul v-if="tasks && tasks.length > 0">
        <li v-for="(task) in tasks"
            v-bind:key="task.id">
            <router-link v-bind:to="'/detail/' + task.id">
              {{ task.title }}
            </router-link> {{ task.dueDate }}
        </li>
    </ul>    
    <template v-else>
      <p>All done!</p>
    </template>
  </div>
</template>
<script>
import taskService from './../taskService';

export default {
  data() {
    return {
      tasks: []
    }
  },
  mounted() {
    const maxNumberOfTasks = 3;
    taskService.getTasks(maxNumberOfTasks)
      .then(result => {
        this.tasks = result;
      });
  }
}
</script>

<li v-for="(task) in tasks"

v-bind:key="task.id">

<router-link v-bind:to="'/detail/' + task.id">

</router-link> {{ task.dueDate }}

</li>

</ul>

</template>

</div>

</template>

import taskService from './../taskService';

export default {

data() {

return {

tasks: []

}

mounted() {

const maxNumberOfTasks = 3;

taskService.getTasks(maxNumberOfTasks)

.then(result => {

this.tasks = result;

});

}

</script>

<template>
  <div v-if="task" class="task-detail">
    <h2>{{ task.title }}</h2>
    <p>Due date: {{ task.dueDate }}</p>
    <p>Note: {{ task.note }}</p>
  </div>
</template>
<script>
import taskService from './../taskService';

export default {
  data() {
    return {
      task: null
    }
  },
  mounted() {
    const id = +this.$route.params.id;
    taskService.getTask(id)
      .then(result => {
        this.task = result;
      });
  }
}
</script>

<h2>{{ task.title }}</h2>

<p>Due date: {{ task.dueDate }}</p>

</div>

</template>

import taskService from './../taskService';

export default {

data() {

return {

task: null

}

mounted() {

const id = +this.$route.params.id;

taskService.getTask(id)

.then(result => {

this.task = result;

});

}

</script>

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)

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)

Angular vs. React vs. Vue (Part III: AJAX)

Posted on July 11, 2018 by Joshua Sigar

Requesting data from a server via AJAX/XMLHttpRequest is ubiquitous when implementing a single page application. In this article, I’m comparing the use of AJAX in Angular (version 6.0.3), React (version 16.4.1), and Vue (version 2.5.16). I implemented the AJAX operations in a “To Do” app I created in part II.

I’ve set up a remote server which provides APIs to add a new to-do item, to remove a to-do item, and to list to-do items.

POST http://localhost/todo-api/todos/ (param: title) 
DELETE http://localhost/todo-api/todos/ (param: Todo ID) 
GET http://localhost/todo-api/todos/ (returns: Todo[] )

POST http://localhost/todo-api/todos/ (param: title)

DELETE http://localhost/todo-api/todos/ (param: Todo ID)

GET http://localhost/todo-api/todos/ (returns: Todo[] )

Angular provides a module HttpClient to allow your app to execute typical AJAX requests (POST, GET, etc). React’s documentation suggests that you can use any AJAX library with React. The documentation lists some common AJAX library such as axios, jQuery AJAX, and the browser’s built-in window.fetch. Vue hardly provides any hint regarding incorporating AJAX operations. Tucked in their website is the Cookbook section which has the article “Using Axios to Consument APIs.” I created a wrapper for axios and used it for both React and Vue

Sample Code

Angular

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Todo } from './todo';

@Injectable({ providedIn: 'root' })
export class TodoService {
  private todosUrl = 'http://localhost/todo-api/todos/';

  constructor(
    private http: HttpClient) { }

  getTodos(): Observable<Todo[]> {
    return this.http.get<Todo[]>(this.todosUrl);
  }

  addTodo(title: string): Observable<Todo> {
    let httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' })
    };

    return this.http.post<Todo>(
      this.todosUrl,
      `title=${title}`,
      httpOptions);
  }

  removeTodo(id: number): Observable<any> {
    const deleteUrl = `${this.todosUrl}?id=${id}`;
    return this.http.delete(deleteUrl);
  }
}

import { Injectable } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';

import { Todo } from './todo';

@Injectable({ providedIn: 'root' })

export class TodoService {

private todosUrl = 'http://localhost/todo-api/todos/';

constructor(

private http: HttpClient) { }

getTodos(): Observable<Todo[]> {

return this.http.get<Todo[]>(this.todosUrl);

}

addTodo(title: string): Observable<Todo> {

let httpOptions = {

headers: new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' })

};

return this.http.post<Todo>(

this.todosUrl,

`title=${title}`,

httpOptions);

}

removeTodo(id: number): Observable<any> {

const deleteUrl = `${this.todosUrl}?id=${id}`;

return this.http.delete(deleteUrl);

}

import { Component } from '@angular/core';
import { TodoService } from './todo.service';
import { Todo } from './todo';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  newTodoText: string = '';
  todos: Todo[] = [];
  
  constructor(private todoService: TodoService) {

  }

  ngOnInit() {
    this.todoService.getTodos()
      .subscribe(todos => this.todos = todos);
  }

  addNewTodo(): void {
    this.todoService.addTodo(this.newTodoText)
      .subscribe(newTodo => {
        this.todos.push({
          id: newTodo.id,
          title: newTodo.title
        });
      });
    this.newTodoText = '';
  }

  removeTodo(todoId: number) {
    this.todoService.removeTodo(todoId)
      .subscribe(result => {
        for (let i = 0; i < this.todos.length; i++) {
          if (this.todos[i].id == todoId) {
            this.todos.splice(i, 1);
            break;
          }
        }
      });
  }
}

import { Component } from '@angular/core';

import { TodoService } from './todo.service';

import { Todo } from './todo';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

newTodoText: string = '';

todos: Todo[] = [];

constructor(private todoService: TodoService) {

}

ngOnInit() {

this.todoService.getTodos()

.subscribe(todos => this.todos = todos);

}

addNewTodo(): void {

this.todoService.addTodo(this.newTodoText)

.subscribe(newTodo => {

this.todos.push({

id: newTodo.id,

title: newTodo.title

});

this.newTodoText = '';

}

removeTodo(todoId: number) {

this.todoService.removeTodo(todoId)

.subscribe(result => {

for (let i = 0; i < this.todos.length; i++) {

if (this.todos[i].id == todoId) {

this.todos.splice(i, 1);

break;

}

});

}

React

import axios from 'axios';

export default class {
  static todosUrl = 'http://localhost/todo-api/todos/';

  static getTodos() {
    return axios.get(this.todosUrl);
  }

  static addTodo(title) {
    let config = {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    };
    return axios.post(
      this.todosUrl,
      `title=${title}`,
      config);
  }

  static removeTodo(id) {
    let deleteTodoUrl = `${this.todosUrl}?id=${id}`;
    return axios.delete(deleteTodoUrl);
  }
}

import axios from 'axios';

export default class {

static todosUrl = 'http://localhost/todo-api/todos/';

static getTodos() {

return axios.get(this.todosUrl);

}

static addTodo(title) {

let config = {

headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

};

return axios.post(

this.todosUrl,

`title=${title}`,

config);

}

static removeTodo(id) {

let deleteTodoUrl = `${this.todosUrl}?id=${id}`;

return axios.delete(deleteTodoUrl);

}

import React, { Component } from 'react';
import todoService from './todoService';
import { TodoList } from './components/TodoList';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newTodo: '',
      todos: []
    };
    this.onNewTodoChange = this.onNewTodoChange.bind(this);
    this.onRemoveTodo = this.onRemoveTodo.bind(this);
    this.addNewTodo = this.addNewTodo.bind(this);
  }

  componentDidMount() {
    todoService.getTodos()
      .then(result => {
        this.setState({
          todos: result.data
        });
      });
  }

  addNewTodo(event) {
    event.preventDefault();

    todoService.addTodo(this.state.newTodo)
      .then(response => {
        const newTodo = {
          id: response.data.id,
          title: response.data.title
        };
        this.setState({
          todos: [...this.state.todos, newTodo],
          newTodo: ''
        });
      });
  }

  onNewTodoChange(event) {
    this.setState({
      newTodo: event.target.value
    });
  }

  onRemoveTodo(todoId) {
    todoService.removeTodo(todoId)
      .then(response => {
        let todos = this.state.todos;
        for (let i = 0; i < todos.length; i++) {
          if (todos[i].id == todoId) {
            todos.splice(i, 1);
            break;
          }
        }
        this.setState({
          todos: todos
        });
      });
  }

  render() {
    return (
      <div id="todo-app">
        <form onSubmit={this.addNewTodo}>
            <label htmlFor="new-todo">Add a todo</label> 
            <input 
              id="new-todo" 
              placeholder="E.g. Feed the cat" 
              value={this.state.newTodo}
              onChange={this.onNewTodoChange} />
            <button>Add</button>
        </form>
        {this.state.todos && this.state.todos.length > 0 ? (
          <TodoList 
              todos={this.state.todos} 
              onRemoveTodo={this.onRemoveTodo} />
        ) : (
          <p>No todo items</p>
        )}
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import todoService from './todoService';

import { TodoList } from './components/TodoList';

class App extends Component {

constructor(props) {

super(props);

this.state = {

newTodo: '',

todos: []

};

this.onNewTodoChange = this.onNewTodoChange.bind(this);

this.onRemoveTodo = this.onRemoveTodo.bind(this);

this.addNewTodo = this.addNewTodo.bind(this);

}

componentDidMount() {

todoService.getTodos()

.then(result => {

this.setState({

todos: result.data

});

}

addNewTodo(event) {

event.preventDefault();

todoService.addTodo(this.state.newTodo)

.then(response => {

const newTodo = {

id: response.data.id,

title: response.data.title

};

this.setState({

todos: [...this.state.todos, newTodo],

newTodo: ''

});

}

onNewTodoChange(event) {

this.setState({

newTodo: event.target.value

});

}

onRemoveTodo(todoId) {

todoService.removeTodo(todoId)

.then(response => {

let todos = this.state.todos;

for (let i = 0; i < todos.length; i++) {

if (todos[i].id == todoId) {

todos.splice(i, 1);

break;

}

this.setState({

todos: todos

});

}

render() {

return (

<input

id="new-todo"

placeholder="E.g. Feed the cat"

value={this.state.newTodo}

onChange={this.onNewTodoChange} />

</form>

{this.state.todos && this.state.todos.length > 0 ? (

<TodoList

todos={this.state.todos}

onRemoveTodo={this.onRemoveTodo} />

) : (

<p>No todo items</p>

)}

</div>

);

}

export default App;

Vue

import axios from 'axios';

export default class {
  static todosUrl = 'http://localhost/todo-api/todos/';

  static getTodos() {
    return axios.get(this.todosUrl);
  }

  static addTodo(title) {
    let config = {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    };
    return axios.post(
      this.todosUrl,
      `title=${title}`,
      config);
  }

  static removeTodo(id) {
    let deleteTodoUrl = `${this.todosUrl}?id=${id}`;
    return axios.delete(deleteTodoUrl);
  }
}

import axios from 'axios';

export default class {

static todosUrl = 'http://localhost/todo-api/todos/';

static getTodos() {

return axios.get(this.todosUrl);

}

static addTodo(title) {

let config = {

headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

};

return axios.post(

this.todosUrl,

`title=${title}`,

config);

}

static removeTodo(id) {

let deleteTodoUrl = `${this.todosUrl}?id=${id}`;

return axios.delete(deleteTodoUrl);

}

<template>
  <div id="app">
    <form v-on:submit.prevent="addNewTodo">
        <label for="new-todo">Add a todo</label>
        <input 
          v-model="newTodoText" 
          id="new-todo" 
          placeholder="E.g. Feed the cat" />
        <button>Add</button>
    </form>
    <template v-if="todos && todos.length > 0">
      <TodoList 
        v-bind:todos="todos"
        v-on:remove="removeTodo" />
    </template>
    <template v-else>
        <p>No todo items</p>
    </template>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';
import todoService from './todoService';

export default {
  components: {
    TodoList
  },
  data() {
    return {
      newTodoText: '',
      todos: []
    }
  },
  mounted() {
    todoService.getTodos()
      .then(result => {
        this.todos = result.data;
      });
  },
  methods: {
    addNewTodo() {
      todoService.addTodo(this.newTodoText)
        .then(response => {
          this.todos.push({
              id: response.data.id,
              title: response.data.title
          });
          this.newTodoText = '';
        });          
    },

    removeTodo(todoId) {
      todoService.removeTodo(todoId)
        .then(response => {
          for (let i = 0; i < this.todos.length; i++) {
            if (this.todos[i].id == todoId) {
              this.todos.splice(i, 1);
              break;
            }
          }
        });
    }
  }
}
</script>

<input

v-model="newTodoText"

id="new-todo"

placeholder="E.g. Feed the cat" />

</form>

<TodoList

v-bind:todos="todos"

v-on:remove="removeTodo" />

</template>

<p>No todo items</p>

</template>

</div>

</template>

import TodoList from './components/TodoList.vue';

import todoService from './todoService';

export default {

components: {

TodoList

data() {

return {

newTodoText: '',

todos: []

}

mounted() {

todoService.getTodos()

.then(result => {

this.todos = result.data;

});

methods: {

addNewTodo() {

todoService.addTodo(this.newTodoText)

.then(response => {

this.todos.push({

id: response.data.id,

title: response.data.title

});

this.newTodoText = '';

});

removeTodo(todoId) {

todoService.removeTodo(todoId)

.then(response => {

for (let i = 0; i < this.todos.length; i++) {

if (this.todos[i].id == todoId) {

this.todos.splice(i, 1);

break;

}

});

}

</script>

Angular’s HttpClient instance is available to be injected to any class once you import the HttpClient module from @angular/common/http library. The module provides the methods get(), post(), and other methods to do typical AJAX requests.

axios, an HTTP client library I used for React and Vue, is heavily inspired by Angular’s HttpClient, so the methods provided by axios will look familiar if you’ve used HttpClient. You can install axios using NPM.

When executing an AJAX request, typically you want to do it as early as possible but not to early as the component is loaded. A component in these three frameworks has a lifecycle and hooks are available so that an operation can be executed within the lifecycle. For an Angular, React, and Vue component, the recommendation is to execute any AJAX request the earliest inside the ngOnInit, componentDidMount, and mounted lifecycle hook, respectively.

A major difference between Angular’s HttpClient and axio‘s HTTP client is that HttpClient is based on Observable while axios library is based on Promise. For simple operations as used by this “To Do” app, there’s hardly any difference in the implementation between using an Observable or Promise-based HTTP client.

Rhymed Code

My Notes–You Can Read Them, Too

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

Sample Code

Angular

React

Vue

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

Sample Code

Angular

React

Vue

Angular vs. React vs. Vue (Part III: AJAX)

Sample Code

Angular

React

Vue