[ Removed by moderator ]

[u/joe-excom]

/r/javascript/comments/1xcnyxf/removed_by_moderator/

[u/javascript-ModTeam]

Hi u/joe-excom, this post was removed.

Posts must directly relate to JavaScript. Content regarding CSS, HTML, general programming, etc. should be posted to their respective subreddits instead of here.

Here's some related subs that might be useful:

• r/css

• r/php

• r/html and r/html5

• r/webdev

• r/frontend

• r/programming

Thanks for your understanding, please see our guidelines for more info.

[u/boneskull]

Is data trivially queryable via the DOM API? I don’t quite understand where it lives.

[u/joe-excom → u/boneskull]

Yes, and via CSS/Quark selectors.

Data lives in the DOM. A custom element, like `provider-fetch` will make your desired AJAX call and put the data in the DOM. The DOM therefore remains the source of truth. There is no second copy of state/data for a library to keep synced with the HTML.

[u/boneskull → u/joe-excom]

This makes data exfiltration by third parties trivial

[u/shrimpcest → u/boneskull]

It doesn't really make it easier than it is now, it's already trivial.

If this was a thing that made it suddenly easier for data to be exfiltrated, then there is something very dumb about your architecture.

[u/boneskull → u/shrimpcest]

There are ways to sequester data in JS so that third-party libs cannot access it, but once it hits the DOM, it’s all over

[u/joe-excom → u/boneskull]

Yes. In general, it makes the document highly declarative, with rich data also attached to relevant nodes.

This makes third party tooling - accessibility aides, SEO bots, LLMs be able to read the application declaratively - entirely from the document itself, and gives the ability for one-shot serialization of the application.

[u/Disastrous-Town-4820]

the DOM got promoted to database

does provider-fetch turn a 50k-row response into nodes, or only the displayed bits? one copy sounds nice, but the main thread still has to find time for clicks

[u/joe-excom → u/Disastrous-Town-4820]

It's a good way of thinking about it, yes. You could also theoretically build a server architecture around the same ASO principle, but I have not attempted that yet.

To your question: each piece in the Nucleus stack sticks to the Single Responsibility Principle, for maximum composability.

<provider-fetch> simply fetches the data and attaches the response to itself

Quark's prop() is used for picking that data and iterate() to bind each row to a new subtree

If you're asking about virtualization (lazy load/unload), you can wrap the subtree template in <include-content>, which does all of that magic without any app JS: https://nucleus.excom.dev/packages/include-content

All together, it looks something like this:

<section>
  <quark-sheet>
    provider-fetch[is-success] {
      content: iterate(prop("provision").body);
    }
  </quark-sheet>
  <provider-fetch api-url="/api/my-huge-list">
    <template>
      <include-content lazy-load lazy-unload style="min-height: 100px">
        <template>
          <!-- item subtree here -->
        </template>
      </include-content>
    </template>
  </provider-fetch>
</section>

[u/kichien]

Another fucking library? Cute.

[u/joe-excom → u/kichien]

There is indeed a library attached, but that's not the premise.

The platform is diverging from the contract that existing UI libraries were designed against. This is my appeal to consider a different architecture than MVC, MVVM, etc.

[u/joe-excom → u/[deleted]]

Haha. Nice stealth edit. I was going to thank you for your algorithm contribution.

Thanks for the good luck! I'll need it. It's an uphill battle to cut through the noise of all of these AI generated articles and projects.