JavaScript has increasingly gained popularity over the years, the community is rapidly growing, and developers are continually developing and building tools for the language daily.

This makes it overwhelming when it comes to deciding what tool/framework/library to use for a particular task because there are always multiple options for literally anything you want to do in JavaScript. At first, It ’s still challenging to decide what library or framework to learn.

This article focuses on demystifying the advantage of using several JavaScript front-end frameworks/libraries and ultimately gives a clearer picture of them. It is intended to make the decision process of selecting one easier.

React

React is not a framework but a JavaScript library for building user interfaces.

It is open-source and maintained by Facebook and a community of individual developers. React was initially written by Jordan Walke as an internal tool at Facebook. It was later open sources and released to the general public in 2013, and has gained a wide range of popularity after then.

Some of the features include the following.

  • Provides Reactive, customizable and reusable components
  • Utilizes a virtual DOM
  • Extremely fast
  • Component-based
  • One-way data binding
  • Code reusability
  • It has a vibrant, thriving ecosystem behind it
  • Convenient State Management Handling

Installation/Usage

React can be used on the frontend in two different ways.

  • Over CDN
  • Using Node.JS

Over CDN

You can refer to their official site to get a scripts link, which you can include in the header tag in your HTML markup. Choose the links based on the purpose.

For example, if using in a development environment, then:

And, for production

Using Node.JS

I assume you already have NodeJS installed. To install React, simply type the following command.

sudo npm i -g create-react-app --save-dev

Once Installation is done, type the following command

create-react-app my-first-react-application

The above command will install all the necessary libraries needed to React to run appropriately, which includes a development server, webpack, and babel.

Navigate to the my-first-react-application folder and run the following command

npm start

The above will launch a development server on port 3000. And, when you access your server IP with port 3000 then, you should see something like below.

React is gaining popularity and on-demand by a number of large organizations. If you are interested in learning, then I would recommend taking this complete course.

Vue.js

Vue.js is a progressive JavaScript framework for building interactive user interfaces and single-page applications. It is a model-view framework with the core library, focusing on the view layer. Vue is popular, for it’s the ability to power single-page applications. Unlike React, Vue uses raw HTML and not JSX.

Vue.js is an open-source and initially was created by Evan You and released publicly in February 2014. The following are some of the features.

  • It provides Reactive and composable view components.
  • Utilizes a virtual DOM
  • Maintains focus on the core library(i.e., Routing and state management)
  • Scoping in CSS is handled without CSS-In-Js
  •  One-way binding within components.
  • Support for essential addons
  • Code reusability

Installation/Usage

You can use Vue.js on the front-end either over the CDN or with Node.js

To use the CDN way, you can add the following script to your HTML page header section.

The above script is suitable for development purposes as it includes an important console message. However, for production, you should be using the below one.

And, to use with Nodejs, you can install it using npm command.

npm install vue

I’ll strongly advise that you read the official Vue JS documentation to learn more or consider taking this path.

Angular

Angular is a structural JavaScript framework for dynamic pages. It allows the use of HTML as a template language and allows the use of HTML syntax to express applications component clearly and concisely. It is an open-source project maintained by Google and other contributors.

Installation

Make you sure have the latest Nodejs installed. The first thing we’ll need to install is the Angular CLI tool.

npm install -g @angular/cli

Once installed, we can create a new project with the following command.

ng new my-first-angular-app

Follow the on-screen instruction. This generates some of the files and folders and uses the npm module to download third-party libraries needed for Angular to run properly.

To start the newly created application, run the following command from the apps folder.

ng server

This should automatically start up the server on port 4200.

[[email protected] my-first-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

Conclusion

So, what you choose to learn is more of a personal preference than “which is a better” thing.

All the frameworks/libraries listed above are great. Here’s a short recap;

  • You should learn Angular if you want a Framework that you want to rely upon without having to deal with external dependencies.
  • You should learn React if you want to build fast, PWA, Single Page application, and you are comfortable around JSX.
  • React has the most vibrant community and more job opportunities due to its large community.
  • React is relatively easy to get started with.
  • React is Highly customizable and treats each piece of UI as a component.
  • Vue has the same advantages as React but without JSX.
  • The job market for Vue is constantly increasing.

Here’s a chart on Google Trends showing a comparison of the popularity rate of the 3 of them.

If front-end development is your interest, then you may check out this Udemy course.

,
Show Comments