Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful...
Transcript of Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful...
![Page 1: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/1.jpg)
Client-Side Web Programming: JavaScript (Part 3)
Copyright © 2020 byRobert M. Dondero, Ph.D.
Princeton University
1
![Page 2: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/2.jpg)
Objectives
• You will learn/review:– JavaScript libraries– Specifically, a taste of…– jQuery– React
2
![Page 3: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/3.jpg)
Preparation
• To prepare for this lecture:– Browse to
https://www.cs.princeton.edu/courses/archive/spr20/cos333/lectures/14webjavascript/
– Download all .zip files to your local computer– Expand .zip files to yield source code files– Load source code files into your local editor– Set local editor to display line numbers
3
![Page 4: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/4.jpg)
Motivation for JavaScript Libraries
• Problem 1:– Many incompatibilities among browsers
• DOM, JavaScript, and HTML versions may differ– JavaScript code should account for
all/most/many variations– Becoming less important
• Problem 2:– JavaScript/AJAX code uses common patterns
and often is repetitive
4
![Page 5: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/5.jpg)
JavaScript Libraries
• Solutions:– Use a JavaScript generator
• Google Web Toolkit, …– Use a JavaScript library
• jQuery, React, …
5
![Page 6: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/6.jpg)
JavaScript Libraries
6As of May 2019, according tohttps://divante.com/blog/top-10-popular-javascript-frameworks-2019/
![Page 7: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/7.jpg)
Agenda
1. jQuery2. React3. Compare & contrast
7
![Page 8: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/8.jpg)
jQuery• Who: John Resig• When: 2006• Why: Simplify
JavaScript syntax for finding, selecting, and manipulating DOM elements
8
![Page 9: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/9.jpg)
jQuery Fundamentals
• jQuery syntax:– $(selector).action()
• $: indicates access of jQuery• selector: selects HTML element(s)
– As in CSS; covered soon• action(): specifies an action to be performed on
the selected element(s)
9
![Page 10: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/10.jpg)
PennyJQuery App
• See PennyJQuery app
10
![Page 11: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/11.jpg)
PennyJQuery App
• See PennyJQuery app (cont.)– runserver, runserver.bat– book.py, database.py– penny.py
11
![Page 12: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/12.jpg)
PennyJQuery App
• See PennyJQuery app (cont.)– search.html
• Some notes...
12
![Page 13: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/13.jpg)
PennyJQuery App• See PennyJQuery app (cont.)– search.html
• Must fetch jQuery library• Option 1
– Browser fetches jQuery library from jQuery site– Pro: Always get latest version– Pro: Likely to be cached in browser– Con: What if not cached and jQuery site is down???!!!
• Option 2 (commented out)– Ahead of time, download jQuery your to your website– Browser fetches jQuery library from your website– Con: May be stale– Pro: Always works!
13
![Page 14: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/14.jpg)
PennyJQuery App
• jQuery makes it easier to access DOM
let author =document.getElementById('authorInput').value;
let author = $('#authorInput').val();
14
Without jQuery:
With jQuery:
# => access by id
![Page 15: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/15.jpg)
PennyJQuery App
• jQuery makes it easy to separate event handling code from HTML
15
![Page 16: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/16.jpg)
PennyJQuery App
function setup(){
$('authorInput').focus();…getAmPm();getDateTime();
}…$('document').ready(setup);
With jQuery(in search.html):
16
<body onload="getAmPm(); getDateTime();document.getElementById('authorInput').focus()">
Without jQuery (in search.html):
<body>
![Page 17: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/17.jpg)
PennyJQuery App
17
<input type="text" id="authorInput" oninput="getResults()">
Without jQuery (in search.html):
function setup(){ …
$('#authorInput').on('input', getResults);…
}…$('document').ready(setup);
With jQuery(in search.html):
<input type="text" id="authorInput”>
![Page 18: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/18.jpg)
PennyJQuery App
• jQuery makes it easy to program AJAX
18
![Page 19: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/19.jpg)
PennyJQuery App
19
function createAjaxRequest(){ ...
return req;}function processReadyStateChange(){ ...
let resultsParagraph =document.getElementById("resultsParagraph");
resultsParagraph.innerHTML = this.responseText;}function getResults(){ ...
request = createAjaxRequest();request.onreadystatechange = processReadyStateChange;request.open("GET", url);request.send(null);
}
Without jQuery (in search.html):
![Page 20: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/20.jpg)
PennyJQuery App
function handleResponse(response){
$('#resultsParagraph').html(response);}function getResults(){ ...
request = $.ajax({ type: "GET",
url: url,success: handleResponse
});
}
20
With jQuery (in search.html):
![Page 21: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/21.jpg)
jQuery Summary
• jQuery summary– Useful
• Easy to access DOM• Easy to separate event handling from HTML code• Easy to use AJAX
– Easy to learn and use• Especially if you know CSS
– Extremely popular
21
![Page 22: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/22.jpg)
Agenda
1. jQuery2. React3. Compare & contrast
22
![Page 23: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/23.jpg)
React
• Who: Jordan Walke• When: 2011• Where: Facebook• Why: Handle user
interfaces in web apps
23
Note: React == React.js == ReactJS
![Page 24: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/24.jpg)
React Overview
• Pgmmer defines custom ES6 classes, extending React Component class
• Pgmmer uses custom classes to instantiate custom elements
• Each custom element– Can have properties (props)– Can have state– Renders its HTML
24
![Page 25: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/25.jpg)
PennyReact1Basic App
• See PennyReact1Basic app
25
![Page 26: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/26.jpg)
PennyReact1Basic App
• See PennyReact1Basic app (cont.)– runserver, runserver.bat– book.py, database.py
26
![Page 27: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/27.jpg)
PennyReact1Basic App
• See PennyReact1Basic app (cont.)– penny.py
• searchResults() returns plain text, not HTML fragment
• React will not allow insertion of HTML into results paragraph
– See description of cross-site scripting attacks in Securitylecture
27
![Page 28: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/28.jpg)
PennyReact1Basic App
• See PennyReact1Basic app (cont.)– search.html
• Commands browser to fetch React• Defines div element with id root
– Essentially all other HTML code is generated via JavaScript
28
![Page 29: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/29.jpg)
PennyReact1Basic App
• See PennyReact1Basic app (cont.)– search.html (cont.)
• Defines PennyHeader class– Defines PennyHeader element– Maintains state object having datetime property– Uses timer to maintain state object– Defines render() to update virtual DOM
» Uses state object» Calls React.createComponent()
– React uses virtual DOM to update browser DOM
29
![Page 30: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/30.jpg)
PennyReact1Basic App
• See PennyReact1Basic app (cont.)– search.html (cont.)
• Defines PennyFooter class– Defines PennyFooter element– Maintains state object having datetime property– Uses timer to maintain state object– Defines render() to update virtual DOM
» Uses state object» Calls React.createComponent()
– React uses virtual DOM to update browser DOM
30
![Page 31: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/31.jpg)
PennyReact1Basic App• See PennyReact1Basic app (cont.)– search.html (cont.)
• Defines PennySearch class– Defines PennySearch element– Maintains state object having inputValue and books
properties– Detects changes in input element to maintain state object
» Uses AJAX– Defines render() to update virtual DOM
» Uses state object» Calls React.createComponent()
– React uses virtual DOM to update browser DOM
31
![Page 32: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/32.jpg)
PennyReact1Basic App
• See PennyReact1Basic app (cont.)– search.html (cont.)
• Generates div element containing:– PennyHeader element– PennySearch element– PennyFooter element
• Calls ReactDom.render() function– Renders div element into virtual DOM within element
whose id is root– React uses virtual DOM to update browser DOM
32
![Page 33: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/33.jpg)
PennyReact1Basic App
• But that’s not how React apps really look…
33
![Page 34: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/34.jpg)
PennyReact2Jsx App
• JSX (JavaScript XML)– Allows embedding of HTML-like code
(actually, XML code) in JavaScript code– No explicit calls of React.createElement()
34
![Page 35: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/35.jpg)
PennyReact2Jsx App
• See PennyReact2Jsx app– runserver, runserver.bat– book.py, database.py– penny.py
35
![Page 36: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/36.jpg)
PennyReact2Jsx App
• See PennyReact2Jsx app (cont.)– search.html
• Commands browser to fetch JSX• Uses JXS instead of React.createComponent()
36
![Page 37: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/37.jpg)
PennyReact2Jsx App
• But that’s still not how React apps really look…
37
![Page 38: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/38.jpg)
PennyReact3Real App
• The general idea:– Before run-time:
• Place React, JSX, and all JavaScript files comprising your app in a JavaScript bundle
– At run-time:• Browser requests “search” page; server delivers it• Browser requests bundle; server delivers it• Browser interprets bundle• Browser incrementally requests book lists; server
incrementally delivers them
38
![Page 39: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/39.jpg)
PennyReact3Real App
• Thanks to Lucas Manning (‘20)…• See PennyReact3Real app
– runserver, runserver.bat– book.py, database.py– penny.py
39
![Page 40: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/40.jpg)
PennyReact3Real App
• See PennyReact3Real app (cont.)– PennyHeader.jsx, PennyFooter.jsx,
PennySearch.jsx, main.js• Each component is defined in a distinct file
40
![Page 41: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/41.jpg)
PennyReact3Real App
• See PennyReact3Real app (cont.)– search.html
• Minimal HTML page• Causes browser to fetch static/app.bundle.js script• Browser execution of static/app.bundle.js populates div element whose id is root
41
![Page 42: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/42.jpg)
PennyReact3Real App
• See PennyReact3Real app (cont.)– webpack.config.js
• Configures Webpack to pack all JavaScript code into one large bundle (static/app.bundle.js)
– Includes React itself, and JSX too– Recall: search.html causes browser to fetch/execute that
bundle
42
![Page 43: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/43.jpg)
Aside: Node.js Revisited
• Node.js– Provides tools to help with development of
React client-side• For example: Babel, Webpack• Via npm, the Node.js package manager
43
![Page 44: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/44.jpg)
PennyReact3Real App
• See PennyReact3Real app (cont.)– init
• Creates a new npm module• Uses npm to install dependencies
– build• Uses Babel to convert JSX to JavaScript, and
transpile JavaScript from ES6 to ES5• Uses Webpack to pack all ES5 JavaScript code
into one large bundle (static/app.bundle.js)– Includes React itself, and JSX too
44
![Page 45: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/45.jpg)
PennyReact3Real App
• To give it a try:– Install the node.js environment from
https://nodejs.org/en/– Run ./init– Run ./build– Run ./runserver 55555– Browse to http://localhost:55555
45
![Page 46: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/46.jpg)
PennyReact3Real App
• At run-time:– Browser requests search.html; server delivers
it– Browser requests app.bundle.js; server
delivers it– Browser interprets app.bundle.js– Browser incrementally requests book lists;
server incrementally delivers them
46
![Page 47: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/47.jpg)
React Conclusion
• There is much more to React• Next steps
– Study some richer examples• Especially examples that involve props and nested
components– Learn about React with FLUX pattern
• As implemented by the Redux library
47
![Page 48: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/48.jpg)
React Conclusion• create-react-app
– Node.js program– Latest way to create a React app– By default:
• Browser loads React app from host h1 at port p1• Via React app, browser repeatedly contacts penny
app running on host h2 at port p2 to fetch book lists– Commentary:
• Strange!• Cookies? CAS?
48
![Page 49: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/49.jpg)
Agenda
1. jQuery2. React3. Compare & contrast
49
![Page 50: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/50.jpg)
JavaScript Libraries Comparison
• jQuery– HTML is primary, JavaScript is secondary– Dominant paradigm: client-side MVC
• Model = DOM, view = rendered page, controller = JavaScript code
– Typically in distinct files: HTML, JavaScript• Modularity by technologies
50
![Page 51: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/51.jpg)
JavaScript Libraries Comparison
• React– JavaScript is primary, HTML is secondary– Dominant paradigm: OOP
• Inheritance: Components inherit from React.Component
• Composition: Components can be composed of other components
– Typically in distinct files: components• Modularity by components
51
![Page 52: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/52.jpg)
JavaScript Libraries Comparison
• Commentary:– Is jQuery code more maintainable?
• Because of better separation of concerns?– Is React code more reusable?
• Because of encapsulated components?
52
![Page 53: Client-Side Web Programming: JavaScript (Part 3) · jQuery Summary •jQuery summary –Useful •Easy to access DOM •Easy to separate event handling from HTML code •Easy to use](https://reader034.fdocuments.us/reader034/viewer/2022042408/5f2365f2fda4f507e73cc43c/html5/thumbnails/53.jpg)
Summary
• We have covered:– JavaScript libraries– Specifically, a taste of…– jQuery– React
53