Presented at Modellierug 2014, Vienna, Austria. Find my preprint version of the (German) paper at http://is.gd/rtmetamodelfw

1. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
1 This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Real-Time Metamodeling
in the Web Browser
Michael Derntl, Stephan Erdtmann, Petru Nicolaescu,
Ralf Klamma, Matthias Jarke
RWTH Aachen
Lehrstuhl Informatik 5 – Informationssysteme
lastname@dbis.rwth-aachen.de
Modellierung2014.org | 20 Mar 2014
This work has been funded with support from the European Commission. This presentation reflects
the views only of the authors, and the Commission cannot be held responsible for any use which
may be made of the information contained therein.
http://metis-project.org

2. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
2
Motivation
 Conceptual modeling
– Key activity in many areas
– Social, creative process [FK98] – collaborative work [RKV08]
 Typical collaboration: asynchronous
 Availability of near real-time (NRT)
collaborative modeling tools
– On desktop and on the web
– From highly domain-specific tools like Kanban Tool1…
– … to very generic ones like draw.io2
1 http://kanbantool.com
2 http://www.draw.io

3. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
3
Near Real-Time Collaborative Editing
 Synchronous editing independent of the location of the
users
– Propagation of user actions to collaborators
– Responsiveness similar to single-user applications
– Consistency maintenance
 Inconsistencies caused by divergence or causality-
violation [SE98]
 Two approaches for consistency preservation
– Conflict prevention [XZS00]
– Conflict resolution [SE98]
 Architectures
– Centralized architecture (client/server)
– Decentralized architecture (peer-to-peer)

4. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
4
Technology Study: SyncLD
 NRT collaborative editor for models according to IMS
Learning Design specification
 Conflict resolution using Operational Transformation [EG98]
 Web-based, widget-based
 Drawbacks:
- Domain-specific
- Single-widget GUI
- No awareness
- Unclear steps
[NDKl13]

5. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
5
Objectives
 Functional
– Framework for NRT
collaborative modelling
– Meta model based
– Visual modeling
– Awareness
– Structured editing
support
 Non-Functional
– Open source code
– Building on open
protocols
– Runs in the web browser

6. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
6
Related Tools & Frameworks
Platform Domain-
Indepen-
dent
Meta-
Modeling
based
RTC
Editor
RTC
Gener-
ator
Aware
ness
Brow-
ser
App
Open
Sourc
e
MetaEdit+ [TPK07] Smalltalk ✓ ✓ (✓)
ADOxx [FK13] Gecko/C++ ✓ ✓
DiaMeta [Mi07] Java / EMF ✓ ✓ ✓
[GBR12] Java / EMF ✓ ✓ ✓ ✓
Tiger [Eh05] Java / EMF ✓ ✓
AToM3 [LVA04] Python ✓ ✓ ✓
GenGED [BEW04] Java ✓ ✓
SyncLD [NDK13] Web-Based ✓ ✓ ✓
SyncMeta Web-Based ✓ ✓ ✓ ✓ ✓ ✓ ✓

7. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
7
Conceptual (Meta) Modeling
 Model as abstraction of a part of the world
 Consisting of objects and relationships between
objects
 Modeling language specifies
- Abstract and concrete syntax definition
- Semantics definition
 Metamodeling
- Definition of modeling language by (meta-)model
[Ol07]

8. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
8
Meta-Modeling Hierarchy

9. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
9
Real-time collaboration on both modeling layers
Meta-Modeling Framework:
Modeling Process & User Roles

10. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
10

11. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
11
Metamodel (partial)

12. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
12
Generator is special instance of Generic Editor
Uses special Export Widget for Editor Generation
GUI Architecture

13. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
13
Technical Realization
 Communication protocol: XMPP
– Suitable protocol for NRT communication
– Multiple extensions available (publish subscribe, multi-user chat)
– Client and server support (Smack, Strophe, Openfire, ejabberd)
 Open source ROLE SDK based on Apache Shindig
– User management
– Personal and collaborative widget space management
– XMPP based multi-user chat
 Inter-widget communication (IWC) [GVD+11]
– Local IWC based on HTML5 Web Messaging API
– Remote IWC based on XMPP Publish Subscribe XEP
– Strophe.js (XMPP over BOSH and WebSockets)

14. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
14
Generic Editor - Functionality
 Near real-time synchronization
 Awareness
- Activity Pane
- Highlighting of nodes
 User interaction to add nodes / edges
- Palette
- Context menu
 Export of Model as JSON, PNG File
- Custom export widgets

15. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
15
End-User Evaluation
 Goal
- Evaluation of usability and usefulness of Generic Editor
- Obtain feedback for improvement
 Methodology
- Editor instance for i* modeling language [Yu95]
- Evaluation session in groups of two
- Participants could see and talk to each other, but were not
able to see each other‘s screen (Skype-like setting)
- Task: Jointly recreate a given i* model using the editor
- Rating using surveys with seven-point Likert scale items

16. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
16
End-User Evaluation (cont.)
 Participants
- Ten group sessions with 20 participants in total
- Diverse expertise of conceptual modeling and the i*
modeling language (novices as well as experts)
- Regular to frequent usage of graphical editors

17. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
17
Evaluation:
Quantitative Results
 Overall
– Very positive overall rating (M = 5.7; SD = 1.2)
– User interface and usability also good (M = 5.9 and 5.7,
respectively)
– Ratings independent of user experience (r = .32; p = .17)
 User interaction
– For adding nodes resp. edges participants prefer the context
menu (M = 5.9 and 5.7, resp.) over palette (M = 5.3 each)
 Awareness
– Node highlighting (M = 5.7; SD = 1.2) slightly higher than
activity pane (M = 5.5; SD = 1.4)

18. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
18
Evaluation:
Suggested Improvements
 More highlighting of remote changes
 Keyboard shortcuts
 Multiselection of nodes
 Automatic node arrangement
 Drag & drop from palette

19. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
19
Conclusion and Future Work
 Key points
- Browser-based Meta-Modeling Framework
- Generation of RTC Editors for Visual Modeling Languages
 Different types of user interaction
 Awareness
- Pilot case: i* editor; generally positive evaluation
 Future work
- Definition and checking of modeling constraints
- Recommendations during modeling

20. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
20
THANK YOU FOR LISTENING
derntl@dbis.rwth-aachen.de

21. Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
21
References
[BEW04] Bardohl, R.; Ermel, C.; Weinhold, I: GenGED–a visual definition tool for visual modeling environments. In Pfaltz, J. L.; Nagl, M.;
Böhlen, B. (Hrsg.): Applications of Graph Transformations with Industrial Relevance. Springer, Berlin, 2004; p. 413–419.
[Eh05] Ehrig, K. et al.: Generation of visual editors as eclipse plug-ins. In: Proc. 20th IEEE/ACM Int. Conf. on Automated Software
Engineering. ACM, New York, 2005; p. 134–143.
[FK98] Floyd, C.; Klischewski, R.: Modellierung - ein Handgriff zur Wirklichkeit. Zur sozialen Konstruktion und Wirksamkeit von Informatik-
Modellen. In: Pohl, K.; Schürr, A.; Vossen, G. (Hrsg.): Modellierung '98. CEUR-WS.org, 1998.
[FK13] Fill, H.-G.; Karagiannis, D.: On the conceptualisation of modelling methods using the ADOxx meta modelling platform. In: Enterprise
Modelling and Information Systems Architectures, 8(1), 2013.
[GBR12] Gallardo, J.; Bravo, C.; Redondo, M. A.: A model-driven development method for collaborative modeling tools. Journal of Network
and Computer Applications, 35(3), 2012; p. 1086–1105.
[GVD+11] Govaerts, S.; Verbert, K.; Dahrendorf, D.; Ullrich, C.; Schmidt, M.; Werkle, M.; Chatterjee, A.; Nussbaumer, A.; Renzel, D.;
Scheffel, M.; Friedrich, M.; Santos, J. L.; Duval, E.; Law, E.: Towards Responsive Open Learning Environments: The ROLE Interoperability
Framework. In: Proc. EC-TEL 2011. Springer, Berlin, 2011; S. 125-138.
[LVA04] de Lara, J.; Vangheluwe, H.; Alfonseca, M.: Meta-modelling and graph grammars for multi-paradigm modelling in AToM³. Software
and Systems Modeling, 3(3), 2004; p. 194–209.
[Mi07] Minas, M.: Generating meta-model-based freehand editors. Electronic Communi-cations of the EASST, 1, 2007.
[NDK13] Nicolaescu, P.; Derntl, M.; Klamma, R.: Browser-Based Collaborative Modeling in Near Real-Time. In: Proc. IEEE CollaborateCom
2013. IEEE, Los Alamitos, 2013.
[Ol07] Olivé, A.: Conceptual modeling of information systems. Springer, 2007.
[RKV08] Renger, M.; Kolfschoten, G. L.; de Vreede, G.-J.: Challenges in Collaborative Modeling: A Literature Review. Lecture Notes in
Business Information Processing, Volume 10, 2008; p. 61-77.
[SE98] Sun, C.; Ellis, C.: Operational transformation in real-time group editors: issues, algorithms, and achievements. In: Proc. 1998 ACM
Conf. on Computer Supported Cooperative Work. ACM, New York, 1998; p. 59–68.
[TPK07] Tolvanen, J.-P.; Pohjonen, R.; Kelly, S.: Advanced tooling for domain-specific modeling: Metaedit+. In: Sprinkle, J.; Gray, J.; Rossi,
M.; Tolvanen, J.-P. (Hrsg.): 7th OOPSLA Workshop on Domain-Specific Modeling, Finland, 2007.
[XZS00] Xue, L.; Zhang, K.; Sun, C.: Conflict control locking in distributed cooperative graphics editors. In: Proc. 1st Int. Conf. on Web
Information Systems Engineering. IEEE, Los Alamitos, 2000; p. 401–408.