1. Next Generation Web Apps Towards Transformative UX Maristella Matera, Matteo Picozzi 1

2. Modern Web applications 2 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

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

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

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 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 [wikipedia.com] 5

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 6

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 7

8. Let’s see an example Composed of: Google Maps (http://maps.google.com) Craigslist (http://www.craigslist.com) 8 The HousingMaps application (http://www.housingmaps.com) A utility for finding a house for sale or for rent

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

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

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 11

12. Youtube videos 12

13. HTML page embedding 13

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

15. Content Aggregation 15 Google News

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

17. Integration 17 www.housingmaps.com

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

19. Let’s build some examples 1.Wordpress plugins 2.HTML embedding: The Expo Mashup 19

20. “There are creative people all around the world, hundreds of millions of them, and they are going to think of things to do with our basic platform that we didn’t think of” Vinton Cerf – Google 20 User-driven innovation

21. The desire of users to develop their own things is a driver for the mashup phenomenon  Mashup developers want to create solutions that satisfy their situational needs  Sometimes such solutions can be very effective, and worth to be reused with other users… User-driven innovation paradigm  Service providers monitor the use of their services to learn from the best innovative uses  The iterative experimentation can be entirely carried out by the users  Need for innovation toolkits: adequate processes and tools, to let users build their own products and innovate 21

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

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

24. Developing a mashup: what does it require? 24

25. Mashup development manually Scenario 1 (at the beginning): No APIs available Development tasks Read and interpret Gmaps code 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 Problems No stable interfaces Highly error-prone and time-consuming 25

26. Mashup development manually Select the components (e.g., GMaps API and the Craigslist RSS): Include GMaps component Define a layout for the RSS feed Set markers through GMaps API Problems Manual development for skilled programmers Manual parsing of RSS feed No common Web API format 26

27. Assisted development Mashup tools/platforms Simplify the overall development process, enabling even the less experienced user to mash up own applications 27

28. Assisted Development Yahoo!Pipes Composition tool to build pipes by means of a simple UI Pipe: a combination of commands to retrieve, filter, manipulate in different ways data coming from heterogenous data sources (generally, RSS feed) “Unix pipes for the Web”: “at the heart of the Unix philosophy is the idea that the power of a system comes more from the relationships among programs than from the programs themselves." Kernighan & Pike, 1984 28

29. ALTERNATIVE Pipes: the idea Source ASource BSource C data 0 data 1 data 2 data 3 SEQUENCE OF FILTERS AND OPERATIONS Source B’ LOOP 29

30. 30

31. Aggregation: widget portals 31 netvibes.com

32. Content extraction 32

33. Examples 1. Dapper for content extraction + Netvibes 2. Our tools 33

34. Modern Web applications 34 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

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

36. How the mashup paradigm can transform UX? 36

37. Transformative UX 37 Chasm between operating systems and packaged applications Latzina, Beringer. ACM Interaction, March 2012 (http://www.sapdesignguild.org/community/readers/reader_latzina_beringer.asp)

38. Packaged Software Apps Have dominated for long time the design of end- user software Each application comes with its own data model, and the user interface displays these data structures as application content Data objects presented at the user interface level are designed to match the user’s mental model, but this also ties them to the semantics defined by the application scope System design is a solution to a well-defined set of requirements that creates hard boundaries 38

39. Transformative UX Spaces of interaction where users can realize their current goals by moving across various task contexts Elastic systems where data objects (content) and functions (capability) are detached and can be moved into different task contexts (container) User interfaces emerge at runtime 39

40. The long tail of the SW market 40

41. Web engineering: evolution Evolution of web application development: Manual development: static (plain HTML) and dynamic (PHP, JSP,...) pages coded via simple text editors or dedicated tools Tool-aided development: authoring tools enable developers to reason on the application content and «structure»; the tools automatically generate the code Mashup development: we are going toward the user- driven development of web applications 41

42. Mashup: pros 42 “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 42

43. Mashup: cons 43 Dependency from the online data sources data quality, performances, service availbility and reliability, change in the service policy (licensing, acess restrictions, etc.) APIs: standards e versioning Intellectual property and copyright “right to remix”: in which measure? 43