Recommended
More Related Content
Similar to JavaScript Libraries, Frameworks & How They Fit Into Client/Server Architecture
Similar to JavaScript Libraries, Frameworks & How They Fit Into Client/Server Architecture (20)
More from MattMarino13
More from MattMarino13 (20)
Recently uploaded
Recently uploaded (20)
JavaScript Libraries, Frameworks & How They Fit Into Client/Server Architecture
- 2. How JavaScript fits into the client/server architecture
- 3. 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)
- 4. 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
- 5. 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
- 6. 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)
- 7. 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>
- 8. 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>
- 9. 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; }, }, });
- 10. 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.
- 11. Companies Currently using React and Angular