Presentational

Synopsis

TODO: Synopsis

Principles

• Are concerned with how things look.
• Are isolated, have no dependencies to the rest of the app.
• Aren't responsible for data loading or mutating.
• Receive data and callbacks exclusively via arguments.
• Rarely have their own state - can only be UI state.
• Render as minimal elements as possible.

Example

Presentational components take explicit and direct arguments and display them, as such they don't take object (domain objects) and display properties.

Avatar Component

The example is an avatar component that takes an url to an image as argument and presents it in a circle with a border.

avatar.gjs

<template>
  <style>
    .avatar {
      border-radius: 50%;
      width: 50px;
      box-shadow: inset 0 2px 4px 0 hsla(0, 0, 0, 0.2);
    }
  </style>
  <img src={{@src}} class="avatar" ...attributes>
</template>

Usage

Invoke the component with and pass down explicitely the arguments it needs to render.

References

• @abramov2015
• @eramo2019
• @haz2018
• @kwasniak2018