HTMZ a Back-End Driven Hypermedia Approach

Note: This site requires a browser which supports Service Workers.

Introduction

HTMZ is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML. This is an "extension" that I have made to make it even more powerful and flexible.

Features:

• Automatic partial page updates
• Seamless form submissions
• Back end driven hypermedia requests. The back end determines how to update the front end.
• Lightweight and easy to use

Documentation

This implementation of HTMZ uses four APIs to determine how the updates are applied.

id

The id attribute matches the element that will be updated. It replaces the original element with the new content. This is the simplicist and easiest way to perform updates.

hz-target

uses the query selector to determine what element to update.

hz-swap

determines how the content is inserted. There are four different values which can be used:

replaceWith

replaces the original element with the new content (default). In practice this never needs to be explicit.

append

appends the content to the end of the target element

prepend

prepends the content to the beginning of the target element

before

inserts the content before the target element

after

inserts the content after the target element

template

When you do not have a root HTML element use the template element. This is useful for inserting table rows, list items, and other elements that do not have a single root element. When you return an empty template it will delete the old the element it is replacing when you use the strategy replaceWith (which is default).

Examples

Simple Todo

This example shows a simple todo list implementation using HTMZ.

Dynamic Table

This example demonstrates dynamic table row addition using HTMZ. Note that the table elements need to be wrapped in <template> tags.

No data has been returned yet.

Replace a link with new content.

No data has been returned yet.

Limitations

There are some drawbacks to doing it this one. One of those is that you cannot make two API calls simultaneously. If you find you need to, then either using a different library or create multiple iFrames.

Take as an example the two links below. When you click the button it will click the two links simultaneously. But only one completes. In practice this shouldn't happen very often or ever in a real application. But if your application does require multiple API calls then perhaps your application is too complex for this library. Or maybe you could combine the API calls. This could also be a good thing as it prevents forms from being called twice automatically.

No data has been returned yet.

Advanced Usage

For advanced usage please refer to my soccer application. It shows that you can create rather complex web applications with this pattern, including offline first PWA with highly dynamic data.

Features

• The application uses Morphdom to diff the returned HTML (in place of the swap type replaceWith).
• It uses the data-action pattern to define custom actions for elements. See also.
• It uses the above pattern to anchor elements to where they are during submission. E.g., the Todo example above the input would stay in the same location on the screen.
• It uses custom elements to perform actions when data is returned from the server, like browser refreshes and redirects.