Software:HTMX: Difference between revisions

From HandWiki
(import)
 
(import)
 
Line 1: Line 1:
'''HTMX''' is an open-source.<ref>{{cite web | url=https://github.com/bigskysoftware/htmx | title=Bigskysoftware/HTMX | website=[[GitHub]] }}</ref> JavaScript library for modern web development that allows developers to build interactive, dynamic, and seamless web applications while adhering to the original model of the web. Created by Carson Gross, HTMX provides a simplistic approach by leveraging [[HTML]] and [[Hypermedia|hypermedia]] concepts rather than relying heavily on [[JavaScript]] code<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 &#124; refine | date=26 October 2023 }}</ref>.
{{Infobox software
| name = HTMX
| logo = SVGmix-XRp12W-htmx.svg
| author = Carson Gross
| released = {{Start date and age|2020|11|24}}<ref>{{cite web |url = https://github.com/bigskysoftware/htmx/releases/tag/v1.0.0 |title=Release v1.0.0 - HTMX |website=GitHub}}</ref>
| latest release version = 1.9.12<ref>{{cite web|url=https://github.com/bigskysoftware/htmx/releases/tag/v1.9.12|title=Release v1.9.12 - HTMX |website=GitHub}}</ref>
| latest release date = {{Start date and age|2024|04|26|df=yes}}
| programming language = [[JavaScript]]
| size = 15.7&nbsp;KB [[Minification (programming)|min]]+[[Software:Gzip|gzip]]<ref>{{Cite web |title=htmx.org v1.9.12 |url=https://unpkg.com/browse/htmx.org@1.9.12/dist/ |access-date=2024-04-30 |website=Unpkg |language=en}}</ref>
| genre = [[JavaScript library]]
| 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 as a new version of '''intercooler.js'''. It extends [[HTML]] with custom [[HTML attribute|attributes]] that [[Ajax (programming)|AJAX]] directly in HTML and with a [[Hypermedia|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, an alternative 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. With the tagline "AJAX With Attributes: There is no need to be complex," intercooler.js gained popularity among web developers looking for a more straightforward way to incorporate dynamic functionality into their applications<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>
 
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 Oct 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>.
 
Gross continued to refine and improve intercooler.js, and in recent years, it evolved into HTMX. The transition to HTMX marked a significant update and expansion of the library's capabilities, allowing developers to leverage AJAX, [[CSS]] transitions, [[WebSocket|WebSockets]], and Server-Sent Events directly in HTML using attributes.
 
== Design and Functionality ==
HTMX builds upon the foundation laid by intercooler.js, offering a range of attributes that developers can use to enhance HTML elements and create interactive web applications.
 
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.
 
HTMX enables partial page updates, meaning that only specific portions of a webpage are updated dynamically when triggered by user interactions. This approach eliminates the need to reload the entire page, resulting in a smoother user experience and improved performance.
 
== Key Differentiators from JavaScript Frameworks ==
In comparison to JavaScript frameworks like [[Software:React|React]] and [[Software:Vue.js|Vue.js]], which create [[Software: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. This eliminates the need for developers to write extensive JavaScript code to handle data processing and UI updates.
 
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 developers to trigger requests from any HTML element.
# Limited 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 and POST.
# Limited page replacement: HTMX allows developers to update specific parts of a page dynamically instead of requiring the entire page to be replaced.
 
By removing these constraints, HTMX enables developers to leverage HTML as a complete hypertext, creating modern user experiences with minimal HTML and styling.
 
== Integration and Compatibility ==
HTMX is designed to be lightweight and easy to integrate into existing projects. Developers can incrementally add HTMX to enhance specific parts of their applications without requiring a complete overhaul. It is compatible with all modern web browsers and works seamlessly with various back-end frameworks and languages.<ref>{{cite web | url=https://shaxadd.medium.com/what-is-htmx-why-is-tech-twitter-so-hyped-up-about-it-681ef1736770 | title=What is HTMX? Why is Tech Twitter So Hyped up About It? | date=30 May 2023 }}</ref>
 
The library's simplicity and versatility make it suitable for a wide range of projects, from small applications to large-scale web applications. HTMX can be used alongside other tools and libraries, such as CSS frameworks and JavaScript utilities, to create powerful and responsive web interfaces.<ref>{{cite web | url=https://www.linkedin.com/pulse/revolutionizing-web-development-htmx-paradigm-shift-muduli/ | title=Revolutionizing Web Development with HTMX: A Paradigm Shift }}</ref>
 
== 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 attracted developers looking for a more intuitive approach to building dynamic web applications<ref>https://twitter.com/htmx_org</ref><ref>{{cite web | url=https://www.reddit.com/r/django/comments/10b0uxs/what_is_so_great_about_htmx/ | title=What is so great about HTMX? | date=13 January 2023 }}</ref><ref>{{cite web | url=https://www.youtube.com/watch?v=3GObi93tjZI | title=DjangoCon 2022 &#124; from React to HTMX on a real-world SaaS product: We did it, and it's awesome! | website=[[Company:YouTube|YouTube]] }}</ref><ref>{{cite web | url=https://medium.com/codex/htmx-the-framework-stupid-gets-dialed-up-to-eleven-2e18f7f2152a | title=HTMX, the "Framework Stupid" Gets Dialed up to Eleven! | date=18 January 2024 }}</ref><ref>{{cite web | url=https://medium.com/@hhartleyjs/2024-is-the-year-of-htmx-74ccd82083cf | title=2024 is the year of HTMX | date=January 2024 }}</ref>


The project's [[GitHub]] repository serves as a hub for the HTMX community, allowing developers to explore the source code, report issues, and contribute to its ongoing development. The library's growing adoption and active community demonstrate its value as an alternative solution for creating modern user interfaces.
HTMX was created as an improved version of intercooler.js that did not rely on [[Software:JQuery|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>


== Recognition ==
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>
In June 2023, HTMX was accepted into the '''GitHub Accelerator Program'''<ref>https://accelerator.github.com/</ref>. GitHub Accelerator is a selective program (20 out of 1,000 applications were included). ''"GitHub Accelerator is a 10-week program where open source maintainers receive an initial sponsorship of $20K to work on their project, paired with guidance and workshops from open source leaders, with an end goal of building durable streams of funding for their work"''<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:
== Design and functionality ==
<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.<br><br>
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 [[Software: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|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 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>
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|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 numbers from [[Integer|integers]] and the complexity involved with alternatives to JSON-oriented REST, such as [[Software:GraphQL|GraphQL]] or [[Software:GRPC|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 [[Software:PostgreSQL|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=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>


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>
The library's design philosophy revolves around a goal to "complete HTML as a [[Hypertext|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 &#124; 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>


== Tech Media Coverage ==
== Community and adoption ==
As a technology, HTMX is primarily covered in the tech media. Here are some noteworthy mentions:
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> HTMX has been viewed as a simpler and lighter weight alternative to full-blown JavaScript frameworks like [[Software:React (JavaScript library)|React]], [[Software:Vue.js|Vue.js]], and [[Software:Angular (web framework)|Angular]].<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><ref>{{Cite book |last=Dale |first=Kyran |title=Data Visualization with Python and JavaScript |date=2022-12-07 |publisher=O'Reilly Media |isbn=9781098111878 |edition=2nd |location=Sebastopol, CA |chapter=Chapter 4. Webdev 101}}</ref> 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.<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>
* '''"Unlocking Interactivity with HTMX: A Deeper Dive into Modern Web Development"''' by Asvindra Rajpoot on Talentica.com<ref>{{cite web | url=https://www.talentica.com/blogs/unlocking-interactivity-with-htmx-a-deeper-dive-into-modern-web-development/ | title=Unlocking Interactivity with HTMX: A Deeper Dive into Modern Web Development | date=3 October 2023 }}</ref>.
* '''"Why you should choose HTMX for your next project"''' on DEV Community<ref>{{cite web | url=https://dev.to/turculaurentiu91/why-you-should-choose-htmx-for-your-next-project-o7j | title=Why you should choose HTMX for your next project | date=19 October 2023 }}</ref>.
* '''"A First Look at HTMX and How it Compares to React"''' by Yoav Ganbar on Builder.io<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>.
* '''"Simplifying Web Development with HTMX: Dynamic Applications Using HTML Attributes"''' on Yon.fun<ref>{{cite web | url=https://yon.fun/htmx/ | title=Explore HTMX: The Game-Changer for Modern Web Development | date=16 August 2023 }}</ref>.
* '''"Getting Started With HTMX: A Comprehensive Guide for Beginners"''' on 7.dev<ref>{{cite web | url=https://7.dev/getting-started-with-htmx/ | title=Getting Started with HTMX: A Comprehensive Guide for Beginners – 7.dev }}</ref>.
* '''"htmx and HTML Driven Development"''' on DEV Community<ref>{{cite web | url=https://dev.to/rajasegar/htmx-and-html-driven-development-3800 | title=HTMX and HTML Driven Development | date=11 April 2021 }}</ref>.
* '''"Htmx: HTML Approach to Interactivity in a JavaScript World"''' by Mike Melanson on The New Stack<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>.
* '''HTMX on Thoughtworks' Technology Radar'''<ref>{{cite web | url=https://www.thoughtworks.com/en-us/radar/languages-and-frameworks/htmx | title=HTMX &#124; Technology Radar }}</ref>.
* '''"Dynamic Web Apps without JavaScript - HTMX Showcase at DjangoCon and Devoxx"''' on InfoQ<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>.
* '''"Pros and Cons for a htmx beginner"'''  on labcodes.com<ref>{{cite web | url=https://labcodes.com.br/blog/en-us/development/pros-and-cons-for-a-htmx-beginner/ | title=Pros and Cons for a HTMX beginner &#124; Labcodes }}</ref>.
* '''"What is HTMX? Why it Matters? and How to use it"''' on DEV Community<ref>{{cite web | url=https://dev.to/alexmercedcoder/what-is-htmx-why-it-matters-and-how-to-use-it-10h3 | title=What is HTMX? Why it Matters? And How to use it | date=11 December 2023 }}</ref>.


== Social Media Presence ==
HTMX integrations have been developed for various full-stack/backend web frameworks, programming languages and templating engines, including [[Software:Node.js|Node.js]], [[Software:Django (web framework)|Django]], [[Software:Flask (web framework)|Flask]], [[Software:Adobe ColdFusion|Adobe ColdFusion]], [[Software:ASP.NET|ASP.NET]], [[Clojure]], and [[Software:Ruby on Rails|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" />
Several influential software developers on YouTube have embraced HTMX and the shift it represents in building reactive web applications. Here are some of the most viewed videos:
* '''htmx in 100 seconds''' by Fireship<ref>{{cite web | url=https://www.youtube.com/@Fireship | title=Fireship - YouTube | website=[[Company:YouTube|YouTube]] }}</ref> has received more than 1 million views as of January 28, 2024. Some of the quotes from the video include: "HTMX is more capable than you think", "It is so easy", "It can handle the requirements of modern UI", "You just put the Hyper back in Hyper Text", " and "... if you want to write your own clientside JavaScript, the hx-on attribute allows you to bind a JavaScript function to any element" <ref>{{cite web | url=https://www.youtube.com/watch?v=r-GSGH2RxJs | title=HTMX in 100 seconds | website=[[Company:YouTube|YouTube]] }}</ref>
* '''From React To HTMX''' by ThePrimeTime<ref>{{cite web | url=https://www.youtube.com/@ThePrimeTimeagen | title=ThePrimeTime - YouTube | website=[[Company:YouTube|YouTube]] }}</ref> has received more than 247,000 views (Jan 28, 2024). The video covers a presentation from DjangoCon for [[Software:Django (web framework)|Django (web framework)]] developers in 2022 called ''"From React to htmx on a real-world SaaS product. We did it! (and it was awesome)"''. Some quotes from the video "Beautiful animation", "It is just text", "Is it client-side application state management? Not it isn't", and "... that was awesome! That was awesome. That was so cool". It shows that Django + htmx is two to three times faster than Django + [[Software:React|React]] on First load, while almost halving the memory usage. The team went from four to three engineers, with all engineers becoming full-stack developers. The size of the code base was reduced to about 1/3, and the compile time went from 41 to 5 seconds.<ref>{{cite web | url=https://www.youtube.com/watch?v=wIzwyyHolRs | title=From React to HTMX | website=[[Company:YouTube|YouTube]] }}</ref>
* '''The Truth About HTMX''' by Theo - t3.gg<ref>{{cite web | url=https://www.youtube.com/@t3dotgg | title=Theo - t3․gg - YouTube | website=[[Company:YouTube|YouTube]] }}</ref> has received 145,000 views (Jan 28, 2023). Some quotes from the video "In case you have not heard yet, HTMX is the new trend", and "they work with JavaScript, so you don't have to".<ref>{{cite web | url=https://www.youtube.com/watch?v=NA5Fcgs_viU | title=The Truth About HTMX | website=[[Company:YouTube|YouTube]] }}</ref>.
* '''DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!''' by DjangoConEurope<ref>{{cite web | url=https://www.youtube.com/@DjangoConEurope | title=DjangoCon Europe - YouTube | website=[[Company:YouTube|YouTube]] }}</ref> has 65,000 views (Jan 28, 2023). A quote from the video description "We took the plunge and replaced the 2-year-of-work React UI of our SaaS product with simple Django templates and htmx in a couple of months. We’d like to share our experience with you, with concrete indicators on various aspects, and convince your CTO!"<ref>{{cite web | url=https://www.youtube.com/watch?v=3GObi93tjZI | title=DjangoCon 2022 &#124; from React to HTMX on a real-world SaaS product: We did it, and it's awesome! | website=[[Company:YouTube|YouTube]] }}</ref>


== References ==
== References ==
{{reflist}}
{{reflist}}


* "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>.
== External links ==
* {{Official website|https://htmx.org/}}
* [https://github.com/bigskysoftware/htmx Github repository]


* "HTMX - High Power Tools for HTML." HTMX. Available at: <nowiki>https://htmx.org/</nowiki>.
{{Web frameworks}}


{{Draft categories|
{{Draft categories|
[[Category:Web development]]
[[:Category:Web development]]
[[Category:Web frameworks]]
[[:Category:Web frameworks]]
}}
}}
{{Sourceattribution|HTMX}}
{{Sourceattribution|HTMX}}

Latest revision as of 09:45, 28 July 2024

HTMX
SVGmix-XRp12W-htmx.svg
Original author(s)Carson Gross
Initial releaseNovember 24, 2020; 4 years ago (2020-11-24)[1]
Stable release
1.9.12[2] / 26 April 2024; 7 months ago (2024-04-26)
Written inJavaScript
Size15.7 KB min+gzip[3]
TypeJavaScript library
LicenseBSD 0-clause[4]
Websitehtmx.org

HTMX is an open-source[5] front-end JavaScript library created by Carson Gross as a new version of intercooler.js. It extends HTML with custom 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] HTMX has been viewed as a simpler and lighter weight alternative to full-blown JavaScript frameworks like React, Vue.js, and Angular.[24][25] 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.[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

  1. ↑ "Release v1.0.0 - HTMX". https://github.com/bigskysoftware/htmx/releases/tag/v1.0.0. 
  2. ↑ "Release v1.9.12 - HTMX". https://github.com/bigskysoftware/htmx/releases/tag/v1.9.12. 
  3. ↑ "htmx.org v1.9.12" (in en). https://unpkg.com/browse/htmx.org@1.9.12/dist/. 
  4. ↑ "htmx/LICENSE". HTMX. https://github.com/bigskysoftware/htmx/blob/master/LICENSE. 
  5. ↑ Desai, Milin. "Council Post: Why Every Company Should Be Open-Source Aligned" (in en). https://www.forbes.com/sites/forbestechcouncil/2023/10/25/why-every-company-should-be-open-source-aligned/. 
  6. ↑ 6.0 6.1 Melanson, Mike (2022-01-19). "Htmx: HTML Approach to Interactivity in a JavaScript World" (in en-US). https://thenewstack.io/htmx-html-approach-to-interactivity-in-a-javascript-world/. 
  7. ↑ Gross, Carson. "Simple AJAX using HTML attributes" (in en). http://intercoolerjs.org/. 
  8. ↑ Fielding, Roy T. (20 Oct 2008). "REST APIs must be hypertext-driven » Untangled". https://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven. 
  9. ↑ "htmx ~ htmx 1.0.0 has been released!". https://htmx.org/posts/2020-11-24-htmx-1-0-0-is-released/. 
  10. ↑ "htmx | Technology Radar" (in en-US). https://www.thoughtworks.com/en-us/radar/languages-and-frameworks/htmx. 
  11. ↑ Sowles, Kara (2023-04-12). "GitHub Accelerator: our first cohort and what's next" (in en-US). https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/. 
  12. ↑ Sheppard, Dennis (2017), "Leveling Up Your PWA" (in en), 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, http://link.springer.com/10.1007/978-1-4842-3090-9_12, retrieved 2024-04-30 
  13. ↑ "A First Look at HTMX and How it Compares to React" (in en). https://www.builder.io/blog/htmx-vs-react. 
  14. ↑ "htmx ~ Documentation". https://htmx.org/docs/#swapping. 
  15. ↑ Kleppmann, Martin (2017-03-01). "Formats for Encoding Data" (in en-US). 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. 
  16. ↑ Shi, Xuanhua; Zhang, Yipeng; Huang, Hong; Hu, Zhenyu; Jin, Hai; Shen, Huan; Zhou, Yongluan; He, Bingsheng et al. (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. https://ieeexplore.ieee.org/document/9101499. 
  17. ↑ Eckert, Raphael (2023-03-23) (in de-DE). Erstellen eines einfach bedienbaren und einfach implementierbaren UI-Konzepts mit Go und htmx. Heilbronn: Hochschule Heilbronn. https://t73f.de/hochschule/thesis/2023_eckert.pdf. 
  18. ↑ 18.0 18.1 Tyson, Matthew (2023-09-20). "Intro to HTMX: Dynamic HTML without JavaScript" (in en). https://www.infoworld.com/article/3706951/htmx-dynamic-html-without-the-javascript.html. 
  19. ↑ "Introduction to HTMX | refine". 26 October 2023. https://refine.dev/blog/what-is-htmx/. 
  20. ↑ Tyson, Matthew (2024-03-13). "Complexity bad: An interview with HTMX creator Carson Gross" (in en). https://www.infoworld.com/article/3713164/complexity-bad-an-interview-with-carson-gross.html. 
  21. ↑ "htmx ~ Essays". https://htmx.org/essays/. 
  22. ↑ "@htmx_org". https://twitter.com/htmx_org. 
  23. ↑ "htmx.org" (in en). 2024-04-17. https://www.npmjs.com/package/htmx.org. 
  24. ↑ Tyson, Matthew (2024-04-01). "What's the best JavaScript framework?" (in en). https://www.infoworld.com/article/3713207/whats-the-best-javascript-framework.html. 
  25. ↑ Dale, Kyran (2022-12-07). "Chapter 4. Webdev 101". Data Visualization with Python and JavaScript (2nd ed.). Sebastopol, CA: O'Reilly Media. ISBN 9781098111878. 
  26. ↑ Letusheva, Valeria (2024-05-09). "Highlights from the Django Developer Survey 2024" (in en). https://www.infoworld.com/article/3715395/highlights-from-the-django-developer-survey-2024.html. 
  27. ↑ "htmx ~ Server-Side Examples". https://htmx.org/server-examples/. 

External links

This page will be placed in the following categories if it is moved to the Article namespace.
Categories:


Retrieved from "https://handwiki.org/wiki/index.php?title=Software:HTMX&oldid=3735706"