Streaming HTML out of order without JavaScript • Hacker News Board

Re: Streaming HTML out of order without JavaScript

#61

Post by ndriscoll » Fri, Mar 01, 2024, 5:16 PM UTC

spankalee wrote: post #59

mg wrote: 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…

Firefox supports declarative shadow DOM too now! There's a long-standing WHATWG feature request open for client-side includes here: https://github.com/whatwg/html/issues/2791 And several userland custom element implementation, like https://www.npmjs.com/package//html-include-element One of the cool things that you can do with client-side includes and shadow DOM is render the included HTML into a shadow root that has…

> This lets you do things like have the main page be the pre-page content and the included HTML be a heavily cached site-wide shell, and then another per-user include with personalized HTML - all cached appropriately.

If you can do your includes at page load time, you've been able to do this for 25 years with xslt; it's been built into the browser almost since the beginning of the web!

I've played around with doing exactly that: include a `/myinfo.xml` document that has information about your user, and then the rest of the page template just grabs `$myinfo/user/@name` or whatever wherever it needs. The neat thing is it has graceful degradation by default: if the request fails, then your include will be empty and you can treat it as a logged out page. So you can e.g. display the username and logout button in the top right if logged in, or a login button if not. You can also e.g. include a CSRF token in your info document and plop that into any forms in your page by just doing `value="{$myinfo/csrf-token}"` or whatever.

Re: Streaming HTML out of order without JavaScript

#62

Post by msoad » Fri, Mar 01, 2024, 5:31 PM UTC

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

Re: Streaming HTML out of order without JavaScript

#63

Post by AirMax98 » Fri, Mar 01, 2024, 5:53 PM UTC

msoad wrote: 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

I'd assume that the only reason one would need to know if chunks were incoming is to indicate a loading state in disparate parts of your webpage, e.g. chunk B has some widget that indicates chunk A is loading. In this case, you can probably work off the assumption that loading is the default initialization state, and use JS to communicate to the disparate parts of your page once on chunk A load. There may be something different that you're thinking about here though.

Re: Streaming HTML out of order without JavaScript

#64

Post by netghost » Fri, Mar 01, 2024, 5:54 PM UTC

kevincox wrote: post #47

danielvaughn wrote: post #46

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?

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?

Re: Streaming HTML out of order without JavaScript

#65

Post by netghost » Fri, Mar 01, 2024, 5:56 PM UTC

Alifatisk wrote: post #29

The site loads pretty slowly for me [1], and when they site has fully loaded the list has already been completed, there is no streaming from what I can see. Is Firefox the reason here? 1. https://check-host.net/check-report/16234f41keed

Firefox just added support for declarative shadow dom, so that might be it if you're not on the latest version.

Alternatively I could imagine some kind of proxy between you and the site buffering things up.

Re: Streaming HTML out of order without JavaScript

#66

Post by troupo » Fri, Mar 01, 2024, 6:01 PM UTC

spankalee wrote: post #60

troupo wrote: post #23

Earlier quoted context omitted.

In the end it was only Firefox who implemented HTML Imports, and Google has gone mad and pushed everything in to Javascript.

That is not what happened at all. Firefox never shipped HTML Imports.

Well I'll be! In my mind I had this clear picture of Firefox implementing it.

It correct, it was only Chrome: https://caniuse.com/?search=html%20import

Re: Streaming HTML out of order without JavaScript

#67

Post by gtroja » Fri, Mar 01, 2024, 6:09 PM UTC

gtroja wrote: post #58

ghusbands wrote: post #22

Earlier quoted context omitted.

The Javascript code in the article is server-side and not essential - it's just one way to take advantage of open shadowrootnodes and it could be written in PHP or anything else. It's showing how you can output your HTML in a very different order, with arbitrary delays, and still get the page layout you expect.

Javascript is being used to stream the HTML. the title is "Streaming HTML out of order without JavaScript"

if only it was "Consuming streamed HTML out of order without JavaScript"...

Re: Streaming HTML out of order without JavaScript

#68

Post by anonymoushn » Fri, Mar 01, 2024, 6:14 PM UTC

boxed wrote: post #33

anonymoushn wrote: post #25

Earlier quoted context omitted.

Let's come back to this once we've stopped writing software that is 90-99.9% waste (in round trips and in cycles).

I hear people complain about this a lot. But people who write software that is that efficient are 90-99% wasting their precious time on Earth.

My bad, I finally realized it's better to spend much more time as long as it belongs to other people.

Re: Streaming HTML out of order without JavaScript

#69

Post by mananaysiempre » Fri, Mar 01, 2024, 6:59 PM UTC

Pwntheon wrote: post #56

ndriscoll wrote: post #52

Earlier quoted context omitted.

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 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.

Re: Streaming HTML out of order without JavaScript

#70

Post by h43z » Fri, Mar 01, 2024, 8:06 PM UTC

If I add multiple slots with the same name it shows all of them.

    
      
        s1
        s2
        s3
      
    
    
    
      setTimeout(_=> t.innerHTML += `three`, 1000)
      setTimeout(_=> t.innerHTML += `one`, 2000)
      setTimeout(_=> t.innerHTML += `two`, 3000)
      setTimeout(_=> t.innerHTML += `ONE!!`, 4000)

I guess there is no way to replace a slot, again and again?