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

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

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

4. 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 2005+ “The cloud is the computer” 4

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

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

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

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

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

10. A mashup example HousingMaps (http://www.housingmaps.com)http://www.housingmaps.com –http://maps.google.comhttp://maps.google.com –http://www.craigslist.comhttp://www.craigslist.com GoogleMaps Own application logic/UI Craigslist

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

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

13. Youtube videos 13

14. HTML page embedding 14

15. HTML embedding <iframe id="FlickrFrame" src="http://www.flickr.com/search/?q=milan" name="Flickr" style="width:600px; height:500px; border: 0px"> <iframe id="AmazonFrame" src="http://amazon.com/s/?url=search-alias%3Daps&field-keywords=milan" name="Amazon" style="width:600px; height:500px; border: 0px"> 15

16. Content Aggregation 16 Google News

17. Visual Aggregation http://newsmap.jp (aggregates from Google News) 17

18. Integration 18 www.housingmaps.com

19. Created with http://maps.huge.info/zip.htm

20. Route Map for Deliveries http://www.lcls.org/members/routemap.aspx

22. Newsmap http://www.marumushi.com/apps/newsmap/newsmap.cfm USACanada

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

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

25. Mashup Ecosystem Open data Open set of services Small pieces loosely joined You

26. Lightweight development process Component discovery and selection Composition and immediate deployment Use and evolution Mashup idea Composition tool/ sandbox sandbox 26

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

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

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

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