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.

Angular vs. React vs. Vue (Part II: Essential Syntax and Features)

Posted on June 30, 2018 by Joshua Sigar

In this article, I’m comparing my learning experience with Angular (version 6.0.3), React (version 16.4.1), and Vue (version 2.5.16). I used mostly the official documentation for each framework.

In part I, I created a “Hello, world!” app with each framework. I used CLI only to create the Angular app; I created the React and Vue apps simply by referencing the JavaScript file(s) in the HTML file. For this article, I’ve created a “To Do” app with each framework and I used the CLI to set up the project for each.

“To Do” App

The “To Do” app allows a user to enter a to-do item, and the item will be listed among other to-do items previously entered. Each to-do item in the list can be deleted by clicking the “Remove” button next to it.

In this app, I tried to cover the use of list, conditional rendering, form, event handling, and component.

Sample Code

Angular

<div id="todo-app">
  <form (submit)="addNewTodo()">
    <label for="new-todo">Add a todo</label>
    <input 
      [(ngModel)]="newTodoText" 
      id="new-todo" 
      name="new-todo" 
      placeholder="E.g. Feed the cat">
    <button>Add</button>
  </form>
  <todo-list 
    *ngIf="todos && todos.length > 0; else elseBlock"
    [todos]="todos" 
    (remove)="removeTodo($event)">
  </todo-list>  
  <ng-template #elseBlock>
    <p>No todo items</p>
  </ng-template>
</div>

<input

[(ngModel)]="newTodoText"

id="new-todo"

name="new-todo"

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

</form>

<todo-list

*ngIf="todos && todos.length > 0; else elseBlock"

[todos]="todos"

(remove)="removeTodo($event)">

</todo-list>

<ng-template #elseBlock>

<p>No todo items</p>

</ng-template>

</div>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nextTodoId = 1;
  newTodoText = '';
  todos = [];

  addNewTodo(): void {
    this.todos.push({
      id: this.nextTodoId++,
      title: this.newTodoText
    });
    this.newTodoText = '';
  }

  removeTodo(index: number) {
    this.todos.splice(index, 1);
  }
}

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

nextTodoId = 1;

newTodoText = '';

todos = [];

addNewTodo(): void {

this.todos.push({

id: this.nextTodoId++,

title: this.newTodoText

});

this.newTodoText = '';

}

removeTodo(index: number) {

this.todos.splice(index, 1);

}

<ul>
  <li *ngFor="let todo of todos; index as i">
    {{ todo.title }}
    <button (click)="onClick(i)">Remove</button>
  </li>
</ul>

<ul>

<button (click)="onClick(i)">Remove</button>

</li>

</ul>

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent {
  @Input() todos: Array<any>;
  @Output() remove = new EventEmitter<number>();

  constructor() { }

  onClick(index: number): void {
    this.remove.emit(index);
  }
}

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({

selector: 'todo-list',

templateUrl: './todo-list.component.html',

styleUrls: ['./todo-list.component.css']

})

export class TodoListComponent {

@Input() todos: Array<any>;

@Output() remove = new EventEmitter<number>();

constructor() { }

onClick(index: number): void {

this.remove.emit(index);

}

React

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

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

  addNewTodo(event) {
    event.preventDefault();
    const newTodo = {
      id: this.state.nextTodoId,
      title: this.state.newTodo
    };
    this.setState({
      nextTodoId: this.state.nextTodoId + 1,
      todos: [...this.state.todos, newTodo],
      newTodo: ''
    });
  }

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

  onRemoveTodo(listItemIndex) {
    let todos = this.state.todos;
    todos.splice(listItemIndex, 1)
    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 { TodoList } from './components/TodoList';

class App extends Component {

constructor(props) {

super(props);

this.state = {

newTodo: '',

todos: [],

nextTodoId: 1

};

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

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

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

}

addNewTodo(event) {

event.preventDefault();

const newTodo = {

id: this.state.nextTodoId,

title: this.state.newTodo

};

this.setState({

nextTodoId: this.state.nextTodoId + 1,

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

newTodo: ''

});

}

onNewTodoChange(event) {

this.setState({

newTodo: event.target.value

});

}

onRemoveTodo(listItemIndex) {

let todos = this.state.todos;

todos.splice(listItemIndex, 1)

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;

import React, { Component } from 'react';

export class TodoList extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(listItemIndex, event) {
        this.props.onRemoveTodo(listItemIndex);
    }

    render() {
        const todoListItems = this.props.todos.map((todo, index) =>
            <li key={todo.id}>
                {todo.title} 
                <button onClick={this.handleClick.bind(this, index)}>
                    Remove
                </button>
            </li>
        );
        return (
            <ul>
                {todoListItems}
            </ul>
        );
    }
}

import React, { Component } from 'react';

export class TodoList extends Component {

constructor(props) {

super(props);

this.handleClick = this.handleClick.bind(this);

}

handleClick(listItemIndex, event) {

this.props.onRemoveTodo(listItemIndex);

}

render() {

const todoListItems = this.props.todos.map((todo, index) =>

{todo.title}

Remove

</button>

</li>

);

return (

<ul>

{todoListItems}

</ul>

);

}

Vue

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

export default {
  components: {
    TodoList
  },
  data() {
    return {
      newTodoText: '',
      todos: [],
      nextTodoId: 1
    }
  },
  methods: {
      addNewTodo() {
          this.todos.push({
              id: this.nextTodoId++,
              title: this.newTodoText
          });
          this.newTodoText = '';
      },

      removeTodo(index) {
          this.todos.splice(index, 1)
      }
  }
}
</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'

export default {

components: {

TodoList

data() {

return {

newTodoText: '',

todos: [],

nextTodoId: 1

}

methods: {

addNewTodo() {

this.todos.push({

id: this.nextTodoId++,

title: this.newTodoText

});

this.newTodoText = '';

removeTodo(index) {

this.todos.splice(index, 1)

}

</script>

<template>
    <ul>
        <li v-for="(todo, index) in todos"
            v-bind:key="todo.id">
            {{ todo.title }}
            <button v-on:click="onClick(index)">Remove</button>
        </li>
    </ul>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    todos: Array
  },
  methods: {
    onClick(index) {
      this.$emit('remove', index);
    }
  }
}
</script>

<ul>

<li v-for="(todo, index) in todos"

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

<button v-on:click="onClick(index)">Remove</button>

</li>

</ul>

</template>

export default {

name: 'TodoList',

props: {

todos: Array

methods: {

onClick(index) {

this.$emit('remove', index);

}

</script>

Component (and Code Organization)

For this app, I came up with a component TodoList whose responsibility was, given a list of to-do items, to render a list of those items.

For the Angular app, I used the Angular CLI to create a new component. It generated four files (.css, .html, .spec.ts, and .ts) within a new folder. The CLI also automatically registered the new component with the app.

With the React app, I simply created a single file TodoList.js which contained the definition of TodoList component. This component was responsible for both logic and rendering the UI using JSX code.

Vue contained the template and logic in one single .vue file. Unlike React, though, the HTML and JavaScript code was in distinct, separate sections within the file.

One of interesting observations when creating this “To Do” app was the number of affected files.

	# of Files	Affected Files
Angular	5	app.module.ts, app.component.ts, app.component.html, todo-list.component.ts, todo-list.component.html
React	2	App.js, TodoList.js
Vue	2	App.vue, TodoList.vue

List

Angular and React use a common for-loop construct with only slight syntax difference. React utilized the method map() to generate the listing. Each method doesn’t seem to matter in practice, other than the construct using map() looks more verbose.

List template. (Left to right: Angular, React, Vue.)

Conditional Rendering

Angular and Vue use an “if” directive within HTML code to determine which code will render the actual DOM. React allows using “if” construct to accomplish the same. React also offers inline if-else using a ternary operator.

Conditional rendering. (Left to right: Angular, React, Vue.)

Event Handling

In regard to event handling, Angular, React, and Vue share similar syntax on the template side. React needs an additional line of code to bind the event handler method, which feels tedious at times. React’s documentation provide a couple ways to get around this.

Event Handling Markup. (left to right: Angular, React, Vue.)

Event Handling Code Behind. (From left to right: Angular, React, Vue.)

Event Handling Code Behind. (Left to right: Angular, React, Vue.)

Angular vs. React vs. Vue (Part I: Hello, World!)

Posted on June 13, 2018 by Joshua Sigar

I’d worked with jQuery for years when AngularJS appeared and try to find its place in web developers’ toolbox. AngularJS is touted to be the framework to create a single-page application. Today, the latest AngularJS is known as Angular only (without the “JS”) and within the last decade, contenders such as React and Vue have sprung up.

In this series of articles, I’m comparing the learning experience among Angular (version 6.0.3), React (version 16.4.1), and Vue (version 2.5.16), from “Hello, world!” stage to a real-world application. Different aspects (documentation, beginner friendliness, ease-of-use) will be considered.

Hello, World!

Angular

Angular documentation (https://angular.io/guide/quickstart) walked through creating the “Hello, world!” example by using Angular CLI. Using Angular CLI required installing Node and NPM. Once that’s set up, I generated a new project by running an Angular CLI command. The command created a set of folders and files which made up an Angular app.

Default files and folders of an Angular app

The guide pointed the file to update (./src/app/app.component.ts) to print “Hello, world!” on the web page. To see the output, I needed to run another command, which would launch the server and open the web browser on a certain URL.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello, world!';
}

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'Hello, world!';

}

{{ title }}

1	{{ title }}

React

React’s website insisted that I play around with the example code on CodePen. But an online code playground spared me the setting up step, which was what I actually wanted to do. I managed to find a pre-made HTML file at https://reactjs.org/docs/try-react.html to set up on my local environment.

<html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

<html>

<head>

</head>

<body>

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('root')

);

</script>

</body>

</html>

The guide did warn that the sample HTML file was not to be used in a production environment.

Vue

I was able to create a “Hello, world!” example based on the guide at https://vuejs.org/v2/guide/. The guide provided an example on JSFiddle, but it also gave direction on how to create the web page yourself. The guide mentioned of vue-cli (command line interface for Vue) but didn’t recommend it for beginners.

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello, world!'
                }
            });
        </script>
    </body>
</html>

<html>

<head>

</head>

<body>

</div>

var app = new Vue({

el: '#app',

data: {

message: 'Hello, world!'

}

});

</script>

</body>

</html>

Angular’s “Hello, world!” definitely took the most effort to create since it necessitated setting up the Node and NPM before creating the app. And then using the CLI to create an Angular project could be intimidating for some Windows users.

React and Vue required only including, respectively, three and one JavaScript files in the HTML file. React syntax mixed an HTML markup (H1 tag) and content (Hello, world!) while Vue separated the two.

In part II, I’m comparing the use of list, conditional rendering, form, event handling, and component among the three frameworks.

Rhymed Code

Synergy of Art and Science

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

Sample Code

Angular

React

Vue

Angular vs. React vs. Vue (Part II: Essential Syntax and Features)

Sample Code

Angular

React

Vue

Component (and Code Organization)

List

Conditional Rendering

Event Handling

Angular vs. React vs. Vue (Part I: Hello, World!)

Hello, World!

Angular

React

Vue