Aral Balkan
Very excited about the latest feature/workflow I’m adding to Kitten. I call it… 🥁
✨ Streaming HTML ✨
Implement back-end functionality and stream HTML updates to the client without writing any front-end JavaScript.
Just give your forms names and listen for them in an onConnect() handler you export from your page. Kitten handles everything else – setting up a WebSocket route for you, mapping triggers to events, etc. – thanks to Kitten + htmx magic 🪄
Aral Balkan
PS. This will land in main soon – only just implemented it and need to document it before merging it.
In the meanwhile, you can find out more about Kitten at https://codeberg.org/kitten/app and the Small Web at https://ar.al/2020/08/07/what-is-the-small-web/
Aral Balkan
@nigenet 💕
Nigel Moss 🌻
Aral Balkan
@martijn Well this particular workflow requires forms (as it adds the htmx attributes to forms that it finds). The whole idea is that you get a streaming, event-based declaratiev interface to your DOM instead of handling all that stuff yourself.
That said, you can just use htmx directly to do declarative fetches using HTTP (or your own custom WebSocket stuff). And, of course, you can just use fetch directly if you like. Everything is progressively enhanced on top of plain HTML, CSS, & JS.
Sexybiggetje🐖
@aral is this usable without forms? E.g. for regular content requests over fetch?
Aral Balkan
@martijn Looking forward to seeing them and you’re very welcome :)
💕
Sexybiggetje🐖
@aral i see. Well I still have 2 small web ideas to try. Didn't get around to it because of getting sick. But it's high on my list and I still follow hoping to get to it. Thanks for your work 🩷
Aral Balkan
So the canonical example for any new workflow appears to be a counter button.
Here’s one showing you the Streaming HTML workflow as simply as possible.
Note that the count is actually being persisted in the database (notice I turn the development server off and back on again mid demo).
What you see in the video is all the code there is in the project.
#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #WebSocket #html #css #JavaScript
Aral Balkan
(Note the page, h1, and style tags in the default export – the initially rendered page – are not necessary to showcase the functionality. They’re just presentational. So you can remove those four lines of code from the demo if you like, bringing the line count down to 19.)
:kitten: 💕
Aral Balkan
@nus Not magic… just a little behind the scenes htmx magic along with an automatically created WebSocket route and some simple conventions ;)
✨ :kitten: ✨
nus
@aral I can't be convinced I'm not looking at magic
Aral Balkan
@nus Although I really don’t like the positional parameters in the onConnect() call… would be much nicer if it was an argument object and you could do, e.g.,
export function onConnect ({ page }) {
// …
}
If I do there, though, I’ll likely have to change all the route signatures… is the world ready for:
export default function ({ request, response }) {
// …
}
Been thinking about this today since components do use argument objects but Express routers, etc., use positional arguments…
Aral Balkan
@nus Oh, the pressure :)
(Seriously, though, this is the sort of stuff I fret about. I want it be as internally consistent as possible while at the same time as intuitive as possible for folks with existing knowledge but also easy for folks without to get started… not always the easiest to balance all that.)
nus
@aral *checks number of years between the initial release of Express.js and the present*
I think we're almost ready for {request, response}, but we're so used to just having them in parenthesis without being an object...
Aral Balkan
Right, this is now merged in main.
Please consider the Streaming HTML workflow very experimental for the time being (as all of Kitten is, really, but this more so).
There’s also still scant documentation but that will improve in the coming days. (I’ve added this demo to the readme.)
https://codeberg.org/kitten/app#to-whet-your-appetite
#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #WebSocket #html #css #JavaScript
Aral Balkan
@nus PS. May I quote this in the readme? I feel it would be quite awesome to have a quote from a goat in it ;)
💕 🐐
Aral Balkan
@nus Yay :)
nus
@aral you have my permission :blobgoat:
Aral Balkan
@nus (Thank you) :)
０７６萌ＳＮＳ is a social network, courtesy of ０７６. It runs on GNU social, version 2.0.2-beta0, available under the GNU Affero General Public License.
All ０７６萌ＳＮＳ content and data are available under the Creative Commons Attribution 3.0 license.