< PreviousChapter 8: Example250Figure 8.10: UnP Screen-Shot of two independent instances working in parallel on same dataUser Interface Results251Figure 8.11: UnP Component Tree under run time252Chapter 9ExperienceChapter 9: Experience254Chapter Contents9.1 Business Information Systems ............................................. 2559.1.1 Mission Control (2012) .............................................. 2559.1.2 TimeSheet (2014) .................................................... 2579.1.3 IPW (2014) ............................................................. 2589.1.4 KEZ-PSC (2014) ....................................................... 2619.1.5 MCT (2015) ............................................................ 2619.1.6 TechRADAR (2016) ................................................... 2649.1.7 CampS (2017) ......................................................... 2649.2 Mobile Applications ......................................................... 2679.2.1 JumbleBooth (2010) ................................................. 2679.2.2 Architecture Fundamentals (2013) ................................ 2699.2.3 Insurance Suite, Außenregulierung (2015) ...................... 2699.2.4 Vote (2016) ............................................................ 2719.3 Technical Applications ...................................................... 2739.3.1 CloudTeX (2013) ...................................................... 2739.3.2 WebTV (2016) ......................................................... 2759.3.3 DEXI (2017) ............................................................ 275Business Information Systems2559.1 Business Information SystemsGood judgment comes from experience. Experience comes from bad judgment. — Fred BrooksOver the years 2010 to 2017 numerous industrial Business Information Systems (BIS) were implemented via Custom Software Development (CSD). They are the primary target for the Hierarchical User Interface Component Architecture (HUICA). Multi-ple lessons learned exist and are summarized in this section.9.1.1 Mission Control (2012)Mission Control is an employee mission planning and reporting application, de-veloped in 2012 by msg Applied Technology Research. Its Technology Stack, on the Front-End side, is primarily based on Sencha ExtJS and ComponentJS, and on the Figure 9.1: User Interface of Mission ControlChapter 9: Experience256Back-End side, it is primarily based on Java Spring. The Mission Control UI (see Figure 9.1 on page 255) source code consists of 13 UI Fragments, 58 UI Components and 9,400 Lines of Code. During run time the Component Tree consists of between 60 and 100 instantiated Components.As the first real Business Information System (BIS) for which HUICA was used for, Mission Control was considered groundbreaking. First, as a full-size BIS with dozens of UI Components, it showed that HUICA could scale as expected during run time without any problems.Second, it showed that HUICA can be used independently of the particular “programming model,” because Mission Control was based on the, for Web tech-nologies, rather unusual Sencha ExtJS UI toolkit. While in mostly all HTML5 SPA tech-nology stacks one uses HTML/CSS/JavaScript directly, in Sencha Ext JS one uses just JavaScript and instantiates OOP representatives of the UI Widg-ets. Sencha ExtJS in the background generates the necessary HTML/CSS code for all UI Widgets during run time. Fortunately, as in HUICA all UI View Mask rendering is located in the dedicated View Components and all UI com-munication happens on the Component Tree only, the different “programming model” of Sencha ExtJS caused no trouble for HUICA. The code base of Mission Con-trol still felt like any other HUICA based code base.HUICA allows both regu-lar HTML/CSS/JS and just JS-based programming models.Figure 9.2: User Interface (desktop and mobile variant) of TimeSheetBusiness Information Systems2579.1.2 TimeSheet (2014)TimeSheet is an employee time accounting application, developed by msg Applied Technology Research in 2014. Its Technology Stack, on the Front-End side, is pri-marily based on jQuery and ComponentJS, and on the Back-End side, it is primarily based on SAP NetWeaver and the SAP CATS module.The TimeSheet UI (see Figure 9.2 on page 256 for both desktop and mobile variant) source code consists of 32 UI Fragments, 96 UI Components and 14,000 Lines of Code. During run time, the Component Tree (see Figure 9.3 on page 257 for both the combined desktop and mobile variant) consists of between 80 and 110 instantiated Components.Two lessons learned are known from TimeSheet: First, for the desk-top variant of the UI, the complex spreadsheet widget Slickgrid had to be integrated and wrapped with a Component Triad. As a dozen of functionalities is directly attached to this spreadsheet UI fragment, the underlying Component Triad is very complex, of course. However, it showed that even the in-tegration of complex foreign UI widgets is possible in HUICA.Second, as TimeSheet has to support both desktop and mobile devices, it uses a combination of Responsive Design and alternative Component Sub-Trees to de-HUICA supports the inte-gration even of complex third-party widgets.Figure 9.3: Component Tree (desktop and mobile variant) of TimeSheetChapter 9: Experience258liver two entirely different UIs for small and large browser viewports. TimeSheet even switches between those two UIs dynamically during run time when the browser viewport is resized. With plain Responsive Design such a heavy switch of the UI during run time would be not possible. Thanks to alternative Component Sub-Trees this was easy to achieve.The Component Tree in Figure 9.3 on page 257 is in the state directly after a browser viewport resizing to a small size. One can see the currently active Compo-nent Sub-Tree for the mobile UI on the top right-hand side while the Component Sub-Tree for the desktop UI at the top middle is now de-active. Switching between the desktop and mobile UIs just means to switch states of the two Component Sub-Trees. Responsive Design is used on both desktop and mobile UIs for small adjustments and UI Fragment positioning.TimeSheet proved that with the HUICA it is possible to provide entire-ly different alternative UIs in the same application easily. For this, Component Sub-Trees are used on the macro scope. Responsive Design is used on the micro scope.Besides those two positive lessons learned, also a negative one exists: TimeSheet used plain jQuery for rendering its UI Fragments and this caused rather much “boilerplate” code. For every piece of dynamically generated information in the UI Fragments, at least 3 or 6 Lines of Code had to be written. With declarative Data Binding this nowadays could be reduced to just 1 Line of Code. This might not look very much at the first spot, but multiplied with the many hundreds of individual information in the UI Fragments, this easily adds up to a few thousands of Lines of Code in total. As those Lines of Code also have to be maintained, this old jQuery-only approach is a heavy problem.9.1.3 IPW (2014)IPW (Intranet Präventionswerkzeuge) is a company-wide application for managing dangerous substances in compliance with German law, developed by msg sys-tems in 2014 for a German employers mutual insurance association. Its Technology Stack, on the Front-End side, is primarily based on Twitter Bootstrap and Compo-nentJS, and on the Back-End side, it is primarily based on Java EE.The IPW UI (see Figure 9.4 on page 259) source code consists of 85 UI Frag-ments, 282 UI Components and 26,300 Lines of Code. During run time the Compo-nent Tree (see Figure 9.5 on page 259) consists of between 270 and 360 instanti-ated Components.IPW is the largest Business Information System based on HUICA, both initially (version 1.0 as of 2014) and finally (version 3.0 as of 2017). It proved that HUICA can scale up to many hundred UI Fragments and UI Components without problems. During the development of IPW, work packages for the different UI Fragments were defined, assigned to different team members and developed in parallel. Thanks to the loose coupling of UI Fragments HUICA supports entirely different UIs within the same application thanks to alternative Compo-nent Sub-Trees.HUICA scales well at both development time and run time.Business Information Systems259Figure 9.4: User Interface of IPWFigure 9.5: Component Tree of IPWNext >