Slides of the 15th International Conference for Web Engineering (ICWE15). How to widgetize applications for achieving collaborative mashups and near real-time features

1. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-1 This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
A Methodology and Tool Support for
Widget-based Web Application Development
Petru Nicolaescu and Ralf Klamma
RWTH Aachen University
Advanced Community Information Systems (ACIS)
{nicolaescu,klamma}@dbis.rwth-aachen.de

2. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-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-NiKl-0615-3
Widgetizing Methodology
 Initial feedback collected from the widget developer community
on Usability, Architecture and Collaboration (beginning 2014)
 Empirical studies & laboratory experiments conducted to
compare widget applications and traditional applications
 Methodology principles & prototype constructed
correspondingly (February – July 2014)
 Evaluated using widget developers (August – September 2014)
 Collaborative editor for real-time modeling and community
application generation (ongoing)

4. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-4
Agenda
 Motivation & background
 Requirements
 Widgetizing methodology
 Evaluation
 Conclusions and outlook

5. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-5
Context
 Communities of Practice (CoPs)
– Continuously elicit requirements
– Develop/evolve/change the community software
landscape (e.g. for an informal learning practice)
 Community information systems (CIS)
– Developer & community end user support
– Near real-time collaboration
– Sound approaches/support for developers (e.g. easy design,
prototyping) for CIS tools
– User centric development
– Heterogeneity given by community type, devices, usage, etc.

6. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-6
Paradigm Shift in the Web:
From Server-Side to Client-Side
Web
Requirements
• Scalable
• Customizable
• Reusable
• Collaborative
• Near realtime
• …
Infrastructure
(P2P, Cloud)
(Micro) Services
(REST)
Frontends
Server-side Architecture / Components Client-side
Architectural choices
Methodologies
User Guidance
Rapid Prototyping
Abstraction/Modeling
Collaborative editing

7. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-7
Methodological Support for
Engineering Collaborative Web Apps
 Methodology for turning existing Web applications into real-time
collaborative Web-applications
 Examples used as “pilot study”: semantic video annotation, modeling
SeViAnno 1.0
Single-user & Non-collaborative
SeViAnno 2.0 (widget-based)
Multi-user & Collaborative
widgetizing

8. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-8
Related Work
Mashup
Advisor
[EIA*08]
PLE
Dimensions
[PSB*09]
Merging
PLEs
[CGA*11]
Widget Telecom.
[WuKr10]
Business Process
Personalization
Widgets
[LBC10]
Widgetizing
Methodology
IWC
Multi-user
+ (semantic
matcher, single
user)
- + (SOA
Integration,
cross-browser)
+ only for end-user level,
single user
+ (event modeling)
Collaboration - mentions
potential
- (only
communication,
sync)
- + (global events)
Guideline (recommend-
dations)
+ (mapping of
dimensions)
- + (steps of
identification)
- + (step-by-step guideline)
Feedback - - - (increased
reusability)
- + (CI, feedback platform)
Redesign - (considerable) merging 0 - + (widgetizing)
General + (repository
manager)
+ (valid for all
PLEs)
- + (general IWC
framework)
(only business process) + (many possible cases)
Prototype + (advisor tool) - - + (widget
implementation)
+ (widget aggregator) + (assisting redesign tool)
 Model Driven Engineering: “Separation of concerns” [ScKo06]:
– Frontend & backend layer model, content and navigation model
– Examples:
– OOHDM [ScRo98], WebML [CFBo00], UWE [KoKr02]

9. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-9
Widgetizing Methodology
 Initial feedback collected from the widget developer community
on Usability, Architecture and Collaboration
 Empirical studies & laboratory experiments conducted to
compare widget applications and traditional applications
 Methodology principles & prototype constructed
correspondingly
 Evaluated using widget developers

10. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-11
Widgetizing Methodology: Example
 Identification of widgets based on HTML5 Elements
 E.g. Micro-service for annotating an object in SeViAnno1.0

11. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-12
Application Model
 Space is the living place where widgets reside
 Space -conceptual component for providing shared functionality
– IWC / NRT Updates
– User management
– Device distribution
– Shared editing / synchronization capabilities
– State preservation

12. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-13
RESTful Micro-service Architecture
Componentization of Services and Resources
 Instance of a widgetized architecture

13. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-14
 + overview of existing widgets and their dependencies
Widgetizing Prototype

14. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-15
ROLE & LAS2peer
 ROLE Interoperability Framework
– Realization of a PLE as Web widget space
– Login functionality / (frontend-)user management
– Basic awareness support (“Who is member/online”)
– Supports inter-widget communication
 LAS2peer
– Node within community infrastructure
– Peer-to-Peer functionality
– RESTful service access
– Strong community feature support
– User management, group support, agent to agent messaging
– Perfect for Microservice approach
15

15. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-16
Implementation Step
Usability Requirements in Widgetizing
 Critical usability points:

16. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-17
Feedback Cycle
Improving Widget Applications
 Use of feedback platforms (Requirements Bazaar)
– Continuous improvement
– Adopt constant changes and requirements
– Integration with the developers' workspace
– Community-awareness, custom prioritizing of needs
– Participatory design

17. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-18
Evaluation
 2-steps evaluation (19 online + 9 f2f with developers)
 Modeling, automating and code generation useful
+ limitations: compatibility (PL), security, NRT collaboration

18. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
I5-NiKl-0615-19
Conclusions and Outlook
 Methodology for widgetizing applications
 Oriented towards developers and end-users
 Guide for application (re)engineering
 Community support functions during widgetizing
– Nudges, automatic scraping of content
 Integration with the Yjs framework
 Use collaborative modeling to support the process
– Integrate with SyncMeta NRT modeling framework
Future Work