Oncodash frontend documentation¶
Architecture¶
Open Web Components¶
Oncodash makes a heavy use of reusable custom elements for its Graphical User Interface (GUI). Those “widgets” are implemented following an open standard, to allow for an easier composition of widgets within “views”, and better integration with third parties.
Web components 1 uses three main concepts:
- Custom elements
Javascript APIs allowing to define our own widgets.
- Shadow DOM
Javascript APIs for inserting a part of the Document Ojbect Model (DOM) that is rendered separately from the main document, allowing to keep the implementation details hidden from the main templates.
- HTML templates
A separate HTML DOM tree that is displayed at runtime, on demand.
Using this approach, one can design interactive graphical widgets that can be inserted in any view by just using a named HTML tag, allowing to share them across various frontends.
Lit Component¶
Oncodash use the Lit library to implement its web components. Lit encapsulate most of the complexity of creating new widgets and allows to assemble self-contained widgets from smaller units. Lit can be programmed with Typescript, which brings decorator and types, for a better programming ergonomics.
Lit comes as a layer on top of web components, and abstract its templates inside
the litElement() class, from which all widgets should inherit.
Figure 1 shows widgets composition and data flows.
Fig. 1 The application is built as a composition of Lit widgets. Any widget can make independent calls to the backend, through the API. Composed widgets can update the data held by sub-widgets, and should raise events every time they are updated (by new data from the backend or after an interaction with the user).¶
The preferred composition architecture in Oncodash is to use composition of classes, using Lit’s reactive controllers instead of mixins, unless necessary. See Lit’s documentation for more details.
Main modules¶
Notes and References
- 1
For more details, see the Web Components page on the MDN.