1.jQuery
jQuery is the most popular library on the web today it’s a library of JavaScript function that make it easy for web developer to do common tasks like manipulating the web page , responding to the users event, getting data from their servers building effects and animations and much more. jQuery builds on top of the functionality that browsers give us via the JavaScript DOM API,
There are two versions of jQuery available for downloading:
- Production version – this is for your live website because it has been minified and compressed
- Development version – this is for testing and development (uncompressed and readable code)
- Both versions can be downloaded from jQuery.com
The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag and (notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-3.4.1.min.js"></script>
</head>
2. BackBoneJS
Bckbonejs is an interface used to synchronize various part of a web application and It is written in javascript and depends on underscore.js on javascript library some of the application based on Backbonejs are BitTorrent , Pinterest, LinkedIN mobile, wordpress.com it decouples and helps and maintenance of code Backbonejs provide its users with user interface primitives and that enables minimal data structuring its flexible and easy to use, you can also manipulate data in your application without worrying about propriety there are no drawbacks to the performance it doesn’t run loops avoid two-way binding and provides a lot of plugins and extension it also connects ones existing APIs to Backbonejs plateform using RESTFULL JSON interface.
Here is the simple example that contains all the libraries that you’ll need (jQuery, Underscore.js, Backbone.js and Backbone-localStorage.js) and the placeholders for your HTML and JS code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World in Backbone.js</title>
</head>
<body>
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->
<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type="text/javascript">
// your JS code goes here
</script>
</body>
</ht
3.D3.JS
D3.js is a JavaScript library that combines visualization and interaction techniques with a data-driven approach to DOM manipulation, allowing users to create the right visual interface for their data.
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction
- Visit the D3 website: https://d3js.org
- Download the latest version of d3 (d3.zip). (At the time of writing this chapter, the latest version is 4.6.0.)
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../d3.min.js"></script>
</head>
<body>
<script>
// write your d3 code here..
</script>
</body>
</html>
4.React
React is a javascript library created by FACEBOOK that lets us build dynamic user interfaces. Lets say that we have a web app with three timers on it we have the ability to create and delete a timer when you click on a button to create a timer a form will pop up what feels free to out and when you hit enter that app will create that timer for you when you decide to delete a timer if you click the delete button the timer will remove itself from the page that is called a dynamic user interface.
React is created because the Facebook development team wanted a better way to structure JavaScript applications and the react is allow to reuse the component and the component are huge part in react , component let you split your code into separate independent reusable pieces
- React requires Nodejs. If you don’t have Nodejs on your computer, you can download it from here.
- After installing Nodejs, open your Terminal or Command Prompt and type the following command to create your React app:
npx create-react-app my-appcd my-app
- Finally, type
npm startand the application should start on your localhos
React has a few different kinds of components, but we’ll start with React.Component subclasses:
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
5.Vue.js
Vue.js is a javascript framework that makes the creation of JavaScript driven web app running in the client in the browser easier let’s take a closer look we have the client and browser and we have a server we send a request and we visit a page and we get back to some html pages with the content of the pages now if we don’t think about the client here as desktop but as a mobile phone and we consider a real mobile app downloaded from the app store the app is highly engaging because it has near instant response and no page reload everything happening vary quickly , and by using vue.js we can create the highly responsive web app
Javascript Is the only language running on the browser after the page has been loaded so we can use it to control parts of the page and change them after the has been loaded without sending a new request which gives us a nice user experience VUE.JS helps us with that and makes that easier so VUE.JS is about simplifying stuffs. It’s a collection of tools and it allows to react events ,handle user input update UI dynamically. It create an engaging Front-End with JavaScript without any problem.
The easiest way to try out Vue.js is using the JSFiddle Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with:
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
or:
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Hemant kumar 