Collaborative Wireframing for Model-Driven Web Engineering

  • Peter de LangeEmail author
  • Petru Nicolaescu
  • Mario Rosenstengel
  • Ralf Klamma
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 11881)


Today’s Model-Driven Web Engineering (MDWE) approaches automatically generate Web applications from conceptual, domain-specific models. This enhances productivity by simplifying the design process through a higher degree of abstraction. Due to this raised level of abstraction, the collaboration based on conceptual models also opens up new use cases, such as the end user’s tighter involvement into Web development. However, especially in the early design stages of Web applications, common practices for requirement elicitation mostly rely on paper prototypes or wireframes instead of MDWE, created usually in analog settings. The digitization of this process, combined with the benefits of model-driven development, bears a lot of potential for improving MDWE practices. In this contribution, we enhance an existing MDWE approach with wireframing capabilities, realized through real-time synchronization of models, wireframes and code. We present the conceptual considerations of our approach, the realization of the synchronous wireframing tool and the synchronization between wireframe and model. Our evaluation results for collaborative Web development tasks are promising and open the gate towards novel, collaborative and agile MDWE techniques.


Model-Driven Web Engineering Collaborative wireframing Model-to-model synchronization 



The authors would like to thank the German Federal Ministry of Education and Research (BMBF) for their kind support within the project “Personalisierte Kompetenzentwicklung durch skalierbare Mentoringprozesse” (tech4comp) under the project id 16DHB2110.


  1. 1.
    Angelaccio, M.: MetaPage-a data intensive MockupDD for agile web engineering. In: WEBIST, vol. 1, pp. 315–317 (2016)Google Scholar
  2. 2.
    Arnowitz, J., Arent, M., Berger, N.: Effective Prototyping for Software Makers. Elsevier Science, Interactive Technologies (2010)CrossRefGoogle Scholar
  3. 3.
    Brambilla, M., Fraternali, P.: Interaction Flow Modeling Language: Model-Driven UI Engineering of Web and Mobile Apps with IFML. Morgan Kaufmann, Burlington (2014)Google Scholar
  4. 4.
    Ceri, S., Fraternali, P., Bongio, A.: Web modeling language (WebML): a modeling language for designing web sites. Comput. Networks 33(1), 137–157 (2000)CrossRefGoogle Scholar
  5. 5.
    Kent, S.: Model driven engineering. In: Butler, M., Petre, L., Sere, K. (eds.) IFM 2002. LNCS, vol. 2335, pp. 286–298. Springer, Heidelberg (2002). Scholar
  6. 6.
    Koch, N., Kraus, A.: the expressive power of UML-based web engineering. In: Second International Workshop on Web-Oriented Software Technology, vol. 16, pp. 105–119 (2002)Google Scholar
  7. 7.
    Koch, N., Meliá-Beigbeder, S., Moreno-Vergara, N., Pelechano-Ferragud, V., Sánchez-Figueroa, F., Vara-Mesa, J.: Model-driven web engineering. Upgrade Eur. J. Inform. Prof. 2, 40–45 (2008)Google Scholar
  8. 8.
    Kosters, M., van der Heijden, J.: From mechanism to virtue: evaluating nudge theory. Evaluation 21(3), 276–291 (2015)CrossRefGoogle Scholar
  9. 9.
    de Lange, P., Nicolaescu, P., Klamma, R., Jarke, M.: Engineering web applications using real-time collaborative modeling. In: Gutwin, C., Ochoa, S.F., Vassileva, J., Inoue, T. (eds.) CRIWG 2017. LNCS, vol. 10391, pp. 213–228. Springer, Cham (2017). Scholar
  10. 10.
    de Lange, P., Nicolaescu, P., Winkler, T., Klamma, R.: Enhancing model-driven web engineering with collaborative live coding. In: Modellierung 2018, pp. 199–214. Gesellschaft für Informatik eV (2018)Google Scholar
  11. 11.
    Lankhorst, M.: Enterprise Architecture at Work: Modelling Communication and Analysis. Springer, Heidelberg (2009). Scholar
  12. 12.
    Maloney, J., Resnick, M., Rusk, N., Silverman, B., Eastmond, E.: The scratch programming language and environment. ACM Trans. Comput. Educ. 10(4), 16:1–16:15 (2010)CrossRefGoogle Scholar
  13. 13.
    Nicolaescu, P., Jahns, K., Derntl, M., Klamma, R.: Near real-time peer-to-peer shared editing on extensible data types. In: Proceedings of the 19th International Conference on Supporting Group Work, pp. 39–49. ACM (2016)Google Scholar
  14. 14.
    Nicolaescu, P., Rosenstengel, M., Derntl, M., Klamma, R., Jarke, M.: Near real-time collaborative modeling for view-based web information systems engineering. Inf. Syst. 74, 23–39 (2018)CrossRefGoogle Scholar
  15. 15.
    Rivero, J.M., Grigera, J., Rossi, G., Robles Luna, E., Koch, N.: Towards agile model-driven web engineering. In: Nurcan, S. (ed.) CAiSE Forum 2011. LNBIP, vol. 107, pp. 142–155. Springer, Heidelberg (2012). Scholar
  16. 16.
    Rivero, J.M., Rossi, G.: MockupDD: facilitating agile support for model-driven web engineering. In: Sheng, Q.Z., Kjeldskov, J. (eds.) ICWE 2013. LNCS, vol. 8295, pp. 325–329. Springer, Cham (2013). Scholar
  17. 17.
    Rivero, J.M., Rossi, G., Grigera, J., Robles Luna, E., Navarro, A.: From interface mockups to web application models. In: Bouguettaya, A., Hauswirth, M., Liu, L. (eds.) WISE 2011. LNCS, vol. 6997, pp. 257–264. Springer, Heidelberg (2011). Scholar
  18. 18.
    Schwabe, D., Rossi, G.: An object oriented approach to web-based applications design. Theory Pract. Object Syst. 4(4), 207–225 (1998). Special Issue Objects, Databases, and the WWWCrossRefGoogle Scholar

Copyright information

© Springer Nature Switzerland AG 2019

Authors and Affiliations

  1. 1.Chair for Information Systems and DatabasesRWTH Aachen UniversityAachenGermany

Personalised recommendations