Home

Anemic Components adhere to five core design principles. When adopted, the resulting components/libraries can be used to:

• visualize rich-data
• perform analytics
• perform statistical analysis

Design Ethos

Our abstractions should allow us to focus on our intent with biases towards simplicity and clarity.

Design Principles

The Design Ethos above translate into design principles for Anemic Components.

Specifically, the components:

• do one thing well
• are designed to be tested
• have a limited API
• use pluggable side-effects
• are styled using CSS (whenever applicable)

Practical Example

Give the image above, we can describe the image as follows:

• 1 group of bars stacked vertically
• 2 groups of ellipses stacked vertically
• ellipses are connected by lines

Based on the ethos described above, the code to generate this image should be simple, clear with the intent well understood.

Using ES6, the code looks like the following:

 container("c4", _ => {
  _.bars(data1, [$group("bars"), $maxHeight(50), $y(50), $yOffset(30), $width(150)])
  _.ellipses(data2, [$group("e1"), $maxDiameter(50), $y(50), $ryOffset(30), $x(150)])
  _.ellipses(data3, [$group("e2"), $maxDiameter(60), $y(55), $ryOffset(80), $x(400)])
  _.connectingLines(data4, [$joinGroupItems(["e1", "e2"]), $group("e3"), $maxStrokeWidth(15)])
  _.onRenderCompleted(() => {
    $moveBelow("e3", "bars")
  })
})

We can easily follow the intent:

• _.bars stacked vertically (with $yOffset)
• _.ellipses stacked vertically (with $yOffset)
• _.connectingLines that join the ellipses (grouped by e1 and e2).

With regards to simplicity and clarity, the code speaks for itself :)

Jump to:

• AnCUI Design
• Quick examples