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.

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.

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.

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.

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

React

Vue

---

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.

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.

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

React

Vue

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.

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.

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.