end-user development of mashups: models, composition paradigms and tools

Matteo Picozzi!http://home.deib.polimi.it/picozzi!{[email protected]}

Dipartimento di Elettronica, Informazione e Bioingegneria

�%��,*�)��-�#&'$�%+�&��*!,'*��&��#*��&$'&*"+"&%��)��" $*��%��&&#*

PhD Course in Information Technology!Doctoral dissertation!March 20th, 2014

http://home.dei.polimi.it/picozzi

mailto:[email protected]?subject=

��*!,'��"%"+"&%��

UI

Web Applications

public APIs

widgetsdata sources

Mashups

�!��$�*!,'*�� "%%"% ��

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

�!��$�*!,'��-&#,+"&%

• 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

�

�%��,*�)��-�#&'$�%+�

�%��,*�)��-�#&'$�%+�

Web 2.0

Culture of participation

�%��,*�)��-�#&'$�%+�

Web 2.0


User involvement

in the creation of contents

�%��,*�)��-�#&'$�%+�

Web 2.0

Active co-creation of new ideas, knowledge and

simple applications


User involvement


�%��,*�)��-�#&'$�%+�

Web 2.0


simple applications


User involvement


Collaboration among users through

web applications

�%��,*�)��-�#&'$�%+�

Web 2.0


simple applications


User involvement


Collaboration among users through

web applications

End-user

Development

��*��)�!�(,�*+"&%

�!��)�*��)�!�(,�*+"&%

How can we enable end users to develop mashups?

��

�,)�')&'&*�#

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

Mashups

�

��%+)"��&$'&*"+"&%�'�)��" $

�" !+.�" !+��-�#&'$�%+�')&��**

• 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

��

��%+)"��&$'&*"+"&%�'�)��" $��

Component editing Mashup composition

Component synchronization Collaboration

��*!,'��&$'&*"+"&%��

��%+)"��&$'&*"+"&%�'�)��" $��



�&$'&%�%+�*/%�!)&%"0�+"&%��

��%+)"��&$'&*"+"&%�'�)��" $��

Mashup composition


Component editing

�&$'&%�%+��"+"% ��

��%+)"��&$'&*"+"&%�'�)��" $��



�&##��&)�+"&%��

�%"!�2�'!��

Resource Selection

Mashup Composition

Use and Maintainance

Dismissal

Mashup idea

Manual development of mashups

�%"!�2�'!��

Resource Selection

Mashup Composition

Use and Maintainance

Dismissal

Mashup idea

Component Editing

Mashup Sharing and co-

creation

Manual development of mashupsTool-assisted

and Registration

Reuse

New

New

in our approach

�* !'%)#��-.,��.%*)-

UI Mashup

UI Component

Wrapped ComponentVI 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..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate

Coupling VisualRenderer

IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�* !'%)#��-.,��.%*)-��

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�* !'%)#��-.,��.%*)-��

UI S

ynch

roni

zati

on

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�* !'%)#��-.,��.%*)-��

UI S

ynch

roni

zati

onV

isua

l Int

egra

tion

��-2)�$,*)%3�.%*)�(* !'�

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

��-2)�$,*)%3�.%*)�(* !'

• UI Componentuic = <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


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

set of events set of operations

��-2)�$,*)%3�.%*)�(* !'



• UI Mashupuim = <UIC, C>

�

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*


set of UI Componentsset of components’ couplings

��-2)�$,*)%3�.%*)�(* !'



• UI Mashupuim = <UIC, C>

• Components’ Couplingcc = <euics ,ouict>

- subscription of a target operation (ouict) to a source event (euics)

�

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*


set of UI Componentsset of components’ couplings

source event target operation

Event Bus

�0!).� ,%0!)�(* !'�"*,��-2)�$,*)%3�.%*)�

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


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

Jin Yu, Boualem Benatallah, Régis Saint-Paul, Fabio Casati, Florian Daniel, Maristella Matera, A framework for rapid integration of presentation components. WWW 2007

��-2)�$,*)%3�.%*)�(* !'��

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

UI S

ynch

roni

zati

on

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�* !'%)#��-.,��.%*)-��

Vis

ual I

nteg

rati

on

�%-/�'��).!#,�.%*)��(* !'�

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�%-/�'��).!#,�.%*)��(* !'

• UI Templateuit = <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


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

set of visual renderers set of template events

ImageTitleSubtitle

�%-/�'��).!#,�.%*)��(* !'



• VI Schemavis = <Q , UIT, M>

- Abstract description (independent from specific visualization layouts)

�

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*


set of queriesset of UI Templates

set of mappings

ImageTitleSubtitle

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

�%-/�'��).!#,�.%*)��(* !'



• VI Schemavis = <Q , UIT, M>

- Abstract description (independent from specific visualization layouts)

• VI Componentvic = <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


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*


set of queriesset of UI Templates

set of mappings

VI Schemaset of events

set of operations

ImageTitleSubtitle

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

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�%-/�'��).!#,�.%*)��(* !'��

Vis

ual I

nteg

rati

on

��-! � �.��%).!#,�.%*)��

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

��-! � �.��%).!#,�.%*)��

Data representation

DataData

Data

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

��-! � �.��%).!#,�.%*)��

ImageTitleSubtitle

UI template item

Data representation

Mapping

DataData

Data

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

��-! � �.��%).!#,�.%*)��

ImageTitleSubtitle

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

DataData

Data

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

��-! � �.��%).!#,�.%*)��

ImageTitleSubtitle

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

DataData

Data

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

The power of

model-driven approaches

�)%*)��) �"/-%*)�*)� !(�) ��

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�)%*)��) �"/-%*)�*)� !(�) ��

uvr uvr uvr mvr mvr

a b c d ef g h i -

uvr uvr uvr mvr mvr mvr

a b j k l mn o p q - r

Reduced result set from source 1


UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�)%*)��) �"/-%*)�*)� !(�) ��

uvr uvr uvr mvr mvr

a b c d ef g h i -



uvr uvr uvr

a b cf g ha b jn o p

UReduced result set from source 1

Reduced result set from source 2Union sub-template instance

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�)%*)��) �"/-%*)�*)� !(�) ��

uvr uvr uvr mvr mvr

a b c d ef g h i -



uvr uvr uvr


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


Fusion on demand result set

Union sub-template instanceF

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�)%*)��) �"/-%*)�*)� !(�) ��

uvr uvr uvr mvr mvr

a b c d ef g h i -



uvr uvr uvr



a b c d e - - -a b j - - k l m

U


a b c d e k l m



Fusion on demand result set

Global schema instance

Union sub-template instanceF

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

�$!� �.��"/-%*)�*)� !(�) ��'#*,%.$(��

UI-Centric Composition of Multi-Device Mashups 0:21

ALGORITHM 1: Data Fusion On DemandRSi: result sets for the i-th data componentsi: the instance selected by the user at runtimeCS: comparison set, including all the instances to be compared with si to identify duplicatescsi: 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 adoptedsimilarity 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 doadd 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) thenlsi GetLocalSchema(csi)Fuse(lssi,lsi)remove csi

endend

end

Fuse(lssi,lsi) {mlsi GetMergeAttributes(lsi)mlssi GetMergeAttributes(lssi)AddMergeAttributes(mlssi,mlsi)

}

responsibility of handling the mashup presentation and capturing its event-drivenlogic. This is needed when persistence and evolution of data and application schemasis required6. However we believe that a lightweight architecture is fundamental toencourage end-user development. Also, a server side logic would require a very hugenumber of requests to the server, due to the “interaction-intensive” nature of the re-sulting applications; overall, especially for the execution on mobile devices, this woulddowngrade performances. Finally, we chose to perform data fusion on the client, andnot to manage integrated data sets materialized on the server (see for example [Boz-zon et al. 2012]), to enable the user to access at any moment fresh data, as they aremade available by service providers.

6A recent extension of our platform to support resource sharing and collaboration among multiple usersadopt a server side logic for storing materialized views of data sets [Matera et al. 2013; Ardito et al. 2013].

ACM Transactions on the Web, Vol. 0, No. 0, Article 0, Publication date: November 2013.

UI-Centric Composition of Multi-Device Mashups 0:21

ALGORITHM 1: Data Fusion On DemandRSi: result sets for the i-th data componentsi: the instance selected by the user at runtimeCS: comparison set, including all the instances to be compared with si to identify duplicatescsi: 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 adoptedsimilarity 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 doadd 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) thenlsi GetLocalSchema(csi)Fuse(lssi,lsi)remove csi

endend

end

Fuse(lssi,lsi) {mlsi GetMergeAttributes(lsi)mlssi GetMergeAttributes(lssi)AddMergeAttributes(mlssi,mlsi)

}

responsibility of handling the mashup presentation and capturing its event-drivenlogic. This is needed when persistence and evolution of data and application schemasis required6. However we believe that a lightweight architecture is fundamental toencourage end-user development. Also, a server side logic would require a very hugenumber of requests to the server, due to the “interaction-intensive” nature of the re-sulting applications; overall, especially for the execution on mobile devices, this woulddowngrade performances. Finally, we chose to perform data fusion on the client, andnot to manage integrated data sets materialized on the server (see for example [Boz-zon et al. 2012]), to enable the user to access at any moment fresh data, as they aremade available by service providers.

6A recent extension of our platform to support resource sharing and collaboration among multiple usersadopt a server side logic for storing materialized views of data sets [Matera et al. 2013; Ardito et al. 2013].

ACM Transactions on the Web, Vol. 0, No. 0, Article 0, Publication date: November 2013.

UI Mashup

UI Component


Coupling

Operation

Event

UI Template


1..* 0..*0..*

0..*

1..* 1..*

1

1

1..*

1..*

- parameter[]

Query

- endPoint

Data Component

Result Set

Viewport

Concrete View

1

1..*

11

UISub-Template

UnionSubTemplate

MergeSubTemplate


IdVisualRenderer

VisualRenderer

1 .. *

VI Schema

1..*

1..*

1

1..*

Other Devices

PEUDOM

UI Mashup Dashboard Component Editor

Composition Assistance Module

Collaboration Module

Platform Repositories

Web Resources

Mobile Device

MobileExecution Environment

Large Screen Device

Large ScreenExecution Environment

…

�!"!,!)�!��,�$%.!�./,!��) �!0�'/�.%*)

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!�

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!�

PEUDOM

UI Mashup Dashboard

Component Editor




UI Mashup Engine

Event Handler

Mashup Engine

Ad-hoc Component

VT-based ComponentVT-based

ComponentVT-based Component

UI Component

VI Component

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!�

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!�

PEUDOM




Service Manager

Web View

Visual Mapping Manager

Component Manager


Component Repository Composition RepositoryService Repository

Schema Manager

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!�

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!��

PEUDOM




Component Recommender

Quality Manager

Quality Broker Similarity Broker CompatibilityBroker

Association Rules Manager


Component Repository Composition Repository Composition Assistance Repository

Compatibility Broker

Similarity Broker

Quality Broker

Association Rules Manager

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!��

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!��

PEUDOM




Live Editing Server

Communication ServerSharing Manager

User/Gorup

Manager

Versioning System

Live Editing Client

Communication ClientClientServer

Editing Action Queue

Notification Server

Annotation Server

Chat Server


Component Repository

Composition Repository

Service Repository

Collaboration Repository

Other Devices

PEUDOM





Web Resources

Mobile Device


Large Screen Device


…

�,�$%.!�./,!��

�'�."*,(�+!,"*,(�)�!�!0�'/�.%*)�

6.1. Performance evaluation

Experiment Comparison- Selected- time # of # of fused# set items [#] items set [#] [ms] comparisons elements1 25 25 109 625 52 50 50 362 2,500 73 75 75 799 5,625 74 100 100 1,255 10,000 75 125 125 2,056 15,625 86 150 150 3,032 22,500 97 175 175 4,144 30,625 158 200 200 5,421 40,000 189 225 225 6,804 50,625 18

10 250 225 7,549 56,250 1811 275 225 8,470 61,875 1812 300 225 8,861 67,500 1813 325 225 9,361 72,125 1814 350 225 10,050 78,750 1815 375 225 10,999 84,375 2016 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 experimentwe are considering the worst case, in which all the items of a service areselected and compared with all the items of the other services.In Figure 6.4 we report the chart about the performances of the experimenton 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 theexperiment to a scenario in which our “on-demand” policy is applied, thereader should consider as execution time the one corresponding to the num-ber of items in the comparison set. For example, if we consider a scenarioin which there are 3 services with 300 retrieved elements each, and a user

Figure 6.4: Time of execution over number of comparisons in data fusion performanceexperiment.

111

PEUDOM memory consumption

PEUDOM time consumption

computation vs latency and

download times

Data fusion performances

�-!,�-./ %!-

• 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

��

�-!,�-./ %!-• 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)

��i

i“thesis” — 2014/3/14 — 14:29 — page 115 — #129 i

i

ii

ii

6.2. User studies

Experiment # of users Ages Expert/Not-expert usersMashup composition paradigm 35 21-53 13/22Component creation 36 18-70 17/19Collaboration mechanisms 11 21-64 5/6Total 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 oursolution.

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 asdescribed 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 wasprovided by the Milan Municipality that was interested in monitoring thecity reputation about tourism in Milan with respect to the main cities inEurope. We analyzed the sentiment of data retrieved from social networks,e.g., Twitter, Trip Advisor and Lonely Planet, and provide analytics visu-alizations to users. Users can select sources and visualizations, and filterdata according to some predefined categories. The application of a filteris thus implemented as a new query to the sentiment analysis data ware-house. This is an example of domain-specific adaptation of the platformbecause, in the domain in which it is adopted, analysts were more confidentto sources, filters and viewers. With our platform, we enable the tourismofficers to create their dashboard by composing and synchronizing infor-mation visualization-based UI Components.The experiment was composed by two tasks, the first was about adding,create couplings and verify the synchronization of components by raisingevents in a simpler scenario while the second was more complex becausewas more articulated and gave less information about the composition pro-cedure in order to leave users free to choose how to proceed.The two tasks were comparable in terms of number of components to beintegrated and composition steps. Task 2, however, required a less trivialdefinition of filters, to sift the involved data sources, and a more articulateddefinition of couplings. Also, while the formulation of Task 1 was moreprocedural (i.e., it explicitly illustrated the required steps), Task 2 just de-scribed the final results to be achieved, without revealing any details about

115

�%!' �-./ 2• 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

��

�*)�'/-%*)-

�*)�'/-%*)-• 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

��

�/./,!�1*,&• 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

��

��"*,�2*/,��..!).%*)��

�/�'%��.%*)-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.

��