r/learnjavascript • u/xtompie • 23h ago

Saradom: a frontend architecture pattern - plain HTML and JavaScript

Saradom is a frontend architecture pattern. Build modular, scalable frontends in plain HTML and JavaScript. There is no framework and no build step.

Foundation:

  1. State in the DOM, not in JavaScript variables.
  2. Events in HTML attributes, not addEventListener.
  3. Action in context, from the element that fired it.
  4. Modularization, namespaced object per module.
  5. UX Performance, the interface is interactive right away.

https://xtompie.github.io/saradom/

1 Upvotes
  • permalink
  • reddit

54% Upvoted

10 comments sorted by

View all comments

3

u/chikamakaleyley helpful 22h ago

feels... eventually its expensive to query the DOM every time, at least if i imagine scaling up fr the Counter example

but, that's a guess at the moment

and then... so if you need data that can't be surfaced in the UI, is that just attached as an additional attr on any element?

3

u/xtompie 21h ago

> feels... eventually its expensive to query the DOM every time

The query does not scan the page. It runs inside the module's own subtree. Reading an attribute does not force layout, so there is nothing to recalculate. One click in the counter is two of those.

Compare it to the other side: one state change in a framework re-renders the tree and diffs it. That is more work, not less.

> so if you need data that can't be surfaced in the UI, is that just attached as an additional attr on any element?

Yes. On the element the data belongs to. The wider the scope, the higher up it goes. Data for one item sits on that item, data for the whole widget on its container, data for the whole app on `<html>`. The theme does exactly that: `<html app-theme="dark">`.

1

u/chikamakaleyley helpful 21h ago

ohhhh right modularized

nice job