During my latest Projects around AI, I have started to build web frontends using FastAPI and HTMX - this triggered me to see, if I could make use of HTMX in HCL Domino, so I started to play around with it in my off-times and found it to be an interesting extension to the HCL Domino Web Dev toolbelt.

In this series, I would like to start by talking about what HTMX is and why it can be useful for HCL Domino Developers. I will then start to dive into using it in XPages but the cool thing is, that we can make use of this also in the "classic" Domino Web Development areas with pages, forms, etc. what I call "cuneiform inscription" but hey, whatever works for you.

The sample app will be the basic CRUD app in HCL Domino - reading a view, creating new documents, updateing and deleting documents and editing content. We will see the different approach that HTMX brings to the table and will also look at concepts like event handling though response headers. Therefor, we will build a small REST API using a Java Servlet in the NSF to be able to take full control of what we deliver back to HTMX.

Later, we will "teleport" the XPages App to "classic" components and then take a look on how to hook up the HCL Domino REST APIs to HTMX.

So thats's the plan.

Let's start with what HTMX is.

Htmx is an open-source JavaScript library that enhances HTML with custom attributes, allowing developers to use AJAX directly in HTML without needing extensive JavaScript. It simplifies the creation of dynamic web applications by enabling server communication and content updates directly within HTML markup.

Overview of htmx

htmx is an open-source JavaScript library designed to enhance HTML by adding custom attributes. This allows developers to implement AJAX, CSS transitions, WebSockets, and Server-Sent Events directly within HTML, simplifying the process of creating dynamic web applications.

Key Features

  • Lightweight: Approximately 14 KB when minified and gzipped.
  • Dependency-Free: Does not rely on other libraries, making it easy to integrate.
  • Flexibility: Offers a way to build interactive applications without enforcing a specific architecture.

How htmx Works

htmx uses attributes prefixed with hx- to define dynamic behaviors. For example:

  • AJAX Requests: Use hx-get or hx-post to send requests without writing JavaScript.htmlCopy Code<button hx-get="/api/data" hx-target="#content">Load Data</button>
    <div id="content"></div>
  • Content Swapping: Update parts of the page without a full reload using hx-swap.

Use Cases

htmx is ideal for:

  • Applications with minimal frontend logic.
  • Server-rendered applications where most processing occurs on the backend.
  • Rapid prototyping or simple interactive features.

Comparison with Other Frameworks

htmx differs from frameworks like React by focusing on enhancing HTML rather than creating a component-based architecture. This makes it a simpler alternative for many projects, especially those that do not require complex state management or extensive JavaScript.

Conclusion

htmx provides a powerful yet straightforward way to create modern web applications by leveraging the existing capabilities of HTML. Its design philosophy aims to complete HTML as a hypertext, making it accessible for developers looking to enhance user experiences without the overhead of traditional JavaScript frameworks.

Why is this interesting for HCL Domino Web Developers? Well, using HTMX simplifies the work with XPages and classic Development by offering a standard and easy-to-use mechanism, to create data centric interfaces that allow dynamic changes in the HTML without over-complexing things by using REACT, Vue or other SPA frameworks. With the options to switch out portions of HTML, update site parts and even use Server Sent Events or Web Socket communications, it extends the reach of the base platform a fair bit IMHO. Is it a solution for everything? No. What I like about it can be added to an app without interfering too much with the base application - it is self contained and might solve some requirements way quicker than pure JavaScript coding.

Now, how can we integrate this into a HCL Domino Web Page? We will take a look at that in the next part - bare with me!