webtransport VS Alpine.js

WebTransport is now enabled by default and will be going to release with 114. As the original Explainer notes, it enables multiple use-cases that are hard or impossible to handle without it, especially for Gaming and live streaming. It covers cases that are problematic for alternative mechanisms, such as WebSockets. Built on top of HTTP3 (HTTP2 support will be coming later). The current implementation in Firefox is passing 505 out of 565 Web-Platform Tests.

WebTransport is still an emerging technology. As of November 2022, WebTransport is a draft specification with W3C, and there’s always a chance that aspects related to how it works may change.

Sort of. The browser will re-use the connection if you have a bunch of resources in the HTML. When rendering it sees that it needs 2 images and 3 javascript files from the same server, so it pipelines all of those. But for requests initiated from javascript, you're going to get a new connection for each one unless you're using a library that implements the long-polling hack. SocketIO can use the long-polling hack as a fallback if websockets is not supported. HTTP/2 (formerly SPDY) gets part of the way to replacing websockets, but it's not a synchronous link. Only the client can send messages to the server and the server can only respond to those message (with websockets, either side can send messages once the connection is open). FWIW, less than 50% of websites use HTTP/2. HTTP/3's webtransport looks like it could replace websockets, but it also looks like it'll live along side websockets.

If it's streaming data like dashboard statistics the new WebTransport API might be a much better base: https://github.com/w3c/webtransport/blob/main/explainer.md

Are you guys looking into the Web Transport protocol for the future? Right now you have to tunnel the websocket connections over http2 and it will probably be the same for http3 afaik.

I know there is this work in progress (https://w3c.github.io/webtransport/) and websockets are probably fine for a long time but sooner or later (unless there is an update to websockets) it will probably be faster to just do normal http requests and listen on server sent events.

What are your thoughts for Liveview for the future? Will it forever stay on websockets or would you be open to change the underlying technology if / when new stuff becomes available?

The W3C draft is here: https://github.com/w3c/webtransport

It's taken nearly 10 years for QUIC to be refined and adopted in the wild and we're basically there. There's even a new browser API in the works called WebTransport.

tl;dr using WebRTC just for realtime client<->server data sucks, but WebTransport[1] is coming soon to serve that exact usecase with an easy API

WebRTC has data channels, which are currently the only way to achieve unreliable and unordered real-time communication (UDP-style) between the browser and other browsers or a server. This is pretty essential for any networked application where latency is critical, like voice and video and fast-paced multiplayer games.

As other commenters have noted, it's a royal pain in the ass to set up WebRTC if all you want is UDP-style communication between a server and browser, since you need to wrangle half a dozen other protocols in the process.

However! A new API, WebTransport[1], is actively being developed that will offer a WebSockets-like (read: super simple to set up) API for UDP-style communication. I am extremely excited about it and its potential for real-time browser-based multiplayer games (which I'm working on).

https://github.com/w3c/webtransport

Alpine.js for reactive frontend

✨ In recent months, I have been developing web projects using GOTTHA stack: Go + Templ + Tailwind CSS + htmx + Alpine.js. As soon as I'm ready to talk about all the subtleties and pitfalls, I'll post it on my social networks.

> But honestly, torn towards htmx but undecided.

We are in the middle of migrating from our monster react application into server rendered pages (with jinja2). The velocity at which we are able to ship and the reduction of complexity has been great so far.

Managing client side state for simple things like (is the dropdown open/closed), listening to keyboard events and such can be done with something like alpine-js [1] without all the baggage that something like react brings.

It appears this is already the trend with JS frameworks too - with server side rendering being the new norm.

[1] https://alpinejs.dev/

Sure, you can use any number of JS-avoidance libraries. I'm a fan of Turbo, and there's also htmx, Unpoly, Alpine, hyperscript, swup, barba.js, and probably others.

Direct DOM, but with a library. Specifically AlpineJS since it follows Vue closely in design practices allowing me to scale into a full web application if necessary (basically swapping to Vue takes minimal work). The Morph plugin is specifically what I like using.

If you want more details on the initial setup I encourage you to take a look at the Part I that covers more of the initial implementation. For this portion, I added Prisma as an ORM, a frontend style library called Tachyons, and AlpineJS to handle any client-side interactions. I did this to avoid needing to add a client-side bundler to the build and instead just rely on plain old module imports to compose the frontend. This is now the default for Rails and it is quite nice to not need any additional build tools for the client.

- [swallow-pywebview](https://github.com/rangwea/swallow-pywebview)： Base on [pywebview](https://pywebview.flowrl.com/) using Python，the frontend base on [alpinejs](https://alpinejs.dev/) and [tailwindcss](https://tailwindcss.com/)。

If you’ve followed our other tutorials, you might be familiar with Alpine.js. It’s a lightweight JavaScript library that allows you to add interactivity to your site without writing a single line of JavaScript. It’s incredibly easy to use, and we’ll show you how to make the animation trigger when the user scrolls to it.

The approach is not new, essentially a variation of Knockout, Alpine, and similar "JS-in-HTML" approaches.