How are things interacting?The following UI toolkit agnostic User Interface Component Architecture (UICA) allows you to master the complexity of even large UIs. It gives a clear direction how to hierarchically structure a UI through the use of view, model and controller components. Each (potentially generic and reusable) model component is a stand-alone presentation model for the view(s), each (potentially generic and reusable) view component projects the underlying model information onto the display and each controller component mediates between the business service(s) and their business model and the presentation model. It is essential to use a component system as the supporting framework. ComponentJS is such a component system. Check the diagram and the description below for a consise overview. For more details see the corresponding OOP 2014 presentation Mastering Complexity of HTML5 Rich Clients by Ralf S. Engelschall, author of ComponentJS.
How are things named?A Graphical User Interface (UI) usually consists of a hierarchy of stateful UI Fragments (the high-level graphical parts) which in turn consist of multiple UI elements (the low-level graphical parts). Depending on ther purpose and scope, a UI Fragment is classified into a Composite (and then sub-classified into a Panel or Dialog) and a Widget (and then sub-classified into a Container, Control or Visual). During specification-time the UI is usually represented by a Storyboard, consisting of Wireframes, which correspond to Panel or Dialog Composites. Wireframes in turn are consisting of Wireframe Areas, which usually correspond to Container, Control and Visual Widgets and which are also the starting point of Interactions. Wireframe Areas finally are consisting of Wireframe Elements which represent the UI Elements. Composite and Widget UI Fragments can be implemented with the Model-View-Controller (MVC) architecture pattern. A Composite usually consist of a Controller plus optionally a Model and a View. In contrast, a Widget consists of a Model and a View and optionally a Controller. Finally, both Controller, Model and View are just roles of Components. Check the diagram below for a consise overview. For more details see the corresponding Technical Report EnTR-03:2013.12 User Interface Composition by Ralf S. Engelschall, author of ComponentJS.
What aspects of an User Interface have to be covered by a Technology Stack?Graphical User Interfaces (UI) of Rich Clients have many aspects. All of them have to be covered by a particular Technology Stack. Check the diagram below for a consise overview of the 21 essential aspects of an User Interface and find in each box at the bottom the reference to particular Open Source products which are covering the aspect. On the left are frameworks. On the right are libraries. Bold libraries are mandatory for the aspect covering, all other are just examples of additional ones. All products together form the Technology Stack. In this particular Technology Stack, ComponentJS is responsible for the Presentation Model, Dialog Navigation, Dialog Communication, Dialog Life-Cycle and Dialog Structure only.