Live data from Hacker News

Streaming HTML out of order without JavaScript

lamplightdev.com

71–80 of 104 posts

Re: Streaming HTML out of order without JavaScript

#71
post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

xslt is a native template system that has includes: xhtml/xslt still works today (though browsers are stuck on v1). It's a declarative template system with a pretty powerful pattern matching system (xpath). You can also extract fragments from external documents or store them into variables. e.g. will copy all urls from a list inside the 2nd div. Or instead of second div in the body, you could search for a div with an…

I just recently moved my personal homepage to XML + XSLT. Not a pro at it at all though. I did enjoy the process, I like the idea of building the website out of data + templates, but that's not unique to XSLT.

Besides some papercuts / browser bugs like "refreshing the page desyncs the inspector", the main issue I find with it is I don't see how I can modify things dynamically?

By the time JS runs, it's on the resulting HTML DOM, not the XML source, so I can't add elements dynamically respecting the XSLT stylesheet?

Also, XML must be well-formed and have a single root, I can't stream it out on the server piecewise?

With those 2 limitations, I don't see any advantages over any other server-side templating language, it just duplicates work that could happen once in a SSG or at least cached in a CDN, onto every client computer.

Re: Streaming HTML out of order without JavaScript

#72

Earlier quoted context omitted.

This looks exactly like svelte named slots syntax: https://blog.logrocket.com/comprehensive-guide-svelte-compon...

SPA like React, Vue, Angular, Svelt, solid, should be not needed if HTML implemented these features. Or make JSX a standard again such as E4X.

I’m all for standardizing JSX, but I think we should be clear that its only similarity to E4X is syntax. The latter corresponds directly to the browser/HTML/XML DOM, whereas the former corresponds to nothing in particular except the semantics you might give it. I’d also be interested in a revival of E4X as a potential implementation of standardized JSX, but I’d be disappointed (and I think many JSX users would be too) if the standardization coupled the two completely.

Re: Streaming HTML out of order without JavaScript

#73

Earlier quoted context omitted.

I used similar streaming HTML for my RSS reader. When you import subscriptions it can take a while as each feed is fetched so I use streaming HTML to show the progress of each feed as it is imported. This provides meaningful progress updates to the user. However previously the limitation was that the content needed to be more or less in order (you could use some CSS tricks but they were limited). Using this trick I w…

I was just trying that out, I _think_ it just concatenates all the content into the slot, but maybe there's a way to do that?

In that case, just use a selector like `.content-item:not(:last-child)` to hide everything but the last item that was added.

Re: Streaming HTML out of order without JavaScript

#74

Neat, but what would be the intended use case for something like this? I can imagine a scenario where one part of the UI may take extra time to load, so you would defer it to let the other parts load first. Is there another reason I'd want this?

Dealing with loading in a smart way (even small amounts of loading), without extra JS overhead, is the fundamental use case.

For a comparison, basically the entire bajillions of man-hours that have gone into React Server Components [1], and all the many, many complications and footguns inherent in their approach, is trying to solve the same problem.

[1]: https://nextjs.org/docs/app/building-your-application/render...

Re: Streaming HTML out of order without JavaScript

#75

Earlier quoted context omitted.

I can only speak for myself, but the few times I encountered xslt in the past it was in the context of bulky and verbose SOAP services. The syntax felt off to me (and still do). I think this was at the time I was learning jquery and using css selector syntax for finding elements, and the difference between that and xpath was pretty stark. I basically (probably with insufficient knowledge) filed xslt away with vb and…

The syntax felt off to Juniper, too, so they made their own: https://juniper.github.io/libslax/slax-manual.html . Loses homoiconicity to some extent, sure, but outputting XSLT using XSLT never was particularly pleasant.

I can confirm that SLAX is a pleasure to use. Pity it hasn't had adoption outside Juniper to my knowledge.

Re: Streaming HTML out of order without JavaScript

#76
post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

So... iframes that stay in the context of the parent element? You'd need some tight CSP coupling to prevent it from being a security disaster.

Re: Streaming HTML out of order without JavaScript

#77
post #62

Let's say I streamed the first chunk with a little JavaScript, would that JavaScript be able to listen to future chunks coming in? In a real application it is crucial to be able to update your frontend state once new data is ready. First thought is [mutation observer]( https://developer.mozilla.org/en-US/docs/Web/API/MutationObs... ) but that seems too deep into the weeds

Another approach would be to correlate observation with specific custom elements. You can define them in the first chunk, then use their connectedCallback method to observe them as they arrive. The benefit of an approach like this is that the custom element lifecycle APIs are synchronous (which is also the drawback of the approach, and where MutationObserver is more appropriate if that synchrony is a concern).

Re: Streaming HTML out of order without JavaScript

#78
post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

It seems supported in most browsers, not just Chromium and Safari: https://caniuse.com/mdn-html_elements_template_shadowrootmod...

Re: Streaming HTML out of order without JavaScript

#79
post #16
post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

https://www.w3.org/TR/xinclude The W3C specced something out around 20 years ago, but browser devs are allergic to all things XML.

Because it doesn't have to be xml.

I agree partials should be a native feature.

Re: Streaming HTML out of order without JavaScript

#80
post #4

At the core, this seems to be about shadowrootmode=open, a new html feature which already landed in Chromium and Safari: This is and sunny funny renders as: This is funny and sunny So it looks like HTML got a bit of a native template system now. What I have been wanting for decades is a native template system in HTML which supports urls. Similar the the script tag, but which loads html: I always wondered why this was…

Native partials should be awesome
Post reply on HN