HTMX を GO に追加する
HTMX is the successor to intercooler.js, as is used to extend HTML with HTTP commands without needing to write an API. Now, I know in the beginning I said I was removing abstraction layers, however I'm more of systems/tooling programmer, so I still need some abstractions until I have a grasp of what is actually happening underneath.
Basic Concept
HTMX deploys AJAX commands to modify an element. This is similar to how ReactJs works. ReactJs allows for updating content, and HTMX is fulfilling that for HTML.
Import HTMX
A simple one liner is added to ./internal/views/layout.templ
element.This was already included in the repo, however it has been updated to verify the script.
Using HTMX
HTMX comes with all of your favorite keywords appended with hx-.
# General format is hx-[verb] hx-get # HTTP GET hx-post # HTTP POST hx-put # HTTP PUT hx-patch # HTTP PATCH hx-delete # HTTP DELETE hx-swap # update content of an element hx-target # specify element to affect hx-trigger # action that executes function
There are more, however these are the main ones used in this project.
For a simple test, in ./internal/views/components/logo.templ, inside of the opening tag, we're going to add hx-get="/" and hx-trigger="click".
Open your terminal and run:
templ generate go run ./cmd/server/main.go
Now go to your browser and go to localhost:[YOUR PORT]/. Click on Gopher, and you should see... well, it happened so fast, you probably didn't notice. That's okay. Open the developer tools, and go to the inspector tab. Click the Gopher again. You should notice the update in the HTML in the inspector tab.
HX-SWAP
This is the bread and butter of HTMX. This is what gives us the responsive UI/UX we're looking for. Now, hx-swap, while simple in name, needs careful consideration on it's location. By this, I mean, do not put it where it will interfere with other elements.
Example:
<div > // container <button hx-delete="[endpoint]" hx-target="nearest [element]" hx-swap="outerHTML" hx-get="[endpoint]" hx-target="this"> // actor </button> // end actor </div // end-container
Placing all of the control on the button, will cause everything to be erased and prevent a button, for updating, being displayed. However, if we move some of the work to the container:
<div hx-get="[endpoint]" hx-target="this"> // container <li> <button hx-delete="[endpoint]" hx-target="nearest [element]" hx-swap="outerHTML"> // actor </button> // end actor </li> </div // end-container
Now, when we click the button, only the data INSIDE of the container is changed, except now a button exists for further editing.
Addendum
I'm stopping here for two (2) reasons.
First, you can use htmx and customize your site with it as it is. Second, we can return html code with a http.Reponse. By extension, we can pass templ components as well. Do you see where this is going?
Coming Soon
An entire restructure and moving functionality into go handlerFunc()s.
以上がHTMX を GO に追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Golangは、パフォーマンスとスケーラビリティの点でPythonよりも優れています。 1)Golangのコンピレーションタイプの特性と効率的な並行性モデルにより、高い並行性シナリオでうまく機能します。 2)Pythonは解釈された言語として、ゆっくりと実行されますが、Cythonなどのツールを介してパフォーマンスを最適化できます。

Golangは並行性がCよりも優れていますが、Cは生の速度ではGolangよりも優れています。 1)Golangは、GoroutineとChannelを通じて効率的な並行性を達成します。これは、多数の同時タスクの処理に適しています。 2)Cコンパイラの最適化と標準ライブラリを介して、極端な最適化を必要とするアプリケーションに適したハードウェアに近い高性能を提供します。

goisidealforforbeginnersandsutable forcloudnetworkservicesduetoitssimplicity、andconcurrencyfeatures.1)installgofromtheofficialwebsiteandverify with'goversion'.2)

Golangは迅速な発展と同時シナリオに適しており、Cは極端なパフォーマンスと低レベルの制御が必要なシナリオに適しています。 1)Golangは、ごみ収集と並行機関のメカニズムを通じてパフォーマンスを向上させ、高配列Webサービス開発に適しています。 2)Cは、手動のメモリ管理とコンパイラの最適化を通じて究極のパフォーマンスを実現し、埋め込みシステム開発に適しています。

GolangとPythonにはそれぞれ独自の利点があります。Golangは高性能と同時プログラミングに適していますが、PythonはデータサイエンスとWeb開発に適しています。 Golangは同時性モデルと効率的なパフォーマンスで知られていますが、Pythonは簡潔な構文とリッチライブラリエコシステムで知られています。

GolangとCのパフォーマンスの違いは、主にメモリ管理、コンピレーションの最適化、ランタイム効率に反映されています。 1)Golangのゴミ収集メカニズムは便利ですが、パフォーマンスに影響を与える可能性があります。

GolangとCにはそれぞれパフォーマンス競争において独自の利点があります。1)Golangは、高い並行性と迅速な発展に適しており、2)Cはより高いパフォーマンスと微細な制御を提供します。選択は、プロジェクトの要件とチームテクノロジースタックに基づいている必要があります。

GolangisidealforBuildingsCalables Systemsduetoitsefficiency andConcurrency、Whilepythonexcelsinquickscriptinganddataanalysisduetoitssimplicityand vastecosystem.golang'ssignencouragesclean、readisinediteNeditinesinedinediseNabletinedinedinedisedisedioncourase
