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:
<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 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 its 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.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>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.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>And, to use with Nodejs, you can install it using npm command.
npm install vueI’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-appFollow 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 serverThis should automatically start up 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.Ember
Ember presents itself as a “productive, battle-tested” JS framework building web applications. The framework offers an out-of-the-box experience with tools to help you build a scalable application.
EmberJS come with Ember CLI, allowing users to create new entities through the code generator and provide the right file structure for your app.
EmberJS is known for these features;
- Built-in development environment: This environment offers a test-runner, auto-reload, and fast rebuilds.
- Built-in router: Ember’s comprehensive routing system combines async data loading with query parameters and dynamic url segments.
- Comes with Ember Data: Ember allows you to use any data layer. However, you can go even further and access data from multiple sources simultaneously, courtesy of the Ember Data library.
- Supports testing: Tests are auto-generated whenever you generate a new entity for an Ember app. The platform supports three testing levels, assuring your app will be ready for consumers.
Usage/ Installation
You can install Ember through Node Package Manager (npm);
npm install -g ember-cli
You can then scaffold a new app using this command;
ember new ember-quickstart --lang en
You can finally start the development server using these two commands;
cd ember-quickstart
ember serve
Your app is now ready, and when you visit http://localhost:4200/, you get the following output;
Check out the official documentation on creating your app based on your needs.
Svelte
Svelte is another JavaScript framework designed to help developers build slick interactive user interfaces. One of the major differences between Svelte and other JavaScript frontend libraries/ frameworks, such as Vue and React, is the compilation time.
React and Vue rely on a runtime environment to interpret and execute your code. On the other hand, Svelte converts your code to ideal JavaScript at build time. This feature makes it possible to create faster and smaller apps.
Svelte has the following features;
- Component-based architecture: Svelte allows you to split your app into small reusable components. Such an approach makes it easy to change simple components without rewriting the entire code.
- Fully reactive: With Svelte, you can create interactive and dynamic apps as it allows you to define declaratively how the User Interface (UI) will respond to changes in state.
- Compiler-based approach: The platform converts your code to JavaScript at build time, resulting in small and fast apps.
Usage/ Installation
You can create your first app using Node Package Manager (npm).
npm create svelte@latest myapp
Change the directory to the created app using this command;
cd myapp
Install all the needed dependencies;
npm install
Start the server;
npm run dev
Once you run all these commands, you will see something like this;
You can read the official documentation to understand how to start with Svelte and build your first app.
Backbone.js
Backbone.js is a lightweight JavaScript frontend framework that gives structure to web applications. This framework comes with views that support declarative event handling, collections with a rich API of enumerable functions and models with custom events, and key-value binding.
Backbone.js has these features;
- Extensible and Modular: Backbone.js allows you to split your app into small, reusable components. Thus, you can add or remove certain functionalities from your app without rewriting the entire source code.
- Open source: Backbone.js is a free-to-use framework with source code available on GitHub.
- Event-driven architecture: You can trigger and bind custom events when using Backbone.js,
- Compatible with RESTful APIs: You can easily integrate server-side technologies into a Backbone.js app due to its compatibility with REST APIs.
Usage/ Installation
First, create your Backbone.js app and cd into this app. You can follow these commands;
mkdir backbone-app
cd backbone-app
Initialize your new npm project using this command;
npm init
Install Backbone.js with its dependencies (JQuery and underscore.js). Use this command;
npm install backbone underscore jquery --save
You can now follow the official documentation and set up your models, views, and collections in readiness to create your first application.
Mithril.js
Mithril.js is a small client-side JavaScript framework for creating brilliant single-page applications. It is just 9.17 KB gzipped and used by major companies such as Nike and Vimeo.
Mithril.js is packed with the following features;
- Inbuilt routing: Navigating through pages and creating different routes on Mithril.js is easy due to its robust routing feature.
- Easy to learn: Mithril.js is suitable even for JavaScript beginners due to its simple syntax.
- Fast: Its small size allows this library to load in milliseconds and is thus suitable for applications where speed is critical.
- Compatible with most browsers: You can run Mithril.js apps on modern browsers such as Chrome, Firefox, Edge and Safari.
- Built-in XHR library: This library makes it easy to conduct AJAX requests.
Usage/ Installation
Create a new project.
You can use these commands;
mkdir mithril-app
cd mithril-app
Use this command to install Mithril.js through npm;
npm install mithril --save
Initialize your app to create a package.json file where your dependencies will reside. Use this command;
npm init --yes
Add start scripts to the scripts bit on the package.json file;
{
"name": "my-project",
"scripts": {
"start": "webpack src/index.js --output bin/app.js -d --watch"
}
}Install Webpack through this command;
npm install webpack webpack-cli --save-dev
You now have the basic Mithril.js app structure. Check the official documentation to continue building your app.
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.
