Out of order html streaming aka. Declarative Shadow DOM #2588
Replies: 1 comment
-
|
Hey @swistaczek! Here is a simple example in that direction if you want to experiment a bit: import asyncio
import falcon
from falcon.asgi import App, Request, Response
PAGE = """
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Shadow DOM!</title>
<style>
div {display: none;}
div:last-child {font-size: larger; display: inherit;}
</style>
</head>
<body>
<template shadowrootmode="open">
<h1>Falcon Web Framework</h1>
<slot name="slogan">
<div style="font-size: larger">Loading...</div>
</slot>
</template>
"""
TEMPLATE = """
<div slot="slogan">
Unburdening APIs for over {centuries:.02f} x 10<sup>-2</sup> centuries!
</div>
"""
EPILOGUE = """
</body>
</html>
"""
CENTURIES = 12.95
STEPS = 100
class ShadowDOMDemo:
async def _render_page(self):
yield PAGE.encode()
await asyncio.sleep(1.0)
for counter in range(0, STEPS+1):
value = CENTURIES * counter / STEPS
yield TEMPLATE.format(centuries=value).encode()
await asyncio.sleep(1/STEPS)
yield EPILOGUE.encode()
async def on_get(self, req: Request, resp: Response) -> None:
resp.content_type = falcon.MEDIA_HTML
resp.stream = self._render_page()
app = App()
app.add_route('/demo.html', ShadowDOMDemo())If you save this snippet as You can then open http://localhost:8000/demo.html, and see what I hacked together 😈 As said above though, it is probably more common to implement a backing API in Falcon, and talk to that API from a frontend SPA, a mobile app, etc. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hey! Today I discovered something I didn't know about modern web standards - Declarative Shadow DOM, aka out-of-order HTML streaming without JavaScript.
I'm curious if anyone has evaluated that concept against Falcon's async architecture in real-world applications?
What's most awesome is that this is widely supported by all major browsers today. Check out the demo here - https://ooo.lamplightdev.workers.dev/.
https://web.dev/articles/declarative-shadow-dom
https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/
Beta Was this translation helpful? Give feedback.
All reactions