WebMashupsWeb Mashups

Integration the Web 2.0 way

Florian Daniel (daniel@disi.unitn.it) – April 28, 2009( ) p

What are we talking about?What are we talking about?

• Mashup – possible defintionsMashup possible defintions• “...a mashup is a web application that combines data from more than one source into a single integrated tool…” [wikipedia.com – March 24, 2009]

• “...you can integrate two or more […] Web APIs to create something new and unique known as a mashup ” [*]something new and unique, known as a mashup…  [ ]

• A mashup is a web application that is developed by composing data, application logic, and/or user co pos g data, app cat o og c, a d/o useinterfaces originating from disparate web sources

• Similar terms: service mashups, data mashupsp , p

* http://www.ibm.com/developerworks/webservices/library/ws‐soa‐mashups/index.html?S_TACT=105AGX04&S_CMP=EDU

Mashup = integration the Web 2.0 wayMashup   integration the Web 2.0 way

• Young integration practice using the Web as platformYoung integration practice using the Web as platform

• Highly user‐driven• Oftentimes the actual providers of content/functionalityOftentimes the actual providers of content/functionality are not even aware of being “wrapped”

• Google Maps example: initially skilled users hacked the d f h li i ( lk b l ’AJAX code of the application (talk by Google’s Lars 

Rasmussen at ICWE’05)

• Strong evolution: from hacking to first systematic• Strong evolution: from hacking to first systematic development approaches in a few years

Let’s see an exampleLet s see an example

• The HousingMaps application (http://www.housingmaps.com)The HousingMaps application (http://www.housingmaps.com) 

composed of:• Google Maps (http://maps.google.com)

• Craigslist (http://www.craigslist.com)

Demo

A mashup exampleA mashup example

• HousingMaps (http://www.housingmaps.com)GoogleMaps

Own application logic/UI

CraigslistHousingMaps (http://www.housingmaps.com)• http://maps.google.com

• http://www.craigslist.com

Web 2.0Web 2.0

• Web 2.0? Again, there are lots of different (andWeb 2.0? Again, there are lots of different (and sometimes diverging) definitions:• “Web 2.0 is a term describing the trend in use of World Wide Web technology and web design that aims to enhance creativity, information sharing, and, most notably, collaboration among users ” [wikipedia com]collaboration among users...  [wikipedia.com]

• “Web 2.0 is best described as a core set of patterns that are observable in applications that share the Web 2.0 label. These patterns are services, simplicity, and community…” [*]

* http://www.ibm.com/developerworks/webservices/library/ws‐soa‐mashups/index.html?S_TACT=105AGX04&S_CMP=EDU

The enabling factor of Web 2.0The enabling factor of Web 2.0

• Over the last years we have been witnessing twoOver the last years we have been witnessing two main trends on the Web:• User participation in the content creation process (e.g., communities, social networks, blogs...)

• User participation in the development process (e g mashups)(e.g., mashups)

• Which are enabled or fostered by:• Simplicity of usage: intuitive interactive applications• Simplicity of usage: intuitive, interactive applications

• Simplicity of development: novel and standardized web technologies

Some figures (programmableweb.com)Some figures (programmableweb.com)

• Most popular categories of mashups

• Most popular• Most popular web APIs

Dynamics of the ecosystemDynamics of the ecosystem

• Constant growth since programmableweb.com wentConstant growth since programmableweb.com went online (over 600 days) [by Michael Weiss, Carleton University]

Number of APIs Number of mashups

Web engineering and mashupsWeb engineering and mashups

• Evolution of web application development: pp p• Manual development: static (plain HTML) and dynamic (CGI, PHP, JSP,...) pages coded via simple text editorsTool assisted d l t b d l t ifi• Tool‐assisted development: web‐development‐specific tools (e.g., Dreamweaver) augment productivity by automatic web‐specific development concerns 

• Model‐driven development: graphical modeling tools enable developers to reason at a high level of abstraction and to “draw” an application and to automatically generate the code

• Mashups: we are going toward the user‐driven development of web applicationsp pp

Developing a mashup: what does it mean?

• The mashup development scenario

Developing a mashup: what does it mean?

The mashup development scenario

develops

Component developer

publisheschooses writes uses

Mashup userMashup composer

discoversand selects

mashes up

Description

Data sources

LayoutsStyles

Architectures

ProtocolsLanguages

Formats

Mashup component The Web

Technologies ... Mashup application

Mashup tool or manual composition

Distribution of apps over C and SDistribution of apps over C and S

Source: www.coachwei.com

Mashup component/API typesMashup component/API types

UI l i S  vices

nt 

vices

app

UI logic

Appient

C/S

ser

Clie

ser v

dgets

onal W

eba

App

Data

Cl

zatio

n wid

idgets

vices

Conven

tio

r

UI logic No UIVisualiz

omplex w

ent a

pps

Server‐

Side

 serv

App

D

Serve Co

Clie

Feed

s

Data C/S apps

The technological landscape

UI l i

The technological landscape

(D)HTMLUI logic

Appient

(D)HTML

Flash, SilverlightApp

Data

Cl AJAXJSON, XML

Silverlight

SOAP,

r

UI logic

SOAP, HTTP

HTML, templates,...

App

D

Serve PHP, Ruby, 

Java, C++,...

XML,  Relational Data RSS, 

AtomDBs,  

OODBs,...

Dynamic HTMLDynamic HTML

• DHTML is a programming technique for dynamic andDHTML is a programming technique for dynamic and interactive Web (HTML) pages

• DHTML combines • HTML >> document markup

• JavaScript >> biz logic for interactive features

• DOM (Document Object Model) >> standard access to HTML objects + HTML event model

CSS (C d d St l Sh t ) >> t l d l t• CSS (Cascaded Style Sheets) >> style and layout 

• Benefits• Enhances user experience• Enhances user experience

• No server support required Demo

AJAX (Asynchronous JavaScript And XML)AJAX (Asynchronous JavaScript And XML)

• AJAX is a DHTML programming technique withAJAX is a DHTML programming technique with support for client‐server HTTP communication

• Ingredientsg• DHTML >> UI management

• XMLHttpRequest object >> communication support

• Enables asynchronous communications between client and server >> RIA applications

• Benefits• Enables state and UI management on the client

• Distribution of application featuresDemo

Flash, JavaFX, SilverlightFlash, JavaFX, Silverlight

• Flash, JavaFX, and Silverlight are light‐weightFlash, JavaFX, and Silverlight are light weight multimedia application platforms that run inside the client browser

• Alternative approach to RIA applications:• Require the installation of a dedicated browser plug‐in

• Are based on simple scripting languages (JS‐like)

• Break with the document‐centric approach of AJAX/DHTML

• Benefits• Highly interactive and multimedia user interfaces featuring desktop like user experiencesdesktop‐like user experiences

Demo

XML (eXtensible Markup Language)XML (eXtensible Markup Language)

• XML is a language for the definition of documentXML is a language for the definition of  document structures, i.e., other languages >> a meta‐language

• Ingredients: tags/elements, attributes, name spaces, g g / , , p ,DTDs, XSDs, XSLT, XSL‐FO,...

• Benefits• Self‐describing structures >> easily human‐readable

• Technology‐independent >> independent of programming language, platform, protocol, etc.

• Highly portable

JSON (JavaScript Object Notation)JSON (JavaScript Object Notation)

• JSON is a lightweight data interchange formatJSON is a lightweight data interchange format 

• Text‐based, extensible data format for representing • Collections of name/value pairsCollections of name/value pairs

• Ordered lists (e.g., associative arrays)

• Basic data structures 

• Benefits• Easy parsing and handling of data structures

• Supported by almost all programming languages

• Less overhead (both computation and data) than XML

JSON: exampleJSON: example{

”catalog”:{The JSON version of the XML document in the”cd”:[

{”title”:”Empire Burlesque”,”artist”:”Bob Dylan”

XML document in the previous AJAX example

artist : Bob Dylan ,”country”:”USA”,”company”:”Columbia”,”price”:10.9,” ” 198

Interpretation of 

”year”:1985},…

]the data format in JavaScript  (cf. XML example)

]}

}

JSONobj = eval( "(" + http_request.responseText + ")" );

XML example)

RSS and AtomRSS and Atom

• RSS and Atom areWeb feed formats (applications ofRSS and Atom are Web feed formats (applications of XML) for the publication/syndication of frequently updated contents over the Web

• Ingredients• Stable structure and predefined meaning of tags

• Dynamic behavior achieved through dedicated readers

• Benefits• Simple, standardized exchange formats

• Very popular in blogs, newspapers, social web sites,...

Demo

PHP, Ruby,...PHP, Ruby,...

• Popular, simple server‐side scripting languages for p , p p g g gdynamic Web applications

• Benefits• Free web server extensions (scripting engines) available for most web servers

• Full power of 3G programming languagesFull power of 3G programming languages• Availability of powerful free code libraries (e.g., for the management of HTML templates: PHPTAL )A il bilit f d d b d l t f k• Availability of advanced web development frameworks (e.g., Ruby on Rails with full support for MVC‐based web applications)

www.programmableweb.com – March 24, 2009

SOAP/WSDL web servicesSOAP/WSDL web services

• Programming interfaces accessible over the WebProgramming interfaces accessible over the Web • WSDL = Web Service Description Language

• Abstract service description language (tech‐agnostic)

• SOAP = Simple Object Access Protocol• XML message exchange protocol

SOA S i O i t d A hit t• SOA = Service‐Oriented Architecture• Producer, consumer, registry (virtual marketplaces)

• Complex advanced features: security reliability• Complex advanced features: security, reliability, transactions, addressing,...

• Orchestration and choreography• Orchestration and choreography

RESTful web servicesRESTful web services

• A new architectural style of developing web servicesA new architectural style of developing web services

• Principles• Operations based on HTTP methods (Get, Post, Put, Delete)Operations based on HTTP methods (Get, Post, Put, Delete)

• Services are stateless (no session data at the server side)

• Access via hierarchically structured URIs

• XML or JSON over HTTP

• Benefits• Simplicity and immediacy

• No big overhead for composing and parsing messages

• More efficient service implementations

“Protocol” usage by APIsProtocol  usage by APIs

Mashup development manually (1/2)Mashup development manually (1/2)

• Sceanrio 1 (at the beginning): No APIs availableSceanrio 1 (at the beginning): No APIs available

• Developent tasks• Read and interpret AJAX code of GMapsRead and interpret AJAX code of GMaps

• Hack into GMaps code to implement marker support

• Extract data from Craigslist with regular expressions (write a wrapper)

• Format extracted data and forward data to GMaps

bl• Problems• No stabel interfaces

• Highly error prone and time consuming• Highly error‐prone and time‐consuming

Mashup development manually (2/2)Mashup development manually (2/2)

• Scenario 2 (today): GMaps comes with AJAX API andScenario 2 (today):  GMaps comes with AJAX API and Craigslist provides an RSS feed

• Development tasksp• Instantiate GMaps component

• Layout RSS feed

• Set markers through GMaps API

• Problems• Manual development  for skilled programmers

• Manual parsing of RSS feed

b f• No common Web API format

Partially assisted developmentPartially assisted development

• There are many (online) tools forThere are many (online) tools for• Data extraction from Web pages

• Web content clipping

>> Aid the development of mashup components  or APIs

RoadRunner Demo

SummarySummary

• Mashups: a new way of data, application, and UI p y , pp ,integration on the Web

• An end‐user‐driven phenomenon (e.g., Google Maps)• As for now, only few really useful applications exist

• Agreed on development frameworks and standards are still missingmissing

• But there is growing interest in mashups also from business users• Big companies are investing large amounts of money in mashup technologies (e.g., Yahoo, Google, Microsoft, Intel, IBM)IBM)

ProblemsProblems

• Web APIs often change interface/features over timeg /• There is no commitment to stability from providers of clipped or extracted data• Oftentimes they are not even aware that their contents are used in a mashup application

• Intellectual property rights and licences!Intellectual property rights and licences!

• Mashup development oftentimes is like hacking

>> Mashup development is still a time consuming and daunting task

OutlookOutlook

• The importance of mashups will undoubtedly be p p ygrowing over the next years in both the consumer and the business context

h d l ( d d )• Mashup developers (even inexperienced end users) need to be assisted in the development• Simplemodels and languages are requiredSimple models and languages are required• Dedicated tools are already being developed• High‐quality public mashup components (i.e., APIs) are paramount

>> Next time we will have a look at mashup tools andwhat we at UNITN do in this contextwhat we at UNITN do in this context