htmx: a new old way to build the web (JS Party #307)
Jan 12, 2024
auto_awesome
Carson Gross and Alex Russell discuss web architectures, the evolution of rendering patterns, and the advantages of htmx. They explore the limitations of modern web app practices and how htmx offers an HTML-first approach using older technology. They also touch on the challenges faced by web developers and the use of JSON in web development. They dive into using htmx to improve web page rendering performance and discuss Roy Fielding's dissertation on hypermedia and interactivity. They explore the idea of dismantling one-size-fits-all web applications and address challenges in managing technology. They end with a discussion about Montana, education links, and gratitude.
HTMX simplifies web development by leveraging familiar HTML attributes and the hypermedia model, allowing developers to focus on seamless user experiences.
HTMX offers a lightweight approach to enable modern web interactions while maintaining alignment with the core principles of the web.
Embracing HTMX promotes simplicity, better user experiences, and ease of maintenance, shifting towards a more streamlined and user-focused approach.
Lazy loading improves performance by loading content only when needed, resulting in faster interfaces and quicker interaction times.
Deep dives
HTMX: Generalizing Hypermedia Controls
HTMX is a simple framework that uses HTML attributes to generalize hypermedia controls. These attributes can be added to HTML elements to make them perform actions over the network. For example, you can use the 'HX-PUT' attribute on a button element to issue a PUT request to a specific endpoint. HTMX also provides attributes like 'HX-SWAP' and 'HX-TARGET' to specify where the returned content should be placed in the DOM. With HTMX, you can implement rich web applications within the hypermedia model, all using familiar HTML attributes.
Practical Example: Loading a Slow-Rendering Component
One practical example of using HTMX is loading a slow-rendering component on a web page. By adding the 'HX-TRIGGER' attribute with the value 'load' and the 'HX-GET' attribute with the URL endpoint to a div element, you can trigger a request to fetch the component's content when the div loads. This approach allows you to move the computationally expensive rendering process to a separate endpoint, improving the initial page load time. HTMX's simplicity and attributes like 'HX-TRIGGER' and 'HX-GET' provide an efficient way to enhance web applications with minimal effort.
Simplifying Web Development and Focusing on User Experience
The approach of using HTMX simplifies web development by leveraging familiar HTML attributes and the hypermedia model. Developers can focus on creating seamless user experiences by generalizing hypermedia controls and specifying how content should be exchanged and placed on the web page. This simplicity avoids unnecessary complexity often associated with modern JavaScript frameworks and allows developers to prioritize the needs of the end-users rather than seeking unnecessarily advanced solutions. HTMX offers a lightweight, yet effective approach to enable modern web interactions while maintaining a strong alignment with the core principles of the web.
Challenges and Future Perspectives
The web development community has seen a trend towards increased complexity in recent years, driven both by individual incentives for technical sophistication and a lack of standards. While JavaScript frameworks like React have provided advanced solutions, they have also introduced challenges, making it harder for new developers to contribute and complicating codebases. Addressing these challenges requires leadership and a focus on stack simplicity, with a strong emphasis on user-centric and performance-driven development practices. By embracing HTMX, developers can shift towards a more streamlined and user-focused approach, promoting simplicity, better user experiences, and ease of maintenance.
Lazy Loading and Improved Performance
Lazy loading is discussed as a way to improve performance by loading content only when needed. This technique allows for faster user interfaces and quicker interaction times.
Ajax with Attributes
The concept of Ajax with attributes is introduced, highlighting the use of data attributes in HTML elements to extend their functionality. This approach allows for a more specific and customizable way to handle events and requests in web applications.
The Importance of HTML, CSS, and JavaScript
The discussion emphasizes the importance of understanding and leveraging HTML, CSS, and JavaScript in web development. It is suggested that combining these technologies effectively can lead to better user experiences and more efficient code.
The Need for Enhanced DOM Functionality
The conversation touches on the need for improved functionality within the DOM, such as the ability to reparent elements without losing their state or focus. This feature would enable more flexible transclusion, preserve in-flight states, and enhance web interactivity.
Carson Gross (creator of htmx) & Alex Russell (Mr. Web Platform 3000) join Amal for an EPIC discussion on web architectures, the evolution of rendering patterns & the advantages of hypermedia and htmx. We dive deep on why modern web app best practices are falling short & explore how htmx gives devs an HTML-first approach to use tech that’s over 20 years old.
Tune in to learn a new way to do something old, so you can simplify your code & use JavaScript when/where it’s uniquely able to shine ✨
Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.