Web Technologies. microservices & Web interaction. Ajax a suite of technologies Web mash-ups. Dr. Sabin Buraga profs.info.uaic.

Transcription

1 Web Technologies microservices & Web interaction Ajax a suite of technologies Web mash-ups

2 The manner of giving is worth more than the gift. Pierre Corneille

3 Alternatives to Web services?

4 advanced microservice Implements a specific functionality, available as a single process self-contained system backend component developed to be replaced, not reused

5 advanced small each running in its own process lightweight communication mechanisms (usual, HTTP) built around business capabilities independently deployable minimum of centralized management may be written in different programming languages may use different data storage mechanisms microservice characteristics according to James Lewis & Martin Fowler, Microservices (2014)

6 advanced small each running in its own process lightweight communication mechanisms (usual, HTTP) built around business capabilities independently deployable minimum of centralized management may be written in different programming languages may use different data storage mechanisms microservice characteristics according to James Lewis & Martin Fowler, Microservices (2014)

7 advanced small each running in its own process lightweight communication mechanisms (usual, HTTP) built around business capabilities independently deployable minimum of centralized management may be written in different programming languages may use different data storage mechanisms microservice characteristics according to James Lewis & Martin Fowler, Microservices (2014)

8 advanced small each running in its own process lightweight communication mechanisms (usual, HTTP) built around business capabilities independently deployable minimum of centralized management may be written in different programming languages may use different data storage mechanisms microservice characteristics according to James Lewis & Martin Fowler, Microservices (2014)

9 advanced small each running in its own process lightweight communication mechanisms (usual, HTTP) built around business capabilities independently deployable minimum of centralized management may be written in different programming languages may use different data storage mechanisms microservice characteristics according to James Lewis & Martin Fowler, Microservices (2014)

10 advanced small each running in its own process lightweight communication mechanisms (usual, HTTP) built around business capabilities independently deployable minimum of centralized management may be written in different programming languages may use different data storage mechanisms microservice characteristics according to James Lewis & Martin Fowler, Microservices (2014)

11 advanced small each running in its own process lightweight communication mechanisms (usual, HTTP) built around business capabilities independently deployable minimum of centralized management may be written in different programming languages may use different data storage mechanisms microservice characteristics according to James Lewis & Martin Fowler, Microservices (2014)

12 advanced small each running in its own process lightweight communication mechanisms (usual, HTTP) built around business capabilities independently deployable minimum of centralized management may be written in different programming languages may use different data storage mechanisms microservice characteristics according to James Lewis & Martin Fowler, Microservices (2014)

13 advanced examples of good practice: modularity, decentralization, and continuous evolution

14 advanced microservice Functional implements specific functionalities (business operations)

15 advanced microservice Functional implements specific functionalities (business operations) exposed to service consumer independent (no side effects) typically, not sharable

16 advanced microservice Control Infrastructure implements non-functional tasks: authentication, authorization, logging, monitoring,

17 advanced microservice Control Infrastructure implements non-functional tasks: authentication, authorization, logging, monitoring, not exposed private could be shared at the application or internal services level

18 microservices in serverless context application depends on external components, available in the clouds powerful and/or smart client BaaS authentication products BaaS app logic API access advanced FaaS browser functionality 1 order processing functionality 2 search orders BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service Mike Roberts (2016)

19 advanced microservice Aspect of interest: sharing functionalities share-as-much-as possible (classical SOA) versus share-as-little-as possible (microservices)

20 advanced microservice Aspect of interest: (micro-)services communication usually, asynchronous approaches: point-to-point or publish-subscribe

21 client has simplified access via API implementare advanced Jonas Bonér (2016) internally, (micro-)services could communicate by using the publish-subscribe model

22 advanced microservice Commonly, microservice architectures do not include middleware components and do not support abstract interactions between service providers and consumers (contract decoupling)

23 advanced Web service-based architecture microservice architecture real use-cases: Amazon, Groupon, Netflix, also, study Stefan Tilkov s presentations:

24 How can be performed the asynchronous data transfer between Web client(s) and server(s)?

25 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

26 web interaction: ajax A suite of open technologies: standard languages for data structuring e.g., HTML and presentation: CSS

27 web interaction: ajax A suite of open technologies: view + interaction on the Web client (browser) via DOM standard

28 web interaction: ajax A suite of open technologies: exchange and manipulation of data represented by: various XML dialects, JSON, HTML, other formats

29 web interaction: ajax A suite of open technologies: (a)synchronous data transfer via HTTP facilitated by the XMLHttpRequest object

30 web interaction: ajax A suite of open technologies: processing with ECMAScript (JavaScript) language

31 web interaction: ajax Basic component: XMLHttpRequest object available in the Web browser via JavaScript

32 web interaction: ajax Basic component: XMLHttpRequest object initial specification based on MSIE implementation in the present, provided by (almost) any browser

33 web interaction: ajax Basic component: XMLHttpRequest object current specification (HTML5 Living Standard, 9 May 2017) implemented by latest Web browsers

34 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

35 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

36 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

37 web interaction: ajax XMLHttpRequest important methods open ( ) initiates opens an HTTP connection to a server, issuing a request: GET, POST,

38 web interaction: ajax XMLHttpRequest important methods send ( ) transmits (asynchronously) data e.g., XML, JSON, etc., to the application/service running on server

39 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

40 web interaction: ajax XMLHttpRequest important methods abort ( ) cancels the current data transfer

41 web interaction: ajax XMLHttpRequest important methods setrequestheader ( ) specifies various HTTP header fields examples: Cookie, Keep-Alive, User-Agent,

42 web interaction: ajax XMLHttpRequest important methods getresponseheader ( ) offers the value of certain field from the header of HTTP response message sent by server

43 web interaction: ajax XMLHttpRequest important methods getallresponseheaders ( ) provides all HTTP fields sent by server, except Set-Cookie

44 web interaction: ajax XMLHttpRequest basic properties readystate provides the code of transfer state: 0 UNSENT 1 OPENED 2 HEADERS_RECEIVED 3 LOADING 4 DONE

45 web interaction: ajax XMLHttpRequest basic properties status gets HTTP status code returned by Web server: 200 (Ok) 404 (Not Found) 500 (Internal Server Error)

46 web interaction: ajax XMLHttpRequest basic properties statustext contains the message corresponding to HTTP status code

47 web interaction: ajax XMLHttpRequest basic properties responsetext responsexml stores the response (data) obtained from server

48 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

49 web interaction: ajax Exceptions that could be emitted AbortError InvalidAccessError InvalidStateError NetworkError SecurityError TimeoutError according to DOM 4 Core

50 advanced 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) developers.google.com/web/updates/2015/03/introduction-to-fetch

51 advanced New features: transferred data could have various types (ArrayBuffer, Blob, Document, DOMString, FormData) details at

52 advanced New features: the upload process could have attached a specific handler by using the upload property

53 advanced New features: data loading progress could be monitored by using the ProgressEvent interface

54 Other aspects regarding Ajax?

55 web interaction: ajax usage Periodic refresh of the content e.g., news received in formats like Atom or RSS, messages from social applications, notifications,

56 web interaction: ajax usage Anticipating downloads pre-loading data (e.g., images) that will be required

57 web interaction: ajax usage Data auto-completion search suggestions example: Google Suggest

58 web interaction: ajax usage Real-time validation of input data from forms example: checking the existence of a user account or a place

59 web interaction: ajax usage Creating Web interface components (widgets) or Web applications running on mobile platforms interacting to the user based on occurred events

60 advanced 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)

61 advanced web interaction: ajax aspects Providing alternatives to Ajax, when the support for it is not implemented/enabled graceful degradation progressive enhancement

62 advanced web interaction: ajax aspects Minimizing traffic between browser and server

63 advanced 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

64 advanced 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)

65 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

66 How about the implementation support?

67 microlibraries: web interaction: ajax programming Client-side traditional 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

68 web interaction: ajax programming Server-side libraries, 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

69 advanced web interaction: ajax programming Specialized APIs examples: Bing Maps V8 Web Control HERE JavaScript APIs Ajax in the context of WordPress extensions

70 web interaction: ajax case study Checking the existence of a user name in order to create an account providing access to a Web application

71 DOM Client XMLHttpRequest open ("GET") open ("POST") send (...) Web server Web app. server browser s window XML data (on server) checking asynchronously if an account exists on server

72 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

73 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?

74 <?php // a PHP program, as a Web service, running on server define ('DOCXML', './particip.xml'); // location of the XML document // sending content type; here, XML header ('Content-type: text/xml'); // function that verifies if a participant name already exists // returns 1 if name exists, 0 otherwise function checkifnameexists ($aname) { // loading data about participants by using SimpleXML if (!($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 insensitive if (!strcasecmp($aname, $name)) { return 1; } } return 0; }?> <response> <result><?php echo checkifnameexists ($_REQUEST['name']);?></result> </response>

75 <!-- 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>

76 // a JS program executed by browser var 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 MSIE request = new ActiveXObject ("Microsoft.XMLHTTP"); } if (request) { // Ajax is supported // setting the function that handles data transfer state request.onreadystatechange = handleresponse; // retrieving the document by using GET method request.open ("GET", url, true); request.send (null); // not sending anything to the Web service } }

77 // handles the change of transfer state see the code function handleresponse () { from // verifying if the transfer is successful if (request.readystate == 4) { archive // 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); }

78 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 service HTTP request using the URL: XML response: <response><result>1</result></response> 0 = not exists

79 case study: RandomAjax gets asynchronously a sequence of random numbers generated by random.org sent as plain text jsfiddle.net/busaco/2254kdqn/

80 const URL = ' const TIME = 2000; var xhr = new XMLHttpRequest(); var numbers = document.getelementbyid('numbers'); // handling the time-out event xhr.ontimeout = function () { numbers.textcontent = 'Time-out... :('; }; // handling the data retrieval event xhr.onload = function () { if (xhr.readystate === 4) { // data arrived if (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 connection xhr.timeout = TIME; // setting the response time xhr.send(null); // no data sent

81 studiu de caz: RandomAjax (Fetch) a solution using Fetch API for the same problem jsfiddle.net/busaco/a2q9regd/

82 advanced function status(response) { // using promises github.com/wbinnssmith/awesome-promises // to perform the desired processing depending on the returned HTTP status code if (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; });

83 case study: FlickrPics Obtaining public photos stored by Flickr by using the provided Web service the source-code uses jquery library and is available at

84 case study: FlickrPics Obtaining public photos stored by Flickr by using the provided Web service we use the following URL to obtain information about pictures (available formats: Atom, CSV, JSON, XML, ) see

85 { } General form of the JSON response transmitted by Flickr: interactiune web: ajax studiu de caz "title" : "Recent Uploads", "link" : " "modified" : " T13:03:07Z", "generator" : " "items" : [ { "title" : "...", "link" : " "media" : { "m": " }, "date_taken": " T17:23:43-08:00", "description": "...", "published" : " T13:49:08Z", "author" : "...", "author_id" : "...", "tags" : "iasi romania informatica FII..." } ]

86 case study: FlickrPics // asynchronously getting the available pics JSONP jquery.getjson (" { // input data transmitted to the Web service tags: "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 (JSON with Padding) tinyurl.com/n733jtb

87 case study: FlickrPics

88 advanced 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: " 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

89 advanced 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

90 advanced 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

91 advanced web interaction: comet A complementary approach to Ajax long polling HTTP server push Reverse Ajax study M. Carbou, Reverse Ajax, Part 1. Introduction to Comet, IBM developerworks,

92 advanced web interaction: comet Modern, alternative solutions: adopting various HTML5 technologies server-sent events WebSocket details at Client-Side Web Application Development

93 (instead of) break

94 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

95 mash-ups Example: developing an application that provides music information based on the physical activities of the user by using public Web services

96 mash-ups

97 mash-ups access to REST services about bands + albums via an authentication key

98 mash-ups FitBit REST API provides data available as JSON and XML

99 mash-ups + FiLa a Web mash-up

100 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

101 mash-ups Characteristics: combination visualization aggregation

102 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

103 mash-ups a Web mash-up for studying the effects of nuclear bomb detonation nuclearsecrecy.com/nukemap/

104 mash-ups Visualization adopting various techniques of data visualization (presentation): charts, maps, tag clouds, 3D, details provided by Client-Side Web Application Development (3 rd year, 1 st semester)

105 various methods for real-time visualization of the virtual currency evolution Coinorama

106 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

107 fragrance recommendations ScentSee

108 advanced mash-ups Data Sources (Data Feeds) Application Programming Interfaces Libraries/Frameworks Interactive Web Tools Platforms (Platform As A Service) Atom, RSS, georss, micro-date HTML5, RDFa, specific to public services and for JSON/XML/RDF processing generic or organization-specific Web frameworks available in the cloud, possibly Heroku, Google Cloud Platform, Nodejitsu, Windows Azure,

109 mash-ups Your Life on Earth (BBC)

110 advanced mash-ups a list of mash-ups:

111 Is there a security issue regarding the access to resources via JavaScript?

112 advanced mash-ups: security 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)

113 advanced client HTTP JSON, XML, Web server HTTP JPG public API HTTP JPG public API Same-Origin Policy allowing only transfers for resource representations regarding images, CSS files, and other JavaScript programs belonging to the same origin

114 advanced mash-ups: security 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, consult

115 advanced varinteractiune url = " web: ajax studiu de caz // performing a HEAD request to obtain meta-data about a resource var 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 update alert ("Resource of type '" + client.getresponseheader ("Content-Type") + "' was updated at " + client.getresponseheader ("Last-Modified")); } } gets asynchronously various meta-data via HEAD

116 advanced an URL of other domain violating the Same Origin Policy

117 advanced mash-ups: security CORS (Cross-Origin Resource Sharing) W3C Recommendation (2014) allows client-side sharing of resources from different Internet domains thus, cross-origin requests could be made

118 How about the abstract access to data sources available on the Web?

119 advanced data access model: yql Yahoo! Query Language abstract access to heterogeneous data sources that can be obtained through Web services

120 advanced 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

121 advanced 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

122 advanced musical artefacts provided by itunes select * from apple.itunes where term='eclipse' and media='music'; the query URL

123 advanced 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

124 advanced 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 details in Vince Ling, State of GraphQL

125 advanced model de acces la date: graphql query results schema interactive GraphQL queries regarding the Star Wars API graphql.org/swapi-graphql/ GraphQL examples for several public APIs (e.g., Hacker News, Reddit, Twitter):

126 advanced Web services computing model case study data flow model data access model GraphQL YQL mobile service provider mash-ups on mobile devices implementation model interaction model communication model adapted from Tom Croucher

127 conclusion microservices & Web interaction microservices Ajax Web mash-ups data access models

128 last episode: Web application security