Hacker News Reader

Comment by simonbarker87 | Hacker News Reader

One of the happiest days of coding in the last 10 years for me happened in September last year when I added htmx to an internal self serve web app I develop for our company. With the addition of maybe 5 htmx attributes I was able to delete about 500 lines of client side JS.

The app is now chock full of htmx interactions and has very little client side JS for the size of the app and it’s a joy to work on.

Without htmx I would not be able to turn around features as quickly as I do for the wider team so thank you, thank you, thank you.

I’ve been in web dev for 20 years and this feels like what we should have made all along.

The one area I would like to see some development is the file upload experience, I’ve had to do something a bit weird to get htmx and dropzone playing nice.

View on HN

You deleted 500 lines of JS and added 44KB of (minified) HTMX. Better use HTMZ, which is only 166 bytes (sic!) and provides most of the interactivity: https://leanrada.com/htmz/

The problem is not the download size. The problem is the amount of code to maintain.

It's both. All the JS code has to be parsed and interpreted by web browser, which is affecting especially low end smartphones. Better use plain HTML and CSS whenever possible, see e.g. PHOOOS: https://github.com/niutech/phooos (demo: https://kodus.pl)

I don't think the author of the original comment would really care about the download size, given that it was an "internal self serve web app".

htmz looks very cool, though.

can you comment on what those 500 lines actually were? react+redux?

all htmx does is replace divs on the page, so probably just code that did that

can anyone comment on what 500 lines of react+redux actually do ?

Also what line N+1 does, please.

It was all normal JS code to handle a complicated form we have on a customer facing portal page. By moving to htmx I was able to rely on the server side to handle basically everything with only a small addition of code to what it was already doing.

Isn’t that moving code around, not deleting it?

Most likely that code already existed server-side and was duplicated client-side. It's what usually happens since frontend code can't enforce invariants.

Near enough exactly this

Could you elaborate on what you mean by "frontend code can't enforce invariants" ?

Frontend code can be easily bypassed or changed so you can't trust it to keep the state of your application in good condition. Nothing prevents me from picking the same username as someone else if there is no server-side code stopping it. Nothing prevents me from replying to a deleted comment if I don't check with the server.

That means that any validation that you do client-side you need to repeat server-side. Any business logic that you have client-side you also need to repeat server-side.

I'm qurious what that code was doing that could be just moved to the backend. Usually forms have some validation for a better experience with the final validation on the server. Did you get rid of that and just show an error if the submission failed?

Near enough yes but it was a nice helpful error message with the form fully populated as they left it - as far as it looks the user it’s client side validation as the service responds with just the correct html for the form and htmx swaps out the chunk of html.

Its like old school for validation back in the CodeIgniter days.

So the 500 lines removed was literally just removing functionality in the first place (you should always validate on both sides anyway).

I would say, this and the CSS grid/flex system has made web development almost... enjoyable.

Reply on news.ycombinator.com