Lecture VII: Mashups CS 4593 Cloud-Oriented Big Data and Software Engineering

Outline What are Mashups Types of Mashups How to build Mashups 2

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

Computing paradigms Mainframe computing 1 computer / multiple users 1965 Client-server computing Computer networks / multiple users 1985 “The network is the computer” (John Gage, Sun Microsystems, 1984) SaaS DaaS HaaS Cloud computing The Cloud / ALL the users “The cloud is the computer” 4

5 internet A paradigm change From the network as a collection of interconnected Web pages (hypertext)…… to the network as a collection of apps from “fat clients”…… to “thin clients” from software as a product…… to software as a service from software releases…… to continuous evolution from proprietary architectures…… to open architectures from private resources… … to shared resources 5

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 Interface a 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 ( –Craigslist ( 9 The HousingMaps application ( A utility for finding a house for sale or for rent

A mashup example HousingMaps ( – – GoogleMaps Own application logic/UI Craigslist

Mashup architecture sources: Videos Images Maps News RSS feeds Social contents … mashup web site browser Public interfaces (API, RSS, …) request response 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 BROWSER Rendered Web page 12

Youtube videos 13

HTML page embedding 14

HTML embedding <iframe id="FlickrFrame" src=" name="Flickr" style="width:600px; height:500px; border: 0px"> <iframe id="AmazonFrame" src=" name="Amazon" style="width:600px; height:500px; border: 0px"> 15

Content Aggregation 16 Google News

Visual Aggregation (aggregates from Google News) 17

Integration 18

Created with

Route Map for Deliveries

Newsmap USACanada

Newsmap Reveals underlying patterns in news reporting across cultures Uses Google News

Components Collections: ProgrammableWeb ( Mashery (developer.mashery.com/apis) Ecosystems: offer software components that are «compatible» and «integrable» to build composite applications WordPress ( ) 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 idea Composition tool/ sandbox sandbox 26

Comparison with traditional processes 27 Daniel, Matera, Weiss: Next in Mashup Development: User-Created Apps on the Web. IT Professional 13(5), 2011

Dynamics of the ecosystem (both APIs and mashups) Constant growth since programmableweb.com went online Number of APIsNumber of mashups 28

Mashup: pros 29 “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 development Reduced time-to-market, quick prototyping 29

Mashup: cons 30 Dependency from the online data sources data 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