JavaScript:
Libraries
Frameworks
How JavaScript fits into the client/server architecture
What is a library?
A Collections of functions that have a common theme.
Examples of themes are:
1) Document Object Model
2) Graphical/visualization
3) GUI (Graphical user interface) and widget
4) Pure JavaScript/Ajax
5) Web-application related (MVC, MVVM)
Library vs. Framework
Both frameworks and libraries are code written by someone else that
is used to help solve common problems.
When you use a library, you are in charge of the flow of the
application. You are choosing when and where to call the library.
When you use a framework, the framework is in charge of the flow. It
provides some places for you to plug in your code, but it calls the code
you plugged in as needed
Example of outdatedJavaScript libraries
The following are once popular JavaScript that are no longer used.
1) Glow
2) Lively Kernel
3) Script.aculo.us
4) YUI Library
Current popular (Circa 2019) Libraries/Frameworks
1) JQuery (DOM, GUI)
2) Angular (GUI, Web Applications)
3) React (GUI, Web Applications)
4) Vue (GUI, Web Applications)
Angular (by Google)
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
React (by facebook)
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
</body>
</html>
Vue
//index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="./app.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
const vm = new Vue({
template: `<div id="vue-example">
<button @click="checkForErrors">Submit</button>
<p v-if="error">{{ errorMessage }}</p>
</div>`,
el: '#vue-example',
data: {
error: null,
errorMessage: 'An Error Occurred',
},
methods: {
checkForErrors() {
this.error = !this.error;
},
},
});
Which should a web application use (if any)
Angular and React have many similarities and many differences.
One of them is that Angular is a full-fledged MVC framework and React
is merely a JavaScript Library (just the view).
Angular is considered a framework because it offers strong opinions as
to how your application should be structured.
Companies Currently using React and Angular

javaScriptLibrariesFrameworks.pptx

  • 1.
  • 2.
    How JavaScript fitsinto the client/server architecture
  • 3.
    What is alibrary? A Collections of functions that have a common theme. Examples of themes are: 1) Document Object Model 2) Graphical/visualization 3) GUI (Graphical user interface) and widget 4) Pure JavaScript/Ajax 5) Web-application related (MVC, MVVM)
  • 4.
    Library vs. Framework Bothframeworks and libraries are code written by someone else that is used to help solve common problems. When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed
  • 5.
    Example of outdatedJavaScriptlibraries The following are once popular JavaScript that are no longer used. 1) Glow 2) Lively Kernel 3) Script.aculo.us 4) YUI Library
  • 6.
    Current popular (Circa2019) Libraries/Frameworks 1) JQuery (DOM, GUI) 2) Angular (GUI, Web Applications) 3) React (GUI, Web Applications) 4) Vue (GUI, Web Applications)
  • 7.
    Angular (by Google) <!DOCTYPEhtml> <html lang="en-US"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Name : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </body> </html>
  • 8.
    React (by facebook) <!DOCTYPEhtml> <html lang="en"> <title>Test React</title> <script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <body> <div id="id01">Hello World!</div> <script type="text/babel"> ReactDOM.render( <h1>Hello React!</h1>, document.getElementById('id01')); </script> </body> </html>
  • 9.
    Vue //index.html <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="./app.js"></script> </head> <body> <divid="app"></div> </body> </html> const vm = new Vue({ template: `<div id="vue-example"> <button @click="checkForErrors">Submit</button> <p v-if="error">{{ errorMessage }}</p> </div>`, el: '#vue-example', data: { error: null, errorMessage: 'An Error Occurred', }, methods: { checkForErrors() { this.error = !this.error; }, }, });
  • 10.
    Which should aweb application use (if any) Angular and React have many similarities and many differences. One of them is that Angular is a full-fledged MVC framework and React is merely a JavaScript Library (just the view). Angular is considered a framework because it offers strong opinions as to how your application should be structured.
  • 11.
    Companies Currently usingReact and Angular