GopherJS+Vecty

Go だけで作る Go だけで作るフロントエンド入門フロントエンド入門

お前誰よ？お前誰よ？メカトロソフト屋 Pythonista -> Gopher なんでも Go で書いちゃうひと Go
歴は 5 年目サイト: 会社: 144Lab(2017/07/01 から新社名) HN: @nobonobo http://golang.rdy.jp/

リッチなフロントエンド作りたい？リッチなフロントエンド作りたい？もちろんもちろん作りたいですよね！作りたいですよね！

でも・・・でも・・・

JS を書きたく無いでござる JS を書きたく無いでござる

絶対に JS を書きたく絶対に JS を書きたく無いでござる無いでござる ( 個人的な感想です)
( 個人的な感想です) そこでそこで

Go から Javascript Go から Javascript もちろん、Go から Javascript への変換には
ですね！参考情報 Go を JS に 100% 変換できます Go を JS に 100% 変換できます GopherJS http://golang.rdy.jp/2015/10/15/gopherjs/ http://golang.rdy.jp/playgopherjs/#/1

関連ライブラリ関連ライブラリトランスパイラ: 仮想 DOM: ルーター: Bootstrap4コンポーネントセット: GopherJS(BSD) Vecty(BSD) github.com/go-humble/router(MIT)
github.com/nobonobo/bootstrap4(MIT)

GopherJS の近況 GopherJS の近況速度より安定性を重視出力ターゲットは ES5 ES2015~ES2017 の新記述の最適化がない Go1.10
サポートが着々と進んでる (Go 本体では WebAssembly 実装の実験も！！)

Vecty の近況 Vecty の近況鋭意安定板に向けて改善真っ只中昨年中に 5～6 回の破壊的変更がありました破壊的変更の予定がまだ少しあります本格利用はしばしお待ちを
HTML/CSS/JS の全てを Go で書けるというわりに CSS 支援は弱い

Vecty の提供機能 Vecty の提供機能 HTML ビルダレンダラーコンポーネントプロパティほんとこれだけ。

HTML ビルダ HTML ビルダタグ定義を使って生成属性は Markup でラップして記述慣れるまで大変 elem.Body(
// <body> elem.Heading1(vecty.Text("TITLE")), // <h1>TITLE</h1> elem.Anchor( // <a href="/page"> vecty.Markup(prop.Href("/page")), vecty.Text("link"), // link ), // </a> ) // </body>

レンダラーレンダラーコンポーネントのレンダリングは二種類ある RenderBody: 初期レンダリング Rerender: 差分レンダリング

コンポーネントコンポーネント Core 実装と Render メソッドを持つプロパティを元に HTML を生成する実装コンポーネントツリーが仮想
DOM 相当 type MyComponent struct { vecty.Core } func (c *MyComponent) Render() vecty.ComponentOrHTML { return elem.Header1(vecty.Text("Hello!")) }

プロパティプロパティコンポーネント定義のフィールド任意の型に`vecty: prop `タグをつけるコンポーネントが保有・参照するデータ親から受け取って参照しつつ HTML を組む
type MyComponent struct { vecty.Core Title string `vecty:"prop"` } func (c *MyComponent) Render() vecty.ComponentOrHTML { return elem.Header1(vecty.Text(c.Title)) }

ミニマムな例ミニマムな例

ミニマムな実装例ミニマムな実装例 type TopView struct {vecty.Core} func (c *TopView) Render()
vecty.ComponentOrHTML { vecty.SetTitle("TopView") return elem.Body( elem.Heading1(vecty.Text("First")), elem.Button(vecty.Text("click")), ) } func main() { top := &TopView{} vecty.RenderBody(top) }

ミニマムな実行例ミニマムな実行例 Top click

プロパティな例プロパティな例

プロパティな実装例プロパティな実装例 type TopView struct { vecty.Core Heading string `vecty:"prop"`
} func (c *TopView) Render() vecty.ComponentOrHTML { vecty.SetTitle("TopView") return elem.Body( elem.Heading1(vecty.Text(c.Heading)), elem.Button( vecty.Markup( event.Click(func(ev *vecty.Event) { now := time.Now().Format(time.RFC3339Nano) c.Heading = fmt.Sprintf("Top: %s", now) vecty.Rerender(c) })

プロパティな実行例プロパティな実行例 Top click

Vecty の不足機能 Vecty の不足機能ルーター/ビュースタイルシート Flux 相当

ルーター/ ビュールーター/ ビューいくつか試したところこれが Vecty 用でもないけど使いやすかった。 github.com/go-humble/router(MIT)

スタイルシートスタイルシート個別のスタイル操作はできるスタイルシートに対する支援がまだない CSS は頑張って用意するしかなさそう

Flux 相当 Flux 相当サンプルが採用している方法を参考に。アクション: メッセージ定義ディスパッチ: メッセージのディスパッチャモデル:
アプリのデータモデル定義ストア: アプリ全体のデータストアビュー: 最上位コンポーネント（概念を追加）ハンドラー: 振る舞い実装（概念を追加）

1 方向に回す 1 方向に回す

アクションアクション 1 アクションに 1 振る舞い振る舞い予約の抽象的概念振る舞いに渡すパラメータ定義

ディスパッチディスパッチアクションの送信と受信を繋ぐ送信側と受信側を疎結合にする定型処理

モデルモデルアプリで保有するデータ構造定義概ね JSON タグをつけて運用バックエンドと共通で利用できる

ストアストアモデル定義に沿ったデータを保持ロードされる JS と同じライフサイクルアプリ要件で永続化と復元機能が必要ぶっちゃけただのグローバル変数 API 結果のキャッシュのようなもの
GopherJS はシングルスレッド動作のみなので基本は排他処理等は気にしない

ビュービューコンポーネントの性質 HTML の組み合わせを抽象化プロパティを持ち、それを元に描画を決定 DOM イベントをアクションに翻訳するビューの性質 Body
を根とするコンポーネントツリールーターで URL と 1 対 1 に対応

ハンドラーハンドラーアクションに対応する挙動実装群ストアを書き換えしてもいい唯一の存在サンプルではストアパッケージに書いてる

ルーターの例ルーターの例

ルーターの実装例ルーターの実装例 type NormalView struct { vecty.Core Title string `vecty:"prop"`
Next string `vecty:"prop"` } func (c *NormalView) Render() vecty.ComponentOrHTML { vecty.SetTitle(c.Title) return elem.Body( elem.Heading1(vecty.Text(c.Title)), elem.Anchor( vecty.Markup(prop.Href("#/"+c.Next)), vecty.Text("link:"+c.Next), ), elem.Button( vecty Markup(

ルーターの実行例ルーターの実行例 top link:next1 click

中規模な実装例中規模な実装例 Bootstrap4 と API 呼び出し

フォルダ構成 assets/ スタティックファイル群 models.go データスキーマ components.go コンポーネント定義群 views.go ビュー定義群 main.go
メイン実装

models.go:Post models.go:Post // Post https://jsonplaceholder.typicode.com/posts type Post struct { UserID
int `json:"userId"` ID int `json:"id"` Title string `json:"title"` Body string `json:"body"` } type Posts []*Post

components.go:Post components.go:Post type PostInfo struct { vecty.Core Post Post `vecty:"prop"`
} func (c *PostInfo) Render() vecty.ComponentOrHTML { return elem.Div(vecty.Markup(vecty.Class("card")), elem.Div(vecty.Markup(vecty.Class("card-body")), elem.Heading5(vecty.Text(c.Post.Title)), elem.Paragraph(vecty.Text(c.Post.Body)), ), ) } type PostInfoList struct { vecty Core

views.go:/posts views.go:/posts type PostsView struct { vecty.Core Posts Posts `vecty:"prop"`
} func (c *PostsView) Render() vecty.ComponentOrHTML { vecty.SetTitle("Posts") return &Layout{ Children: vecty.List{ elem.UnorderedList( vecty.Markup( vecty.Class("nav"), vecty.Class("nav-tabs"), ), elem.ListItem( vecty Markup(vecty Class("nav-item"))

main.go main.go const API = "https://jsonplaceholder.typicode.com" func getResource(url string, v
interface{}) error { resp, err := http.Get(url) if err != nil { return err } defer resp.Body.Close() return json.NewDecoder(resp.Body).Decode(&v) } func main() { vecty.AddStylesheet("assets/bootstrap.min.css") vecty.AddStylesheet("assets/app.css") r := router.New() r ForceHashURL = true

中規模な動作例中規模な動作例 Users Posts Leanne Graham Sincere@april.biz Ervin Howell Shanna@melissa.tv
Clementine Bauch Nathan@yesenia.net Patricia Lebsack Julianne.OConner@kory.org Chelsey Dietrich Lucio_Hettinger@annie.ca Mrs. Dennis Schulist Karley_Dach@jasper.info Kurtis Weissnat Telly.Hoeger@billy.biz Nicholas Runolfsdottir V Sherwood@rosamond.me

QR コードコンポーネント QR コードコンポーネント

QR コード実装例 QR コード実装例 package components import ( "bytes" "log"
"github.com/gopherjs/vecty" "github.com/gopherjs/vecty/elem" "github.com/aaronarduino/goqrsvg" "github.com/ajstarks/svgo" "github.com/boombuler/barcode/qr" ) // QRCode ... type QRCode struct {

QR コード動作例 QR コード動作例 QR Code Text: WIFI:S:<SSID>; T:<WPA|WEP|>; P:<password>;;

スゴイところスゴイところ JS の QR ライブラリつかってない。 JS を意識していない Go のライブラリを
GopherJS から利用しているだけ。

GopherJS 開発ツール GopherJS 開発ツール「gopherjs serve <パッケージパス>」が基本あとは Go ソースを書き換えた状態で
「」にアクセスするだけで再構築した js がサーブされます。 index.html があればそれをサーブします。存在しない場合はミニマムなものがサーブされます。 http://localhost:8080

デバッグデバッグもちろんデバッグもできます。 Go のソースコードで！

ビルドビルド「-m」にてミニファイした結果が出力されます。 $ gopherjs build -m -o app.js .

チャットアプリの実際チャットアプリの実際 https://github.com/nobonobo/vecty-sample

<リポジトリルート> app/ フロントパッケージルート backend/ バックエンドルート main.go サーバー起動実装

開発時のサーバー開発時のサーバー gopherjs serve を別途起動しておく /api/をバックエンドハンドラにマップその他を「gopherjs serve」にリバースプロキシ func main()
{ u, _ := url.Parse("http://localhost:8080") rp := httputil.NewSingleHostReverseProxy(u) http.Handle("/", rp) http.Handle("/api/", backend.New()) l, err := net.Listen("tcp", ":8888") if err != nil { log.Fatalln(err) } log.Println("listen:", l.Addr()) if err := http.Serve(l, nil); err != nil { log.Fatalln(err) } }

<フロントパッケージルート> vendor/ その他の Go 依存パッケージ actions/ アクション定義群 assets/ 静的ファイル群 components/
コンポーネントセット dispather/ ディスパッチャ実装 models/ アプリモデル定義群 store/ アプリストレージ実装 router/ ルーター実装 views/ アプリ向けビューセット main.go メイン実装 index.html アプリ HTML

チャットアプリ動作例チャットアプリ動作例 Top dead‑simple chap app Create New Room

パッケージが分かれてるとパッケージが分かれてると追加するモデルやストア追加するアクション追加する静的ファイル追加するコンポーネント追加するビュー追加先に迷わなくて済みます。

パッケージ間依存パッケージ間依存 store -> models actions -> models, store components
-> models, dispatcher views -> store, components 振る舞いと見た目とアプリデータが疎結合

フロントのデプロイフロントのデプロイ以下のファイル群を静的にサーブ assets/ index.html app.js 内容必要追加 <html>
<head> <meta charset="utf-8"> <script src="app.js"></script> </head> <body> </body> </html>

ロード時間の解決案(1) ロード時間の解決案(1) スピナー表示のあとで async 付きで JS を読む。 <html> <head> <meta
charset="utf-8"> <link href="assets/app.css" media="all" rel="stylesheet" /> </head> <body> <div class="loader">Loading...</div> </body> <script async src="app.js"></script> </html>

ロード時間の解決案(2) ロード時間の解決案(2) 先日公開されたサービス GopherJS パッケージを CDN キャッシュ jsgo.io https://github.com/dave/jsgo

Vecty の Pros/Cons Vecty の Pros/Cons

Pros Pros 基本の知識は HTML/CSS/Go のみで OK API やモデル定義をクラサバで共有できる成果物は ES5
相当で polyfill 不要豊富な PureGo のライブラリが利用可能型のある開発は素晴らしい Vecty 本体は small & clear なので読みやすい

Cons Cons 結局 DOM まわりの知識は必要 DOM まわりを Go で置き換えるのに慣れが必要 JS
の既存 lib 使うならやっぱり JS 知識が必要成果物 JS のファイルサイズがやや大きめ開発中でもパッキングするのでリロード重いコンポーネントの設計はやはり難しい Vecty 安定板までに破壊的変更の予定がある

まとめまとめ

とにかくビルドが早いとにかくビルドが早い型チェックトランスパイルミニファイパック上記処理のほとんどを1度のパースで行う。

JS の Isomorphic 開発 JS の Isomorphic 開発 nodejs/yarn webpack/esm/babel
eslint/prettier/flowtype mocha/react か vue.js etc... それぞれ要素技術ごとに薄い本ができるツそれぞれ要素技術ごとに薄い本ができるツラミラミ

Go の Isomorphic 開発 Go の Isomorphic 開発 go: 依存/整形/型検査/Lint/テスト/バックエンド
gopherjs: 開発サーバー/ES5/ミニファイ/パック vecty: 仮想 DOM フレームワークたったこれだけで始められるたったこれだけで始められる Go に慣れた人が新たに覚える事は非常に少ない Go に慣れた人が新たに覚える事は非常に少ない

いろんな資産が使えるいろんな資産が使える PureGo の資産はそのまま GopherJS に JS の資産はラップすれば GopherJS に
GopherJS の資産は GopherJS に GopherJS は GopherJS はジャイアニズムジャイアニズム

しなくていいことしなくていいこと毎年追加される言語仕様を追うモジュール機構の選択依存ツールメジャーバージョンアップ追従コード整形ツールの調整ツール間の競合機能の調整バージョンの不整合の調整

GopherJS+Vecty GopherJS+Vecty おすすめですおすすめです

応用 1 応用 1 面白そう pouchdb(js)/couchdb(ネイティブ)両対応 pouchdb 使うとオフライン動作し、オンライン化した時にクラウド上の couchdb
に同期なんてことができる。 Firebase(mBaaS)のような環境を作れるかも？だれかやってみて！だれかやってみて！ kivik(isomorphic)

応用 2 応用 2 gRPC サーバーをバックエンドにできる。クラサバ結合部の設計は gRPC の IDL
で完結する。だれかやってみて！だれかやってみて！ gopherjs-grpc-websocket

質問？質問？

おしまいおしまい

GopherJS+Vecty

GopherJS+Vecty

More Decks by irieda

Other Decks in Technology

Featured

Transcript