Cogent is a simple design pattern for JavaScript frontend development.

co·gent / adjective
clear, logical, and convincing

One of the primary reasons web app development is challenging is because HTML and CSS are global and not encapsulated. HTML anywhere in the document can be accessed from any code, anywhere. CSS classes can be applied to any content on the page with confusing specificity rules.

I believe that the popularity of React is due to the encapsulation of HTML, CSS, and JavaScript code into the concept of a component, with the JavaScript aspect as the primary face of a component.

Cogent also aims to componentize a web app by unifying HTML, CSS, and JavaScript. Cogent is a pattern and a set of conventions, not a code-based framework. Cogent is simple and prioritizes ease of use but requires greater skill with the underlying browser APIs.

Think of HTML/CSS as the language to describe the view.

However, external code can use the view's API for read operations and adding listeners, but mutation can only be accomplished through the object wrapper API.

Child nodes can only be altered by the component that manages them, which is the closest parent component. A component may allow external code to mutate its inner child nodes by deliberately exposing mutation methods.

class Button {
  dom = document.createElement("button");
  setText(value) {
    this.dom.textContent = value;
  }
}

// avoid; external code changing inner child nodes via the wrapped HTMLElement
new Button().dom.textContent = "Click me";

// good; using the component's api
new Button().setText("Click me");

The top-level component is the application component.

It is the sum of all the individual component states that make up the application at any given time.

A parent can choose to not react to the change, but it should have the opportunity to do so before any child components if it so desires.

This ensures that parent components react to changes before their children.

Think of these objects are OS-level objects.

Prefer to initialize the DOM towards the top of the constructor.

class Button {
  constructor () {
    dom = document.createElement("button");

    ...
  }
}

This technique makes it easy to pass around classes and initialization objects (props).

CHESS complements a component-based architecture.

This technique is ultimately more reliable and future-proof.

It is easier to move content panes into modal screens than vice-versa.

This technique makes it easier to find and modify styles.

This technique makes it easier to design an application that can accommodate multiple screen sizes and form factors.

Styles must be created either in a style tag in each component or a link to a preloaded stylesheet. Parsing an entire stylesheet for every component must have negative performance implications.

A solution is adopted stylesheets. However, it does not work in Safari.

Shadow DOM also precludes parents from changing styling in child components, although this may be a feature rather than a bug.

No children or attributes may be set in the constructor, which is consistent with the behavior of document.createElement(). This would preclude a props sent to the constructor, which is convenient. Workarounds are clunky and feel inelegant.

Also, custom elements require tracking when the component mounts or when properties change, etc. Render becomes indeterminate. Also, custom elements put pressure on developers to reflect properties to attributes to be compliant with the standard.