Embed Size (px)
DESCRIPTION
Modern Web applications 3 Social Web 2.0 user involvement in the creation of contents Integration Data Integration Application Integration User Interface Integration modern Web applications culture of participation [Fischer 2009] public APIs Active co-creation of knowledge and new ideas Web Mashups widgets Development of data sources
Citation preview
Lecture VII: Mashups
CS 4593Cloud-Oriented Big Data and Software Engineering
Outline• What are Mashups• Types of Mashups• How to build Mashups
2
Modern Web applications3
SocialWeb 2.0
user involvement in the creation of contents
IntegrationData Integration
Application Integration
User Interface Integration
modernWeb applications
culture of participation
[Fischer 2009]
public APIs
Active co-creation of
knowledge and new ideas
Web Mashupswidgets
Development of
data sources
Computing paradigms
Mainframe computing1 computer / multiple users
1965
Client-server computingComputer networks / multiple users
1985
“The network is the computer” (John Gage, Sun Microsystems, 1984)
SaaSDaaSHaaS
Cloud computingThe Cloud / ALL the users
2005+
“The cloud is the computer”
4
The developers’ point of view…
Availability on the Web of ready-to-use “building blocks”:
• Software services (content, functionality) accessible throuhg public Web APIs to build composite applications
• Web API: Application Programming Interfacea defined set of HTTP request messages, along with a definition of the structure of response messages, which is usually in XML or JSON format
6
Mashups
• Mashup: young integration practice using the Web as platform.
• Some definitions:– “...a mashup is a web application that combines data
from more than one source into a single integrated tool…” [wikipedia.com]
– “...you can integrate two or more […] Web APIs to create something new and unique, known as a mashup…” [IBM web site]
• Similar terms: service mashups, data mashups
7
Mashup = Integration in the Web 2.0 way
• Highly user-driven:• Oftentimes the actual providers of
content/functionality are not even aware of being “wrapped”
• Google Maps example: initially skilled users «hacked» the code of the application
• Strong evolution: from hacking to first systematic development approaches in a few years
8
Let’s see an example
• Composed of:– Google Maps (http://maps.google.com)– Craigslist (http://www.craigslist.com)
9
The HousingMaps application(http://
www.housingmaps.com)
A utility for finding a house for sale or for rent
A mashup example
• HousingMaps (http://www.housingmaps.com)– http://maps.google.com– http://www.craigslist.com
GoogleMaps
Own application logic/UI
Craigslist
Mashup architecturesources:• Videos• Images• Maps• News• RSS feeds• Social contents•…
mashup web site
browser
Public interfaces(API, RSS, …)
requestresponse
Data manipulation:• embedding• aggregation• integration
11
The simplest case: Embedding
To add a multimedia object in a Web page, it is sufficient to copy an HTML “snippet” into the HTML code of my Web page
HTML code
flickr
foto
youtube
BROWSERRendered Web page
12
Youtube videos13
HTML page embedding 14
HTML embedding
• <body>
• <iframe id="FlickrFrame"• src="http://www.flickr.com/search/?q=milan"• name="Flickr" style="width:600px; height:500px; border: 0px"></iframe>• <iframe id="AmazonFrame"• src="http://amazon.com/s/?url=search-alias%3Daps&field-keywords=milan"• name="Amazon" style="width:600px; height:500px; border: 0px"></iframe>• </body>
• </html>
15
Content Aggregation16
Google News
Visual Aggregation
http://newsmap.jp (aggregates from Google News)
17
Integration18
www.housingmaps.com
Created with http://maps.huge.info/zip.htm
Route Map for Deliveries
http://www.lcls.org/members/routemap.aspx
Newsmap
http://www.marumushi.com/apps/newsmap/newsmap.cfm
USA Canada
Newsmap
• Reveals underlying patterns in news reporting across cultures
• Uses Google News
Components
• Collections:• ProgrammableWeb (www.programmabelWeb.com)• Mashery (developer.mashery.com/apis)
• Ecosystems: offer software components that are «compatible» and «integrable» to build composite applications
• WordPress (www.wordpress.org )offer a large set of widgets and the possibility to include corresponding plugins into the development workspace
• Netvibes.com: a portal with a huge number of widgets
24
Mashup Ecosystem
• Open data
• Open set of services
• Small pieces loosely joined
• You
Lightweight development process
Component discovery
and selection
Composition and
immediate deployment
Use and evolution
Mashup ideaComposition tool/
sandbox
sandbox
26
Mashup: pros29
• “Lightweight” applications • reduced amount of code to be written; just the code for integrating
APIs
• «Lightweight» development availability of tools who do not require many technical skills – e.g., pipes
• Low (o zero) costs for gathering data
• Rapid developmentReduced time-to-market, quick prototyping
29
Mashup: cons30
• Dependency from the online data sourcesdata quality, performances, service availbility and reliability, change in the service policy (licensing, acess restrictions, etc.)
• APIs: standards and versioning
• Intellectual property and copyright “right to remix”: in which measure?
30
