なにこれ

VuguがGo言語でフロントをVueやReactっぽく書ける様にしてくれるらしい。
https://www.vugu.org/
ちょっと触ってみた。

Inspired by modern web UI libraries like Vue and React.
Single-file components.
Runs in most modern browsers.
Simple and sane dev and build environment. (Say goodbye to that node_modules folder!)
Write UIs with the ease of HTML+CSS for presentation, and the facility of Go for interface logic. It's pretty cool! See the Getting Started page.

Vuguの読み方わからん。。。バグ？の訳無いよね。

Getting Started

Go 1.12以上が必要の様です。

とても簡単な導入チュートリアルです。とりあえず動かしてみるだけなら簡単です。こんな事やります。

まずプロジェクトフォルダを作ります
go.modを作ります。go mod initでつくれます。
Vuguのコンポーネントファイルを作成。root.vuguというファイルを作成してサンプルコードをコピペ
開発用のサーバ作成。これもdevserver.goというファイルを作成してサンプルコードをコピペ
開発サーバを立ち上げる go run devserver.go
ブラウザからhttp://127.0.0.1:8844/にアクセス
驚く

簡単ですね。
軽くコード触った感じだとこれはVueですね。

ちょこっと改造してみる

上記チュートリアルを行うと、ボタンのオンオフで文字表示のオンオフができる様になります。

これだけだとつまらないのでちょこっと改造します。
ElmのHello World的存在のカウンターアプリを作ってみます。

こんな感じの超シンプルなカウンターアプリができます。

上記チュートリアルのroot.vuguを修正します。

<div class="my-first-vugu-comp">
    <button @click="data.Toggle()">Test</button>
    <div vg-if="data.Show">I am here!</div>

    <br>
    <!-- カウンター -->
    <button @click="data.Increment()">+</button>
    <div><span vg-html='data.Count'></span></div>
    <button @click="data.Decrement()">-</button>
    <br>
</div>

<style>
.my-first-vugu-comp { background: #eee; }
</style>

<script type="application/x-go">
type RootData struct {
    Show bool
    Count int
}

func (data *RootData) Toggle() {
    data.Show = !data.Show
}

func (data *RootData) Increment() {
    data.Count = data.Count + 1
}

func (data *RootData) Decrement() {
    data.Count = data.Count - 1
}
</script>

単純にRootDataのメソッドIncrement()とDecrement()を定義してボタンアクションに応じてRootData構造体のCountの状態を変化させているだけです。

ちょっと困った事

現在のCountを表示させる方法がわからん。。。
Documentを漁って、vg-htmlを見つけ出して多分これだろ。って感じで試したら表示された。

おわりに

新しく出たものですからね。documentはまだ少ないですね。
ひよっこの私にはちょっとまだ私には良さはわからず。。。
おとなしく他の人の情報待ちします。