BIO Component levels

A BIOOP mapping of the Body Anatomy to the UI Anatomy reveals a hierarchical component structure with different component levels or kinds.

1. The Document Level Component

Document Level Components are analogous to a biological creature, a species, or an individual. The unique configuration of their Organ systems and layouts and their Cell DNA makes each creature unique. The Document Level Component lives at the root of UI and is responsible for creating a unique assembly of Compositions, and make them accessible by a unique identifier, in this case a route.

• Documents contain one top level Layout called DocumentLayout with one or more Compositions inside

2. The Composition Level Component

Composition Level Components have the same function as biological organ systems have in the body. They compose multiple functional parts into top level autonomous functional systems.

A Composition Level Component is an instance of a top level application component which consists of exactly one top level Layout. This Layout can contain other Layouts and Blocks or Compositions.

Semantically, a Composition represents a consistent collection of related Blocks.

• Compositions contain one top level Layout

• Compositions can only live inside a Region

3. The Layout Level Component

Layout Level Components have the same function as biological organ layouts have in the body. They dictate the correct geometrical placement of organs within an organ system.

The Layout Level Components sole responsibility is to correctly place its containing components on the screen by geometrically positioning a collection of one or more Regions. Regions are nothing more than defined boundaries (boxes) for other components (Blocks, Compositions, or other Layouts). Layouts and Regions should be implemented in a way that they facilitate the use of responsive components.

Semantically, a Layout is data agnostic and only exposes a collection of related Regions.

• Layouts contains one or more Regions

• Regions contains Blocks, Compositions or other Layouts

• Regions can only live inside a Layout

• Blocks or Compositions can only live inside a Region

• Layouts can only live inside a Region of another Layout or inside a Document

4. The Block Level Component

Block Level Components have the same function as biological organs have in the body. They closely follow OOP ’s SOLID principles, especially SPR (the Single Responsibility Principle). This means that Block Level Components are specialized components that try to do one thing and do one thing well to service the needs of the application. They work together with other specialized components. They encapsulate implementation details and expose a declarative API.

Semanitically, the Block represents meaningful and related data trough a collection of related Cells.

• Blocks contains Cells or a Layout

Simple Block

A simple Block is a Block that contains only Cells

Complex Block

A Complex Block is a Block that contains a Layout (containing other Blocks or Layouts) so that that Layout can be used as a Block.

5. The Cell Level Component

Cell Level Components have the same function as biological cells have in the body. The cell is the basic structural, functional, and biological unit of all living organisms. A cell is the smallest unit of life. Cells are often called the "building blocks of life". The same as it is in nature, of all Component Levels, the Cell Level Component holds the most intelligence. Cell Level Components are highly intelligent components and have direct access to the DNA.

Semantically, the Cell is the data.

• Cells contains Elements

• Cells can only live inside a Block

Generalization and Specialization

In Molecular Biology, the concept of generalization and specialization is found in the relation between stem cells and the specialized cell types that are used to create tissues and organs.

The Cell component has the function of a stem cell. It functions as an abstract class in OOP in order to create specialized Cell Component Types from which Block Level Components are build.

Element Composition function

The Element Composition function is a function of the Cell that is responsible for rendering a composition of Cell Elements based on a selection of an existing Cell Component Type (in cellComponent DNA) or based on a configuration of Cell DNA (in elementComponent DNA)

Custom Element Composition functions

The Cell should be responsible for rendering its own Element Composition. This composition can be selected (from a preset list of existing Cell Component Types), configured (by configuring Cell DNA) or created dynamically using a custom Element Composition function. This is a Cell injected function that can augment or override the default Element Composition implementation.

6. The Element Level Component

Element Level Components have the same function as biological organelles have inside the cell. An organelle is a specialized cellular part (such as a mitochondrion, chloroplast, or nucleus) that has a specific function within the cell.

Semantically, the Element is a generic raw data constructor or a generic function implementor.

• Cells contains Elements

Elements can be used as stand alone Elements outside a Cell context.

Elements should always be Cell agnostic (if not they should be a sub component of the Cell). Elements inside Cells should receive their data and configuration (props) from the parent Cell.