Abstract:

This video demonstrates how to build dynamic web pages with partial reloads using Common Lisp, leveraging the HTMX JavaScript library for declarative AJAX requests. It showcases the integration of HTMX with a Common Lisp web server (using Neagle for routing and Spinneret for HTML generation) to create an example application where users can add books to a list without requiring a full page refresh. The tutorial covers setting up the server, defining the page structure, handling data storage, rendering components, and configuring HTMX attributes for form submission and targeted content replacement, including a small JavaScript snippet for post-request cleanup.

Exploring Dynamic Web Pages with Common Lisp and HTMX

• 0:00 Common Lisp and HTMX for Dynamic Sites: The video introduces using Common Lisp with the HTMX JavaScript library to create dynamic web pages that don't require full reloads, primarily for making AJAX requests using a declarative HTML syntax.
• 0:18 Project Setup: A new Common Lisp web project is set up using Neagle for routing (built on Clack and Spin) and Spinneret for HTML generation. The approach doesn't require additional front-end libraries beyond HTMX.
• 0:41 Main Page Layout: The main page structure is defined using a Common Lisp macro. The HTML <head> includes imports for HTMX and Bulma CSS, while the page <body> content is provided by the macro user.
• 1:20 Book Management Feature: The main page's <body> is designed to contain a form for adding new books and a div to display a list of all books. Initially, books are stored in a simple Common Lisp list.
• 2:09 Book List Component: A book-component function is created to dynamically render the books list as an unordered HTML list. The div containing this list is given the id="book-list", which is crucial for HTMX to target updates.
• 2:40 HTMX Integration for Form Submission: HTMX attributes are added to the book submission form: data-hx-get="/add-book" specifies the AJAX request URL, and hx-target="#book-list" instructs HTMX to replace the content of the #book-list element with the server's response.
• 3:28 Defining the /add-book Route: A new server-side route, /add-book, is defined. This route processes the submitted book name, adds it to the global books list, and then re-renders only the book-component's HTML to be sent back as the AJAX response.
• 3:49 Clearing the Input Field with JavaScript: To clear the text input field after a successful submission, a small JavaScript snippet is used. It listens for the hx:after-request event and resets the input's value.
• Key Takeaway: This demonstration highlights how HTMX, when paired with a Common Lisp web server, enables the creation of rich, dynamic user interfaces with partial page updates, significantly reducing the complexity often associated with client-side JavaScript frameworks. The server renders small HTML fragments, making the development process more streamlined.