カラクリスタ

「輝かしい青春」なんて失かった人のブログ

GopherJS で hyperapp.js.org っぽい事をするライブラリ作った

それが以下:

これは何か

と言うのが有って、これは Qiita の中の人が作ってて、 Qiita でも使われているらしいんだけど、それと同じ様な事を、

と言う、hyperscript inspired な goalng library をベースに仕上げてみた、というのが、今回作ったライブラリです。なので、基本は SPA とか JavaScript で Web の Frontend を作る際に、 GopherJS で hyperapp.js.org に相当する事が出来る、という認識で良いと思います。

使い方

README.md から転載するけど、おおよそこんな感じ:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hyperdomo example</title>
</head>
<body>
<main></main>
<script src="./_examples.js"></script>
</body>
</html>

package main

import (
"errors"
"fmt"

"github.com/nyarla/hypercode/describers"
"github.com/nyarla/hyperdomo/app"
. "github.com/nyarla/hyperdomo/dsl"
)

type State struct {
value int64
}

func (s *State) Update(name string) error {
switch name {
case `up`:
s.value = s.value + 1
case `down`:
s.value = s.value - 1
default:
return errors.New(`invalid action name.`)
}

return nil
}

func (s *State) Widget() describers.Describer {
return W(func() describers.Describer {
text := fmt.Sprintf(`count: %d`, s.value)
return T(text)
})
}

func main() {
state := new(State)
view := H(`main`,
H(`p`, state.Widget()),
H(`button`, T(`UP`), E{`onclick`: `up`}),
H(`button`, T(`DOWN`), E{`onclick`: `down`}),
)

mainApp := new(app.Application)
mainApp.EntryPoint = `main`
mainApp.View = view
mainApp.Actions = app.Actions{
`up`:   func() { state.Update(`up`) },
`down`: func() { state.Update(`down`) },
}

mainApp.Mount()
}

なお、このサンプルは

に含まれているコードとまったく同一なので、とりあえず細かい事を見たければ、そっちを見た方が早い。

hyperdomo の良い点

  • hyperscript-like な DSL で Golang で Web Application を書ける
  • State の型を自由に設計出来る
  • JavaScript を基本書かなくて良いし、また Isomorphic Goalng が出来る

hyperdomo のイマイチな点

テストが書かれていない (特にブラウザ環境での)

生成する JavaScript の code がデカい (minified するといくらかマシ)

  • そのため、ファイル容量的にはあんまり効率が良くない

hyperdomo を作るに至った経緯

もともと、Golang で個人的に Google App Engine (Go) 向けに Web Application を書いていて、

GAE/Go で Static な Assets を扱うのが面倒でござる～

という理由から、

という、 Golang で Hyperscript っぽい事をするライブラリを作った んだけれども、その時に、

あ、これ、もうちょっと加工すれば、 [GopherJS 向けの 仮想 DOM っぽい ライブラリ 作れるんじゃね？]

という様な感じで脱線し、いっちょ書くかーという感じで作り始めた、というのがコトの経緯です。

それで、最初の内は、 morphdom を GopherJS 向けに移植するかな、とか考えてたんですが、その辺りは途中で面倒になったという理由もあり、結果としては、

morphdom の Bindings を hyperdomo の中で作り、それに golang.org/x/net/html から生成した HTML テキストをベースに、現在の DOM に patch を当てる

みたいな実装になりました。なので内部的には morphdom の minified したソースコードを丸っと含んでいます。

で、使うの？

一応、使うつもりで作ったんだけど、実際にこれを使った Web Application を公開まで漕ぎ着けられるか、とか言うと、ちょっと微妙な気がする……こう、自分のモノを完成させられなさ加減から言うと。

以上

とりあえず、今回のライブラリは動くモノとしては出来ているので、よかったら中身を見たり、あるいは触ってみたりすると良いかと思います。はい。