HTMX & Go

ThePrimeagen

ThePrimeagen

terminal
2 hours, 1 minute CC
HTMX & Go

Course Description

Are you wanting an alternative to complicated UI frameworks? Make web app development simpler using HTMX! Using Go, you’ll build a simple server to respond to routes with templates. Then enhance your HTML with HTMX attributes to target updates on parts of the page. Tackle error handling, out-of-band updates, and advanced patterns for URL control and redirection. Learn the grug way (it’s just HTML, btw) for building interactive web experiences!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: January 21, 2024

Topics

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 11 minutes
  • Introduction
    ThePrimeagen introduces HTMX and shares personal experiences in the web programming world, reflecting on the evolution of technologies like jQuery and React. They express discontent with certain aspects of modern web development and explain why they find HTMX appealing for its simplicity and ease of use. The lesson covers various topics, including some history of hypermedia, the speaker's journey in web development, and their reasons for favoring HTMX.
  • Project Setup
    ThePrimeagen provides instructions for setting up the necessary tools and dependencies for the course. They also emphasize the importance of actively engaging with the material and encourage students to use the Chrome debugger for troubleshooting.

HTMX Basics

Section Duration: 31 minutes
  • Creating an HTTP Server
    ThePrimeagen guides the students through building a simple HTTP server using the Echo framework in Go. They explain how to set up the server, create an index page using HTML templates, and render the template with data. The final result is a server that displays a count of how many times the page has been requested.
  • Moving from HTML to HTMX
    ThePrimeagen explains how to change from using HTML to using HTMX and demonstrates adding a post endpoint, removing incrementing from the GET route, and adding a button to the HTML that triggers a post request. They also mention using the HTMX JavaScript library and provide instructions on how to include it in the website.
  • Understanding HATEOAS
    ThePrimeagen introduces the concept of HATEOAS (Hypermedia as the Engine of Application State) and explains how it differs from the traditional approach of using the HTML state to drive program changes. They also discuss the layers of state in modern web development and how HTML can be used as the engine of application state. The lesson concludes with a brief overview of htmx, including its events, HTML reduction capabilities, and redirection options.
  • Arguments Against HTMX
    ThePrimeagen addresses common arguments against using HTMX. They explain that servers already understand the representation of the client through JSON, and accept headers can be used to request data in different formats. They also discuss the process of producing HTML and argue that it is not slower than producing JSON. They also mention the importance of testing and measuring performance and share their thoughts on Node.js templating engines.
  • Using hx-target with Templates
    ThePrimeagen debugs an issue with a web application where the response HTML is being placed in the wrong element. They identify the problem and solve it by setting a target element using the hx-target attribute. They then demonstrate how to make the code more efficient by rendering only the necessary content using a template block. Finally, they show how to further optimize the code by targeting a specific div element for replacement instead of the entire body.

HTMX Interactivity

Section Duration: 59 minutes
  • Building a Form
    ThePrimeagen explains how to add interactivity to a basic HTML form using JavaScript. They demonstrate how to create a form that takes in a name and email, and when the user clicks the submit button, the name and email are added to a server and displayed in a list. The instructor also mentions different techniques and frameworks that can be used for interactivity, such as React, htmx, and web components.
  • Contacts List & Endpoint
    ThePrimeagen explains how to create a contacts object and an endpoint for posting contacts in an index.html file. They demonstrate creating a struct for contacts, a function for creating a new contact, and a struct for data. They also show how to append new contacts to the data object and render it on the page.
  • Error Handling
    ThePrimeagen discusses the problem of displaying form errors and handling form submissions in an HTMX application. They demonstrate how to handle form errors by returning a 422 status code from the server and updating the form with error messages. They also show how to use the `hx:BeforeSwap` event to customize the behavior of HTMX when handling 422 responses.
  • Out-of-Band Updates
    ThePrimeagen demonstrates how to implement out-of-band updates using HTMX. They discuss the concept of out-of-band updates and show how to use the hx-swap-oob and afterbegin to update specific parts of the DOM without replacing the entire page. They also address some common issues that may arise when implementing out-of-band updates.
  • Swaps Recap
    ThePrimeagen reviews some HTML code and discusses potential errors or mistakes that may have been made. They also provide some tips and recommendations for testing and debugging HTMX code. The lesson also briefly touches on the use of the Echo framework for HTML serialization.
  • Adding a Delete Icon
    ThePrimeagen discusses adding a delete icon to a contact address using HTMX. They explain how HTMX allows the use of actual verbs for endpoints, eliminating the need for complex path structures. The instructor also demonstrates how to style the delete icon and add a pointer cursor effect.
  • Deleting Contacts
    ThePrimeagen explains how to implement inline deleting in HTML using the hx-delete attribute. They demonstrate how to specify the endpoint and target element for the delete request, and also discuss the use of the hx-swap and hx-target attributes to control the behavior of the deletion. They also show how to handle the delete request on the server side and update the UI accordingly.
  • hx-indicator & Swap Delays
    ThePrimeagen demonstrates how to add interactivity to a web page using HTMX. They start by adding a time delay to make the interaction more noticeable and then introduce the concept of indicators to show the progress of a request. They also explain how to use swap delays to create smooth transitions when elements are swapped out on the page.

HTMX Patterns

Section Duration: 9 minutes
  • Controlling the URL & Redirection
    ThePrimeagen demonstrates how to create a contacts page with the ability to delete contacts and update the URL accordingly. Additionally, they explain how to handle infinite scrolling and filtering using HTMX. They emphasize the engineering aspect of HTMX and encourage a step-by-step approach to problem-solving.

Wrapping Up

Section Duration: 8 minutes
  • Wrapping Up
    ThePrimeagen wraps up the course by discussing various topics related to HTMX, including the use cases where HTMX may not be suitable, the integration of HTMX with other frameworks like React, preserving state without form submission, and the use of CSS syntax. The instructor also answers some questions from the audience.
HTMX and Go was really a fantastic course from Frontend Masters, its short and sweet and really gets a lot of information across.

As someone who leads development teams and makes technical decisions, I liked how the course really emphasized simplicity and getting back to the roots of web development. This is the perfect example of why I think Frontend Masters is such a valuable resource, they provide you material that really makes you think about real world problems and solutions, not just the newest internet fads.
Stephen Greco

Stephen Greco

Senior Software Engineer & Tech Lead @ United States Steel Corporation

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now