A couple ways I use HTMZ

[jon49]

I've been wondering for a while how to make HTMZ useful. But then I came across the ideas of data-star and figured out that I could have the back end direct what needs to be done in the front end.

So, I have two implementations that I made for HTMZ, one that is simple for a really simple website. The other is more complex and includes morphdom which works for my more complex pages.

Both of these projects are offline-first web apps using a service worker to run the "back end" code.

First implementation

https://github.com/jon49/WeightTracker/blob/c955b4762074c035b64ee5f62e33a51d0815db94/src/web/js/app.bundle.ts#L8

So, basically, I send back to the front end like this:

<div id=myId>Some content.</div>
<template id=removeItem></template>
<li hz-target="#list" hz-swap="append">Some content.</li>

So, when this is retrieved on the front end. The first element will replace whatever has the id myId on the page. The second one will replace the element with the id of removeItem with an empty fragment, AKA delete the element. And the last one will query for #list and append the item to that element.

Second implementation

https://github.com/jon49/Soccer/blob/07ad9816db07c8f85292c26958ea0d87ad14e93f/src/web/js/_htmz.ts#L1

This app is more complex so for the soccer match page there is so much state that I needed morphdom to simplify the application. It works fantastically. So, anytime a replaceWith would normally be used I use morphdom unless it is a document fragment, then I use the standard replaceWith method, mainly because morphdom doesn't work with document fragments.

I also added a custom event after all the work is done, hf:completed. This makes it easier to add additional functionality as seen below.

Some interesting implementations that make this more useful is the data-action pattern. This makes it easy to perform declarative actions.

Some of those actions are:

• Reset, to reset the form after submission.
• clear auto focus.
• confirm, this will confirm that you want to submit the form.
• etc...

I use custom elements (in the example below I use my html-traits lib instead, but the principle is the same) to perform post actions, like making a toaster, redirects, and page refreshes.

https://github.com/jon49/Soccer/blob/07ad9816db07c8f85292c26958ea0d87ad14e93f/src/web/js/_custom.ts#L3

The last thing I did that makes this type of work nicer is my anchor lib.

https://github.com/jon49/Soccer/blob/07ad9816db07c8f85292c26958ea0d87ad14e93f/src/web/js/_anchor.ts#L1

This does two different things. On submission, if the element still exists it will keep the scroll position the same. If the element disappears afterwards or you want to target a different element it allows you to do that.

Conclusion

This is a great and simple way to work with hypermedia-driven development.

I'll make an example application when I get the time that shows how to use the library. I already have most of the code, it's just a matter of created a repo, adding some more examples and getting it pushed.

Thanks for coming up with this idea! I created html-form which attempts to do the same thing, but with a lot more lines of code to get there. But using HTMZ is much more delightful.

One thing I noticed about back end driven hypermedia development is that what I used eventing for before now turns into middleware on the back end. And I need less JS compared to before on the front end.

[jon49]

Here's some example code:

https://github.com/jon49/htmz-be

And the website:

https://jon49.github.io/htmz-be/