Search

Web Information Systems (WE-DINF-11912): Lecture 06 - Web 2.0 Patterns and Technologies

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    Web Information Systems (WE-DINF-11912): Lecture 06 - Web 2.0 Patterns and Technologies - Presentation Transcript

    1. Web Information Systems Web 2.0 Patterns and Technologies Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://vub.academia.edu/BeatSigner 2 December 2005
    2. The Programmable Web  Based on HTTP  Data mainly encoded in XML  Possible alternative data formats  HTML  plain text  JavaScript Object Notation (JSON)  binary formats October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2
    3. Rich Internet Applications (RIAs)  Bring the desktop to the browser  Highly responsive (good performance)  asynchronous and partial update of content  Rich Graphical User Interface (GUI)  various RIA toolkits and environments (discussed next week) - Adobe Flash, Flex and AIR - Microsoft Silverlight - Sun JavaFX - JavaServer Faces (JSF) - Mozilla XUL (XML User Interface Language) - OpenLaszlo - ... October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3
    4. Asynchronous Partial Updates Client Service Service Server  Rather than updating an entire resource (e.g. web page), we can asynchronously update parts of a resource  Updates initiated by the client or the server based on  user interaction, state change, timeout, …  Updates cannot be initiated by the server if HTTP is used October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4
    5. Asynchronous Partial Updates …  There are different possibilities how the partial update of resources can be realised on the Web  AJAX  Action Message Format (AMF) - used by Adobe Flex  REST-based implementations  … October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5
    6. 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 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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6
    7. XMLHttpRequest Object  The XMLHttpRequest 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 but response not yet available • 3 (receiving): some data has been received but response not yet available • 4 (loaded): all data has been received and the response is available - function registered via onreadystatechage is executed each time readyState changes  responseText, responseBody and responseXML - contains the server's response in different formats October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7
    8. 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() { xmlhttp = createXMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4) { document.testForm.time.value=xmlhttp.responseText; } } xmlhttp.open("GET","time.php",true); xmlhttp.send(null); } </script> October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8
    9. AJAX Example ... <form name="testForm"> Input: <input type="text" name="input" onkeyup="getTime();" /> Time: <input type="text" name="time" /> </form> </body> </html>  createXMLHttpRequest() deals with different browser versions  For more advanced AJAX examples see  http://www.w3schools.com/Ajax/ October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9
    10. Google Search (Suggest) AJAX Example October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10
    11. AJAX  Advantages  reduced load time and higher responsiveness  application state can be maintained accross multiple pages since the main container page is not reloaded  Disadvantages  not possible to bookmark any particular state of an application  content not crawled by 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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11
    12. JavaScript Object Notation (JSON)  Developed as an XML alternative to represent JavaScript objects as strings  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, ... October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12
    13. JSON Data Types Type Description Number integer, real or float Boolean true or false String double-quoted Unicode (use backslash for escaping) comma-separated ordered sequence of values enclosed in Array square brackets comma-separated collection of key:value pairs enclosed in Object curly braces null null value October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13
    14. 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" } ] } October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14
    15. JSON-RPC  Simple JSON-encoded remote procedure call protocol that is very similar to XML-RPC (discussed earlier) { "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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15
    16. 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  software is offered as a service and on the other hand may be a composition of other services October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16
    17. Representational State Transfer (REST)  A REST-style architecture has to conform to 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 (e.g. hypertext links for related resources) (3) stateless  no client state is stored on the server side (4) cacheability  reponses must explicitly or implicitly define if the are cacheable or not October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17
    18. 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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18
    19. 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 - making use of PUT, GET and DELETE HTTP methods October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19
    20. Big Web Services Service Broker UDDI WSDL WSDL SOAP SOAP Service Service Requester Provider October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20
    21. 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, ... October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21
    22. 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 Request October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22
    23. SOAP Request Message Example <?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>  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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23
    24. SOAP Response Message Example <?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>  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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24
    25. 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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25
    26. 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 unqiue 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) operation and HTTP methods  POST (create), GET (read), PUT (update) and DELETE (delete) October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26
    27. RESTful Web Service Example POST /users HTTP/1.1 Host: wise.vub.ac.be Content-Type: application/xml <?xml version="1.0"?> <user> <name>Kleinermann</name> </user> create GET /users/Kleinermann HTTP/1.1 Host: wise.vub.ac.be Accept: application/xml read PUT /users/Kleinermann 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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27
    28. 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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28
    29. Really Simple Syndication (RSS) Feeds  Format that is used to publish frequently updated information on the Web  e.g. blog entries  specific channels on news sites  ...  No single standard  RSS 0.91, RSS 1.0 and RSS 2.0  RSS feeds are represented as XML documents October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29
    30. RSS Example <?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>  many other elements  <language>, <copyright>, <pubDate>, ... October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30
    31. 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 October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31
    32. 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  Open Kapow  IBM Mashup Center  ... October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32
    33. Video: Yahoo Pipes Creating a basic pipe, http://blip.tv/file/get/Jc174-YahooPipesBasics201.wmv October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33
    34. Video: Yahoo Pipes ... Sorting, filtering, and debugging, http://blip.tv/file/get/Jc174-YahooPipesSortingFilteringAndDebugging584.wmv October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34
    35. Video: Yahoo Pipes ... Using other People’s Pipes, http://blip.tv/file/get/Jc174-YahooPipesTheYahooSearchModuleUnionModuleAndUsingOther879.wmv October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35
    36. References  W3C Web Services Activity  http://www.w3.org/2002/ws/  Apache CouchDB  http://couchdb.apache.org  Yahoo Pipes Tutorial  http://usefulvideo.blogspot.com/2007/02/yahoo-pipes- tutorials.html October 29, 2009 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36
    37. Next Week Web Application Frameworks 2 December 2005

    + Beat SignerBeat Signer, 3 weeks ago

    custom

    665 views, 0 favs, 2 embeds more stats

    This lecture is part of a Web Information Systems c more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 665
      • 661 on SlideShare
      • 4 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 3
    Most viewed embeds
    • 3 views on http://www.inf.ethz.ch
    • 1 views on http://wise.vub.ac.be

    more

    All embeds
    • 3 views on http://www.inf.ethz.ch
    • 1 views on http://wise.vub.ac.be

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    more
    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved