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 componentsUtilizes a virtual DOMExtremely fastComponent-basedOne-way data bindingCode reusabilityIt has a vibrant, thriving ecosystem behind itConvenient State Management Handling
Installation/Usage
React can be used on the frontend in two different ways.
Over CDNUsing 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 DOMMaintains 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 addonsCode 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. 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. 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. This should automatically start up the server on port 4200. 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.
