DEV Community

Discussion on: Resumable JavaScript with Qwik

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Nice write up.

How does Qwick compare to htmx they sound like they are similar?

Happy coding

Collapse
 
ryansolid profile image
Ryan Carniato

HTMX is a mechanism to piecewise server render. Where Qwik is a way to piecewise hydrate. The difference is that once in the browser Qwik doesn't go back to the server for things that don't need to go back to the server. So something like HTMX scales perfectly in that it just needs a small runtime and then everything runs on the server as needed. Click a button, replace part of the view. Click it again and go to the server and replace it again. You never need any more JavaScript.

Qwik on the other hand request some JavaScript when you click that button. And that JavaScript will render the new content in the browser instead of going in the server. And when you click the button again, well it already has the code so it updates immediately.

Basically the main difference in premise is that client rendering tends to be faster than server rendering when you already have JavaScript in the browser. Qwik focuses on how to take an already server rendered page and load the JavaScript as needed. HTMX is always going back to the server even when it otherwise wouldn't need to.

Now that being said in an ideal world Qwik would use HTMX approach for big changes like routing. When you need to swap out 80% of the page then lets go render on the server, as more than likely we needed to load new data etc... But for the micro-interactions keep them fast and performant in the browser.

The more subtle difference is when you consider the way you author. Now I'm sure someone could extend HTMX page and add some client side interaction and JS on top and also get the sort of best of both worlds scenario I'm talking about. However with Qwik you just build the whole app like it s a declarative stateful app like the way you would with React and this just happens. In our hybrid HTMX example we'd be using a combination of hand crafted JavaScript and mechanical directives that HTMX provides. This means for a very different sort of developer experience.