Wikipedia

Draft:HTMX

  • Comment: This might be barely notable, but the article needs to be completely rewritten to Wikipedia's standards to make it through AFC. Remove all references that are blogs and make sure the article sounds like a encyclopedia entry and not a brochure on why I should use HTMX. Sohom (talk) 23:04, 7 April 2024 (UTC)
  • Comment: Please make sure to include WP:INCITE and also use secondary reliable sources. CNMall41 (talk) 21:03, 21 January 2024 (UTC)


HTMX is an open-source.[1] JavaScript library for web development that aims to combine the approach of server-side rendered, templated web pages with the dynamic and interactive features that many JavaScript frameworks offer by enabling AJAX directly in HTML, utilizing hypermedia-driven approach and extending the standard HTML syntax with it's own attributes.[2][3][4]

HTMX
Original author(s)Carson Gross
Initial releaseNovember 24, 2020; 3 years ago (2020-11-24)[5]
Stable release
1.9.12[6] / 26 April 2024; 16 days ago (2024-04-26)
Written inJavaScript
Size15.7 KB min+gzip[7]
TypeJavaScript library
LicenseBSD 0-clause[8]

History edit

HTMX has its roots in intercooler.js, a frontend library created by Carson Gross in 2013. The library aimed to address the complexity associated with AJAX (Asynchronous JavaScript and XML) by introducing a simplified approach using HTML attributes.[9]

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.[10]

Gross continued to refine and improve intercooler.js, and eventually, it evolved into HTMX. 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. [citation needed]

Design and functionality edit

HTMX enhances HTML elements for creating interactive web applications with a focus on simplicity and leveraging hypertext capabilities. It allows developers to easily add dynamic behavior to their markup using HTML attributes, reducing or even eliminating the need for extensive JavaScript code with large bundles,[11] complex state management or hydration. HTMX can also update specific parts of a webpage without the need to reload the entire page (as would be the case with plain HTML+CSS), which might result in improved user experience and performance, since only a part of the data needs to be re-fetched from the server.[12]

It also challenges the common approach of utilizing JSON as the standard payload for HTTP requests and replacing it with HTML. This is meant to solve the issues related to the performance and cognitive overhead of JSON (de)serialization 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.[13] 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.[14] 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.[15] For instance, if JSON.stringify() is not called on nested nested parts of a JSON object it will be displayed as [object Object].[16]

The library's design philosophy revolves around simplicity and the power of hypertext. By leveraging HTML attributes, HTMX enables developers to define dynamic behavior directly within their markup, reducing the need for extensive JavaScript code. 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]

Integration and compatibility edit

HTMX is designed to be lightweight and easy to integrate into existing projects, to be installed using either a Content delivery network or a local standalone file placed inside the script tag, much like CSS-based UI libraries, such as Tailwind. [citation needed]

Community and adoption edit

Since its inception as intercooler.js and its subsequent evolution into HTMX, the library has gained a significant following within the web development community. With its focus on simplicity and accessibility, HTMX has gained a certain measure of popularity as an alternative to the approach of most JavaScript frameworks for building dynamic web applications.[18][19][20][21][22]

HTMX integrations have been developed for various full-stack/backend web frameworks, programming languages and templating engines, including Django,[23] Twig,[24] Clojure,[25] Tauri,[26] Go,[27][28] or Express.js.[29] 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.[30]

Between October 24 2023 and April 29 2024, htmx.org Npm package averaged between 35,336 and 68,279 weekly downloads.[31]

Despite the attention [32][33][34][35][36] as of April 2024, commercial adoption of HTMX has so far been limited.[citation needed]

Recognition and achievments edit

In June 2023, HTMX was accepted into the GitHub Accelerator Program.[37]

References edit

  1. ^ "Bigskysoftware/HTMX". GitHub.
  2. ^ Paakkanen, Juho. "Upcoming JavaScript web frameworks and their techniques." (Aalto University, Vantaa, Finland, 2023).
  3. ^ "Intro to HTMX: Dynamic HTML without JavaScript". 20 September 2023.
  4. ^ "Introduction to HTMX | refine". 26 October 2023.
  5. ^ "Release v1.0.0 - HTMX". GitHub.
  6. ^ "Release v1.9.12 - HTMX". GitHub.
  7. ^ "htmx.org v1.9.12". Unpkg. Retrieved 2024-04-30.
  8. ^ "htmx/LICENSE". HTMX. Retrieved 2024-04-30 – via GitHub.
  9. ^ https://htmx.org/
  10. ^ "REST APIs must be hypertext-driven » Untangled".
  11. ^ 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
  12. ^ "htmx ~ Documentation". htmx.org. Retrieved 2024-04-30.
  13. ^ 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: date and year (link) CS1 maint: location (link)
  14. ^ 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.
  15. ^ 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.{{cite book}}: CS1 maint: date and year (link)
  16. ^ Douglas, Ian (2022-03-09). "When and How to Use JSON Serialization in Postman". Postman Blog. Retrieved 2024-04-30.
  17. ^ "htmx ~ Essays". htmx.org. Retrieved 2024-04-30.
  18. ^ https://twitter.com/htmx_org
  19. ^ "What is so great about HTMX?". 13 January 2023.
  20. ^ "DjangoCon 2022 | from React to HTMX on a real-world SaaS product: We did it, and it's awesome!". YouTube.
  21. ^ "HTMX, the "Framework Stupid" Gets Dialed up to Eleven!". 18 January 2024.
  22. ^ "2024 is the year of HTMX". January 2024.
  23. ^ "Installation - django-htmx 1.17.3 documentation". django-htmx.readthedocs.io. Retrieved 2024-04-30.
  24. ^ putyourlightson/craft-htmx, PutYourLightsOn, 2024-03-26, retrieved 2024-04-30
  25. ^ "[ctmx/ctmx "1.4.12"]". Clojars. Retrieved 2024-04-30.
  26. ^ "tauri-plugin-htmx". npm. 2023-10-21. Retrieved 2024-04-30.
  27. ^ "htmx package - github.com/donseba/go-htmx - Go Packages". pkg.go.dev. Retrieved 2024-04-30.
  28. ^ "htmx package - github.com/angelofallars/htmx-go - Go Packages". pkg.go.dev. Retrieved 2024-04-30.
  29. ^ "express-htmx-components". npm. 2024-03-08. Retrieved 2024-04-30.
  30. ^ Opitz, Daniel (2023-08-12). "Slim 4 - HTMX Server-side Integration". Daniel Opitz - Blog. Retrieved 2024-04-30.
  31. ^ "htmx.org". npm. 2024-04-17. Retrieved 2024-04-30.
  32. ^ "Dynamic Web Apps without JavaScript - HTMX Showcase at DjangoCon and Devoxx".
  33. ^ "HTMX | Technology Radar".
  34. ^ "The best open source software of 2023". 24 October 2023.
  35. ^ "A First Look at HTMX and How it Compares to React".
  36. ^ "HTMX: HTML Approach to Interactivity in a JavaScript World". 19 January 2022.
  37. ^ "GitHub Accelerator: Our first cohort and what's next". 12 April 2023.
  • "HTMX: HTML Approach to Interactivity in a JavaScript World." The New Stack. Available at: https://thenewstack.io/htmx-html-approach-to-interactivity-in-a-javascript-world/.
  • "HTMX - High Power Tools for HTML." HTMX. Available at: https://htmx.org/.
This page will be placed in the following categories if it is moved to the article namespace.
Categories:
Retrieved from "https://en.wikipedia.org/w/index.php?title=Draft:HTMX&oldid=1221503344"