HierarchicalUser InterfaceComponentArchitectureDissertationfor the scienti c degree ofDoctor rerum naturalium(Dr. rer. nat.)Dipl.-Inf. Univ.Ralf S. EngelschallHierarchicalUser InterfaceComponentArchitectureDissertationfor the scienti c degree ofDoctor rerum naturalium(Dr. rer. nat.)Dipl.-Inf. Univ.Ralf S. Engelschall4Advisor:Prof. Dr. Alexander Knapp (Universität Augsburg)Assessors:Prof. Dr. Alexander Knapp (Universität Augsburg)Prof. Dr. Bernhard Bauer (Universität Augsburg)Submission:2018-08-14 (version 1.0.0)Defense:2018-12-11Copyright:© 2013-2018 Ralf S. Engelschall <http://engelschall.com/>License:Creative Commons Attribution-NoDerivatives 4.0 International(CC BY-ND 4.0) <https://creativecommons.org/licenses/by-nd/4.0/>Manufacturer:BoD – Books on Demand, NorderstedtPublisher:BoD – Books on Demand, NorderstedtISBN:978-3-7481-3956-0URLs:HUICA.org ArchitectureDissertation.comBook Version:1.0.1 (2018-12-12): final printBook History:1.0.0 (2018-08-08): submission print 0.9.2 (2018-08-07): submission pre-flight 0.9.1 (2018-08-05): final advisor review 0.9.0 (2018-07-30): pre-print5For the pride of my wife Daniela andour three children Noah, Jasmin and Oliver67AbstractControlling complexity is the essence of computer programming. — Brian KernighanUser Interfaces (UI) of applications, since about 2010, are usually implemented by dedicated frontend programs, following a Rich Client architecture and based on the Web technologies HTML, CSS and JavaScript. These frontends are known as HTML5 Single-Page-Apps (SPA) and are stand-alone programs which fully autonomously render and drive the entire UI of the application — including all dialog mask ren-derings, dialog interactions, and dialog transitions. They connect over the network to one or more backends for bare domain data communication only.The advantages of this UI approach are the possibility for pleasant visualiza-tions, rich interactions, and high responsiveness. As a consequence, these UIs can provide excellent User Experience (UX) and hence are forcefully requested by users in both the consumer and enterprise markets. When combined with Responsive Design layouts and particular run-time environments, those UIs can equally well and without any changes run on both desktop, tablet and smartphone devices.Since over twenty years Web technologies still progress at an extremely high invention rate. Hence, this UI approach also has its price: its great flexibility and power come with both an inherent high overall implementation complexity and the burden of having to target a continuously changing technology stack. This situ-ation is harmless for small UIs, consisting of just a handful of dialogs and having to last for just about one or two years. However, it becomes a significant hurdle for large UIs, consisting of a few hundred dialogs and having to last for five or more years. This is especially the case for the complex UIs of industrial Business Informa-tion Systems.Software Engineering experience dictates that to survive in such a revolving technology world, instead of paying attention to the continual coming and go-ing of particular technology products, we have to rely on a common fundamental architecture of well-proven basic concepts and supporting methods. This disserta-tion delivers such a solution for UIs on both the scientific and technological side.The solution on the scientific side is the Hierarchical User Interface Component Architecture (HUICA), based on the important architecture principle Separation of Concerns (SoC), the derived idea of Hierarchical Composition, the new architecture pattern Model-View-Controller/Component-Tree (MVC/CT), the new concept of Com-ponent Tree State Transitions and the new concept of Component Tree Communica-tion through the new mechanism UI Fragment Sockets, and the known mechanisms Presentation Model, Events, Services and Interception Hooks.The solution on the technological side is the Gemstone technology stack, pri-marily based on the new structuring and orchestrating framework ComponentJS and the integrated foreign view mask rendering and data binding library VueJS.8AcknowledgementsIf I have seen further, it is by standing on the shoulders of Giants. — Isaac NewtonThis dissertation was only possible because I was given the great privilege to fol-low my personal research interests. Thanks to the kindness and support on this, provided by my advisor Prof. Dr. Alexander Knapp at Universität Augsburg and the Software Engineering Elite Graduate Program. Also thanks to my additional assessor Prof. Dr. Bernhard Bauer at Universität Augsburg for his efforts.Many essential answers to my central questions raised from multiple master thesis projects I advised [Grewenig 2014] [Aredlean 2014] [Vaas 2014] [Rummel 2015] [Gerstberger 2015]. Great thanks to my students Stefanie Grewenig, Cristian-Viktor Ardelean, Christian Vaas, Johannes Rummel and Constantin Gerstberger from the Software Engineering Elite Graduate Program for their patience with me and my de-mands.Thanks for the detailed feedback on this dissertation to my close peer reviewers Jochen Hörtreiter and Linda Zeman from msg Applied Technology Research. Thanks also to Prof. Dr. Ernst Denert and Mark Lubkowitz for feedback on this dissertation.Many thanks also to my colleagues from the Center of Competence Web Tech-nologies at msg Applied Technology Research for their long-lasting patience and continuous practical feedback on HUICA, ComponentJS [Engelschall 2009a], Gem-stone [Engelschall 2016b], and GraphQL-IO [Engelschall 2017b]. Your experiences in large industrial projects with HUICA, ComponentJS, Gemstone and GraphQL-IO were absolutely essential to me. Most notably, major credit goes to Jochen Hör-treiter and Linda Zeman for continuously supporting my entire HUICA movement for many years and the many conceptual and technical improvement suggestions from practice.The initial inspiration for my work on HUICA came from my former time at sd&m Research (later Capgemini sd&m Research) and the Quasar Client project [Martens 2004] [Rath 2008] [Brusdeylins & Rath 2009]. Special thanks mainly to my former colleague Dr. Martin Haft, one of the fathers of Quasar Client. Your work initially triggered and motivated my more in-depth investigations into user interface com-ponent architectures.Finally, thanks to my wife Daniela C. Engelschall and my three children Noah S. Engelschall, Jasmin L. Engelschall and Oliver R. Engelschall for their endless patience during my doctorate project. Moreover, thanks to my parents Doris G. Engelschall and Diethard J. Engelschall (†) for always keeping faith with me.9ContentsPart I: Introduction1 Introduction1.1 Motivation for Doctorate ................................................... 211.1.1 Rich-Client Era ........................................................ 211.1.2 HTML5 Single-Page-App (SPA) Approach ........................ 221.1.3 Library and Framework Landscape ............................... 231.1.4 Mastering Complexity, Scalability and Integration ............. 231.1.5 Foundational User Interface Architecture ........................ 241.2 Contributions of Doctorate ................................................. 251.2.1 Scientific Contributions ............................................. 251.2.2 Technological Contributions ....................................... 261.3 Structural Overview of Dissertation ...................................... 281.4 Typographical Conventions of Dissertation ............................ 30Part II: Foundations and Context2 Foundations2.1 User Interface ................................................................. 352.1.1 Mask, Style, and Data ................................................ 352.1.2 Controls, Interactions, and Events ................................. 362.2 User Interface Dialog ........................................................ 372.2.1 Bounded Domain Context ......................................... 372.2.2 Hierarchical Composition and User Interface Fragments ..... 372.3 Object-Oriented Component .............................................. 382.3.1 Development-Time Class and Run-Time Objects ............... 382.3.2 Structuring and Mastering Complexity .......................... 392.3.3 Separation of Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392.3.4 Knowledge Encapsulation and Information Hiding ............ 392.3.5 Loose Coupling and Strong Cohesion ............................ 392.3.6 Application Programming Interface (API) ........................ 402.4 Data Model .................................................................... 412.4.1 Abstraction and Data Structure ................................... 412.4.2 Type Definition ....................................................... 412.5 Component Life-Cycle ....................................................... 42Next >