Vuguは、Goで書かれたWeb AssemblyをターゲットにしたWeb UIの実験ライブラリです。 https://www.vugu.orgのガイドとドキュメント。 https://godoc.org/github.com/vugu/vuguのgodoc。
JSではなくPure GoでUIを書きたいと思ったことがあります...そして今、ブラウザでそれを実行してください...それ(実験的;)の未来はここにあります!
Vugu(発音 /vuː/)を紹介します。
ノードなし。 JSはありません。 npmなし。ディスクスペースのために音楽ライブラリと競合するnode_modulesフォルダーはありません。
始めましょう:http://www.vugu.org/doc/start
まだ進行中の作業ですが、多くのことはすでに機能しています。いくつかは本当にうまくいきます。
vugu使用するには、最小限にv1.22.3に行く必要があります。 Go v1.22で導入されたループの変更が必要であり、V1.22.3は執筆時点で最も最後でした。
vugu構築しますvugu現在、Mageを使用してvugu Toolsのビルド( vugugen 、 vugufmt 、 vgfromを管理しています。 Mageは、テストプロセスの管理にも使用されます。
貢献者ガイドの更新されたビルド命令をご覧ください
例を実行するには、 mage Tool、 docker 、 goimportsをインストールする必要があります。 vugu mageを使用してビルドプロセスを管理します。
mageをインストールする最も簡単な方法は、次のとおりです。
git clone https://github.com/magefile/mage
cd mage
go run bootstrap.go
vuguのモジュールルートからmageを実行する必要があります。これは、トップgo.modが存在するディレクトリです。
また、 goimportsツールをインストールする必要があります。通常、エディタープラグインの一部として、これを既にインストールしている可能性が非常に高いです。そうでない場合は、次のようにインストールできます。
go install golang.org/x/tools/cmd/goimports@latest
例を実行するには、 dockerがインストールされる必要があります。 dockerがインストールされていない場合は、Dockerインストール手順に従ってください。各例は、ローカルnginxコンテナによって提供されます。
すべての例は、 examplesディレクトリにあります。 examplesの各サブディレクトリには、単一の例が含まれています。それぞれの例は、それが独自のGOモジュールです。
すべての例を構築して提供することは、次のように簡単です。
cd path/to/vugu
mage examples
または
cd path/to/vugu
mage -v examples
各例はフォームのURLで提供されます
http://localhost:8888/<name-of-example-directory>
たとえば、 fetch-and-display例を表示するには、URLが次のとおりです。
http://localhost:8888/fetch-and-display
または、単一の例を実行する場合の場合:使用します。
cd path/to/vugu
mage singleExample <name-of-example-module>
たとえばfetch-and-display例のみを提供するために、コマンドは次のとおりです。
cd path/to/vugu
mage singleExample github.com/vugu/vugu/example/fetch-and-display
新しい例を作成する必要がある場合、プロセスはかなり簡単です。重要なポイントは、それを実用的な例に基づいて基づいています。
例えば
cd /path/to/vugu
cp -r ./examples/fetch-and-display/ ./examples/my-new-example
cp 、クリティカルローカル.gitignoreファイルを含むディレクトリ内のすべてを新しい例ディレクトリにコピーします。 vugu生成されたファイルがリポジトリに提出されないようにするために、 .gitignoreが存在するようにしてください。
次に、モジュール名を変更するには、 ./examples/my-new-example/go.mod examples/my-new-example/go.modを編集する必要があります。このステップは重要です。
モジュール名を例に合わせて変更する必要があるため、この場合、モジュール名はgithub.com/vugu/vugu/examples/my-new-exampleに変更されます。
次に、必要に応じてroot.vugu 、 root.goを編集して、例をサポートするか、必要に応じて*.vuguおよび*.goファイルを追加できます。
ファイルmain_wasm.goおよびwasm_exec.js編集しないでください。
index.htmlファイルの例は、2つの異なる場所で編集する必要があります。 1つ目は11行目です
<script src="/fetch-and-display/wasm_exec.js"></script>
例の名前を反映するためにパスを変更します。この場合:
<script src="/my-new-example/wasm_exec.js"></script>
2番目の変更は似ていますが、 main.wasmバイナリの経路を反映しています。これは巡回29です
WebAssembly.instantiateStreaming(fetch("/fetch-and-display/main.wasm"), go.importObject).then((result) => {
この場合、次の場合が変更されます。
WebAssembly.instantiateStreaming(fetch("/my-new-example/main.wasm"), go.importObject).then((result) => {
その後、新しい例を構築して提供できます。
cd /path/to/vugu
mage examples
または個別にこれが好きです:
cd /path/to/vugu
mage singleExample github.com/vugu/vugu/example/my-new-example
<tag :prop='expr'>の動的属性。 フレームワークというよりもライブラリのように構築されています。 Vuguは.vuguコンポーネントファイルのコード生成を行っていますが(新しいプロジェクトにデフォルトのmain_wasm.goを出力し、ページ更新時にプログラムを自動的に構築することもできます)が、基本的にはまだ制御されています。全体的なプログラムフロー、アプリケーションの配線、初期化、コンポーネントとページを同期させるレンダリングループ - そのすべてを制御できます。フレームワークはコードを呼び出します。 Vuguは図書館であり、コードはそれを呼び出します(Vuguが最初にあなたのために少し生成しても、物事を簡単にするためにそれを生成します)。 Vuguの主な目標の1つは、開発者が最初に遭遇したことに関して、非常に速く簡単に開始できるようにすることでしたが、プロジェクトの構造に不必要な制限を課すことはありませんでした。ビルドツール(および現在はモジュールシステム)に移動します。アイデアは、ホイールを再プログラミングするのではなく、それを可能な限りさらに活用することです。
そのため、開発サーバーを実行するVUGUコマンドラインツールは見つかりません。代わりに、ファイルに貼り付けて自分でgo runできるコードの適切なスニペットをドキュメントに表示します。コード生成の場合、ページの更新時にこれを行うことができるHTTP.Handlerがありますが、 go generateを介してvugugenを実行することもできます(そしてそうすべきです)。 Vuguには、この哲学に従う多くの小さな決定があります。合理的に可能な限り、新たに発明する代わりに既存のメカニズムを使用するだけです。そして、何か他のものが本当に必要であるという証拠があるまでそれを続けてください。これまでのところ、それはうまく機能しています。そして、それはVuguがそれがテーブルにもたらす特定のものに集中することを可能にします。
実装の例は、例のリポジトリにあります
ほとんどのコードは.vuguファイルにあるため、vscode-vuguクレジットを@binhongleeにインストールする必要があります。