Mastering Complexity of HTML5 Rich Clients



Monday, October 27, 2014 - 2:00pm to 3:00pm


  • Forum 10 + 11

Implementing User Interfaces (UI) as HTML5 Rich Clients (aka Single-Page Apps, SPA) is a major challenge: those UIs have both a high inherent complexity coming from the usual nesting of User Interface dialogs and an additional accidental complexity caused by the weak structuring support of the underlying JavaScript programming language. Additionally, the UI rendering in HTML5 Rich Clients is performed by various UI toolkits and those are based on different programming models (DOM Enrichment or Technology-abstracting Object Graphs). Finally, true "head-less" testing of such UIs during the Continuous Integration steps is complicated and requires tricks.For mastering these challenges, a modern UI reference architecture was developed which is strictly based on the proven architecture principles Component Orientation, Loose Coupling, Separation of Concerns, Model-View Separation and Hierarchical Decomposition. It allows one to directly base both the static code structure and the dynamic run-time communication on the Hierarchical Decomposition of the UI into a run-time tree of DOM-agnostic stateful composite and widget components. As the architecture has to be supported by a run-time component system, a sophisticated UI-toolkit independent reference implementation exists with ComponentJS ( This presentation provides insights into the reference architecture, the ComponentJS reference implementation and various desktop and mobile applications from practice, based on top of both.

msg systems ag