PhD Defense held by Matteo Picozzi on March 20th, 2014 at DEIB, Politecnico di Milano, Italy With the Web 2.0 revolution, new technologies, new standards and new application models have been introduced in the Web sce- nario. The Web has become more mature and full of potentialities as a platform for the development of interactive rich applications. The use of client-side scripting languages, the diffusion of Web Services and public APIs, and the always increasing basic skills of laypeople in the de- velopment of Web applications shaped up a scenario in which a new class of web applications, the mashups, was born. Mashups integrate, at differ- ent levels of the application stack, data, functionality and user interfaces from different resources such as Web Services, public APIs or enterprise databases. Mashups emerged in response to the need of users, not neces- sarily experts of technology, to quickly assemble Web resources to create new Web applications solving their situational needs. One characterizing feature of these applications is that they are very often developed by the end users, i.e., people who actually need the final application. To accommodate this practice, which can be fruitful in several situations where the possibility of constructing applications satisfying specific needs is required, in the last years different tools, conceived to offer intuitive composition languages, have been proposed. Unfortunately, most of such tools, after a couple of years of activity, were dismissed. My PhD thesis aims at investigating and defining a framework that includes models, composition paradigms and tools for the End-User Development (EUD) of mashups. Two main reasons for the failure of the mashup tools so far proposed are indeed their incompleteness with respect to the users needs and their difficulty of use. The framework defined in this thesis aims therefore at covering the most salient activities in a mashup life cycle, and proposes a new composition paradigm based on abstractions that try as much as possible to hide technical details. The end users are enabled to integrate data of diverse resources, to create components that could be used in a mashup composition, to generate mashups that can be deployed on different kinds of devices (e.g., mobile devices or multitouch screens). We have also investigated collaboration mechanisms to allow groups of users to share resources and co-create applications. This last feature is particularly fruitful to promote the potential of mashup composition as a paradigm for knowledge sharing and creation.

1. Matteo Picozzi!
http://home.deib.polimi.it/picozzi!
{matteo.picozzi@polimi.it}
Dipartimento di Elettronica,
Informazione e Bioingegneria
PhD Course in InformationTechnology!
Doctoral dissertation!
March 20th, 2014

2. UI
Web Applications
public APIs
widgets
data sources
Mashups

3. Housingmaps
• Mashups were born to meet real user needs
• An example is Housingmaps.com, the first map mashup:
- In 2005, Paul Rademacher overlays data from Craiglist on his Google Maps hack
- Then Google decided to open up the Google Maps API for developers
- And Google Maps become the preferred mapping platform for the Web

4. • Mashups were born as leisure applications
• Soon have been adopted in enterprise, mainly for analytics
• Now are used in many Web and mobile applications although they are not
called mashups
• They can be used also for
- Domotic
- Internet of Things
- every contexts in which there is the need to lightweight compose composite applications

6. Web 2.0
Culture of
participation

7. Web 2.0
Culture of
participation
User
involvement
in the creation
of contents

8. Web 2.0
Active co-creation of
new ideas, knowledge and
simple applications
Culture of
participation
User
involvement
in the creation
of contents

9. Web 2.0
Active co-creation of
new ideas, knowledge and
simple applications
Culture of
participation
User
involvement
in the creation
of contents
Collaboration
among users through
web applications

10. Web 2.0
Active co-creation of
new ideas, knowledge and
simple applications
Culture of
participation
User
involvement
in the creation
of contents
Collaboration
among users through
web applications
End-user
Development

12. How can we enable end users
to develop mashups?

13. • UI-centric composition paradigm
• Modeling abstractions
• Platform for End-user Development of
Mashups

15. • Abstraction from technical details
- A platform speaking the user language (functionality
and terminology), possibly through visual mechanisms
• Live programming
- Immediate visual feedback → immediate mashup
execution
• Composition support
- Assisted composition, e.g., by means of
recommendations
The need for composing an application, starting from resources
responding to personal needs, and simply running it, without worrying
about what happens behind the scenes, arises

16. Component editing Mashup composition
Component synchronization Collaboration

17. Component editing Mashup composition
Component synchronization Collaboration

19. Component editing Mashup composition
Component synchronization Collaboration

21. Mashup composition
Component synchronization Collaboration
Component editing

23. Component editing Mashup composition
Component synchronization Collaboration

25. Resource
Selection
Mashup
Composition
Use and
Maintainance
Dismissal
Mashup idea
Manual development of mashups

26. Resource
Selection
Mashup
Composition
Use and
Maintainance
Dismissal
Mashup idea
Component
Editing
Mashup
Sharing and co-
creation
Manual development of mashups
Tool-assisted
and Registration
Reuse
New
New
in our approach

28. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

29. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
UISynchronization

30. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
UISynchronizationVisualIntegration

31. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

32. • UI Component
uic = <E, O>
- self-contained software module
- bound to one or more services providing data and/or functionality
- equipped with its own user interface (UI)
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
set of events set of operations

33. • UI Component
uic = <E, O>
- self-contained software module
- bound to one or more services providing data and/or functionality
- equipped with its own user interface (UI)
• UI Mashup
uim = <UIC, C>
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
set of events set of operations
set of UI Components
set of components’ couplings

34. • UI Component
uic = <E, O>
- self-contained software module
- bound to one or more services providing data and/or functionality
- equipped with its own user interface (UI)
• UI Mashup
uim = <UIC, C>
• Components’ Coupling
cc = <euics ,ouict>
- subscription of a target operation (ouict) to a source event (euics)
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
set of events set of operations
set of UI Components
set of components’ couplings
source event target operation

35. Event Bus
Component 1
Component 2
Component 3
Component 4
Component 5
Event 1
Operation 2
Coupling
Coupling
Publisher: Component 1!
Event: Event 1!
Subscriber: Component 3!
Operation: Operation 2
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
JinYu, Boualem Benatallah, Régis Saint-Paul, Fabio Casati, Florian Daniel, Maristella Matera, A framework for rapid integration of presentation components. WWW 2007

36. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
UISynchronization

37. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
VisualIntegration

38. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

39. • UI Template
uit = <VR, TE>
- Different kinds of templates (list, map, slider, chart…)
- Set of “empty” visual elements called visual renderers
- Must be filled by data
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
set of visual renderers set of template events
Image
Title
Subtitle

40. • UI Template
uit = <VR, TE>
- Different kinds of templates (list, map, slider, chart…)
- Set of “empty” visual elements called visual renderers
- Must be filled by data
• VI Schema
vis = <Q , UIT, M>
- Abstract description (independent from specific visualization layouts)
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
set of visual renderers set of template events
set of queries
set of UI Templates
set of mappings
Image
Title
Subtitle
<visual-mapping>
<global type="List">
<vr name="Title" type="Text">
<data source="IMDB" query="/title"/>
<data source="MyMovies" query="/@name"/>
</vr>
<vr name="Subtitle" type="Text">
<data source="IMDB" query="/director"/>
<data source="MyMovies" query="/@director"/>
</vr>
<vr name="Image" type="Image">
<data source="IMDB" query="/poster/image"/>
<data source="MyMovies" query="/@photo_url"/>
</vr>
</global>

41. • UI Template
uit = <VR, TE>
- Different kinds of templates (list, map, slider, chart…)
- Set of “empty” visual elements called visual renderers
- Must be filled by data
• VI Schema
vis = <Q , UIT, M>
- Abstract description (independent from specific visualization layouts)
• VI Component
vic = <vis, E, O>
- Specialization of a UI Component
- Unique execution logic
- Interpret the vis and, through model transformations, generate data visualizations
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
set of visual renderers set of template events
set of queries
set of UI Templates
set of mappings
VI Schema
set of events
set of operations
Image
Title
Subtitle
<visual-mapping>
<global type="List">
<vr name="Title" type="Text">
<data source="IMDB" query="/title"/>
<data source="MyMovies" query="/@name"/>
</vr>
<vr name="Subtitle" type="Text">
<data source="IMDB" query="/director"/>
<data source="MyMovies" query="/@director"/>
</vr>
<vr name="Image" type="Image">
<data source="IMDB" query="/poster/image"/>
<data source="MyMovies" query="/@photo_url"/>
</vr>
</global>

42. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
VisualIntegration

43. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

44. Data representation
Data
Data
Data
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

45. Image
Title
Subtitle
UI template item
Data representation
Mapping
Data
Data
Data
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

46. Image
Title
Subtitle
UI template item
Data representation
Mapping
<visual-mapping>
<global type="List">
<vr name="Title" type="Text">
<data source="IMDB" query="/title"/>
<data source="MyMovies" query="/@name"/>
</vr>
<vr name="Subtitle" type="Text">
<data source="IMDB" query="/director"/>
<data source="MyMovies" query="/@director"/>
</vr>
<vr name="Image" type="Image">
<data source="IMDB" query="/poster/image"/>
<data source="MyMovies" query="/@photo_url"/>
</vr>
</global>
</visual-mapping>
VI Schema
Data
Data
Data
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

47. Image
Title
Subtitle
UI template item
Data representation
Mapping
<visual-mapping>
<global type="List">
<vr name="Title" type="Text">
<data source="IMDB" query="/title"/>
<data source="MyMovies" query="/@name"/>
</vr>
<vr name="Subtitle" type="Text">
<data source="IMDB" query="/director"/>
<data source="MyMovies" query="/@director"/>
</vr>
<vr name="Image" type="Image">
<data source="IMDB" query="/poster/image"/>
<data source="MyMovies" query="/@photo_url"/>
</vr>
</global>
</visual-mapping>
VI Schema Export for multiple devices
Data
Data
Data
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*
The power of
model-driven
approaches

48. UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

49. uvr uvr uvr mvr mvr
a b c d e
f g h i -
uvr uvr uvr mvr mvr mvr
a b j k l m
n o p q - r
Reduced result set from source 1
Reduced result set from source 2
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

50. uvr uvr uvr mvr mvr
a b c d e
f g h i -
uvr uvr uvr mvr mvr mvr
a b j k l m
n o p q - r
uvr uvr uvr
a b c
f g h
a b j
n o p
UReduced result set from source 1
Reduced result set from source 2
Union sub-template instance
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

51. uvr uvr uvr mvr mvr
a b c d e
f g h i -
uvr uvr uvr mvr mvr mvr
a b j k l m
n o p q - r
uvr uvr uvr
a b c
f g h
a b j
n o p
UReduced result set from source 1
Reduced result set from source 2
Union sub-template instance
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

52. uvr uvr uvr mvr mvr
a b c d e
f g h i -
uvr uvr uvr mvr mvr mvr
a b j k l m
n o p q - r
uvr uvr uvr
a b c
f g h
a b j
n o p
uvr uvr uvr mvr mvr mvr mvr mvr
a b c d e - - -
a b j - - k l m
UReduced result set from source 1
Reduced result set from source 2
Fusion on demand result set
Union sub-template instanceF
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

53. uvr uvr uvr mvr mvr
a b c d e
f g h i -
uvr uvr uvr mvr mvr mvr
a b j k l m
n o p q - r
uvr uvr uvr
a b c
f g h
a b j
n o p
uvr uvr uvr mvr mvr mvr mvr mvr
a b c d e - - -
a b j - - k l m
U
uvr uvr uvr mvr mvr mvr mvr mvr
a b c d e k l m
Reduced result set from source 1
Reduced result set from source 2
Fusion on demand result set
Global schema instance
Union sub-template instanceF
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

54. UI-Centric Composition of Multi-Device Mashups 0:21
ALGORITHM 1: Data Fusion On Demand
RSi: result sets for the i-th data component
si: the instance selected by the user at runtime
CS: comparison set, including all the instances to be compared with si to identify duplicates
csi: i-th item of CS
GetLocalSchema(csi): returns the local schema of the origin data source of the instance csi
GetPrimaryKey(csi): returns the primary key values of the instance csi
GetMergeAttributes(lsi): extracts from the local schema lsi the attributes in mlsi
AddMergeAttributes(mlsi, mlsj): adds the attributes in mlsj to mlsi
IsSimilar(Ki, Kj): returns true if two passed primary keys are similar, based on the adopted
similarity measure
begin
// Initialization of ls for the origin data source of si
lssi GetLocalSchema(si)
GetMergeAttributes(lsi): extracts from the local schema lsi the attributes in mlsi
AddMergeAttributes(mlsi, mlsj): adds the attributes in mlsj to mlsi
IsSimilar(Ki, Kj): returns true if two passed primary keys are similar, based on the adopted
similarity measure
begin
// Initialization of ls for the origin data source of si
lssi GetLocalSchema(si)
// Initialization of the comparison set CS
forall the RSi, si /2 RSi do
add RSi to CS
end
// Search for similar items with the comparison set CS
Ksi GetPrimaryKey(si)
forall the csi 2 CS do
Ki GetPrimaryKey(csi)
// Similarity Evaluation
if IsSimilar(Ksi, Ki) then
lsi GetLocalSchema(csi)
Fuse(lssi,lsi)
remove csi
end
end
end
Fuse(lssi,lsi) {
mlsi GetMergeAttributes(lsi)
mlssi GetMergeAttributes(lssi)
AddMergeAttributes(mlssi, mlsi)
}
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

55. UI-Centric Composition of Multi-Device Mashups 0:21
ALGORITHM 1: Data Fusion On Demand
RSi: result sets for the i-th data component
si: the instance selected by the user at runtime
CS: comparison set, including all the instances to be compared with si to identify duplicates
csi: i-th item of CS
GetLocalSchema(csi): returns the local schema of the origin data source of the instance csi
GetPrimaryKey(csi): returns the primary key values of the instance csi
GetMergeAttributes(lsi): extracts from the local schema lsi the attributes in mlsi
AddMergeAttributes(mlsi, mlsj): adds the attributes in mlsj to mlsi
IsSimilar(Ki, Kj): returns true if two passed primary keys are similar, based on the adopted
similarity measure
begin
// Initialization of ls for the origin data source of si
lssi GetLocalSchema(si)
GetMergeAttributes(lsi): extracts from the local schema lsi the attributes in mlsi
AddMergeAttributes(mlsi, mlsj): adds the attributes in mlsj to mlsi
IsSimilar(Ki, Kj): returns true if two passed primary keys are similar, based on the adopted
similarity measure
begin
// Initialization of ls for the origin data source of si
lssi GetLocalSchema(si)
// Initialization of the comparison set CS
forall the RSi, si /2 RSi do
add RSi to CS
end
// Search for similar items with the comparison set CS
Ksi GetPrimaryKey(si)
forall the csi 2 CS do
Ki GetPrimaryKey(csi)
// Similarity Evaluation
if IsSimilar(Ksi, Ki) then
lsi GetLocalSchema(csi)
Fuse(lssi,lsi)
remove csi
end
end
end
Fuse(lssi,lsi) {
mlsi GetMergeAttributes(lsi)
mlssi GetMergeAttributes(lssi)
AddMergeAttributes(mlssi, mlsi)
}
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

56. UI-Centric Composition of Multi-Device Mashups 0:21
ALGORITHM 1: Data Fusion On Demand
RSi: result sets for the i-th data component
si: the instance selected by the user at runtime
CS: comparison set, including all the instances to be compared with si to identify duplicates
csi: i-th item of CS
GetLocalSchema(csi): returns the local schema of the origin data source of the instance csi
GetPrimaryKey(csi): returns the primary key values of the instance csi
GetMergeAttributes(lsi): extracts from the local schema lsi the attributes in mlsi
AddMergeAttributes(mlsi, mlsj): adds the attributes in mlsj to mlsi
IsSimilar(Ki, Kj): returns true if two passed primary keys are similar, based on the adopted
similarity measure
begin
// Initialization of ls for the origin data source of si
lssi GetLocalSchema(si)
GetMergeAttributes(lsi): extracts from the local schema lsi the attributes in mlsi
AddMergeAttributes(mlsi, mlsj): adds the attributes in mlsj to mlsi
IsSimilar(Ki, Kj): returns true if two passed primary keys are similar, based on the adopted
similarity measure
begin
// Initialization of ls for the origin data source of si
lssi GetLocalSchema(si)
// Initialization of the comparison set CS
forall the RSi, si /2 RSi do
add RSi to CS
end
// Search for similar items with the comparison set CS
Ksi GetPrimaryKey(si)
forall the csi 2 CS do
Ki GetPrimaryKey(csi)
// Similarity Evaluation
if IsSimilar(Ksi, Ki) then
lsi GetLocalSchema(csi)
Fuse(lssi,lsi)
remove csi
end
end
end
Fuse(lssi,lsi) {
mlsi GetMergeAttributes(lsi)
mlssi GetMergeAttributes(lssi)
AddMergeAttributes(mlssi, mlsi)
}
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

57. UI-Centric Composition of Multi-Device Mashups 0:21
ALGORITHM 1: Data Fusion On Demand
RSi: result sets for the i-th data component
si: the instance selected by the user at runtime
CS: comparison set, including all the instances to be compared with si to identify duplicates
csi: i-th item of CS
GetLocalSchema(csi): returns the local schema of the origin data source of the instance csi
GetPrimaryKey(csi): returns the primary key values of the instance csi
GetMergeAttributes(lsi): extracts from the local schema lsi the attributes in mlsi
AddMergeAttributes(mlsi, mlsj): adds the attributes in mlsj to mlsi
IsSimilar(Ki, Kj): returns true if two passed primary keys are similar, based on the adopted
similarity measure
begin
// Initialization of ls for the origin data source of si
lssi GetLocalSchema(si)
GetMergeAttributes(lsi): extracts from the local schema lsi the attributes in mlsi
AddMergeAttributes(mlsi, mlsj): adds the attributes in mlsj to mlsi
IsSimilar(Ki, Kj): returns true if two passed primary keys are similar, based on the adopted
similarity measure
begin
// Initialization of ls for the origin data source of si
lssi GetLocalSchema(si)
// Initialization of the comparison set CS
forall the RSi, si /2 RSi do
add RSi to CS
end
// Search for similar items with the comparison set CS
Ksi GetPrimaryKey(si)
forall the csi 2 CS do
Ki GetPrimaryKey(csi)
// Similarity Evaluation
if IsSimilar(Ksi, Ki) then
lsi GetLocalSchema(csi)
Fuse(lssi,lsi)
remove csi
end
end
end
Fuse(lssi,lsi) {
mlsi GetMergeAttributes(lsi)
mlssi GetMergeAttributes(lssi)
AddMergeAttributes(mlssi, mlsi)
}
UI Mashup
UI Component
Wrapped
Component
VI Component
Coupling
Operation
Event
UI Template
Presentation
Template
1..* 0..*
0..*
0..*
1..* 1..*
1
1
1..*
1..*
- parameter[]
Query
- endPoint
Data Component
Result Set
Viewport
Concrete View
1
1..*
1
1
UI
Sub-Template
Union
SubTemplate
Merge
SubTemplate
Coupling
VisualRenderer
Id
VisualRenderer
VisualRenderer
1 .. *
VI Schema
1..*
1..*
1
1..*

58. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…

59. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…

60. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…
PEUDOM
UI Mashup Dashboard
Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
UI Mashup Engine
Event Handler
Mashup Engine
Ad-hoc
Component
VT-based
Component
VT-based
Component
VT-based
Component
UI
Component
VI
Component

61. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…

62. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Service Manager
Web View
Visual Mapping Manager
Component Manager
Component Repository Composition RepositoryService Repository
Schema Manager

63. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…

64. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Component Recommender
Quality Manager
Quality Broker Similarity Broker
Compatibility
Broker
Association Rules
Manager
Platform Repositories
Component Repository Composition Repository Composition Assistance
Repository
Compatibility
Broker
Similarity
Broker
Quality
Broker
Association Rules
Manager

65. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…

66. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Live Editing
Server
Communication ServerSharing Manager
User/
Gorup
Manager
Versioning
System
Live Editing Client
Communication Client
Client
Server
Editing
Action Queue
Notification
Server
Annotation
Server
Chat
Server
Platform Repositories
Component
Repository
Composition
Repository
Service
Repository
Collaboration
Repository

67. Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
Mobile
Execution Environment
Large Screen Device
Large Screen
Execution Environment
…

68. 6.1. Performance evaluation
Experiment Comparison- Selected- time # of # of fused
# set items [#] items set [#] [ms] comparisons elements
1 25 25 109 625 5
2 50 50 362 2,500 7
3 75 75 799 5,625 7
4 100 100 1,255 10,000 7
5 125 125 2,056 15,625 8
6 150 150 3,032 22,500 9
7 175 175 4,144 30,625 15
8 200 200 5,421 40,000 18
9 225 225 6,804 50,625 18
10 250 225 7,549 56,250 18
11 275 225 8,470 61,875 18
12 300 225 8,861 67,500 18
13 325 225 9,361 72,125 18
14 350 225 10,050 78,750 18
15 375 225 10,999 84,375 20
16 400 225 13,179 90,000 20
Table 6.2: Results of the experiments about performances of data fusion.
cause the user select only one item. As explained above, for the experiment
we are considering the worst case, in which all the items of a service are
selected and compared with all the items of the other services.
In Figure 6.4 we report the chart about the performances of the experiment
on data fusion. It is evident that, up to 6,000 comparisons, the relation-
ship among time and number of comparisons is linear. Finally, to adapt the
experiment to a scenario in which our “on-demand” policy is applied, the
reader should consider as execution time the one corresponding to the num-
ber of items in the comparison set. For example, if we consider a scenario
in which there are 3 services with 300 retrieved elements each, and a user
PEUDOM memory consumption
PEUDOM time
consumption
computation vs
latency and
download times
Data fusion performances

69. • Evaluation through 3 user studies
- Mashup composition paradigm
- Component creation
- Collaboration mechanisms
• Goals
- Demonstrate that end users (whether skilled or not) can
execute tasks and develop mashups
- Compare the behavior of technology expert users and
non-expert users
• Analysis of
- Effectiveness
- Performances (time of execution of tasks)
- Ease of use
- User satisfaction

70. • User sample
• Methodology
- Pre-experiment questionnaire
- Brief platform tutorial
- Experimental tasks with incremental complexity
- Post-experiment questionnaire
• Results
- No significant differences between expert and non expert
users in terms of
• effectiveness
• performances (execution time)
• result of questionnaires (ease of use and user satisfaction)
6.2. User studies
Experiment # of users Ages Expert/Not-expert users
Mashup composition paradigm 35 21-53 13/22
Component creation 36 18-70 17/19
Collaboration mechanisms 11 21-64 5/6
Total 82 18-70 35/47
Table 6.3: Demographic data about the experiments user samples.
and not experts in order to study the technology biases on the usage of our
solution.
6.2.2 Study on the mashup composition paradigm
A first study was conducted to evaluate the UI synchronization paradigm.
Users were asked to add, remove, couple and synchronize components as
described in Chapter 5. For this user study we considered a customiza-
tion of our platform as a dashboard for a specific domain use case [23],
i.e., the sentiment analysis of touristic cities in Europe. This use case was
provided by the Milan Municipality that was interested in monitoring the
city reputation about tourism in Milan with respect to the main cities in

71. • In collaboration with
- University of Bari
- Egnatia (Bari) Archeological Park
• Goals
- Validate our approaches on the filed
- Handle the domain specification of our
approaches
• What we did
- Implementation of execution engines for
large multitouch display and tablet
- Creation of visit paths by guides through
Component Editor
- Use of execution engines to show
contents during the visits on the field
• Domain specific focus conclusions
- Our approaches are general and can be
adopted in different domains
- If a platform is restricted to a well-
defined domain, users must feel
comfortable with the “language” of the
platform

73. • User-centric composition paradigm for EUD of mashups
- Covers the entire lifecycle
- Hides the back-end complexity (WYSIWYG)
- Simplifies the task of information integration
• UI-centric models for resource integration
- Visual Integration model
- Domain Specific Language
• Multi-device deployment of composite resources
• Lightweight integration of resources
- Combination of integrated views of data coming from multiple services
- Publish-subscribe event-driven synchronization
• Collaboration-oriented mechanisms
• Proof of concepts
- Prototype development
• platform for end-user development of mashups
• mobile execution engines
• prototype running on mobile and multi-touch large displays
- Performance tests
- Three user studies and a field study

74. • Based on our experience in service
composition and synchronization
• Ease the process of embedding data and their
visualization in Web and mobile applications
• Methodology to help data providers to
- expose data enriched with visualization metadata
- provide support for end-user configuration of data and
visualizations
- allow easy embedding of W3C Web Components which
request data and display them
• This would help diffuse more the usage of
APIs and the mashup paradigm as
component based applications

76. A. Publications on Journals
A.1. M. Matera, M. Picozzi, C. Cappiello, UI-Centric Composition of Multi-Device Mashups: Principles, Models and Tools, Submitted to ACM Transactions on the Web (TWEB)
A.2. C. Ardito, M. F. Costabile, G. Desolda, M. Matera, A. Piccinno, M. Picozzi, User-Driven Visual Composition of Service-Based Interactive Spaces, JVLC 2013.
A.3. M. Masseroli, M. Picozzi, G. Ghisalberti, Explorative Search of Distributed BioData to Answer Complex Biomedical Questions, BMC Bioinformatics 2013, November 2013.
A.4. M. Matera, M. Picozzi, Mobile mashup: Un paradigma pervasivo e flessibile per l’accesso ai dati, Mondo Digitale, n. 41, Marzo 2012. pp. 1-17.
B. Publications on Congress Proceedings
B.1. C. Ardito, M. F. Costabile, G. Desolda, R. Lanzilotti, M. Matera, A. Piccinno, and M. Picozzi, Personal information spaces in the context of visits to archaeological parks, in
Proceedings of the Italian Conference on Computer-Human Interaction, 16-19 September 2013, Trento, Italy, CHIItaly 2013, ACM, 2013, p. 5.
B.2. M. Picozzi, End User Development of Multidevice and Collaborative Mashups, in proceedings of Italian Conference on Computer-Human Interaction 16-19 September 2013,
Trento, Italy, CHIItaly 2013.
B.3. C. Cappiello, M. Matera, and M. Picozzi, End-user development of mobile mashups, in proceedings of 15th International Conference on Human-Computer Interaction (HCI
International 2013), 21-26 July 2013, Mirage Hotel, Las Vegas, Nevada, USA, pp. 641–650.
B.4. M. Matera, M. Picozzi, M. Pini, and M. Tonazzo, PEUDOM: a mashup platform for the end user development of common information spaces, in Proceedings of the 13th
International Conference on Web Engineering (ICWE 2013), 8-12 July 2013, Aalborg, North Denmark., pp. 494–497.
B.5. C. Ardito, P. Bottoni, M. F. Costabile, G. Desolda, M. Matera, A. Piccinno, and M. Picozzi, Enabling end users to create, annotate and share personal information spaces, in
End-User Development, in proceedings of the 4th International Symposium, IS-EUD 2013, Copenhagen, Denmark, June 10-13, 2013. Volume 7897 of Lecture Notes in
Computer Science., Springer (2013), IS-EUD 2013. pp. 40-55.
B.6. M. Picozzi, N. Verdezoto, M. Pouke, J. Vatjus-Anttila, A. Quigley, Traffic visualization: Applying information visualization techniques to enhance traffic planning activities,
In proceedings of International Conference on Information Visualization Theory and Applications, 21-24 February 2013, Barcelona, Spain, (2013). IVAPP 2013.
B.7. C. Ardito, M. Costabile, G. Desolda, M. Matera, A. Piccinno, and M. Picozzi, Composition of situational interactive spaces by end users: a case for cultural heritage, in
Proceedings of the 7th Nordic Conference on Human-Computer Interaction: Making Sense Through Design, ACM, NordiCHI 2012, pp. 79–88.
B.8. C. Cappiello, M. Matera, M. Picozzi, F. Daniel, and A. Fernandez, Quality-Aware Mashup Composition: Issues, Techniques and Tools, in proceedings of the 8th International
Conference on the Quality of Information and Communications Technology, QUATIC 2012, Lisbon, Portugal, 2-6 September 2012, IEEE Computer Society, (2012). pp. 10-19.
B.9. C. Cappiello, M. Matera, M. Picozzi, A. Caio, and M. T. Guevara, Mobimash: end user development for mobile mashups, in Proceedings of the 21st international conference
companion on World Wide Web, Lyon, France, April 16-20, 2012, ACM, pp. 473–474.
B.10. M. Masseroli, M. Picozzi, and G. Ghisalberti, Ranking-aware integration and explorative search of distributed bio-data, EMBnet. journal, 18 (2012), pp. 71-73.
B.11. P. Cremonesi, M. Picozzi, and M. Matera, A comparison of recommender systems for mashup composition, in proceedings of the Third International Workshop on
Recommendation Systems for Software Engineering (RSSE 2012), IEEE, 2012, pp. 54–58.
B.12. D. Barbagallo, C. Cappiello, C. Francalanci, M. Matera, and M. Picozzi, Informing observers: quality-driven filtering and composition of web 2.0 sources, in Proceedings of
the 2012 Joint EDBT/ICDT Workshops, ACM, 2012, pp. 1–8.
B.13. C. Cappiello, F. Daniel, A. Koschmider, M. Matera, and M. Picozzi, A Quality Model for Mashups, in proceedings of the 11th International Conference on Web Engineering,
ICWE 2011, Paphos, Cyprus, June 20-24, 2011.Volume 6757 of Lecture Notes in Computer Science., Springer (2011), pp. 137-151.
B.14. C. Cappiello, M. Matera, M. Picozzi, G. Sprega, D. Barbagallo, and C. Francalanci, DashMash: a Mashup Environment for End User Development, in proceedings of the 11th
International Conference on Web Engineering, ICWE 2011, Paphos, Cyprus, June 20-24, 2011.Volume 6757 of Lecture Notes in Computer Science., Springer (2011)
B.15. C. Cappiello, F. Daniel, M. Matera, M. Picozzi, and M. Weiss, Enabling end user development through mashups: requirements, abstractions and innovation toolkits, in
proceedings of the Third International Symposium on End-User Development, IS-EUD 2011, Torre Canne (BR), Italy, June 7-10, 2011. Volume 6654 of Lecture Notes in Computer
Science., Springer (2011). pp. 9-24.
B.16. M. Picozzi, M. Rodolfi, C. Cappiello, and M. Matera, Quality-based Mashup Recommendations, in proceedings of 10th International Conference on Web Engineering, ICWE
2010 Workshops, Vienna, Austria, July 2010. Volume 6385 of Lecture Notes in Computer Science., Springer (2010). pp. 360-371.
C. Technical reports
C.1. C. Ardito, M. F. Costabile, G. Desolda, R. Lanzilotti, M. Matera, and M. Picozzi, On the use of personal information spaces for enhancing visits to archaeological parks: a
preliminary study, tech. rep., IVU Lab-technical report, http://ivu.di.uniba.it/papers/2013/IVU 1 2013. pdf, 2013.