Web 2.0 Patterns and Technologies - Lecture 07 - Web Information Systems (4011474FNR)

3,165 views

Published on

This lecture is part of a Web Information Systems course given at the Vrije Universiteit Brussel.

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,165
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
251
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web 2.0 Patterns and Technologies - Lecture 07 - Web Information Systems (4011474FNR)

  1. 1. 2 December 2005 Web Information Systems Web 2.0 Patterns and Technologies Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://www.beatsigner.com
  2. 2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2November 14, 2014 The Programmable Web  Based on HTTP  Data often encoded in XML  Potential alternative data formats  HTML  plain text  JavaScript Object Notation (JSON)  binary formats
  3. 3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3November 14, 2014 Rich Internet Applications (RIAs)  Bring the desktop to the browser  Highly responsive (good performance)  asynchronous and partial content updates  Rich Graphical User Interface (GUI)  various RIA toolkits and environments introduced earlier - Adobe Flash, Apache Flex and AIR - Microsoft Silverlight - Sun JavaFX - JavaServer Faces (JSF) - Mozilla XUL (XML User Interface Language) - OpenLaszlo - ...
  4. 4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4November 14, 2014 Asynchronous Partial Updates Client Server  Rather than updating an entire resource (e.g. webpage), we can asynchronously update parts of a resource  Updates initiated by the client (or the server) based on user interaction, state change, timeout, … Service Service
  5. 5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5November 14, 2014 Asynchronous Partial Updates …  Updates cannot be initiated by the server if HTTP is used!  have to use polling or long polling (e.g. Comet model)  There are different possibilities how the partial update of resources can be realised over the Web  AJAX  Action Message Format (AMF) - used by Apache Flex  REST-based implementations  …
  6. 6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6November 14, 2014 AJAX  Asynchronous JavaScript and XML  AJAX is not a technology by itself but a group of existing technologies (term coined in 2005)  HTML and CSS for the visualisation  JavaScript in combination with DOM to dynamically change the presented information and process messages on the client side  method to asynchronously exchange data between the client (browser) and the server - often via the XMLHttpRequest (XHR) JavaScript object - data can be in different formats including XML, plain text, JavaScript Object Notation (JSON), ...  client-side AJAX engine deals with asynchronous message handling
  7. 7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7November 14, 2014 XMLHttpRequest Object  The XMLHttpRequest (XHR) object has several important properties  onreadystatechange - registers a JavaScript function that will handle the response from the server  readyState - represents a response status from the server • 0 (unititialised): object has been created but is uninitialised • 1 (open): object has been created but send method not yet called • 2 (sent): send method has been called and the HTTP response headers have been received • 3 (receiving): some data (body) has been received but response not yet available • 4 (loaded): all data has been received and the response is available - a function registered via onreadystatechage is executed each time readyState changes  responseText, responseBody and responseXML - contains the server's response in different formats
  8. 8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8November 14, 2014 AJAX Example <html> <body> <script type="text/javascript"> function createXMLHttpRequest() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { // code for IE5 and IE6 return new ActiveXObject("Microsoft.XMLHTTP"); } else { throw new Error("XMLHttpRequest object not supported!") } } function getTime() { xhr = createXMLHttpRequest(); xhr.onreadystatechange=function() { if (xhr.readyState == 4 && xhr.status == 200) { document.testForm.time.value=xhr.responseText; } } xhr.open("GET","time.php",true); xhr.send(null); } </script>
  9. 9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9November 14, 2014 AJAX Example ...  createXMLHttpRequest() deals with different browser versions  For more advanced AJAX examples see  http://www.w3schools.com/Ajax/  Getting Started with Ajax  http://refcardz.dzone.com/refcardz/ getting-started-ajax <form name="testForm"> Input: <input type="text" name="input" onkeyup="getTime();" /> Time: <input type="text" name="time" /> </form> </body> </html>
  10. 10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10November 14, 2014 Google Search (Suggest) AJAX Example
  11. 11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11November 14, 2014 AJAX  Advantages  reduced load time and higher responsiveness  application state can be maintained across multiple pages since the main container page is not reloaded  Disadvantages  not possible to bookmark any particular state of an application  content may not be crawled by certain search engines since they do not execute JavaScript code  cannot be used in browsers with disabled JavaScript functionality  page updates are not automatically registered in the browser's history engine  Various libraries simplify the AJAX development  e.g. the jQuery JavaScript library
  12. 12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12November 14, 2014 Web Socket API  Bidirectional, full-duplex socket connection between the server and browser for real-time web applications (low latency) with asynchronous partial updates  server-initiated updates become possible!  client and server upgrade from the HTTP protocol to the WebSocket protocol (initial HTTP handshake) - via Upgrade: websocket HTTP header field - browser as well as server have to support the Web Socket protocol  reduced "overhead" since no HTTP headers  no longer necessary to do any polling or long polling - faster since in the polling approach the server can send nothing while a client request is transmitted  similarly an EventSource object can be used if only the server has to push information (server-sent events) W3CCandidateRecommendation
  13. 13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13November 14, 2014 Web Socket API ... <script type="text/javascript"> var socket = new WebSocket("ws://chat-server.com"); socket.onopen = function(e) { alert("Opened connection ..."); }; socket.onmessage = function(e) { var message = JSON.parse(e.data)); alert("Message received."); ... }; socket.onclose = function(e) { alert("Closed connection."); }; socket.onerror = function(e) { alert("WebSocket Error" + e); }; socket.send("Hellow World"); ... socket.close(); </script> W3CCandidateRecommendation
  14. 14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14November 14, 2014 Web Sockets Support When can I use..., http://caniuse.com/#search=socket
  15. 15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15November 14, 2014 Example: Multiplayer Port of Quake II  Google's browser port of Quake II uses  canvas and WebGL  <audio> for sound  <video> for in-game videos  Web Sockets for communication with the server (other players)  Local Storage for managing preferences and saved games
  16. 16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16November 14, 2014 JavaScript Object Notation (JSON)  Developed as an XML alternative to represent JavaScript objects as strings (language independent)  Easy to produce and faster to parse than XML  supports different data types  JSON is based on a subset of JavaScript  JSON document can be read via the JavaScript eval() function - security issues: note that this approach can be dangerous if the source is not trusted since any JavaScript code might be executed  most recent browsers offer a JSON parser - recognises only JSON data types and rejects any scripts  Many Web 2.0 Applications offer a JSON interface  Flickr, YouTube, Delicious, ...
  17. 17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17November 14, 2014 JSON Data Types  The values themselves can be simple values (number, boolean or string), arrays or objects  nesting is supported Type Description Number integer, real or float Boolean true or false String double-quoted Unicode (use backslash for escaping) Array comma-separated ordered sequence of values enclosed in square brackets Object comma-separated collection of key:value pairs enclosed in curly brackets null null value
  18. 18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18November 14, 2014 JSON Syntax Diagrams http://www.json.org
  19. 19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19November 14, 2014 JSON Example { "surname": "Signer", "forename": "Beat", "address": { "street": "Pleinlaan 2", "city": "Brussels", "postalCode": 1050, "country": "Belgium" }, "phoneNumbers": [ { "type": "office", "number": "123 456 789" }, { "type": "fax", "number": "987 654 321" } ] }
  20. 20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20November 14, 2014 JSON-RPC  Simple JSON-encoded remote procedure call protocol that is very similar to XML-RPC (discussed earlier)  multiple requests might be sent to a peer and answered out of order (use id to match a request with its response) { "version": "1.1", "method": "Math.multiply", "id": "24034824", "params": [128.0, 256.0] } JSON-RPC Request { "version": "1.1", "result": 32768.0, "error": null, "id": "24034824" } JSON-RPC Response
  21. 21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21November 14, 2014 Service-Oriented Architecture (SOA)  Architecture that modularises functionality as interoperable services  loose coupling of services  service encapsulation  interoperability between different operating systems and programming languages  mashup of services  ...  Software as a service (SaaS)  software is offered as a service and may itself be a composition of third-party services
  22. 22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22November 14, 2014 Representational State Transfer (REST)  REST is an architectural style for distributed hypermedia systems requirering the following constraints (1) separation of concerns between client and server  client and server can be developed and replaced independently (2) uniform interface  identification of resources (e.g. URIs on the Web)  manipulation of resources on the server via representation on the client side  self-describing messages (e.g. MIME type on the Web)  hypermedia for application state change (e.g. hypertext links to related resources) (3) stateless  no client state is stored on the server side (4) cacheability  responses must explicitly or implicitly define whether they are cacheable
  23. 23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23November 14, 2014 Representational State Transfer (REST) ... (5) layering  intermediary servers (proxies) can be transparently added between the client and the server (6) code on demand (optional)  the server can send application logic (code) to the client (e.g. Java Applets)  A service that conforms at least to the first five constraints is called a RESTful service  The Web is an implementation of a system conforming to the REST architectural style  however, RESTful services can also be implemented over protocols other than HTTP
  24. 24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24November 14, 2014 Web Services  Web-based client-server communication over HTTP  Two main types of Web Services  Big Web Services - Universal Description, Discovery and Integration (UDDI) - Web Services Description Language (WSDL) - Simple Object Access Protocol (SOAP)  RESTful Web Services - better integrated with HTTP and web browsers - makes use of GET, POST, PUT and DELETE HTTP methods
  25. 25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25November 14, 2014 Big Web Services Service Provider Service Requester Service Broker UDDI WSDL SOAP SOAP WSDL
  26. 26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26November 14, 2014 Big Web Services ...  Universal Description, Discovery and Integration (UDDI)  yellow pages for WSDL  "global" registry describing available business services  very complex  Microsoft and IBM shut down their public UDDI registries in 2006  Web Service Description Language (WSDL)  XML application to describe a Web Service's functionality  complex  Simple Object Access Protocol (SOAP)  defines an envelope for transporting XML messages  The Web Service Stack contains many other protocols  BPEL, WS-Security, WS-Reliability, WS-Transaction, ...
  27. 27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27November 14, 2014 SOAP  Successor of XML-RPC (discussed earlier)  Introduced in 1998 as Simple Object Access Protocol  Dave Winer, Don Box, Bob Atkinson and Mohsen Al-Ghosein  since version 1.2 the name is no longer treated as an acronym  XML-based communication protocol  A SOAP message consists of an <Envelope> element which contains  an optional <Header> element  a <Body> element - remote procedure call or response information  SOAP requests are often sent via HTTP POST requests
  28. 28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28November 14, 2014 SOAP Request Message Example  predefined SOAP attributes - encodingStyle: defines the used data types - mustUnderstand: if set to 1 then the server has to understand the header - actor: can be used to delegate the header to an intermediary receiver (proxy) <?xml version="1.0"?> <soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> <soap:Header> <t:username xmlns:t="http://wise.vub.ac.be/transaction/" soap:mustUnderstand="1">pellens</t:username> </soap:Header> <soap:Body xmlns:c="http://wise.vub.ac.be/courses/"> <c:getCourseInfo> <c:courseID>4011474FNR</c:courseID> </c:getCourseInfo> </soap:Body> </soap:Envelope>
  29. 29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29November 14, 2014 SOAP Response Message Example  note that also a response message can have a <Header> element  the body contains a <Fault> element if something went wrong on the server side <?xml version="1.0"?> <soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> <soap:Body> <c:getCourseInfoResponse xmlns:c="http://wise.vub.ac.be/courses"> <c:title>Web Information Systems</c:title> <c:description>The goal of this course is to teach students the concepts and technologies for realising Web Information Systems (WIS). This ranges from basic network technologies and protocols to high level frameworks for the design and ... </c:description> </c:getCourseInfoResponse> </soap:Body> </soap:Envelope>
  30. 30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30November 14, 2014 SOAP ...  Advantages  platform and language independent  SOAP over HTTP results in less problems with proxies and firewalls than other remote procedure call solutions (e.g. CORBA)  there exist a lot of tools and language bindings that automatically create the required client and server-side functionality - e.g. Java API for XML Web Services (JAX-WS)  Disadvantages  slower than non-verbose protocols (e.g. CORBA)  Big Web Services are not simple  HTTP is reduced to a simple transport protocol for a large amount of XML metadata payload - does not make use of the rich functionality offered for HTTP envelopes  no mechanism for the caching of results
  31. 31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31November 14, 2014 RESTful Web Services  A RESTful web service (or RESTful Web API) is a simple web service implemented using HTTP  The definition of RESTful web service includes  the URI of the web service (e.g. http://wise.vub.be/course/) - different resources identified by unique URIs  the type (MIME) of data supported by the service - e.g. application/json, application/xml, ...  supported set of operations via HTTP methods - e.g. GET, POST, PUT, DELETE  One-to-one mapping between create, read, update, and delete (CRUD) operations and HTTP methods  POST (create), GET (read), PUT (update) and DELETE (delete)
  32. 32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32November 14, 2014 RESTful Web Service Example POST /users HTTP/1.1 Host: wise.vub.ac.be Content-Type: application/xml <?xml version="1.0"?> <user> <name>Roels</name> </user> create GET /users/Roels HTTP/1.1 Host: wise.vub.ac.be Accept: application/xml read PUT /users/Roels HTTP/1.1 Host: wise.vub.ac.be Content-Type: application/xml <?xml version="1.0"?> <user> <name>Signer</name> </user> update DELETE /users/Signer HTTP/1.1 Host: wise.vub.ac.be Accept: application/xml delete
  33. 33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33November 14, 2014 Apache CouchDB  Document-oriented database  provides a RESTful JSON API - manage the database by simply using POST, GET, PUT and DELETE HTTP requests with JSON payload  non-relational database - manages a collection of JSON documents  free and open source  Implemented in Erlang  functional programming language that is ideal for building concurrent distributed systems  leads to a flexible CouchDB design that is scalable and extensible  Nice example of a RESTful web service that can easily be accessed from various types of clients
  34. 34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34November 14, 2014 Really Simple Syndication (RSS)  Format that is used to read and write frequently updated information on the Web  e.g. blog entries  specific channels on news sites  ...  Special RSS readers or aggregators  Two main RSS variants  simple fork (Dave Winer) - RSS 0.92, RSS 0.93, RSS 0.94 and RSS 2.0  RDF fork - RSS 1.0  RSS feeds are represented as XML documents
  35. 35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35November 14, 2014 RSS Example  many other elements  <language>, <copyright>, <pubDate>, ... <?xml version="1.0" encoding="ISO-8859-1" ?> <rss version="2.0"> <channel> <title>W3Schools Home Page</title> <link>http://www.w3schools.com</link> <description>Free web building tutorials</description> <item> <title>RSS Tutorial</title> <link>http://www.w3schools.com/rss</link> <description>New RSS tutorial on W3Schools</description> </item> <item> <title>XML Tutorial</title> <link>http://www.w3schools.com/xml</link> <description>New XML tutorial on W3Schools</description> </item> ... </channel> ... </rss>
  36. 36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36November 14, 2014 Atom  Two related standards  Atom Syndication Format - similar to RSS - supports more content formats (e.g. videos) than RSS  Atom Publishing Protocol (APP) - HTTP-based approach for creating and editing Web resources - similar to the RESTful web service example shown earlier  Many web service interfaces are based on the Atom protocol  Microsoft Windows Live  OpenSocial  …
  37. 37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37November 14, 2014 Mashups  Combine content or functionality from existing websites, web services and RSS feeds  different mashup tools may address different types of users (e.g. developers vs. end users)  Various Mashup tools  Yahoo Pipes  IBM Mashup Center  ...
  38. 38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38November 14, 2014 Video: Yahoo Pipes Creating a basic pipe, http://blip.tv/file/get/Jc174-YahooPipesBasics201.wmv
  39. 39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39November 14, 2014 Video: Yahoo Pipes ... Sorting, filtering, and debugging, http://blip.tv/file/get/Jc174-YahooPipesSortingFilteringAndDebugging584.wmv
  40. 40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40November 14, 2014 Video: Yahoo Pipes ... Using other People’s Pipes, http://blip.tv/file/get/Jc174-YahooPipesTheYahooSearchModuleUnionModuleAndUsingOther879.wmv
  41. 41. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41November 14, 2014 Exercise 7  Mashup Tools
  42. 42. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42November 14, 2014 References  AJAX Tutorial  http://www.w3schools.com/Ajax/  Mike Amundsen, Building Hypermedia APIs with HTML5 & Node, O'Reilly Media, December 2011  Jim Webber, Savas Parastatidis and Ian Robinson, REST in Practice: Hypermedia and Systems Architecture, O'Reilly Media, September 2010  Dave Crane, Getting Started with Ajax  http://refcardz.dzone.com/refcardz/getting-started- ajax
  43. 43. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43November 14, 2014 References ...  jQuery Cross-Browser JavaScript library  http://jquery.com  JSON Syntax Diagrams  http://www.json.org  Brian Sletten, REST: Foundations of RESTful Architecture  http://refcardz.dzone.com/refcardz/rest-foundations- restful  W3C Web Services Activity  http://www.w3.org/2002/ws/  Apache CouchDB  http://couchdb.apache.org
  44. 44. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44November 14, 2014 References ...  Dave Johnson, RSS and Atom  http://refcardz.dzone.com/refcardz/rss-and-atom  Yahoo Pipes Tutorial  http://usefulvideo.blogspot.com/2007/02/yahoo-pipes- tutorials.html
  45. 45. 2 December 2005 Next Lecture Mobile Information Systems

×