Htmx

Last updated
htmx
Developer(s) Carson Gross
Initial releaseNovember 24, 2020;4 years ago (2020-11-24) [1]
Stable release
2.0.3 [2] / October 4, 2024;2 months ago (2024-10-04)
Repository github.com/bigskysoftware/htmx
Written in JavaScript
License BSD 0-clause [3]
Website htmx.org

htmx (also stylized as HTMX) is an open-source front-end JavaScript library that extends HTML with custom attributes that enable the use of AJAX directly in HTML and with a hypermedia-driven approach. These attributes allow for the dynamic definition of a web page directly in HTML and CSS, without the need for writing additional JavaScript. These attributes allows tasks that traditionally required writing JavaScript to be done completely with HTML. The library was created by Carson Gross as a new version of intercooler.js.

Contents

The library supports communication with the server using standard HTTP methods and simplifies inserting server responses (usually text or HTML fragments) into designated parts of the web page without having to redraw the entire page. This in turn allows for similar behavior to what can be achieved with reconciliation behavior in virtual DOMs.

History

htmx has its roots in intercooler.js, a frontend library created by Carson Gross in 2013. [4] The library aimed to address the complexity associated with AJAX (asynchronous JavaScript and XML) by introducing a simplified approach using HTML attributes. [5] The intent was to create a framework that was aligned with Roy Fielding's original intent for REST (representational state transfer) - and specifically HATEOAS (hypermedia as the engine of application state). The problem is described in Fielding's blog post "REST APIs must be hypertext-driven" from October 2008. [6] [7]

htmx was created as an improved version of intercooler.js that did not rely on jQuery with version 1.0.0 being released in November 2020. [8] The release of htmx was a significant milestone for the project, by offering a way to utilize AJAX, CSS transitions, WebSockets, and Server-Sent Events directly in HTML using attributes. [9]

In 2023, htmx was added to the first cohort of the GitHub Accelerator program, a program the provides open source projects with funding and guidance from members of mature open source projects. [10]

Design and functionality

htmx combines the capabilities of modern frameworks with the server-side processing of traditional web applications. [11] The library's design philosophy revolves around a goal to "complete HTML as a hypertext." [12] By leveraging custom HTML attributes prefixed with hx- to trigger AJAX requests to fetch content to update parts of the DOM with, htmx enables developers to define dynamic behavior directly within their markup, reducing or even eliminating the need for extensive JavaScript code. [13] [14] This allows the library to avoid issues with large bundles, [15] complex state management, and hydration. [16] This approach offers a more accessible and intuitive way to build modern user interfaces while avoiding the complexities often associated with traditional JavaScript frameworks. [17] As htmx can update specific parts of a webpage without the need to reload the entire page, as would be the case with plain HTML and CSS, using it might result in improved user experience and performance, since only a part of the data needs to be re-fetched from the server. [18]

The library also challenges the common approach of utilizing JSON as the standard payload for HTTP requests by replacing it with HTML. [5] This is meant to solve the issues related to the performance and cognitive overhead of JSON serialization, deserialization, and subsequent use in the user interface, such as JavaScript and JSON's inability to accurately process numbers greater than 253 or distinguish floating-point numbers from integers and the complexity involved with alternatives to JSON-oriented REST, such as GraphQL or gRPC. [19] Additionally, a potential advantage of htmx and hypertext-oriented approach in general, is that data retrieved directly from the database does not need to either be in a JSON or JSON-compliant format, such as that used by many document databases or the PostgreSQL's JSON type, or be serialized by the backend only to be then deserialized by the frontend again. [20] The reduced client-side computation also helps to shift the development focus towards the backend, which might result in better client-side performance, albeit at a cost of higher server load, and providing the developers with a simpler way to solve more problems which they would otherwise solve using client-side JavaScript in virtually any other programming language. [21]

Usage

htmx adds custom attributes to HTML to define dynamic behavior such as triggering server requests and updating content. The functionality of htmx is built off of the attributes hx-get, hx-post, hx-put, hx-delete, andhx-patch, which issue AJAX requests with the specified HTTP method. [11] [18] These requests are made when an certain DOM event is fired, change for input, select, and textarea elements, submit for form elements, and click for other elements. [11] The event can also be overridden with hx-trigger. [22] Other attributes include hx-target for specifying a target other than the current element for swapping content into and hx-swap for setting how the content fetched from the server should be swapped or placed relative to the target element. [23] [24]

Community and adoption

Since its inception as intercooler.js and its subsequent evolution into htmx, the library has gained a significant following within the web development community. [25] [26] htmx has been viewed as a simpler and lighter weight alternative to full-blown JavaScript frameworks like React, Vue.js, and Angular. [27] [28] As a result, it has gained a measure of popularity as an alternative to the approach used by most JavaScript frameworks for building dynamic web applications. [29]

htmx integrations have been developed for various full-stack/backend web frameworks, programming languages and templating engines, including Node.js, Django, Flask, Adobe ColdFusion, ASP.NET, Java, Clojure, and Ruby on Rails. [30] Such libraries are usually a matter of nothing more than convenience since htmx's portable and minimalist design allows it to be integrated with virtually any HTML templating engine. [12]

See also

Related Research Articles

JSON is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of name–value pairs and arrays. It is a commonly used data format with diverse uses in electronic data interchange, including that of web applications with servers.

Ajax is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A dynamic web page is a web page constructed at runtime, as opposed to a static web page, delivered as it is stored.

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

The Spry Framework is an open source Ajax framework developed by Adobe Systems which is used in the construction of Rich Internet applications. Unlike other pure JavaScript frameworks such as the Dojo Toolkit and Prototype, Spry is geared towards web designers, not web developers. On August 29, 2012, Adobe announced that it would no longer continue development of Spry and handed it over to the community on GitHub.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

JSONP, or JSON-P, is a historical JavaScript technique for requesting data by loading a <script> element, which is an element intended to load ordinary JavaScript. It was proposed by Bob Ippolito in 2005. JSONP enables sharing of data bypassing same-origin policy, which disallows running JavaScript code to read media DOM elements or XMLHttpRequest data fetched from outside the page's originating site. The originating site is indicated by a combination of URI scheme, hostname, and port number.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

<span class="mw-page-title-main">Vaadin</span> Web development platform written in Java

Vaadin is an open-source web application development platform for Java. Vaadin includes a set of Web Components, a Java web framework, and a set of tools that enable developers to implement modern web graphical user interfaces (GUI) using the Java programming language only, TypeScript only, or a combination of both.

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools was a set of tools built with the goal of helping developers optimize rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps. As of Aug 1, 2024 the Closure Library has been sunset, for not "meeting the needs of modern JavaScript development".

<span class="mw-page-title-main">Opa (programming language)</span> Programming language for developing scalable web applications

Opa is a programming language for developing scalable web applications. It is free and open-source software released under a GNU Affero General Public License (AGPLv3), and an MIT License.

Mustache is a web template system. It is described as a logic-less system because it lacks any explicit control flow statements, like if and else conditionals or for loops; however, both looping and conditional evaluation can be achieved using section tags processing lists and anonymous functions (lambdas). It is named "Mustache" because of heavy use of braces, { }, that resemble a sideways moustache. Mustache is used mainly for mobile and web applications.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

<span class="mw-page-title-main">Webix</span> JS/HTML5/CSS3 UI toolkit for developing complex and dynamic cross-platform web applications

Webix is a JavaScript/HTML5/CSS3 UI toolkit for developing complex and dynamic cross-platform web applications.

A headless browser is a web browser without a graphical user interface.

This is a list of articles related to the JavaScript programming language.

Nuxt is a free and open source JavaScript library based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js.

References

  1. ↑ "Release v1.0.0 - HTMX". GitHub.
  2. ↑ "Releases - HTMX". GitHub.
  3. ↑ "htmx/LICENSE". HTMX. Retrieved 2024-04-30– via GitHub.
  4. ↑ "htmx 1.0.0 has been released". HTMX. 2020-11-24. Retrieved 2024-04-04.
  5. 1 2 Melanson, Mike (2022-01-19). "Htmx: HTML Approach to Interactivity in a JavaScript World". The New Stack. Retrieved 2024-04-24.
  6. ↑ Gross, Carson. "Simple AJAX using HTML attributes". Intercooler.js. Retrieved 2024-04-24.
  7. ↑ Fielding, Roy T. (20 Oct 2008). "REST APIs must be hypertext-driven » Untangled".
  8. ↑ "htmx ~ htmx 1.0.0 has been released!". htmx.org. Retrieved 2024-04-24.
  9. ↑ "htmx | Technology Radar". Thoughtworks.
  10. ↑ Sowles, Kara (2023-04-12). "GitHub Accelerator: our first cohort and what's next". The GitHub Blog. Retrieved 2024-04-24.
  11. 1 2 3 Hibbard, James (2023-08-08). "An Introduction to htmx, the HTML-focused Dynamic UI Library". SitePoint. Retrieved 2024-04-04.
  12. 1 2 Tyson, Matthew (2023-09-20). "Intro to HTMX: Dynamic HTML without JavaScript". InfoWorld. Retrieved 2024-04-24.
  13. ↑ "Introduction to HTMX | refine". 26 October 2023.
  14. ↑ Tyson, Matthew (2024-03-13). "Complexity bad: An interview with HTMX creator Carson Gross". InfoWorld. Retrieved 2024-04-24.
  15. ↑ Sheppard, Dennis (2017), "Leveling Up Your PWA", Beginning Progressive Web App Development, Berkeley, CA: Apress, pp. 243–259, doi:10.1007/978-1-4842-3090-9_12, ISBN   978-1-4842-3089-3 , retrieved 2024-04-30
  16. ↑ "A First Look at HTMX and How it Compares to React". Builder.io.
  17. ↑ "htmx ~ Essays". htmx.org. Retrieved 2024-04-30.
  18. 1 2 "htmx ~ Documentation". htmx.org. Retrieved 2024-04-30.
  19. ↑ Kleppmann, Martin (2017-03-01). "Formats for Encoding Data". Designing Data-Intensive Applications (epub) (1st ed.). 1005 Gravenstein Highway North, Sebastopol, CA 95472, United States of America: O’Reilly Media. JSON, XML, and Binary Variants. ISBN   9781491903100.{{cite book}}: CS1 maint: location (link)
  20. ↑ Shi, Xuanhua; Zhang, Yipeng; Huang, Hong; Hu, Zhenyu; Jin, Hai; Shen, Huan; Zhou, Yongluan; He, Bingsheng; Li, Ruibo; Zhou, Keyong (April 2020). "Maxson: Reduce Duplicate Parsing Overhead on Raw Data". 2020 IEEE 36th International Conference on Data Engineering (ICDE). IEEE. pp. 1621–1632. doi:10.1109/ICDE48307.2020.00144. ISBN   978-1-7281-2903-7.
  21. ↑ Eckert, Raphael (2023-03-23). Erstellen eines einfach bedienbaren und einfach implementierbaren UI-Konzepts mit Go und htmx [Creating an easy-to-use and easy-to-implement UI concept with Go and htmx](PDF) (in German). Heilbronn: Hochschule Heilbronn.
  22. ↑ Jack, Bobby (2024-01-22). "What Is htmx and How Can It Simplify My Website?". MUO. Retrieved 2024-09-03.
  23. ↑ "htmx ~ hx-target Attribute". htmx.org. Retrieved 2024-09-03.
  24. ↑ "htmx ~ hx-swap Attribute". htmx.org. Retrieved 2024-09-03.
  25. ↑ "@htmx_org". X (formerly Twitter). Retrieved 2024-05-19.
  26. ↑ "htmx.org". npm. 2024-04-17. Retrieved 2024-04-30.
  27. ↑ Tyson, Matthew (2024-04-01). "What's the best JavaScript framework?". InfoWorld. Retrieved 2024-05-19.
  28. ↑ Dale, Kyran (2022-12-07). "Chapter 4. Webdev 101". Data Visualization with Python and JavaScript (2nd ed.). Sebastopol, CA: O'Reilly Media. ISBN   9781098111878.
  29. ↑ Letusheva, Valeria (2024-05-09). "Highlights from the Django Developer Survey 2024". InfoWorld. Retrieved 2024-05-19.
  30. ↑ "htmx ~ Server-Side Examples". htmx.org. Retrieved 2024-05-19.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.