Original link: http://afoo.me/posts/2023-07-13-review-htmx.html
It’s 2023, let’s talk about the feeling of using HTMX-Wang Fuqiang’s personal blog: the thinking and precipitation of an architect
Wang Fuqiang’s personal blogIt’s 2023, let’s talk about the feeling of using HTMLX
Wang Fuqiang
It is possible to quickly write a simple single-page application, but you have to change your thinking. Moreover, no matter how simple it is, you need some flexibility. For example, the simplest point is that it generates itself as an authentic hypermedia, but for the response I can’t say how convenient the status code is, even if it provides an extension . Anyway I smack it:
- It is cumbersome and not easy to use (introduce js, declare instructions in at least two places);
- It can’t be used (maybe I didn’t understand it, anyway, I didn’t succeed in the experiment);
It is very simple to deal with the requirements of non-200 status codes, or you can integrate them into the core library, otherwise, the version compatibility of the extension will definitely not be good, and there will be an extra layer of cognitive burden on users. So, in the end, I can only discard the status code on the server side and use 200 directly. Anyway, the feedback is distinguished by the returned error message fragment.
// ctx.response().setStatusCode(400) val template = s""" |<div class="flex flex-wrap ${ if ( disappearAfter ) "disappear" else "" } "> | <div class="mx-auto w-full p-4 md:w-1/2"> | <div class="h-full rounded shadow-md p-8"> | <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg"> | <path fill-rule="evenodd" clip-rule="evenodd" d="M49.0242 14.4358C43.3597 12.5214 37.2232 12.5214 31.5588 14.4358L30.5226 14.786C25.2023 16.5841 20.6721 20.1749 17.7068 24.944L17.5034 25.2712C14.4253 30.2217 13.3205 36.1484 14.408 41.8755C15.4616 47.4241 18.4999 52.399 22.955 55.8702L23.72 56.4662C24.5986 57.1508 25.0473 58.2719 24.784 59.3541L24.5935 60.1374C24.3954 60.9518 24.4167 61.8042 24.6553 62.6078C25.2527 64.62 27.102 66 29.201 66H35.2624H45.3196H51.3893C53.4834 66 55.3284 64.6233 55.9244 62.6158C56.1644 61.8073 56.184 60.9493 55.981 60.1306L55.7953 59.3821C55.5247 58.2907 55.9759 57.1573 56.8629 56.4662L57.628 55.8702C62.083 52.399 65.1213 47.4241 66.1749 41.8755C67.2624 36.1484 66.1576 30.2217 63.0795 25.2712L62.8761 24.944C59.9108 20.1749 55.3806 16.5841 50.0604 14.786L49.0242 14.4358Z" fill="#9B51E0" /> | <path d="M31.5588 14.4358L32.1991 16.3305V16.3305L31.5588 14.4358ZM49.0242 14.4358L48.3838 16.3305L48.3838 16.3305L49.0242 14.4358ZM30.5226 14.786L29.8822 12.8913L29.8822 12.8913L30.5226 14.786ZM17.7068 24.944L16.0083 23.888L17.7068 24.944ZM17.5034 25.2712L19.2019 26.3272L17.5034 25.2712ZM14.408 41.8755L16.3729 41.5024L14.408 41.8755ZM22.955 55.8702L24.1842 54.2925L24.1842 54.2925L22.955 55.8702ZM24.5935 60.1374L26.5368 60.6101L24.5935 60.1374ZM24.6553 62.6078L22.738 63.177L24.6553 62.6078ZM55.9244 62.6158L54.0071 62.0465L55.9244 62.6158ZM55.981 60.1306L57.9222 59.6493L55.981 60.1306ZM57.628 55.8702L58.8572 57.4478H58.8572L57.628 55.8702ZM66.1749 41.8755L64.21 41.5024L66.1749 41.8755ZM63.0795 25.2712L61.381 26.3272L61.3811 26.3272L63.0795 25.2712ZM62.8761 24.944L64.5746 23.888L64.5746 23.888L62.8761 24.944ZM50.0604 14.786L50.7007 12.8913L50.7007 12.8913L50.0604 14.786ZM55.7953 59.3821L53.8541 59.8635L55.7953 59.3821ZM24.784 59.3541L22.8407 58.8814L24.784 59.3541ZM32.1991 16.3305C37.4482 14.5565 43.1347 14.5565 48.3838 16.3305L49.6645 12.5411C43.5847 10.4863 36.9982 10.4863 30.9184 12.5411L32.1991 16.3305ZM31.1629 16.6807L32.1991 16.3305L30.9184 12.5411L29.8822 12.8913L31.1629 16.6807ZM19.4053 26.0001C22.1257 21.6247 26.2819 18.3304 31.1629 16.6807L29.8822 12.8913C24.1227 14.8379 19.2185 18.7251 16.0083 23.888L19.4053 26.0001ZM19.2019 26.3272L19.4053 26.0001L16.0083 23.888L15.8049 24.2151L19.2019 26.3272ZM16.3729 41.5024C15.379 36.2682 16.3887 30.8517 19.2019 26.3272L15.8049 24.2151C12.4619 29.5918 11.262 36.0286 12.4431 42.2486L16.3729 41.5024ZM24.1842 54.2925C20.1126 51.1201 17.3358 46.5734 16.3729 41.5024L12.4431 42.2486C13.5874 48.2747 16.8873 53.6778 21.7257 57.4478L24.1842 54.2925ZM24.9492 54.8886L24.1842 54.2925L21.7257 57.4478L22.4908 58.0439L24.9492 54.8886ZM22.8407 58.8814L22.6502 59.6647L26.5368 60.6101L26.7274 59.8268L22.8407 58.8814ZM22.6502 59.6647C22.3685 60.8226 22.3988 62.0346 22.738 63.177L26.5726 62.0385C26.4346 61.5739 26.4223 61.081 26.5368 60.6101L22.6502 59.6647ZM22.738 63.177C23.5874 66.0379 26.2167 68 29.201 68V64C27.9873 64 26.918 63.202 26.5726 62.0385L22.738 63.177ZM29.201 68H35.2624V64H29.201V68ZM35.2624 68H45.3196V64H35.2624V68ZM45.3196 68H51.3893V64H45.3196V68ZM51.3893 68C54.3688 68 56.9936 66.0412 57.8417 63.185L54.0071 62.0465C53.6631 63.2053 52.5981 64 51.3893 64V68ZM57.8417 63.185C58.1832 62.0347 58.211 60.8139 57.9222 59.6493L54.0398 60.612C54.1569 61.0846 54.1457 61.5798 54.0071 62.0465L57.8417 63.185ZM57.9222 59.6493L57.7365 58.9007L53.8541 59.8635L54.0398 60.612L57.9222 59.6493ZM56.3987 54.2925L55.6337 54.8886L58.0922 58.0439L58.8572 57.4478L56.3987 54.2925ZM64.21 41.5024C63.2471 46.5734 60.4703 51.1201 56.3987 54.2925L58.8572 57.4478C63.6957 53.6778 66.9955 48.2747 68.1398 42.2486L64.21 41.5024ZM61.3811 26.3272C64.1942 30.8517 65.2039 36.2682 64.21 41.5024L68.1398 42.2486C69.3209 36.0286 68.121 29.5918 64.778 24.2151L61.3811 26.3272ZM61.1777 26.0001L61.381 26.3272L64.778 24.2151L64.5746 23.888L61.1777 26.0001ZM49.42 16.6807C54.301 18.3304 58.4572 21.6247 61.1777 26.0001L64.5746 23.888C61.3645 18.7251 56.4602 14.8379 50.7007 12.8913L49.42 16.6807ZM48.3838 16.3305L49.42 16.6807L50.7007 12.8913L49.6645 12.5411L48.3838 16.3305ZM57.7365 58.9007C57.6755 58.6545 57.7619 58.3012 58.0922 58.0439L55.6337 54.8886C54.19 56.0135 53.3739 57.9269 53.8541 59.8635L57.7365 58.9007ZM22.4908 58.0439C22.8144 58.296 22.8991 58.6412 22.8407 58.8814L26.7274 59.8268C27.1954 57.9025 26.3828 56.0055 24.9492 54.8886L22.4908 58.0439Z" fill="#56CCF2" /> | <path d="M25.8269 33C27.9705 31.7624 30.6115 31.7624 32.7551 33C34.8987 34.2376 36.2192 36.5248 36.2192 39C36.2192 41.4752 34.8987 43.7624 32.7551 45C30.6115 46.2376 27.9705 46.2376 25.8269 45C23.6833 43.7624 22.3628 41.4752 22.3628 39C22.3628 36.5248 23.6833 34.2376 25.8269 33Z" fill="#56CCF2" /> | <path d="M47.8269 33C49.9705 31.7624 52.6115 31.7624 54.7551 33C56.8987 34.2376 58.2192 36.5248 58.2192 39C58.2192 41.4752 56.8987 43.7624 54.7551 45C52.6115 46.2376 49.9705 46.2376 47.8269 45C45.6833 43.7624 44.3628 41.4752 44.3628 39C44.3628 36.5248 45.6833 34.2376 47.8269 33Z" fill="#56CCF2" /> | <path d="M35.291 66V58" stroke="#56CCF2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> | <path d="M45.291 66V58" stroke="#56CCF2" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> |</svg> | <p class="mb-6 leading-relaxed"> | Oops... $message | </p> | </div> | </div> |</div> | """ . stripMargin ctx . response (). end ( template )
It turns out that there is still resistance to the management of html fragments, but since it is a small and simple thing, with Scala’s String interpolation feature and tailwind’s play WYSIWYG, it is still passable, and direct copying and pasting is almost the same.
So, in the end, it becomes, htmx sends the simplest form submission request, after the server side extracts the parameters to obtain the database status, insert the html fragment through string interpolation as a string response and return it.
Basically, it is an index.html static file + n many routes to return html fragments. If there are too many, it is definitely not easy to manage. I just have one handler, and it is enough to write a few more methods and put them in one class for management.
The advantage is that you don’t need to configure jte’s compilation. The disadvantage is that you lose real-time preview during development and frequent restarts.
tips
Confirm before submitting the form
hx-confirm="Are you sure?"status flag during runtime
Most importantly, pre-defined css needs to be defined:
.htmx-indicator { opacity : 0 ; transition : opacity 500 ms ease-in ; } .htmx-request .htmx-indicator { opacity : 1 } .htmx-request.htmx-indicator { opacity : 1 }
<button hx-post = "/example" > <img class = "htmx-indicator" src = "/img/bars.svg" /> Post It! </button>
notification message
I added the disappear class to the returned response element:
.disappear { animation : disappear 0 s linear 3 s forwards ; } @keyframes disappear { to { opacity : 0 ; } }
In principle, it should be better handled by the client side, but since htmx is controlled by the server side, it is temporarily like this. Anyway, this kind of rendering is fine with a different method from the normal response, and the normal response does not need to add the disappear class.
history
For the top-level link, it is best to add the history of the browser to facilitate direct access and backtracking. This effect can be obtained by adding hx-push-url="true" when the event is triggered:
<nav class = "md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center" > <a class = "mr-5 hover:text-gray-900" href = "/" > Permission Mgmt </a> <a class = "mr-5 hover:text-gray-900" hx-get = "/product" hx-target = "#mainZone" hx-swap = "outerHTML" hx-push-url = "true" > Product Mgmt </a> <a class = "mr-5 hover:text-gray-900" hx-get = "/console" hx-target = "#mainZone" hx-swap = "outerHTML" hx-push-url = "true" > SQL Console </a> </nav>
On the planet “Crazy for AI”, Mr. Fuqiang is discussing interesting AI topics with his friends. Would you like to come together? ^-^
here
- Not only timely and fresh AI information and in-depth discussions
- Also share AI tools, product approaches and business opportunities
- There are more than 1,000 original paid content (nearly 500 minutes) waiting for you, join the planet (https://t.zsxq.com/0dI3ZA0sL) to get it for free!
Everything is homebrewed with pandoc and Markdown , little Scala also included.
This article is transferred from: http://afoo.me/posts/2023-07-13-review-htmx.html
This site is only for collection, and the copyright belongs to the original author.