A Methodology and Tool Support for Widget-based Web Application Development

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

http://dbis.rwth-aachen.de/cms/research/MiCIS


http://creativecommons.org/licenses/by-sa/3.0/





Prof. Dr. M. Jarke

I5-NiKl-0615-2

Responsive Open

Community Information

Systems

Community Visualization

and Simulation

Community Analytics

Community Support

Web

An

alytics

Web

En

gin

eeri

ng

Advanced Community

Information Systems (ACIS)

Requirements

Engineering







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)







Prof. Dr. M. Jarke

I5-NiKl-0615-4

Agenda

Motivation & background

Requirements

Widgetizing methodology

Evaluation

Conclusions and outlook







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.







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







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







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]







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







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







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







Prof. Dr. M. Jarke

I5-NiKl-0615-13

RESTful Micro-service Architecture

Componentization of Services and Resources

Instance of a widgetized architecture







Prof. Dr. M. Jarke

I5-NiKl-0615-14

+ overview of existing widgets and their dependencies

Widgetizing Prototype







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







Prof. Dr. M. Jarke

I5-NiKl-0615-16

Implementation Step

Usability Requirements in Widgetizing

Critical usability points:







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







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







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





Software

A Methodology and Tool Support for Widget-based Web Application Development