No-js version

[toinbis]

Thanks for an interesting experiment!

Would very much love to see identical project using probably https://github.com/lukeed/tempura where multiple workers are used to combine single html response and return it (no client side js framework involved at all). Or maybe you could share your thoughts how you'd approach such task!

Thanks

[dario-piotrowicz]

Hi @toinbis, thanks so very much for the kind words 😃

Not sure if such a project is in the cards, we'll have to see 🙂

I can't speak for the whole team but I think that combining different html responses with multiple workers should be pretty doable, and it is sort of (or very similar to) what we are already doing in the cloud gallery for example if you checkout out this code:

workers-web-experiments/cloud-gallery/main/src/root.tsx

Line 27 in 0b152f2

<FragmentPlaceholder name="header" />

These placeholders indicate where we inject one html stream into another, this is done here:

workers-web-experiments/cloud-gallery/helpers/src/fragmentHelpers.tsx

Lines 3 to 20 in 0b152f2

	export const FragmentPlaceholder = component$(({ name }: { name: string }) => {
	const env = useEnvData<Record<string, unknown>>("env")!;
	const request = useEnvData<Request>("request")!;
	const decoder = new TextDecoder();
	return (
	<SSRStream>
	{async (streamWriter) => {
	const fragment = await fetchFragment(env, name, request);
	const reader = fragment.getReader();
	let fragmentChunk = await reader.read();
	while (!fragmentChunk.done) {
	streamWriter.write(decoder.decode(fragmentChunk.value));
	fragmentChunk = await reader.read();
	}
	}}
	</SSRStream>
	);
	});

By using Qwik's SSRStream utility, but @petebacondarwin actually had an earlier version in which he was doing this placholding + replacing manually and I think it was working quite well.

In out latest demo we also are taking the text from an index.html and putting html streams inside of it via this utility:

workers-web-experiments/productivity-suite/piercing-library/src/stream-utilities.ts

Line 13 in 0b152f2

export function wrapStreamInText(

So I think that you can mix and match different streams in any way you want (tempura doesn't seem to produce streams but these strategy would work anyways since they html will be provided via a stream regardless, alternatively you could do actual html text manipulation as well).

In your example I would probably do it by having a single gateway worker which would manage and proxy all the requests to the various "fragment" workers.

Sorry I got a bit chatty and non specific, I hope you get the gist of what I was trying to say 😄

---

But regardless on the above, I also think that we should be trying to split html/app generation across multiple workers only when it does provide some value.

I am not familiar with tempura but it does look to me to be very lightweight and fast. Also not something that you'd use for huge applications? (sorry if I'm totally wrong on this one 😅) so I am actually wondering to under what circumstances it would be beneficial to split its html generation work across multiple workers.

When you use workers with service bindings the latency between different workers should be almost non existent so I don't think that splitting things across multiple workers would actually add delays but what I think it does add is overhead in the complexity and management of the code, that's why what I'm trying to say is that I would think of splitting things across multiple workers only when that split would definitely provide benefits because otherwise it could just not be worth to go for the more complex system.

I think you can argue that what I just said is also applicable to our demos and that is true I think, but there we are implementing proof of concepts using more heavy frameworks which on a larger scale can be more resource hungry (so in the demo the splits of workers can not be that beneficial because everything is anyways very small and fast, but it is showing how it could be beneficial)

---

@toinbis I hope any of what I said makes sense, please let me know what you think 🙂