Hierarchical User Interface Component Architecture (HUICA)

< Previous102.5.1 Finite State Machine and State Transitions ...................... 422.5.2 Time and Life-Cycle .................................................. 423 Context3.1 Application User Interface .................................................. 453.1.1 Front End of Application ............................................ 453.1.2 Presentation Tier of Deployment .................................. 463.1.3 Client Role of Communication ..................................... 463.2 Rich-Client Architecture ..................................................... 473.2.1 Autonomous User Interface Rendering .......................... 473.2.2 Rich User Interaction ................................................ 483.2.3 Server Oﬀ-Loading .................................................. 483.2.4 Potential Oﬄine Operation ......................................... 483.3 Web Technology Standards ................................................ 493.3.1 HyperText Markup Language (HTML) for Structure ............ 493.3.2 Cascading Style-Sheets (CSS) for Style ........................... 503.3.3 Document Object Model (DOM) as Run-Time Platform ....... 513.3.4 JavaScript/ECMAScript for Behaviour ............................ 513.4 HTML5 Single-Page-Application (SPA) Approach ...................... 533.4.1 Dynamic User Interface Rendering ............................... 533.4.2 Domain-Only Network Communication ......................... 543.4.3 Server-Sent Events ................................................... 543.4.4 Built-Time Artifact Bundling ........................................ 553.4.5 On-The-Fly Loading or On-Device Deployment ................ 56Part III: Requirements, State of the Art and Solution4 Requirements4.1 Requirements Context ...................................................... 614.1.1 Requirements Subject ............................................... 614.1.2 Requirements Signiﬁcance ......................................... 614.2 Requirements Suite .......................................................... 614.2.1 Foundations Requirements ........................................ 614.2.2 Context Requirements .............................................. 624.2.3 Architecture Requirements ......................................... 634.2.4 Development Requirements ....................................... 644.2.5 Engineering Requirements ......................................... 654.3 Requirements Evaluation ................................................... 67114.3.1 Requirements Evaluation Scale .................................... 674.3.2 Requirements Evaluation Matrix .................................. 675 State of the Art5.1 Model-View Separation Patterns .......................................... 715.1.1 Model-View-Controller (MVC) ...................................... 725.1.2 Hierarchical Model-View-Controller (HMVC) .................... 775.1.3 Presentation-Abstraction-Control (PAC) ......................... 835.1.4 Model-View-Adapter (MVA) ........................................ 885.1.5 Model-View-Presenter (MVP) ...................................... 935.1.6 Model-View-View-Model (MVVM) ................................. 975.2 User Interface Utility Patterns ............................................. 1035.2.1 Presentation Model (PM) ........................................... 1035.2.2 Data Binding (DB) .................................................... 1045.2.3 Negligible View (NV) ................................................. 1055.3 Approaches in Practice ...................................................... 1075.3.1 All-In-One Frameworks ............................................. 1075.3.2 Separation-of-Concern-Based Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . 1096 Solution6.1 Hierarchical User Interface Component Architecture (HUICA) ........................................ 1156.2 User Interface Aspects ....................................................... 1166.2.1 Aspect Group: Mask ................................................. 1176.2.2 Aspect Group: Data .................................................. 1186.2.3 Aspect Group: Connectivity ........................................ 1186.2.4 Aspect Group: Dialog ................................................ 1186.3 User Interface Ontology .................................................... 1196.3.1 User Interface Speciﬁcation ........................................ 1196.3.2 User Interface Composition ........................................ 1196.3.3 User Interface Fragment Classiﬁcation ........................... 1216.3.4 User Interface Component Tree ................................... 1216.3.5 User Interface Component Roles .................................. 1216.4 Hierarchical Component Structure ....................................... 1226.4.1 Component Object and Backing Object ......................... 1226.4.2 Component Tree ..................................................... 1236.4.3 Component Path and Component Lookups .................... 1256.5 Hierarchical Component States ........................................... 126126.5.1 Component States ................................................... 1276.5.2 Component Life-Cycle .............................................. 1286.5.3 Component State Transition Invariants .......................... 1296.5.4 Component State Transition Automatism ....................... 1316.5.5 Component State Transition Guards .............................. 1326.5.6 Component Resource Allocation Spooling ...................... 1336.6 Hierarchical Component Communication ............................... 1356.6.1 Fetchable Resource Properties .................................... 1356.6.2 Observable Presentation Models ................................. 1366.6.3 Pluggable User Interface Fragment Sockets ..................... 1386.6.4 Subscribable Information Events .................................. 1416.6.5 Registerable Function Services .................................... 1446.7 Hierarchical Dialog Composition .......................................... 1476.7.1 Logical Decomposition ............................................. 1476.7.2 Physical Recomposition ............................................. 1496.8 Hierarchical Dialog Architecture: Model-View-Controller/Component-Tree (MVC/CT) .................. 1506.8.1 Component Tree: Fragment Correlation ......................... 1516.8.2 Component Roles: View, Model, and Controller ................ 1516.8.3 Component Knowledge: White Box vs. Black Box .............. 1526.8.4 Component Triad Variants: Composite vs. Widget .............. 1536.8.5 MVC/CT Architecture Pattern ...................................... 1566.8.6 MVC/CT Step 1: Component Triad ................................. 1576.8.7 MVC/CT Step 2: Component Layers ............................... 1576.8.8 MVC/CT Step 3: Component Aspects ............................. 1586.8.9 MVC/CT Step 4: Presentation Provisioning ...................... 1616.8.10 MVC/CT Step 5: View Mask Data Binding ........................ 1626.8.11 MVC/CT Step 6: Presentation Logic ............................... 1636.8.12 MVC/CT Step 7: Presentation Actioning .......................... 1636.9 Data Binding of Presentation Model ..................................... 1646.9.1 Data Binding Characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1646.9.2 Simple Approach: Imperative Code ............................... 1656.9.3 Clean Approach: Declarative External Mappings ............... 1656.9.4 Pragmatic Approach: Declarative Inline Expressions ........... 1676.9.5 Model Read/Write Operations and Binding Updates .......... 1686.10 Data Binding of Business Model ........................................... 1686.10.1 Data Binding Characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1686.10.2 Simple Approach: Imperative Code ............................... 169136.10.3 Clean Approach: Declarative External Mappings ............... 1696.10.4 Pragmatic Approach: Declarative Inline Queries ................ 1696.10.5 Model Read/Write Operations and Binding Updates .......... 1706.11 Component Tree Structure Patterns ...................................... 1736.11.1 Alternative View: (V+V)-M .......................................... 1736.11.2 Reusable Widget: V-M ............................................... 1736.11.3 Standalone Controller: C ............................................ 1756.11.4 Headless Pair: M-C ................................................... 1756.11.5 Full Triad: V-M-C ...................................................... 1766.12 Component Tree Behavior Patterns ...................................... 1766.12.1 Controller-Created Descendants .................................. 1766.12.2 Interaction Event Values ............................................ 1766.12.3 Presentation State Logic ............................................ 1776.12.4 Common Ancestor Communication .............................. 1776.12.5 Own Descendant Communication ................................ 1786.13 User Interface Run-Time Monitoring ..................................... 1796.13.1 Real-Time Component Tree Visualization ........................ 1796.13.2 Real-Time Component Tree Tracing ............................... 1816.14 User Interface Run-Time Integration ..................................... 1846.14.1 Rich-Client Integration .............................................. 1846.14.2 Thin-Client Integration .............................................. 185Part IV: Implementation, Example, Experience and Evaluation7 Implementation7.1 Technology Platform ........................................................ 1917.1.1 Platform Run Time ................................................... 1927.1.2 Platform Language .................................................. 1927.1.3 Platform Standard Library .......................................... 1927.2 Technology Stack ............................................................. 1937.2.1 Stack Frameworks .................................................... 1937.2.2 Stack Libraries ........................................................ 1937.2.3 User Interface Aspect Mapping .................................... 1947.3 Technology Environment ................................................... 1957.3.1 GemstoneJS: Run-Time Framework and Libraries .............. 1957.3.2 GemstoneJS: Build-Time Frameworks and Tools ................ 196147.3.3 GemstoneJS: Hello World ........................................... 1978 Example8.1 User Interface Speciﬁcation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2078.1.1 Domain Use Cases ................................................... 2078.1.2 Domain Data Model ................................................. 2098.1.3 Dialog Mock-Up ...................................................... 2098.2 User Interface Architecture ................................................. 2098.2.1 Hierarchical Decomposition ....................................... 2098.2.2 Rich-Client Architecture ............................................ 2098.3 User Interface Implementation ............................................ 2128.3.1 Application Manifest (package.json) ............................. 2128.3.2 Front End: Application Manifest (fe/package.json) ............. 2138.3.3 Front End: Application Conﬁguration (fe/gemstone.yaml) .... 2148.3.4 Front End: Main Procedure (fe/src/main.js) ...................... 2148.3.5 Front End: Common Code (fe/src/common.js) .................. 2168.3.6 Front End: Common Style (fe/src/common.css) ................. 2178.3.7 Front End: Screen Components (fe/src/screen.js) ............... 2188.3.8 Front End: Screen View Mask (fe/src/screen.html) .............. 2208.3.9 Front End: Screen View I18N (fe/src/screen.yaml) .............. 2228.3.10 Front End: Screen View Style (fe/src/screen.css) ................ 2228.3.11 Front End: Units Components: (fe/src/units.js) .................. 2238.3.12 Front End: Units I18N (fe/src/units.yaml) ......................... 2248.3.13 Front End: Unit Components (fe/src/unit.js) ..................... 2258.3.14 Front End: Unit View Mask (fe/src/unit.html) .................... 2278.3.15 Front End: Unit View I18N (fe/src/unit.yaml) ..................... 2288.3.16 Front End: Unit View Style (fe/src/unit.css) ....................... 2288.3.17 Front End: Persons Components: (fe/src/persons.js) ........... 2298.3.18 Front End: Persons I18N (fe/src/persons.yaml) .................. 2308.3.19 Front End: Person Components (fe/src/person.js) .............. 2308.3.20 Front End: Person View Mask (fe/src/person.html) ............. 2338.3.21 Front End: Person View I18N (fe/src/person.yaml) .............. 2348.3.22 Front End: Person View Style (fe/src/person.css) ................ 2348.3.23 Front End: Roster Components (fe/src/roster.js) ................ 2358.3.24 Front End: Roster View Mask (fe/src/roster.html) ................ 2378.3.25 Front End: Roster View I18N (fe/src/roster.yaml) . . . . . . . . . . . . . . . . 2388.3.26 Front End: Roster View Style (fe/src/roster.css) .................. 2388.3.27 Back End: Application Manifest (be/package.json) ............. 239158.3.28 Back End: Application Conﬁguration (be/app.ini) .............. 2408.3.29 Back End: Main Procedure (be/src/main.js) ...................... 2408.3.30 Back End: GraphQL Network API (be/src/api.js) ................. 2418.3.31 Back End: Database Access (be/src/db.js) . . . . . . . . . . . . . . . . . . . . . . . . 2438.4 User Interface Results ....................................................... 2458.4.1 Source-Code Quantitative Summary ............................. 2458.4.2 Development-Time Screen-Shot .................................. 2478.4.3 User Interface Screen-Shots ........................................ 2478.4.4 Component Tree Visualization ..................................... 2479 Experience9.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) ............................................................ 27510 Evaluation10.1 Academic Evaluation ........................................................ 27910.1.1 Upstream Author Evaluation ....................................... 27910.1.2 Downstream Developer Evaluation ............................... 28410.2 Practical Feedback ........................................................... 28610.2.1 Imperative vs. Declarative Data Binding ......................... 28610.2.2 Reduced vs. Full-Blown MVC/CT Triads ........................... 28610.2.3 Explicit vs. Automatic Resource Allocation Spooling .......... 28710.2.4 Code-First vs. Contract-First Approach ........................... 2871610.2.5 Natural vs. Traditional Component Tree Visualization .......... 288Part V: Conclusion and Epilog11 Conclusion11.1 Reached Goals ................................................................ 29311.1.1 Mastered Requirements Suite ..................................... 29311.1.2 Proven Component-Oriented Software Architecture .......... 29311.1.3 Proven Component-Oriented Technology Stack ............... 29311.2 Lessons Learned .............................................................. 29411.2.1 Rapid Evolution of Web Technologies ............................ 29411.2.2 Recurring Reinventions of the Wheel ............................. 29411.2.3 Subtle Component System Details ................................ 29411.2.4 Abstractions and Features over Scalability on the Market .... 29511.2.5 Corresponding Technology Framework .......................... 29511.2.6 Integrating Technology Stack ...................................... 29611.2.7 Best Match for Rich-Client Architecture .......................... 29611.2.8 Architecture Adaptability on Server-Side ........................ 29611.3 Future Prospects .............................................................. 29711.3.1 Reusable Patterns in Practice ...................................... 29711.3.2 Full Business Data Model Synchronization ...................... 29711.3.3 Migration to ECMAScript 2018 World-Order .................... 29711.3.4 Adoption in Other HTML5 SPA Technology Stacks ............. 29811.3.5 Adoption for Other Rich-Client Architecture Platforms ........ 29811.3.6 Adoption for Thin-Client Architecture ............................ 298IPartIntroductionChapter 1IntroductionNext >