3 Best JavaScript framework / library for front-end development

JavaScript has grown in popularity over the years, the community is growing rapidly, and developers are continually developing and building tools for the language on a daily basis.

This makes it difficult to decide which tool / framework / library to use for a particular task, as there are always multiple options for literally anything you want to do in JavaScript. At first, it’s always difficult to decide which library or framework to learn.

This article focused on demystifying the benefit of using multiple JavaScript front-end frameworks / libraries and ultimately gives a clear picture. It aims to facilitate the decision-making process to select one.

React Framework

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

It is open-source and maintained by Facebook and a community of individual developers. React was originally written by Jordan Walke as an internal Facebook tool. It was then open source and released to the general public in 2013, and gained great popularity thereafter.

Some of the features include the following.

• Provides responsive, customizable and reusable components
• Use a virtual DOM
• Extremely fast
• Component-based
• One-way data link
• Code reuse
• It has a vibrant and thriving ecosystem behind it
• Practical management of condition management

Installation / use

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

• On CDN
• Using Node.JS

On CDN

You can refer to their official site for a scripts link, which you can include in the header tag of your HTML markup. Choose the links according to the objective.

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

And, for production

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Using Node.JS

I’m assuming you have NodeJS installed already. To install React, just type the following command.

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

Once the installation is complete, type the following command

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

The above command will install all the libraries needed for React to run properly, which includes a dev server, web pack, and babel.

Go to the my-first-react-applicationfolder and run the following command

npm start

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

Vue.js Framework

Vue.js is a progressive JavaScript framework for building interactive user interfaces and single page applications. This is a model view frame with the main library, focusing on the view layer. Vue is popular because it allows one-page applications to be populated. Unlike React, Vue uses raw HTML, not JSX.

Vue.js is open-source and was originally created by Evan You and released publicly in February 2014. Here are some of the features.

• It provides responsive and composable view components.
• Use a virtual DOM
• Stay focused on the core library (i.e. routing and state management)
• The scope in CSS is managed without CSS-In-Js
•  Unidirectional connection within the components.
• Support for essential addons
• Code reuse

Installation / use

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

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

The above script is suitable for development purposes because it includes an important console message. However, for production you need to use the one below.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

npm install vue

I strongly advise you to read the official Vue JS Documentation to learn more or consider taking this path .

Angular Framework

Angular is a structural JavaScript framework for dynamic pages. It enables the use of HTML as a template language and allows the use of HTML syntax to express the component of applications in a clear and concise manner. This is an open source project maintained by Google and other contributors.

Installation

Make sure the latest Nodejs are installed. The first thing we will 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 instructions on the screen. This generates some files and folders and uses the npm add-on to download third-party libraries needed for Angular to work properly.

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

ng server

This should automatically start the server on port 4200.

[root@lab 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 “what’s best.”

All of the frameworks / libraries listed above are excellent. Here is a brief recap;

• You have to learn Angular if you want a Framework that you want to build on without having to deal with external dependencies.
• You should learn React if you want to build a PWA, Single Page application quickly and are comfortable with JSX.
• React has the most vibrant community and more job opportunities due to its large community.
• React is relatively easy to use.
• React is highly customizable and treats every UI element as a component.
• Vue has the same benefits as React but without JSX.
• Vue’s job market is constantly growing.