Web Technologies - Alexandru Ioan Cuza Universitybusaco/teach/courses/web/presentations/... · Web...

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/

Alternatives to Web services?

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/

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/


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/



view + interaction on the Web client (browser) via DOM standard

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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/



(a)synchronous data transfer via HTTPfacilitated by the XMLHttpRequest object

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



processing with ECMAScript (JavaScript) language

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Basic component: XMLHttpRequest object

available in the Web browser via JavaScript

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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/



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/



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/



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 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/


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/



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/



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/



abort ( )

cancels the current data transfer

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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/



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/



getAllResponseHeaders ( )

provides all HTTP fields sent by server, except Set-Cookie

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


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/



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/



statusText

contains the message corresponding to HTTP status code

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



responseText

responseXML

stores the response (data) obtained from server

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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/


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/

Other aspects regarding Ajax?

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/


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/


Data auto-completion

search suggestions – example: Google Suggest

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


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/


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/


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/


Minimizing traffic between browser and server

advanced

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


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/


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/


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/

How about the implementation support?

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/


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/


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/




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/




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/

<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, '')" /><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/


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"); });

});


JSONP

JSONP (JSON with Padding) – tinyurl.com/n733jtb

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


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/


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/


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/


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/

(instead of) break

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/

fragrance recommendations – ScentSee

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/


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/


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

“last” episode: Web application security

Web Technologies - Alexandru Ioan Cuza Universitybusaco/teach/courses/web/presentations/... · Web...

Documents

Transcript of Web Technologies - Alexandru Ioan Cuza Universitybusaco/teach/courses/web/presentations/... · Web...