SLIDE 1
MY BLOG
ADD POST This is my first post.
MY BLOG
NEW POST This is my first post. 02/23/15
API DATABASE
DATA BINDING Client-side View of Data Client Server MY BLOG This - - PowerPoint PPT Presentation
DATA BINDING Client-side View of Data Client Server MY BLOG This - - PowerPoint PPT Presentation
CS 498RK FALL 2016 DATA BINDING Client-side View of Data Client Server MY BLOG This is my first post. ADD POST API DATABASE MY BLOG 02/23/15 This is my first post. NEW POST Client Server MY BLOG This is my first post. ADD POST
SLIDE 2
SLIDE 3
MY BLOG
ADD POST This is my first post.
MY BLOG
NEW POST This is my first post. 02/23/15
API DATABASE
Client Server How is data being sent/received? ?
SLIDE 4
Http
SLIDE 5
HTTP
request-response protocol sent using TCP/IP sockets “all about applying verbs to nouns” nouns: resources (i.e., concepts) verbs: GET, POST, PUT, DELETE
Hypertext Transfer Protocol
web.archive.org/web/20130116005443/http://tomayko.com/writings/rest-to-my-wife
More details in Socket lecture
SLIDE 6
URL
type of URI (Identifier) specifies the location of a resource on a network server responds with representations of resources and not the resources themselves
Uniform Resource Locator
web.archive.org/web/20130116005443/http://tomayko.com/writings/rest-to-my-wife
Rest lecture
SLIDE 7
URL ANATOMY
moz.com/blog/solving-the-subdomain-equation-predicting-traffic-and-value-when-merging-subdomains
SLIDE 8
LOADING A PAGE IN A BROWSER
Browser
http://creativecommons.org <a><span id="home-button"> </span></a> <div id="logo"> <span> Creative Commons </span> </div>
HTML
cforms.js
//Collapse Functions String.prototype.tri function() { return this.replace}
creativecommons.css
topbar #home-button{ position: relative; float: left; display: block; height: 40px; width: 150px; }
cc-logo.png
Other Resources Rendered Page Document Object Model (DOM)
#logo img body span ul
topbar span { float: left; display: block; height: 40px; width: 150px; cursor: pointer; z-index: 1; top: 0;
representations of resources
http:/ /creativecommons.org
HTTP GET HTTP GET
SLIDE 9
SLIDE 10
GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/xml,application/ xml,application/xhtml+xml,text/html*/* Accept-Language: en-us Accept-Charset: ISO-8859-1,utf-8 Connection: keep-alive <blank line>
en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Example_session
HTTP Request
method version request headers url
SLIDE 11
retrieve representations of resources no side effects no data in request body
upload data from the browser to server returns information from the server side effects are likely data contained in request body
GET POST
vs
SLIDE 12
HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Content-Type: text/html; charset=UTF-8 Content-Length: 131 <!DOCTYPE html> <html> … </html>
en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Example_session
HTTP Response
response headers content version status code text explanation
SLIDE 13
HTTP/1.1 200 OK Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Content-Type: text/html; charset=UTF-8 Content-Length: 131 <!DOCTYPE html> <html> … </html>
en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Example_session
HTTP Response
MIME Type
SLIDE 14
HTTP STATUS CODES
moz.com/learn/seo/http-status-codes
SLIDE 15
HTTPS
request and response messages are transmitted securely using encryption
More details in Security lecture
SLIDE 16
Ajax
SLIDE 17
AJAX
send and receive data without reloading page Before, every user interaction required the complete page to be reloaded
Asynchronous JavaScript and XML
SLIDE 18
AJAX
Issue HTTP request to the server from Javascript Process response with Javascript in the browser
SLIDE 19
AJAX TECHNOLOGIES
HTML and CSS DOM XML XMLHttpRequest object JavaScript
SLIDE 20
JSON
AJAX doesn’t require XML JSON has become de facto standard data interchange format lightweight and simple format types: Number, String, Boolean, Array, Object, null
- bjects are key/value pairs
SLIDE 21
JSON CODE EXAMPLE
{ “camelids”: [ { “name”: “llama”, “height”: 1.8 }, { “name”: “alpaca”, “height”: 0.9 } ] }
Look familiar?
SLIDE 22
XMLHttpRequest
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = xhrHandler; xhr.open('get', 'llama.json'); xhr.send(null);
http://www.w3.org/TR/XMLHttpRequest/
SLIDE 23
function xhrHandler() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); myFunction(data); } };
XMLHttpRequest
CODEPEN
SLIDE 24
AJAX CHALLENGES
hard to go back to a particular state content retrieved by AJAX not easily indexable The same origin policy prevents some Ajax techniques from being used across domains callback-style programming is hard to maintain/test JSONP URL fragment identifier
SLIDE 25
Client-side Templating
SLIDE 26
TEMPLATES
common way to generate dynamic HTML for multi-page web sites and apps separation of markup and data (content)
SLIDE 27
SERVER-SIDE TEMPLATES
server puts HTML and data together and sends it to the browser platforms like Rails, PHP, JSP
http://www.w3.org/TR/XMLHttpRequest/
SLIDE 28
CLIENT-SIDE TEMPLATES
browser receives HTML and data and puts it together server serves templates and data required by the templates made popular by AJAX AngularJS
SLIDE 29
Model View Controller
SLIDE 30
MODEL VIEW CONTROLLER (MVC)
introduced in 1970s as part of SmallTalk popular in desktop UI development (C++, Java) more recently introduced to the Web mental model makes it easier to extend, maintain, and test apps
SLIDE 31
MODEL VIEW CONTROLLER (MVC)
Model Controller managing data presenting the data application logic View Separation between
SLIDE 32
MODEL VIEW CONTROLLER (MVC)
Model
state change
Controller View
state and update notifications user interaction
SLIDE 33
MVC CHALLENGE
non-trivial to get the data into the correct state, both in the View and in the Model
SLIDE 34
Data Binding
SLIDE 35
Just declare mapping between View and Model and have them sync automatically?
SLIDE 36
DATA BINDING
automatically keep state in View and Model in sync frameworks provide scaffolding to eliminate a lot of code
SLIDE 37
MY BLOG
This is my first post.
EXAMPLE
blog blog.posts
View Model
SLIDE 38
MENTAL MODEL
Binding Target Binding Source
Dependency Object Dependency Property Object Property
Binding Object
SLIDE 39
MENTAL MODEL
Dependency Object Dependency Property Object Property
OneWay TwoWay OneWayToSrc
SLIDE 40