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

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

http://www.beatsigner.com/

Beat Signer - Department of Computer Science - [email protected]

2 November 16, 2012

The Programmable Web

Based on HTTP

Data mostly encoded in XML

Potential alternative data formats HTML

plain text

JavaScript Object Notation (JSON)

binary formats


3 November 16, 2012

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, Flex and AIR

- Microsoft Silverlight

- Sun JavaFX

- JavaServer Faces (JSF)

- Mozilla XUL (XML User Interface Language)

- OpenLaszlo

- ...


4 November 16, 2012

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 November 16, 2012

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 Adobe Flex

REST-based implementations

…


6 November 16, 2012

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 November 16, 2012

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 November 16, 2012

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 November 16, 2012

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 November 16, 2012

Google Search (Suggest) AJAX Example



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



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)

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

W3C C

andid

ate

Recom

mendation



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>

W3C C

andid

ate

Recom

mendation



Web Sockets Support

When can I use..., http://caniuse.com/#search=socket



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



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, ...



JSON Data Types

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



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" } ] }



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



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



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



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



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



Big Web Services

Service

Provider

Service

Requester

Service

Broker

UDDI

WSDL

SOAP

SOAP

WSDL



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, ...



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



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>WE-DINF-11912</c:courseID> </c:getCourseInfo> </soap:Body> </soap:Envelope>



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>



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



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 operations 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)



RESTful Web Service Example

POST /users HTTP/1.1 Host: wise.vub.ac.be Content-Type: application/xml <?xml version="1.0"?> <user> <name>Kurmann</name> </user> create

GET /users/Kurmann HTTP/1.1 Host: wise.vub.ac.be Accept: application/xml read

PUT /users/Kurmann 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



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



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



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>



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

…



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

...



Video: Yahoo Pipes

Creating a basic pipe, http://blip.tv/file/get/Jc174-YahooPipesBasics201.wmv



Video: Yahoo Pipes ...

Sorting, filtering, and debugging, http://blip.tv/file/get/Jc174-YahooPipesSortingFilteringAndDebugging584.wmv



Video: Yahoo Pipes ...

Using other People’s Pipes, http://blip.tv/file/get/Jc174-YahooPipesTheYahooSearchModuleUnionModuleAndUsingOther879.wmv



Exercise 7

Mashup Tools



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



References ...

jQuery Cross-Browser JavaScript library http://jquery.com

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



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

2 December 2005

Next Lecture Mobile Information Systems

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

Education

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