Web applications have overcome traditional desktop applications especially in collaborative settings. However, the bulk of Web applications still follow the "single user on a single device" computing model. Therefore, we created the DireWolf framework for rich Web applications with distributed user interfaces (DUIs) over a federation of heterogeneous commodity devices supporting modern Web browsers such as laptops, smart phones and tablet computers. The DUIs are based on widget technology coupled with cross-platform inter-widget communication and seamless session mobility. Inter-widget communication technologies connect the widgets and enable real-time collaborative applications as well as runtime migration in our framework. We show that the DireWolf framework facilitates the use case of collaborative semantic video annotation. For a single user it provides more flexible control over different parts of an application by enabling the simultaneous use of smart phones, tablets and computers. The work presented opens the way for creating distributed Web applications which can access device specific functionalities such as multi-touch, text input, etc. in a federated and usable manner. DireWolf: http://dbis.rwth-aachen.de/cms/projects/the-xmpp-experience/direwolf/ Presented at ICWE 2013: http://icwe2013.webengineering.org/

1. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-1 This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
DireWolf:
Distributing and Migrating User Interfaces
for Widget-based Web Applications
Dejan Kovachev, Dominik Renzel,
Petru Nicolaescu & Ralf Klamma
RWTH Aachen University
Advanced Community Information Systems (ACIS)
{lastname}@dbis.rwth-aachen.de

2. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-2
Responsive
Open
Community
Information
Systems
Community
Visualization
and
Simulation
Community
Analytics
Community
Support
WebAnalytics
WebEngineering
Advanced Community
Information Systems (ACIS)
Requirements
Engineering

3. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-3
Agenda
 Introduction
 Related work
 Requirements analysis
 System design and implementation
 Evaluation
 Conclusions and outlook

4. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-4
Motivation
Single-deviceUIMulti-devicedistributedUI
Smartphones:
on-site video capture, geo-
tagging on maps and video
annotation
Laptops and PCs:
text editing
Tablets:
video players with
multi-touch interaction
Limited space
and interaction
possibilities
Lack of tools &
methodologies
for Web-based
DUIs
Trend to using
multiple
personal
devices

5. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-5
Key Contributions
Framework for distributing widget-based Web interfaces on a
federation of multiple managed devices
Support for extended multi-modal real-time interactions
Portable continuous state-consistent and adaptive
session migration
Implementation for modern (mobile) Web browsers
DireWolf - Distributing and Migrating User Interfaces for
Widget-based Web Applications

6. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-6
Related Work
Pebles
[Myers 01]
HTTP DUI
[Vanderp
elven ’05]
P2P DUIs
[Melchoir
‘09]
Roam
[Chu ‘04]
MarcoFlow
[Daniel ‘10]
DireWolf
App. Type desktop Web desktop desktop Web Web
DUI def. fixed schema user N/A fixed user/fixed
Control central central all peers all peers central all peers
Distr. time app. start run time run time run time deployment run time
Adaptive -- ++ ++ + + ++
Continuity - N/A - ++ N/A ++
Co-work + + - - - ++ ++
User mgt. N/A N/A N/A N/A + +
Device mgt. + N/A N/A N/A N/A ++
App. State + + N/A + ++ ++

7. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-7
Distributing UI in
Widget-based Web Applications
 Widget – reusable minimal
service interfaces
 Widget space – container for widget
orchestration, collaboration,
customization
 Widget-based application
Typical single-device widget Web application
DUI widget
Web
application
with DireWolf

8. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-8
Migration Requirements
 Migration of app. components across devices
 Cooperation between app. components
 Management of
– device ownership
– device features
and availability
– app. state
– widget state

9. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-9
Prototype
Web application (composed of widgets)
Widget (collaborative web
component)
EU FP7 ROLE Project
http://role-sandbox.eu/Space (shared by multiple users)

10. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-10
Implementation Specifics
 Extension of ROLE SDK – an open source widget container based on
Apache Shindig
– User management extension
– Personal and collaborative widget space management
– Secure authentication and authorization with OpenID and OAuth
– XMPP-based multi-user chat
 Inter-widget communication (IWC)

11. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-11
widget
active
initiate migration
DUI
responder
DUI manager
the target
init migration
change
widget
location
DUI manager
the source
init migration
change widget
location
perform
migration perform migration
DUI client DUI client
prepare
migration
states
is DUI widget
collect
state
set widget state
DUI migration
display widget
update meta-UI
connect to DUI
record
widget state
app. state
finish migration
finish migration
prepare removal
on removal
done
remove
widget
update
meta-UI
Initiate migration
Save widget state
Update widget state
Create/remove widget
Change widget location
Widget
Migration

12. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-12
Evaluation
 Migration of widgets across
various devices
– In a WLAN network
– Desktop ↔ iPad
– Simple migration M:362ms; SD:48.9ms
– Continuous migration M:1305ms; SD:222.6ms
– Widget-rendering takes more time
than migration
 Limitations
– Widget-based Web applications are
less common
– Dependency on a central server

13. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-KRNK-0713-13
Conclusions and Outlook
 DireWolf – a framework to facilitate user interactions on a federation of
multiple managed devices
 Widget-based approach to encapsulate UI and
application functionalities
 Distribution and migration of widgets with little overhead
Future work
 Use WebRTC for browser to browser communication
 Support and evaluate multi-device multi-user collaboration
 Integrate DireWolf within a larger open-source project, e.g. Apache
Rave (ROLE IWC already under review)
 Further elaborate DireWolf in the EU FP7 Learning Layers Project