Recently, Web 2.0 has brought a storm on web application development. In particular, mashups have greatly enhanced user creativity across the web, allowing end-users to rapidly combine information from diverse sources, and integrate them into \new" goal-oriented applications. In the meantime, widgets (also built withWeb 2.0 technology) have also gained a lot of momentum. Indeed, they have become ever more present in our every day lives, even appearing as first class players in our operating systems (e.g., Mac OS X and Windows 7). In this paper we present Mashlight: a lightweight framework for creating and executing mashups that combines these two worlds. Indeed, it provides users with a simple means to create "process-like" mashups using "widget-like" Web 2.0 applications. Even users that have no technical know-how can string together building blocks (taken from an extensible library) to define the application they need. The framework is implemented using common Web technology, meaning our mashups can be run from dierent kinds of devices, in a lightweight fashion without the overhead of a complex application server. The paper presents the main concepts behind Mashlight blocks and Mashlight processes, and demonstrate our prototype on a concrete example.

1. POLITECNICO DI MILANO
Dipartimento di Elettronica e Informazione
DEEPSE Group
MASHLIGHT:
A
LIGHTWEIGHTMASHUPFRAME
WORKFOREVERYONE
M. Albinola, M. Carcano,
L. Baresi, S.Guinea
2nd Workshop on Mashups, EnterpriseMashups
and LightweightComposition on the Web

2. 2
Mashups in a nutshell
• Reuse and integrationofcomponents
▫ Lower design and developmentcosts
▫ Lowertime-to-market
• Software as a Service (SaaS)
▫ Simple and lightweightmodel
▫ Universallyaccessible (through a browser)
▫ No needtoinstall
• Do-it-yourself (DIY)
▫ Anyone can beanauthor
▫ On–the-flydevelopment

3. 3
Mashlightgoals
Qualitydimensions:
▫ Flexibility
 Suppportforallthree “natures”
(Data, Logic and Presentation)
▫ Usability
 Abstractionlevelthatanykindofuser can understand
(End Users and Developers)
▫ Lightweight
 Can bedeployedtodifferentkindsofdevices
(Android/iPhone)

4. 4
Mashlight: the Idea
Starting Point:
Mashups are createdthrough the process-
likedispositionoflogicactivities
Maincharacteristics:
• Single activities are Web 2.0 applications
▫ Mac OS XDashboard, Vista sidebar, etc.
• Processlanguageisextremelysimple
▫ Blocksdefineabstractionlevel
• Show oneactivity at a time
▫ Provideintrinsicrollback

5. 5
The Model: MashlightBlocks
Independentfunctionalunitwithclear goal
▫ Es: Weather service, calculator, yellow pages,
Remote Service Invocation
• Parameters input
Block Block
output
entry connection
• Links Block
Block
outlink
outlink2
outlink1
outlink1

6. 6
Real-worldblocks…
• Widgetlike Web 2.0 applications
• Modifiedversionsof Google Widgets
▫ Supportfor I/O parameters
▫ SupportforinteractionwithMashlightEngine

7. 7
The Model: MashlightProcesses
• Graphrepresentationof the process
▫ Activationorder (Process Flow)
▫ Data dependencies (Data Flow)
Process Flow Execution Flows Data Flow
A
A A
A
B
B D
D
B D
C E
C E
C E
E
• High levelofabstraction
▫ No explicitconditional branching or looping

8. 8
The Model: AdvancedAspects
Execution flow
• Complex Data A B C
Assignment A
B
street
city
address.city
address.street
C
• Data with Multiple
Cardinality A A A
address[1].stree address[1].city
city address[2].cit
t street address[*].city
y
B B B
• Prioritized data A B
A
assignments address[2].street address[1].city
address[1].city
city[*]
address.street address.city
B
C

9. 9
The Model: AdvancedAspects
• Undooperation
▫ Goes back to the beginningof the
previouslycompleted block
Process Flow
Evolutionof the execution flow
A A A
A
D B D
B D
E C
C E
1 2 3

10. 10
Mashlight: architecture
• Fourmainmodules
Runtime
Engine
Blocks Library
Block
Mashup Mashup
Builder Process
Block Builder

11. 11
RuntimeEngine
Control toolbar
Map
Mashup area

12. 12
Example-NightPlan
Userwantstoorganize a night out:
restaurant + cinema
Mashlightblocks:
▫ PagineGialle
 Italian Yellow Pages
▫ Google Maps
 Visualizationof interest point
▫ MovieTickets
 Buy tickets online
▫ Google Maps Navigator
 Mapdrivinginstructions
DEMO

13. 13
Process Flow Data Flow
what: ristorante
where: Milano
streetName: piazza leonardo false
searchQuery autoQuery
A - PagineGialle
A - Pagine gialle
out
resultItem.coordinates
resultItem.coordinates
address coordinates
resultItem.city
B - Google Maps cinema
B - Google Maps
resultItem.address
out
false
searchQuery autoQuery
C - PagineGialle
C - Pagine gialle
out
resultItem.name resultItem.coordinates
address coordinates
D - Google Maps
B - Google Maps
out Matteo
CinemaName accountUsername
E - MovieTickets
E - MovieTickets
out
resultItem.coordinates
steps[0] travelMode
from to
F - Google Maps
F - Google Maps
Navigator
Navigator
city: Milano
out
address: via Golgi, 40

14. 14
Future Work
• EnrichlibraryofMashlightblocks
▫ Specificblocksforspecificdomains
• Block Builder
▫ Eclipsepluginforsemi-automatic block creation
▫ WADL-generatedMashlightblocks
• Mashup Builder
▫ Generalpurposeprocess design environment
▫ Domain-
specificabstractionsthatuseMashlightasbackend
• Supportfor mobile devices
▫ Processstarts on PC and continues on Android/iPhone

15. 15
Example - Prototype
Developerwantstoprototype service
interactions
Mashlightblocks:
▫ SOAP Client
 Service invocationthrough SOAP
▫ Selector
 Selectorcomponentsimilartoforeach
in programminglanguages
▫ Choose
 Chooseanoutlinkbased on
conditionparameter

16. 16
Process flow Data flow
http://www. getList
methodName parameter
wsdlUrl
s
A - SoapClient
A - SoapClient
ok
soapResponseObjects
soapResponseXml
itemIndex itemList
0
B - Selector
B – Selector
end
loop selectedItemIndex
nextItemIndex
item
parameters[0
getList methodName
]
wsdlUrl
http://www.
C - SoapClient
C - SoapClient
ok
soapResponseXml soapResponseObjects[0]
condition
D - Choose
D – Choose
false
true
getList parameter
wsdlUrl methodName
s
http://www.
E - SoapClient
E - SoapClient
ok
soapResponseXml soapResponseObjects
methodName parameters[1]
wsdlUrl
getList
parameters[0]
F - SoapClient
F - SoapClient
http://www.
ok
soapResponseObjects
soapResponseXml