Sladniebieskiego (talk | contribs) Submitting using AfC-submit-wizard |
BrandonXLF (talk | contribs) No edit summary Tag: Visual edit |
||
(9 intermediate revisions by 4 users not shown) | |||
Line 14: | Line 14: | ||
---- |
---- |
||
'''HTMX''' is an open-source.<ref>{{cite web | url=https://github.com/bigskysoftware/htmx | title=Bigskysoftware/HTMX | website=[[GitHub]] }}</ref> [[JavaScript]] library for web development that aims to combine the approach of [[Server-side scripting|server-side rendered]], templated web pages with the dynamic and interactive features that many JavaScript frameworks offer by enabling [[Ajax (programming)|AJAX]] directly in [[HTML]], utilizing [[hypermedia]]-driven approach and extending the standard HTML syntax with it's own attributes.<ref>Paakkanen, Juho. "[https://www.researchgate.net/profile/Juho-Paakkanen/publication/376835044_Upcoming_JavaScript_web_frameworks_and_their_techniques/links/658beb406f6e450f19a62573/Upcoming-JavaScript-web-frameworks-and-their-techniques.pdf Upcoming JavaScript web frameworks and their techniques.]" ([[Aalto University]], [[Vantaa|Vantaa, Finland]], 2023).</ref><ref>{{cite web | url=https://www.infoworld.com/article/3706951/htmx-dynamic-html-without-the-javascript.html | title=Intro to HTMX: Dynamic HTML without JavaScript | date=20 September 2023 }}</ref><ref>{{cite web | url=https://refine.dev/blog/what-is-htmx/ | title=Introduction to HTMX | refine | date=26 October 2023 }}</ref> |
|||
{{Infobox software |
{{Infobox software |
||
Line 30: | Line 26: | ||
| genre = [[JavaScript library]] |
| genre = [[JavaScript library]] |
||
| license = [[BSD License|BSD 0-clause]]<ref name="license">{{cite web |title=htmx/LICENSE |url=https://github.com/bigskysoftware/htmx/blob/master/LICENSE |via=GitHub |work=HTMX |access-date=2024-04-30}}</ref> |
| license = [[BSD License|BSD 0-clause]]<ref name="license">{{cite web |title=htmx/LICENSE |url=https://github.com/bigskysoftware/htmx/blob/master/LICENSE |via=GitHub |work=HTMX |access-date=2024-04-30}}</ref> |
||
| website = {{URL|https://htmx.org/}} |
|||
}} |
}} |
||
'''HTMX''' is an [[Open source|open-source]]<ref>{{Cite web |last=Desai |first=Milin |title=Council Post: Why Every Company Should Be Open-Source Aligned |url=https://www.forbes.com/sites/forbestechcouncil/2023/10/25/why-every-company-should-be-open-source-aligned/ |access-date=2024-05-19 |website=Forbes |language=en}}</ref> [[front-end]] [[JavaScript]] library created by Carson Gross an a new version of '''intercooler.js'''. It extends [[HTML]] with custom [[HTML attribute|HTML attributes]] that [[Ajax (programming)|AJAX]] directly in HTML and with a [[hypermedia]]-driven approach. This allows tasks that traditionally required writing JavaScript to be done completely with HTML. |
|||
== History == |
== History == |
||
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 (programming)|AJAX]] (Asynchronous JavaScript and [[XML]]) by introducing a simplified approach using HTML attributes.<ref>https://htmx.org/</ref> |
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 (programming)|AJAX]] (Asynchronous JavaScript and [[XML]]) by introducing a simplified approach using HTML attributes.<ref name=":0">{{Cite web |last=Melanson |first=Mike |date=2022-01-19 |title=Htmx: HTML Approach to Interactivity in a JavaScript World |url=https://thenewstack.io/htmx-html-approach-to-interactivity-in-a-javascript-world/ |access-date=2024-04-24 |website=The New Stack |language=en-US}}</ref> 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.<ref>{{Cite web |last=Gross |first=Carson |title=Simple AJAX using HTML attributes |url=http://intercoolerjs.org/ |access-date=2024-04-24 |website=Intercooler.js |language=en}}</ref><ref>{{cite web |last=Fielding |first=Roy T. |date=20 Oct 2008 |title=REST APIs must be hypertext-driven » Untangled |url=https://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven}}</ref> |
||
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.<ref>{{Cite web |title=htmx ~ htmx 1.0.0 has been released! |url=https://htmx.org/posts/2020-11-24-htmx-1-0-0-is-released/ |access-date=2024-04-24 |website=htmx.org}}</ref> The release of HTMX was a significant milestone for the project, by offering a way to utilize AJAX, [[CSS]] transitions, [[WebSocket|WebSockets]], and Server-Sent Events directly in HTML using attributes.<ref>{{Cite web |title=htmx {{!}} Technology Radar |url=https://www.thoughtworks.com/en-us/radar/languages-and-frameworks/htmx |website=Thoughtworks |language=en-US}}</ref> |
|||
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.<ref>{{cite web | url=https://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven | title=REST APIs must be hypertext-driven » Untangled }}</ref> |
|||
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.<ref>{{Cite web |last=Sowles |first=Kara |date=2023-04-12 |title=GitHub Accelerator: our first cohort and what's next |url=https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/ |access-date=2024-04-24 |website=The GitHub Blog |language=en-US}}</ref> |
|||
Gross continued to refine and improve intercooler.js, and eventually, it evolved into HTMX. The release of HTMX was a remarkable milestone for the project, by offering a way to utilize AJAX, [[CSS]] transitions, [[WebSocket|WebSockets]], and Server-Sent Events directly in HTML using attributes. |
|||
== Design and functionality == |
== Design and functionality == |
||
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 [[Bundle (software distribution)|bundles]],<ref>{{Citation |last=Sheppard |first=Dennis |title=Leveling Up Your PWA |date=2017 |work=Beginning Progressive Web App Development |pages=243–259 |url=http://link.springer.com/10.1007/978-1-4842-3090-9_12 |access-date=2024-04-30 |place=Berkeley, CA |publisher=Apress |language=en |doi=10.1007/978-1-4842-3090-9_12 |isbn=978-1-4842-3089-3}}</ref> complex [[state management]] or [[Hydration (web development)|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.<ref>{{Cite web |title=htmx ~ Documentation |url=https://htmx.org/docs/#swapping |access-date=2024-04-30 |website=htmx.org}}</ref> |
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 [[Bundle (software distribution)|bundles]],<ref>{{Citation |last=Sheppard |first=Dennis |title=Leveling Up Your PWA |date=2017 |work=Beginning Progressive Web App Development |pages=243–259 |url=http://link.springer.com/10.1007/978-1-4842-3090-9_12 |access-date=2024-04-30 |place=Berkeley, CA |publisher=Apress |language=en |doi=10.1007/978-1-4842-3090-9_12 |isbn=978-1-4842-3089-3}}</ref> complex [[state management]] or [[Hydration (web development)|hydration]].<ref>{{Cite web |title=A First Look at HTMX and How it Compares to React |url=https://www.builder.io/blog/htmx-vs-react |website=Builder.io |language=en}}</ref> 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.<ref>{{Cite web |title=htmx ~ Documentation |url=https://htmx.org/docs/#swapping |access-date=2024-04-30 |website=htmx.org}}</ref> |
||
It also challenges the common approach of utilizing [[JSON]] as the standard payload for HTTP requests |
It also challenges the common approach of utilizing [[JSON]] as the standard payload for HTTP requests by replacing it with HTML.<ref name=":0" /> 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 2<sup>53</sup> or distinguish [[Floating-point number|floating-point numbers]] from [[Integer|integers]] and the complexity involved with alternatives to JSON-oriented REST, such as [[GraphQL]] or [[GRPC]].<ref>{{Cite book |last=Kleppmann |first=Martin |title=Designing Data-Intensive Applications |date=2017-03-01 |publisher=[[O’Reilly Media]] |isbn=9781491903100 |edition=1st |location=1005 Gravenstein Highway North, Sebastopol, CA 95472, United States of America |at=JSON, XML, and Binary Variants |language=en-US |chapter=Formats for Encoding Data |type=epub}}</ref> 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-oriented database|document databases]] or the [[PostgreSQL]]'s JSON type, or be serialized by the backend only to be then deserialized by the frontend again.<ref>{{Cite book |last1=Shi |first1=Xuanhua |last2=Zhang |first2=Yipeng |last3=Huang |first3=Hong |last4=Hu |first4=Zhenyu |last5=Jin |first5=Hai |last6=Shen |first6=Huan |last7=Zhou |first7=Yongluan |last8=He |first8=Bingsheng |last9=Li |first9=Ruibo |last10=Zhou |first10=Keyong |chapter=Maxson: Reduce Duplicate Parsing Overhead on Raw Data |date=April 2020 |title=2020 IEEE 36th International Conference on Data Engineering (ICDE) |chapter-url=https://ieeexplore.ieee.org/document/9101499 |publisher=IEEE |pages=1621–1632 |doi=10.1109/ICDE48307.2020.00144 |isbn=978-1-7281-2903-7}}</ref> 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.<ref>{{Cite book |last=Eckert |first=Raphael |url=https://t73f.de/hochschule/thesis/2023_eckert.pdf |title=Erstellen eines einfach bedienbaren und einfach implementierbaren UI-Konzepts mit Go und htmx |date=2023-03-23 |publisher=[[Heilbronn University|Hochschule Heilbronn]] |location=Heilbronn |language=de-DE |trans-title=Creating an easy-to-use and easy-to-implement UI concept with Go and htmx}}</ref> |
||
The library's design philosophy revolves around |
The library's design philosophy revolves around a goal to "complete HTML as a [[hypertext]]."<ref name=":2">{{Cite web |last=Tyson |first=Matthew |date=2023-09-20 |title=Intro to HTMX: Dynamic HTML without JavaScript |url=https://www.infoworld.com/article/3706951/htmx-dynamic-html-without-the-javascript.html |access-date=2024-04-24 |website=InfoWorld |language=en}}</ref> By leveraging custom [[HTML attribute|HTML attributes]] prefixed with <code>hx-</code> to trigger [[Ajax (programming)|AJAX]] requests to fetch content to update parts of the [[Document Object Model|DOM]] with, HTMX enables developers to define dynamic behavior directly within their markup, reducing the need for extensive JavaScript code.<ref>{{cite web |date=26 October 2023 |title=Introduction to HTMX | refine |url=https://refine.dev/blog/what-is-htmx/}}</ref><ref>{{Cite web |last=Tyson |first=Matthew |date=2024-03-13 |title=Complexity bad: An interview with HTMX creator Carson Gross |url=https://www.infoworld.com/article/3713164/complexity-bad-an-interview-with-carson-gross.html |access-date=2024-04-24 |website=InfoWorld |language=en}}</ref> This approach offers a more accessible and intuitive way to build modern user interfaces while avoiding the complexities often associated with traditional JavaScript frameworks.<ref>{{Cite web |title=htmx ~ Essays |url=https://htmx.org/essays/ |access-date=2024-04-30 |website=htmx.org}}</ref> |
||
== Key differentiators from JavaScript frameworks == |
|||
In comparison to JavaScript frameworks like [[React (software)|React]] and [[Vue.js]], which create [[Single-page application|single-page applications]] (SPAs) by making server requests using JavaScript and processing data using the [[JSON]] (JavaScript Object Notation) data format, HTMX takes a different approach. HTMX allows developers to issue AJAX requests directly from the HTML itself, utilizing a variety of events to trigger these requests. |
|||
The four basic issues HTMX aims to address with traditional HTML are:<ref>https://htmx.org/</ref> |
|||
# Limited elements for HTTP requests: HTMX removes the constraints that limit HTTP requests to <code><a></code> and <code><form></code> elements, allowing other HTML elements to perform these requests as well. |
|||
# Limited [[Event (computing)|event triggers]]: HTMX expands the range of events that can trigger HTTP requests beyond just click and submit events. |
|||
# Limited HTTP methods: HTMX provides support for a wide range of HTTP methods beyond just [[GET (HTTP)|GET]] and [[POST (HTTP)|POST]]. It has to be noted, however, that the key limitations HTTP methods impose on implementers are whether the request or a successful response has a body. Even though it can be viewed as [[Idiom (language structure)|unidiomatic]], a POST request can still perform the deletion or updating of resources and if the backend has mechanisms to ensure [[Idempotence|idempotency]], such as a caching [[middleware]], perform the updates idempotently, without the need for DELETE, PATCH or PUT, respectively.<ref>{{Cite web |date=2023-04-10 |title=HTTP request methods - HTTP {{!}} MDN |url=https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods |access-date=2024-04-30 |website=developer.mozilla.org |language=en-US}}</ref> |
|||
# Limited page replacement: HTMX allows developers to update specific parts of a page dynamically instead of requiring the entire page to be replaced, especially when an update is not achievable using [[Pseudo-class|CSS pseudo-classes]] without resorting to ''explicit'' client-side JavaScript. |
|||
By removing these constraints, HTMX allows utilizing HTML '''syntax''' to build feature-rich user interfaces. It has to be noted however, that even though it can greatly reduce the amount of JavaScript code ''written'' it cannot add functionality beyond what plain HTML and CSS with server-side scripting would be capable of, without requiring the clients to use at least some Javascript. This is because HTML and CSS capabilities are constrained by the browsers and their [[Browser engine|layout engines]] – otherwise there would be no need for [[Polyfill (programming)|polyfills]] or standardization as client-side/server-side-rendered code would be capable of freely extending the standard specification without the need for Javascript. |
|||
== Integration and compatibility == |
|||
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 <code>script</code> tag, much like CSS-based UI libraries, such as [[Tailwind CSS|Tailwind]]. If a CDN is utilized, one needs to keep in mind the privacy, security and performance implications involved.<ref>{{Cite web |title=Reasons to avoid Javascript CDNs |url=https://blog.wesleyac.com/posts/why-not-javascript-cdn |access-date=2024-04-30 |website=Wesley Aptekar-Cassels |language=en}}</ref> |
|||
Alongside regular HTML, HTMX can be also integrated with many HTML templating engines, see [[Draft:HTMX#Community and Adoption|Community and adoption]]. |
|||
== Community and adoption == |
== 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. With its focus on simplicity and accessibility, HTMX has gained a |
Since its inception as intercooler.js and its subsequent evolution into HTMX, the library has gained a significant following within the web development community.<ref>{{Cite web |title=@htmx_org |url=https://twitter.com/htmx_org |access-date=2024-05-19 |website=X (formerly Twitter)}}</ref><ref>{{Cite web |date=2024-04-17 |title=htmx.org |url=https://www.npmjs.com/package/htmx.org |access-date=2024-04-30 |website=npm |language=en}}</ref> With its focus on simplicity and accessibility, HTMX has gained a measure of popularity as an alternative to the approach of most JavaScript frameworks for building dynamic web applications.<ref>{{Cite web |date=2023-08-13 |title=Exploring the Top Lightweight Alternatives to React in 2024 |url=https://www.sitepoint.com/exploring-the-top-lightweight-alternatives-to-react-in-2023/,%20https://www.sitepoint.com/exploring-the-top-lightweight-alternatives-to-react-in-2023/ |access-date=2024-05-19 |website=www.sitepoint.com}}</ref><ref>{{Cite web |last=Letusheva |first=Valeria |date=2024-05-09 |title=Highlights from the Django Developer Survey 2024 |url=https://www.infoworld.com/article/3715395/highlights-from-the-django-developer-survey-2024.html |access-date=2024-05-19 |website=InfoWorld |language=en}}</ref><ref>{{Cite web |last=Tyson |first=Matthew |date=2024-04-01 |title=What’s the best JavaScript framework? |url=https://www.infoworld.com/article/3713207/whats-the-best-javascript-framework.html |access-date=2024-05-19 |website=InfoWorld |language=en}}</ref> |
||
HTMX integrations have been developed for various full-stack/backend web frameworks, programming languages and templating engines, including [[Django (web framework)|Django]],<ref>{{Cite web |title=Installation - django-htmx 1.17.3 documentation |url=https://django-htmx.readthedocs.io/en/latest/installation.html |access-date=2024-04-30 |website=django-htmx.readthedocs.io}}</ref> [[Twig (template engine)|Twig]],<ref>{{Citation |title=putyourlightson/craft-htmx |date=2024-03-26 |url=https://github.com/putyourlightson/craft-htmx |access-date=2024-04-30 |publisher=PutYourLightsOn}}</ref> [[Clojure]],<ref>{{Cite web |title=[ctmx/ctmx "1.4.12"] |url=https://clojars.org/ctmx |access-date=2024-04-30 |website=Clojars |language=en}}</ref> [[Tauri (framework)|Tauri]],<ref>{{Cite web |date=2023-10-21 |title=tauri-plugin-htmx |url=https://www.npmjs.com/package/tauri-plugin-htmx |access-date=2024-04-30 |website=npm |language=en}}</ref> [[Go (programming language)|Go]],<ref>{{Cite web |title=htmx package - github.com/donseba/go-htmx - Go Packages |url=https://pkg.go.dev/github.com/donseba/go-htmx |access-date=2024-04-30 |website=pkg.go.dev}}</ref><ref>{{Cite web |title=htmx package - github.com/angelofallars/htmx-go - Go Packages |url=https://pkg.go.dev/github.com/angelofallars/htmx-go |access-date=2024-04-30 |website=pkg.go.dev}}</ref> or [[Express.js]].<ref>{{Cite web |date=2024-03-08 |title=express-htmx-components |url=https://www.npmjs.com/package/express-htmx-components |access-date=2024-04-30 |website=npm |language=en}}</ref> 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.<ref>{{Cite web |last=Opitz |first=Daniel |date=2023-08-12 |title=Slim 4 - HTMX Server-side Integration |url=https://odan.github.io/2023/08/12/slim-htmx.html |access-date=2024-04-30 |website=Daniel Opitz - Blog |language=en-US}}</ref> |
|||
Between October 24 2023 and April 29 2024, htmx.org [[Npm]] package averaged between 35,336 and 68,279 weekly downloads. Meanwhile, [[Svelte]] has received between roughly 477 thousand and 1.6 million downloads during the same period,<ref>{{Cite web |date=2024-04-17 |title=svelte |url=https://www.npmjs.com/package/svelte |access-date=2024-04-30 |website=npm |language=en}}</ref> [[Vue.js]] - up to approximately 4.4 million,<ref>{{Cite web |date=2024-04-29 |title=vue |url=https://www.npmjs.com/package/vue |access-date=2024-04-30 |website=npm |language=en}}</ref> while [[React (JavaScript library)|React]] was downloaded no less than 12 million times in any given week during that time.<ref>{{Cite web |date=2024-04-26 |title=react |url=https://www.npmjs.com/package/react |access-date=2024-04-30 |website=npm |language=en}}</ref> |
|||
Despite the tech media attention and developer community recognition,<ref>{{cite web | url=https://www.infoq.com/news/2022/10/htmx-web-app-no-javascript/ | title=Dynamic Web Apps without JavaScript - HTMX Showcase at DjangoCon and Devoxx }}</ref><ref>{{cite web | url=https://www.thoughtworks.com/en-us/radar/languages-and-frameworks/htmx | title=HTMX | Technology Radar }}</ref><ref>{{cite web | url=https://www.infoworld.com/article/3709196/the-best-open-source-software-of-2023.html | title=The best open source software of 2023 | date=24 October 2023 }}</ref><ref>{{cite web | url=https://www.builder.io/blog/htmx-vs-react | title=A First Look at HTMX and How it Compares to React }}</ref><ref>{{cite web | url=https://thenewstack.io/htmx-html-approach-to-interactivity-in-a-javascript-world/ | title=HTMX: HTML Approach to Interactivity in a JavaScript World | date=19 January 2022 }}</ref> as of April 2024, commercial adoption of HTMX has so far been limited. Some examples of companies using HTMX include [[Zapier]] and [https://djinni.co Djinni], a freelancing website with over 70000 registered users as of April 2024.<ref>{{Cite web |title=Websites using Htmx - Wappalyzer |url=https://www.wappalyzer.com/technologies/javascript-libraries/htmx/ |access-date=2024-04-30 |website=www.wappalyzer.com}}</ref> |
|||
== Recognition and achievments == |
|||
In June 2023, HTMX was accepted into the '''GitHub Accelerator Program'''<ref>https://accelerator.github.com/</ref>. GitHub Accelerator is a selective program, in which in it that particular edition, 20 out of 1,000 applications were accepted and which allowed it to secure $20,000 worth of funding in addition to ''"guidance and workshops from open source leaders".''<ref>{{cite web | url=https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/ | title=GitHub Accelerator: Our first cohort and what's next | date=12 April 2023 }}</ref> |
|||
HTMX came in second in '''2023 JavaScript Rising Stars for Front End frameworks.'''<ref>{{cite web | url=https://risingstars.js.org/2023/en#section-framework | title=2023 JavaScript Rising Stars }}</ref> The website says: |
|||
<blockquote>At two htmx is a library that takes a different approach to provide interactivity to HTML pages: |
|||
rather than writing several lines of JavaScript code, developers enhance HTML with specific attributes to enable real-time interactivity and dynamic updates. |
|||
It was lauded for its small file size and seamless integration with existing server-side frameworks, as it's part of the trend "send HTML over the wire": ask the server to send partial blocks of HTML instead of handling JSON in the client.</blockquote> |
|||
HTMX integrations have been developed for various full-stack/backend web frameworks, programming languages and templating engines, including [[Node.js]], [[Django (web framework)|Django]], [[Flask (web framework)|Flask]], [[Adobe ColdFusion]], [[ASP.NET]], [[Clojure]], and [[Ruby on Rails]].<ref>{{Cite web |title=htmx ~ Server-Side Examples |url=https://htmx.org/server-examples/ |access-date=2024-05-19 |website=htmx.org}}</ref> 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.<ref name=":2" /> |
|||
JavaScript Rising Stars use the number of stars added on GitHub over the last 12 months to determine which technology is gaining momentum<ref>{{cite web | url=https://risingstars.js.org/2023/en | title=2023 JavaScript Rising Stars }}</ref> |
|||
== References == |
== References == |
||
{{reflist}} |
{{reflist}} |
||
== External links == |
|||
* "HTMX: HTML Approach to Interactivity in a JavaScript World." The New Stack. Available at: <nowiki>https://thenewstack.io/htmx-html-approach-to-interactivity-in-a-javascript-world/</nowiki>. |
|||
* {{Official website|https://htmx.org/}} |
|||
* [https://github.com/bigskysoftware/htmx Github repository] |
|||
{{Web frameworks}} |
|||
* "HTMX - High Power Tools for HTML." HTMX. Available at: <nowiki>https://htmx.org/</nowiki>. |
|||
{{Draft categories| |
{{Draft categories| |
Revision as of 18:35, 19 May 2024
- 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: Additional references from independent and reliable sources are essential to demonstrate notability. Hitro talk 09:56, 27 January 2024 (UTC)
- Comment: Please make sure to include WP:INCITE and also use secondary reliable sources. CNMall41 (talk) 21:03, 21 January 2024 (UTC)
Original author(s) | Carson Gross |
---|---|
Initial release | November 24, 2020[1] |
Stable release | 1.9.12[2]
/ 26 April 2024 |
Written in | JavaScript |
Size | 15.7 KB min+gzip[3] |
Type | JavaScript library |
License | BSD 0-clause[4] |
Website | htmx |
HTMX is an open-source[5] front-end JavaScript library created by Carson Gross an a new version of intercooler.js. It extends HTML with custom HTML attributes that AJAX directly in HTML and with a hypermedia-driven approach. This allows tasks that traditionally required writing JavaScript to be done completely with HTML.
History
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.[6] 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.[7][8]
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.[9] 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.[10]
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.[11]
Design and functionality
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,[12] complex state management or hydration.[13] 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.[14]
It also challenges the common approach of utilizing JSON as the standard payload for HTTP requests by replacing it with HTML.[6] 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.[15] 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.[16] 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.[17]
The library's design philosophy revolves around a goal to "complete HTML as a hypertext."[18] 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 the need for extensive JavaScript code.[19][20] This approach offers a more accessible and intuitive way to build modern user interfaces while avoiding the complexities often associated with traditional JavaScript frameworks.[21]
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.[22][23] With its focus on simplicity and accessibility, HTMX has gained a measure of popularity as an alternative to the approach of most JavaScript frameworks for building dynamic web applications.[24][25][26]
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, Clojure, and Ruby on Rails.[27] 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.[18]
References
- ^ "Release v1.0.0 - HTMX". GitHub.
- ^ "Release v1.9.12 - HTMX". GitHub.
- ^ "htmx.org v1.9.12". Unpkg. Retrieved 2024-04-30.
- ^ "htmx/LICENSE". HTMX. Retrieved 2024-04-30 – via GitHub.
- ^ Desai, Milin. "Council Post: Why Every Company Should Be Open-Source Aligned". Forbes. Retrieved 2024-05-19.
- ^ a b Melanson, Mike (2022-01-19). "Htmx: HTML Approach to Interactivity in a JavaScript World". The New Stack. Retrieved 2024-04-24.
- ^ Gross, Carson. "Simple AJAX using HTML attributes". Intercooler.js. Retrieved 2024-04-24.
- ^ Fielding, Roy T. (20 Oct 2008). "REST APIs must be hypertext-driven » Untangled".
- ^ "htmx ~ htmx 1.0.0 has been released!". htmx.org. Retrieved 2024-04-24.
- ^ "htmx | Technology Radar". Thoughtworks.
- ^ Sowles, Kara (2023-04-12). "GitHub Accelerator: our first cohort and what's next". The GitHub Blog. Retrieved 2024-04-24.
- ^ 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
- ^ "A First Look at HTMX and How it Compares to React". Builder.io.
- ^ "htmx ~ Documentation". htmx.org. Retrieved 2024-04-30.
- ^ 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) - ^ 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.
- ^ 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.
- ^ a b Tyson, Matthew (2023-09-20). "Intro to HTMX: Dynamic HTML without JavaScript". InfoWorld. Retrieved 2024-04-24.
- ^ "Introduction to HTMX | refine". 26 October 2023.
- ^ Tyson, Matthew (2024-03-13). "Complexity bad: An interview with HTMX creator Carson Gross". InfoWorld. Retrieved 2024-04-24.
- ^ "htmx ~ Essays". htmx.org. Retrieved 2024-04-30.
- ^ "@htmx_org". X (formerly Twitter). Retrieved 2024-05-19.
- ^ "htmx.org". npm. 2024-04-17. Retrieved 2024-04-30.
- ^ "Exploring the Top Lightweight Alternatives to React in 2024". www.sitepoint.com. 2023-08-13. Retrieved 2024-05-19.
- ^ Letusheva, Valeria (2024-05-09). "Highlights from the Django Developer Survey 2024". InfoWorld. Retrieved 2024-05-19.
- ^ Tyson, Matthew (2024-04-01). "What's the best JavaScript framework?". InfoWorld. Retrieved 2024-05-19.
- ^ "htmx ~ Server-Side Examples". htmx.org. Retrieved 2024-05-19.