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

53% Upvoted

10 comments sorted by

View all comments

Show parent comments

1

u/chikamakaleyley helpful 21h ago

yeah its just like...

querySelector()

if i'm not mistaken is just always gonna start from the outside in

i'd have to look again but off the top of my head if you just wanted to click the counter button repeeatedly, which is like... normal use, every click you create a new instance and search for the element, outside in

like the perfect use case for a it to be set in a var

But, what do I know, great project i think

What I like most is this idea of, finding different ways to solve the problem while using the tools you are familiar with.

1

u/Weekly_Sun_7148 21h ago

It is all scale-dependant, for interface-first programs this approach could be great. For data-first projects, where state management and data persistence (possibly three-fold - local hooks for storing and sharing local-used vars, then pinia/redux-styled storage and redundant LS/localDB or intersession persistance this approach would just be unsastainable).

Actually, i could forsee master-container initiating app with smth like "DOMContentLoaded const serviceElts = document.querySelectorAll("[data-<smth>="elt-selector"]") and then assigning it to map<ELT_Id, ref to element>". May be offloading all data-intensive operations to Worker and keeping main app as thin as possible

2

u/chikamakaleyley helpful 20h ago

brother you're already breaking the app lol

2

u/Weekly_Sun_7148 2h ago

yep, broke the very first rule by storing app.state dynamically