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.
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Hello, world!'; } |
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
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.
