The Mashup Component Description Language

The  Mashup  Component  Descrip3on  Language  

Saeed  Aghaee  and  Cesare  Pautasso    

Faculty  of  Informa3cs  University  of  Lugano  (USI)  

hCp://www.saeed-­‐aghaee.info  hCp://www.pautasso.info    hCp://www.jopera.org    

1  

Web  Mashups  

2  

Amazon  S3  API    

Google  Custom  Search  

Yahoo  Term  Extrac;on   Twi>er  API  

 Google  Maps  

API  

 YouTube  Player  

Flickr  API   Twilio  SMS   eBay  API  

3  

4  

5  

Twi>er  API    

Google  Maps  API  

Twilio  SMS`   eBay  API  

Mashup  Development  

6  

Ideal  

7  

Reality  

8  

9  

 Data  

 Data  

 Logic  

 User  

Interface  

 Logic  

Logic  

 User  

Interface  

Logic    Data  

10  

 REST  

 HTTP  

SOAP  

 JavaScript  

 REST  

REST  

 JavaScript  

HTTP    SOAP  

11  

Ideal  

How  to  deal  with  Heterogeneity?    

12  

Component  Meta-­‐model  

13  

1  

14  

Abstrac3on    Expressive  power    Extensibility  

15  

Abstrac3on    Expressive  power    Extensibility  

16  

Abstrac3on    

Expressive  power    Extensibility  

17  

Abstrac3on    Expressive  power    

Extensibility  

18  

The  Mashup  Component  Descrip3on  Language  (MCDL)  

19  

Technology  dependent    

Technology  independent  

20  

Component  provider  

Library  

Composer  

Publish  

Compose  

Technology  dependent  

Technology  independent  

Execute  Discover  

Mashup  Development  Toolkit  

Execu3on    Engine  

21  

Technology  dependent    

Technology  independent  

Composer  

22  

Technology  dependent    

Composer  

23  

Tasks  

24  

Events  

25  

I/O  Parameters  

26  

TwiCer  APIs  Interface  

Tasks   Input   Output  Search   query   Tweets  

27  

Google  Maps  Interface  

Tasks   Input   Output  ShowMarkers   •  Lat  

•  Lng  -­‐  

GetCoordinates   Address   •  Lat  •  Lng  

Events   Output  OnMapClick   •  Lat  

•  Lng  

28  

Technology  dependent    

Technology  independent  

Mashup  Execu3on    Engine  

29  

Wrapper  Types  

30  

Wrapper  Types  

Category   Wrapper  Types  

Widget   IFrame  

DIV  

Data  Source   Database  

Web  feed  

Service   HTTP/REST  

RPC  

31  

TwiCer  APIs  Wrapper  Type  

Category   Wrapper  Types  

Widget   IFrame  

DIV  

Data  Source   Database  

Web  feed  

Service   HTTP/REST   TwiCer  APIs  

RPC  

32  

Google  Maps  Wrapper  Type  

Category   Wrapper  Types  

Widget   IFrame  

DIV   Google  Maps  

Data  Source   Database  

Web  feed  

Service   HTTP/REST  

RPC  

33  

MCDL  Meta-­‐model  

34  

MCDL  

JavaScript  Object  Nota3on  (JSON)  

{ "Interface": { "name":"", "property":[ {"name":"", "value":"" }],

"task": [ {"name": "", "description":"", "input": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ], "output": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ] }],

"event": [ {"name": "", "description":"", "output": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ] }] },

"service_wrapper": [ {"type":"", "name":"",

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

35  

JSON  Schema   "input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"", "property":[ {"name":"", "value":"" }],

"task": [ {"name": "", "description":"", "input": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ], "output": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ] }],

"event": [ {"name": "", "description":"", "output": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ] }] },

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

"service_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

36  

Component  Meta-­‐model  -name-description

Event

-name-description

Task

-nameWrapper

+name-value-type/MIME-type

ParameterMapper destination (input)

source (output)

1..*

1..*

source (input)destination (output)

1..*

1..*

destination (output)

1..*

Rule

Rule

+input

+output

+output

0..*

0..*0..*

-nameInterface

0..*

1..*

Rule

37  

Technology  Independent  -name-description

Event

-name-description

Task

-nameWrapper

+name-value-type/MIME-type

ParameterMapper destination (input)

source (output)

1..*

1..*

source (input)destination (output)

1..*

1..*

destination (output)

1..*

Rule

Rule

+input

+output

+output

0..*

0..*0..*

-nameInterface

0..*

1..*

Rule

38  

Technology  Independent   "service_wrapper": [ {"type":"", "name":"",

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"", "property":[ {"name":"", "value":"" }],

"task": [ {"name": "", "description":"", "input": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ], "output": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ] }],

"event": [ {"name": "", "description":"", "output": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ] }] },

39  

Technology  Dependent  -name-description

Event

-name-description

Task

-nameWrapper

+name-value-type/MIME-type

ParameterMapper destination (input)

source (output)

1..*

1..*

source (input)destination (output)

1..*

1..*

destination (output)

1..*

Rule

Rule

+input

+output

+output

0..*

0..*0..*

-nameInterface

0..*

1..*

Rule

40  

Technology  Dependent  { "Interface": { "name":"", "property":[ {"name":"", "value":"" }],

"task": [ {"name": "", "description":"", "input": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ], "output": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ] }],

"event": [ {"name": "", "description":"", "output": [ {"name": "", "value": "", "type": "" | "mime-type": ""} ] }] },

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

"service_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

41  

-nameWrapper

+styleWidget

+endPoint+mode

Service+streaming

Data Source

+type+inMessage+methodName+outMessage

RPC+ID+extScript+initScript

DIV+cutFrom+cutTo

IFrame

+scriptFunction

+initEvent+callback

Event0..* 0..*

+call+onEvent()

+show()+hide()+restyle()

T

II

III

I

E

III

II

II

IT

+type+server+port+user+pass+database+script+prepare+interval+data

DatabaseIIIIIIII

O

src

1

I : Input O : Output T: Task E: Event

O

+invoke()+stopStreaming()+onUpdate()

TE

+invoke()+onReceive()

TE

+WSDL+portType

SOAPII

+method+requestHeader+request+WADL+responseHeader +response+status

HTTP/RESTIII

OO

I

+frequencyWeb Feed

src 1

I

I

I

O

TT

functionevent

T

Wrapper  Types  Hierarchy  

42  

MCDL  for  TwiCer  API   "input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

43  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

44  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

45  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

46  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

47  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

48  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

49  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

50  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

51  

"input": [ {"name": "", "value": ""} ] }],

"datasource_wrapper": [ {"type":"", "name":"", "input": [ {"name": "", "value": ""} ] }],

"widget_wrapper": [ {"type":"", name":"",

"input": [ {"name": "", "value": ""} ] }],

"mapper": [ {"source" : ["ref"], "destination" : [{"name":"ref", "correspond":"ref" | "template":"" | "parser":{ "language":"", "query":""}}] }]}}

{ "Interface": { "name":"Twitter APIs", "property":[ {"version":"1" }],

"task": [ {"name": "search", "description":"Allows you to search for tweets based on a keyword", "input": [ {"name": "query", "value": "USI", "type": "String"} ], "output": [ {"name": "tweets", "mime-type": "JSON"} ] }],

},"mapper": [ {"source" : ["search.query"], "destination" : [{"name":"twitter_wrapper.URL", "template":"http://search.twitter.com/search.json?q={search.query}" | }] }]}}

"service_wrapper": [ {"type":"HTTP/REST", "name":"twitter_wrapper", "input": [ {"name": "method", "value": "GET"} ] }],

MCDL  for  TwiCer  API  

52  

Mashup  development  requires  a  highly  abstracted,  expressive,  and  

extensible  component  meta-­‐model  

53  

The  Mashup  Component  Descrip3on  Language  

Saeed  Aghaee  and  Cesare  Pautasso    

Faculty  of  Informa3cs  University  of  Lugano  (USI)  

hCp://www.saeed-­‐aghaee.info  hCp://www.pautasso.info    hCp://www.jopera.org    

54