Saradom

Frontend architecture pattern

Build modular, scalable frontends in plain HTML and JavaScript.
There is no framework and no build step.

<div counter-space>
  <output counter-value>0</output>
  <button onclick="Counter.Inc(this)">+1</button>
</div>

<script>
const Counter = (() => {
  const Inc = (ctx) => {
    const el = ctx.closest('[counter-space]').querySelector('[counter-value]');
    el.textContent = +el.textContent + 1;
  };
  return { Inc };
})();
</script>

Foundation

1 DOM State

State is stored in the DOM. State is not stored in JavaScript variables.

2 Event attributes

Events are set in HTML attributes. Events are not dynamically bound with addEventListener.

3 Action in context

Every event has a current element. That element sets the space where the action runs.

4 Modularization

A module is an object. The private parts stay inside. The public functions are what the markup calls. The module name is the prefix for its attributes.

5 UX Performance

The interface works as soon as the page loads. It does not wait for a JavaScript init like DOMContentLoaded.

Next: Introduction →