htmx

Source: Wikipedia, the free encyclopedia.
htmx
Developer(s)Carson Gross
Initial releaseNovember 24, 2020; 3 years ago (2020-11-24)[1]
Stable release
2.0.2[2] / August 12, 2024; 53 days ago (2024-08-12)
BSD 0-clause[3]
Websitehtmx.org
HTML
Comparisons

htmx (also stylized as HTMX) is an

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.

The library supports communication with the

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

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

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.

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 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

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. ^ a b 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. ^ a b c Hibbard, James (2023-08-08). "An Introduction to htmx, the HTML-focused Dynamic UI Library". SitePoint. Retrieved 2024-04-04.
  12. ^ a b 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. 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. ^ a b "htmx ~ Documentation". htmx.org. Retrieved 2024-04-30.
  19. ISBN 9781491903100.{{cite book}}: CS1 maint: location (link
    )
  20. ISBN 978-1-7281-2903-7
    .
  21. 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. 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.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Htmx&oldid=1249422579"
This page is based on the copyrighted Wikipedia article: Htmx. Articles is available under the CC BY-SA 3.0 license; additional terms may apply.Privacy Policy