Upload
doananh
View
220
Download
0
Embed Size (px)
Citation preview
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/Web Technologies
microservices & Web interaction
↹Ajax – a suite of technologies
Web mash-ups
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
“The manner of giving is worth more than the gift.”
Pierre Corneille
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
microservice
Implements a specific functionality, available as a single process
self-contained system
backend component developed to be replaced, not reused
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
microservice characteristics according toJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
microservice characteristics according toJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
microservice characteristics according toJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
microservice characteristics according toJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
microservice characteristics according toJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
microservice characteristics according toJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
microservice characteristics according toJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
microservice characteristics according toJames Lewis & Martin Fowler, Microservices (2014)
http://martinfowler.com/articles/microservices.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
modularity, decentralization, and continuous evolution
examples of good practice: http://microservices.io/
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
microservice
Functional
implements specific functionalities(business operations)
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
microservice
Functional
implements specific functionalities(business operations)
exposed to service consumer
independent (no side effects)
typically, not sharable
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
microservice
Control – Infrastructure
implements non-functional tasks: authentication, authorization, logging, monitoring,…
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
microservice
Control – Infrastructure
implements non-functional tasks: authentication, authorization, logging, monitoring,…
not exposed – private
could be shared at the application or internal services level
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
brow-ser
app logic
“powerful”and/or “smart”
client
microservices in serverless context – application depends on external components, available in the “clouds”
BaaS
Mike Roberts (2016) – http://martinfowler.com/articles/serverless.html
func-tiona-lity1
☁
func-tiona-lity2
☁
☁
au-thenti-cation
☁
BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service
☁
FaaS
search
order processing
BaaS
orders
products
APIaccess
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
microservice
Aspect of interest:
sharing functionalities
share-as-much-as possible (classical SOA)versus
share-as-little-as possible (microservices)
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
microservice
Aspect of interest:
(micro-)services communication – usually, asynchronous
approaches:point-to-point
orpublish-subscribe
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
implementare
internally, (micro-)services could communicate by usingthe publish-subscribe model – www.w3.org/TR/pubsub/
client has simplified access
via API
Jonas Bonér (2016)
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
microservice
Commonly, microservice architectures do not include middleware components and do not support abstract
interactions between service providers and consumers (contract decoupling)
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Web service-based architecture
microservicearchitecture
real use-cases: Amazon, Groupon, Netflix,…
also, study Stefan Tilkov’s presentations: https://speakerdeck.com/stilkov
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
How can be performed the asynchronous data transfer
between Web client(s) and server(s)?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Asynchronous JavaScript And XML(Jeese James Garrett)
permits asynchronous data transfer between an HTML document rendered by client (browser)
and an application running on a Web server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
A suite of open technologies:
standard languages for data structuring – e.g., HTML –and presentation: CSS
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
A suite of open technologies:
view + interaction on the Web client (browser) via DOM standard
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
A suite of open technologies:
exchange and manipulation of data represented by:various XML dialects,
JSON,HTML,
other formats
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
A suite of open technologies:
(a)synchronous data transfer via HTTPfacilitated by the XMLHttpRequest object
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
A suite of open technologies:
processing with ECMAScript (JavaScript) language
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Basic component: XMLHttpRequest object
available in the Web browser via JavaScript
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Basic component: XMLHttpRequest object
initial specification based on MSIE implementation
in the present, provided by (almost) any browser
www.w3.org/TR/XMLHttpRequest1/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Basic component: XMLHttpRequest object
current specification(HTML5 Living Standard, 9 May 2017)
implemented by latest Web browsers
https://xhr.spec.whatwg.org/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Basic component: XMLHttpRequest object
could send HTTP requests – e.g., GET, POST,… –from a program running on client (browser)
to a Web application/service existing on a server,in asynchronous or synchronous way
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Basic component: XMLHttpRequest object
data transported between client and server programs could have any format
regularly, modeled in XML (e.g., Atom, RSS, KML,…),HTML and/or JSON
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Basic component: XMLHttpRequest object
Web pages do not require to be completely reloaded, their content – structured by HTML – being manipulated
with DOM on the browser, depending on the data received from server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – important methods
open ( )
initiates – opens – an HTTP connection to a server, issuing a request: GET, POST,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – important methods
send ( )
transmits (asynchronously) data – e.g., XML, JSON, etc. –,to the application/service running on server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – important methods
send ( )
transmits (asynchronously) data – e.g., XML, JSON, etc. –,to the application/service running on server
any listener (associated to the onload, ontimeout,onabort,… events) should be set before sending data
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – important methods
abort ( )
cancels the current data transfer
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – important methods
setRequestHeader ( )
specifies various HTTP header fields
examples: Cookie, Keep-Alive, User-Agent,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – important methods
getResponseHeader ( )
offers the value of certain field from the header of HTTP response message sent by server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – important methods
getAllResponseHeaders ( )
provides all HTTP fields sent by server, except Set-Cookie
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – basic properties
readyState
provides the code of transfer state:0 – UNSENT
1 – OPENED
2 – HEADERS_RECEIVED
3 – LOADING
4 – DONE
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – basic properties
status
gets HTTP status code returned by Web server:200 (Ok)
404 (Not Found)500 (Internal Server Error)
…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – basic properties
statusText
contains the message corresponding to HTTP status code
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – basic properties
responseText
responseXML
stores the response (data) obtained from server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
XMLHttpRequest – basic properties
onreadystatechange
specifies the function to be called at each change of the state regarding data transfer between server and client
a handler for data transfer events
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Exceptions that could be emitted
AbortError
InvalidAccessError
InvalidStateError
NetworkError
SecurityError
TimeoutError
…
according to DOM 4 Core
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
New features:establishing a timeout regarding a request fulfillment
(in milliseconds)
a non-null value cause a resource fetching – preload
study also Fetch (HTML5 Living Standard, 24 May 2017)https://fetch.spec.whatwg.org/
developers.google.com/web/updates/2015/03/introduction-to-fetch
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
New features:transferred data could have various types
(ArrayBuffer, Blob, Document, DOMString, FormData)
details at https://xhr.spec.whatwg.org/#interface-formdata
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
New features:the upload process could have attached a specific handler
by using the upload property
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
New features:data loading progress could be monitored
by using the ProgressEvent interface
https://xhr.spec.whatwg.org/#interface-progressevent
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – usage
Periodic refresh of the content
e.g., news received in formats like Atom or RSS, messages from social applications, notifications,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – usage
Anticipating downloads
pre-loading data (e.g., images) that will be required
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – usage
Data auto-completion
search suggestions – example: Google Suggest
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – usage
Real-time validation of input data from forms
example: checking the existence of a user account or a place
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – usage
Creating Web interface components (widgets) or Web applications running on mobile platforms
interacting to the user based on occurred events
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – aspects
Avoiding loading the entire Web document
advantaje:only fragments of document can be modified
disadvantage:the bookmarking could be ruined (there are no unique URI denoting
the representation of the actual resource)
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – aspects
Providing alternatives to Ajax, when the support for it is not implemented/enabled
graceful degradation
progressive enhancement
www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – aspects
Minimizing traffic between browser and server
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – aspects
Data transfer could be monitored (+intercepted) via dedicated tools
on the desktop: WireShark
directly in the browser (possibly, as extensions)Firebug, Fiddler, TamperData, Live HTTP Headers
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – aspects
Adopting Ajax to increase the usability, not just for the sake of technology
negative examples:user distraction
resource abuse (DOM tree oversize)
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax
Ajax offers premises for asynchronous invocation of REST Web (micro-)services
using various representations of transferred data: POX (Plain Old XML)
JSON (JavaScript Object Notation)AHAH (Asynchronous HTML and HTTP)
plain text
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – programming
Client-sidetraditional JavaScript libraries + frameworks
AngularJS – angularjs.org
Backbone.js – backbonejs.org
Dojo Toolkit – dojotoolkit.org
jQuery (plus jQuery UI) – jquery.com
Prototype – prototypejs.org
MooTools – mootools.net
microlibraries: http://microjs.com/#ajax
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – programming
Server-sidelibraries, modules, frameworks – examples:
Java – Apache Wicket, DWR, OpenXava, Vaadin, etc..NET – AJAX Control Toolkit: devexpress.com/act
Node.js – nodejsmodules.org/tags/ajax
PHP – Cjax: github.com/ajaxboy/cjax
Perl – CGI::Ajax, Catalyst, Mason etc.Python – wiki.python.org/moin/WebFrameworks
…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – programming
Specialized APIs
examples:Bing Maps V8 Web Control
https://msdn.microsoft.com/en-us/library/mt712542.aspx
HERE JavaScript APIshttps://developer.here.com/javascript-apis
Ajax in the context of WordPress extensionshttps://codex.wordpress.org/AJAX_in_Plugins
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – case study
Checking the existence of a user name in order to create an account
providing access to a Web application
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/Client
Web server
XMLHttpRequest
Web app. server
open ("GET")
open ("POST")
send (...)
DOM
browser’s window
checking asynchronously if an account exists on server
XML data (on server)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – case study
Checking the existence of a user name in order to create an account
providing access to a Web application
handling with DOM the onblur event, we can sense – asynchronously querying the server-side Web
application – if the account name entered by user in a Web form already exists
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – case study
Checking the existence of a user name in order to create an account
providing access to a Web application
the server-side Web application – adopting REST –will provide an XML document modeling the response to the question: “Already exists a user having that name?”
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
<?php // a PHP program, as a Web service, running on serverdefine ('DOCXML', './particip.xml'); // location of the XML document// sending content type; here, XMLheader ('Content-type: text/xml');
// function that verifies if a participant name already exists// returns 1 if name exists, 0 otherwisefunction checkIfNameExists ($aName) {// loading data about participants by using SimpleXMLif (!($xml = simplexml_load_file (DOCXML))) { return 0; }// scanning all participant’s names found with XPath...foreach ($xml->xpath('/participants/participant/name') as $name) {
// comparing names, case insensitiveif (!strcasecmp($aName, $name)) { return 1; }
}return 0;
}?><response>
<result><?php echo checkIfNameExists ($_REQUEST['name']); ?></result></response>
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
<!-- a Web form getting data from user --><form action="add.php" method="post">
<div><label for="name">Account name:</label><input type="text" name="name" id="name"
onblur="javascript:signalNameExists (this.value, '')" /><!-- a message, initially hidden --><span class="hidden" id="errName">
Name already exists, choose another one...</span>
</div>
<div><label for="adr">Address:</label><input type="text" name="adr" id="adr" />
</div>
<input type="submit" value="Apply" /></form>
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
// a JS program executed by browservar request; // encapsulates the HTTP request to Web server
function loadXML (url) { // loads an XML document denoted by 'url'// checking the availability of XMLHttpRequest object if (window.XMLHttpRequest) {
request = new XMLHttpRequest (); // there is native support} else
if (window.ActiveXObject) { // we can use ActiveX object from MSIErequest = new ActiveXObject ("Microsoft.XMLHTTP");
}if (request) { // Ajax is supported
// setting the function that handles data transfer staterequest.onreadystatechange = handleResponse; // retrieving the document by using GET method request.open ("GET", url, true); request.send (null); // not sending anything to the Web service
}}
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
// handles the change of transfer statefunction handleResponse () {
// verifying if the transfer is successfulif (request.readyState == 4) {
// we got '200 Ok' status code?if (request.status == 200) {
// processing received data with DOM// (getting the root element of the XML document)var response = request.responseXML.documentElement; var res = response.getElementsByTagName('result')[0].firstChild.data;
// calling a function that will modify the DOM tree of the Web page// according to the response transmitted by the invoked service…
}// possibly, other HTTP status codes (404, 500, etc.) could be checked
else { alert ("A problem occurred:\n" + request.statusText);
}}
see the code from
archive
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
the user provides an account name; via Ajax, (s)he will be notified if this name already exists, according to the XML response
sent by the Web serviceHTTP request using the URL: http://undeva.info/verify.php?name=tux
XML response: <response><result>1</result></response>
0 = not exists
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
case study: RandomAjax
gets asynchronously a sequence of random numbers generated by
random.org – sent as plain text
jsfiddle.net/busaco/2254kdqn/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
const URL = 'https://www.random.org/sequences/?min=1&max=33&col=1&format=plain';const TIME = 2000;
var xhr = new XMLHttpRequest();var numbers = document.getElementById('numbers');// handling the time-out eventxhr.ontimeout = function () { numbers.textContent = 'Time-out... :('; };// handling the data retrieval eventxhr.onload = function () {
if (xhr.readyState === 4) { // data arrivedif (xhr.status === 200) { // response Ok from Web service
// substituting white spaces with comma and // putting the content into the HTML element identified by 'numbers'numbers.textContent = xhr.responseText.trim().replace(/\W+/g, ', ');
} else {numbers.textContent = 'An error occurred: ' + xhr.statusText;
}}
};
xhr.open("GET", URL, true); // opening connectionxhr.timeout = TIME; // setting the response timexhr.send(null); // no data sent
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
studiu de caz: RandomAjax (Fetch)
a solution using Fetch API
for the same problemjsfiddle.net/busaco/a2q9regd/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
function status(response) { // using promises – github.com/wbinnssmith/awesome-promises –// to perform the desired processing depending on the returned HTTP status codeif (response.status >= 200 && response.status < 300) {return Promise.resolve(response) // request can be fulfilled
} else {return Promise.reject(new Error(response.statusText)) // request is rejected
}}
fetch(URL).then(status) // checking if data was successfully received.then((response) => response.text()) // transforming received data into a string.then(function(response) { // processing the number sequence
// substituting white spaces with comma and // putting the content into the HTML element identified by 'numbers' var numbers = document.getElementById('numbers');numbers.textContent = response.trim().replace(/\W+/g, ', ');
}).catch(function(error) { // an error occurred :(
numbers.textContent = 'An error occurred: ' + error;});
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Obtaining public photos stored by Flickr by using the provided Web service
the source-code uses jQuery library and is available athttp://jsfiddle.net/busaco/4d2tmc6b/
case study: FlickrPics
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Obtaining public photos stored by Flickr by using the provided Web service
we use the following URL http://api.flickr.com/services/feeds/photos_public.gne
to obtain information about pictures(available formats: Atom, CSV, JSON, XML,…)
see http://www.flickr.com/services/feeds/docs/photos_public/
case study: FlickrPics
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interactiune web: ajax – studiu de caz
General form of the JSON response transmitted by Flickr:{
"title" : "Recent Uploads", "link" : "http://www.flickr.com/photos/", "modified" : "2017-05-23T13:03:07Z", "generator" : "http://www.flickr.com/", "items" : [ {
"title" : "...","link" : "http://www.flickr.com/photos/.../4204222/","media" : { "m": "https://farm.staticflickr.com/...jpg" },"date_taken": "2012-05-20T17:23:43-08:00","description": "...","published" : "2012-05-26T13:49:08Z","author" : "...","author_id" : "...","tags" : "iasi romania informatica FII ..."
} ]}
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/// asynchronously getting the available pics
jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { // input data transmitted to the Web servicetags: "Iasi, informatica", tagmode: "all", format: "json"
}, // an anonymous function to process the data from Flickr function (data) { // iterating each data provided by the Web service $.each (data.items, function (number, photo) {
// creating an <img> element having as value of "src" attribute // the URL included in obtained JSON data; // this <img> will be appended to the element with id="pics" $ ("<img/>").attr ("src", photo.media.m).attr ("title", photo.title)
.appendTo ("#pics"); });
});
case study: FlickrPics
JSONP
JSONP (JSON with Padding) – tinyurl.com/n733jtb
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: ajax – case study
For generic cases, the ajax () method could be used:
jQuery.ajax ({ // executes a POST request to invoke a Web service
type: "POST",
contentType: "application/json; charset=utf-8",
url: "http://undeva.info/ServiciuWeb/Resursa",
data: "{…}", // data sent to the service
dataType: "json", // excepting the result in JSON format
success: function (data) { // function called if transfer is successful
$('.result').html (data); // getting data, converting it to HTML
}
});
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: comet
Comet
term introduced by Alex Russel
permits the data to be pushed by the server to the client application, by using persistent (long-lived)
HTTP connections in order to reduce latency
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: comet
A Web application design pattern which requires persistent peer-to-peer connections
used by intensive interactive (collaborative)Web applications – e.g., Mibbit
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: comet
A complementary approach to Ajax
long pollingHTTP server push
Reverse Ajax
study M. Carbou, “Reverse Ajax, Part 1.Introduction to Comet”, IBM developerWorks, 2011
www.ibm.com/developerworks/web/library/wa-reverseajax1/
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
web interaction: comet
Modern, alternative solutions: adopting various HTML5 technologies
server-sent eventsWebSocket
details at “Client-Side Web Application Development”https://profs.info.uaic.ro/~busaco/teach/courses/cliw/
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Ajax/Comet offers support for mash-up– hybrid Web application – development
combining – on client- and/or server-side –the content that comes from multiple sources (sites),
providing a new functionality/experience
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Example:
developing an application that provides music information based on the physical activities
of the user by using public Web services
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
http://www.last.fm/api/rest
https://wiki.fitbit.com/display/API/Fitbit+API
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
access to REST services about bands + albums
via an authentication key
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
FitBit REST API provides dataavailable as JSON and XML
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
+ FiLaa Web mash-up
http://www.last.fm/api/rest
https://dev.fitbit.com/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Based on RSS/Atom news feeds, Web services, public APIs, …
SaaS (Software As A Service)
implemented on: client (Web browser) Web and/or Web server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Characteristics:combinationvisualizationaggregation
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Combination
using multiple data sources that can have multidimensional characteristics
for example, topic of interest + geo-location + moment of time
Yahoo! Music Search + Google Maps + Eventful
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
a Web mash-up for studying the effects of nuclear bomb detonation – nuclearsecrecy.com/nukemap/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Visualization
adopting various techniques of data visualization (presentation): charts, maps, tag clouds, 3D,…
details provided by“Client-Side Web Application Development” (3rd year, 1st semester)
https://profs.info.uaic.ro/~busaco/teach/courses/cliw/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
various methods for real-time visualization of the virtual currency evolution – Coinorama
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Aggregation
grouping and analyzing data from multiple sources: statistics, classifications, predictions,…
e.g., using data mining, “hidden” aspects of processed data may be revealed
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Data Sources(Data Feeds)
Atom, RSS, geoRSS, micro-date HTML5, RDFa,…
Application Programming Interfaces
specific to public services and for JSON/XML/RDF processing
Libraries/Frameworks generic or organization-specific Web frameworks
Interactive Web Tools available in the “cloud”, possibly
Platforms(Platform As A Service)
Heroku, Google Cloud Platform, Nodejitsu, Windows Azure,…
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Your Life on Earth (BBC)www.bbc.com/earth/story/20141016-your-life-on-earth
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
a list of mash-ups: www.programmableweb.com/mashups/directory
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Is there a security issue regarding the access to resources via JavaScript?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Same-Origin Policy
“restricts how a document or script loaded from one origin can interact with a resource from another origin”
so, a JavaScript program must only access the data of the same origin (from the same Internet domain)
mash-ups: security
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
allowing only transfers for resource representations regarding images, CSS files, and other JavaScript programs
belonging to the same origin
advanced
clientWeb
serverHTTP
JSON, XML,…
publicAPI
publicAPI
HTTPJPG
HTTPJPG Same-Origin
Policy
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Same-Origin Policy
prevents the cases when a document/program loaded from an origin can access/modify properties
of a document belonging to another origin
for details, consulthttps://developer.mozilla.org/Web/Security/Same-origin_policy
advanced
mash-ups: security
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interactiune web: ajax – studiu de cazvar url = "http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film";
// performing a HEAD request to obtain meta-data about a resourcevar client = new XMLHttpRequest ();client.open ("HEAD", url, true);client.send ();client.onreadystatechange = function () {
// we got HTTP headers?if (client.readyState == 2) {// providing the MIME type and last updatealert ("Resource of type '" +
client.getResponseHeader ("Content-Type") + "' was updated at " + client.getResponseHeader ("Last-Modified"));
}}
gets – asynchronously –various meta-data via HEAD
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
an URL of other domainviolating the Same Origin Policy
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
CORS (Cross-Origin Resource Sharing)
W3C Recommendation (2014)www.w3.org/TR/cors/
allows client-side sharing of resources from different Internet domains
thus, cross-origin requests could be made
advanced
mash-ups: security
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
How about the abstract access to data sources available on the Web?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
data access model: yql
Yahoo! Query Language
abstract access to heterogeneous data sources that can be obtained through Web services
https://developer.yahoo.com/yql/
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
data access model: yql
Allows – based on a similar SQL language –querying, filtering, combining data on the Web
(support for mash-up development)
facilitates the access to data sources of interest – e.g., news feeds, cartographic info,
multimedia resources, etc. – from a Web application
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
data access model: yql
Adopts the SQL syntax:show, desc, select, use, insert, update, delete
public data sources offered by Yahoo! (built-in tables) or provided by others (community tables) – e.g., Amazon,
Apple, arXiv, Deviant Art, Europarliament, GitHub, Last.fm, PayPal, Spotify, Steam, Tumblr, Yelp,…
response to a query ≡ data rows
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
advanced
musical artefacts provided by iTunesselect * from apple.itunes
where term='Eclipse' and
media='music';
the query URL
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
data access model: graphql
Graph Query Language
“a query language for APIs and a runtime for fulfilling those queries with your existing data”
declarative, inspired by JSON, strict (strong-typed)considered as an alternative to the REST paradigm
http://graphql.org/
https://learngraphql.com/
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
data access model: graphql
Graph Query Language
reference JavaScript implementation: GraphQL.js
libraries available for C, Go, Java, .NET, PHP, Python, Scala, Typescript,…
also, experiment Apollo – www.apollodata.com
details in Vince Ling, State of GraphQL 2016https://scaphold.io/blog/2016/10/31/state-of-graphql.html
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
interactive GraphQL queries regarding the Star Wars API
graphql.org/swapi-graphql/
GraphQL examples for several public APIs(e.g., Hacker News, Reddit, Twitter): www.graphqlhub.com
schemaresultsquery
advanced
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
adapted from Tom Croucher
data access modelWeb services
computing model
mobile service provider
mash-ups on mobile devices
implementation modelinteraction model
communication model
data flow model
⚙⚙
⚙⚙
GraphQLYQL
advanced
case study
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/“conclusion”
microservices & Web interaction
↹microservices Ajax
Web mash-ups data access models