Go로 Vue처럼 웹 앱을 만들 수 있는 Vugu

트윗이 100RT 이상 그래서 Qiita도 작성해 보겠습니다.

Go 1.11이 모든 JavaScript API를 지원하는 라이브러리를 개발했으며 WebAssembly에 새로운 미래가 보였습니다. 그때까지의 WebAssembly는 DOM이나 네트워크 조작을 할 수 없다고 여겨져 왔으므로, 루프 처리의 고속화나 수치 계산, 또는 Canvas를 골고루 사용하는 게임 정도밖에 사용도가 없지요… 라고 하는 평가였습니다. 하지만 자바스크립트 API가 구현된 것으로 DOM 조작이나 네트워크 처리가 가능해지고, 웹 애플리케이션을 그대로 Go로 대체할 수 있을까 하는 가능성이 나왔습니다.

Go로 시작하는 WebAssebmly 그 1 「Hello World」 | hifive 개발자 블로그

그렇다고는 해도, 직접 쓰면 코드가 좀처럼 복잡하다고 할까, 유감스러운 느낌이 되어 있었습니다. 예를 들면 네트워크의 온라인, 오프라인을 이벤트 통지를 받는 경우의 코드는 아래와 같이 됩니다.

  navigator := js.Global().Get("navigator")
  cb1 := js.NewCallback(func(args []js.Value) {
    if navigator.Get("onLine").Bool() {
      println("Network is Online");
    } else {
      println("Network is Offline");
    }

  })
  window.Call("addEventListener", "online", cb1)
  window.Call("addEventListener", "offline", cb1)

그 중, 좋은 느낌에 랩핑한 프레임워크(게다가 가상 DOM을 사용할 수 있는 것 같은)가 나오는 것이 아닐까 생각하고 있었습니다만, 드디어 Vugu에 의해 실현될 것 같습니다.

Vugu: A modern UI library for Go+WebAssembly

그래서 Getting started에 따른 진행 방법을 소개합니다.

Go 1.12 설치

Vugu는 Go 1.12가 필수입니다. 그래서 설치합니다. goenv를 사용하면 재미 있습니다.

$ goenv install 1.12
$ goenv local 1.12

go.mod 만들기

go.mod라는 파일을 만듭니다. 내용은 다음과 같습니다.

module example.org/someone/testapp

root.vugu 만들기

root.vugu는 Web Component 풍으로 UI, Go가 정리된 파일이 됩니다. 어쩌면 화면마다 vugu 파일을 만들어 갈 것입니다. root.vugu의 내용은 다음과 같습니다.

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

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

<script type="application/x-go">
type RootData struct { Show bool }
func (data *RootData) Toggle() { data.Show = !data.Show }
</script>

보고 알지만 script 태그가 application/x-go가 되어 있어 그 안에는 Go를 기술합니다. RootData를 정의해 두고, 그것이 이벤트시에 보내져 오므로, 그 내용을 재기록하는 상태입니다. Vue와는 조금 쓰는 방법이 다릅니다만, 모르는 것도 아닐 것입니다.

개발용 서버 만들기

여기는 간단한 Go입니다. devserver.go라는 파일로 만들지만 이름은 무엇이든 좋습니다.

// +build ignore

package main

import (
    "log"
    "net/http"
    "os"

    "github.com/vugu/vugu/simplehttp"
)

func main() {
    wd, _ := os.Getwd()
    l := "127.0.0.1:8844"
    log.Printf("Starting HTTP Server at %q", l)
    h := simplehttp.New(wd, true)
    // include a CSS file
    // simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }
    log.Fatal(http.ListenAndServe(l, h))
}

실행하다

그럼 실행합니다. 간단하게 실행하는 것만으로 vugu의 다운로드도 가 주는 근처, Go는 훌륭하네요.

$ go run devserver.go

이제 http://localhost:8844 서버가 시작됩니다.

접근하다

그럼 실제로 액세스합니다. 액세스하면 먼저 로딩이 실행되고 웹 화면이 표시됩니다. 이 로딩시 WebAssembly와 Go 파일이 생성됩니다.



Hot reload는 없지만, HTTP 서버는 떨어뜨리지 않고 다시 읽는 것만으로 표시가 갱신됩니다. 네트워크를 보면 제대로 WebAssembly 파일이 생성되고 있음을 알 수 있습니다. 이것은 동적 인 것처럼 보였고 정적 파일은 없었습니다.

요약

Vugu는 아직 출시한 지 얼마 안된 Experimental 무대입니다. 그러나, Go로 쓸 수 있으므로 형식화가 있어, 유연한 쓰는 방법을 할 수 있는 것, 한층 더 WebAssembly에 의해 고속의 웹 어플리케이션(후, 보통의 JavaScript보다 난독화가 진행되고 있다)를 만들 수 있는 것이 메리트가 될 것입니다. 무엇보다 Vue처럼 쓸 수 있는 것이 개인적으로 밀어 포인트입니다.

덧붙여 DOM이나 네트워크 조작은 Web 브라우저측의 JavaScript로 실행됩니다. WebAssembly에서도 DOM 재작성이 빨라지거나 CORS 제한을 넘은 네트워크 액세스가 가능한 것은 아닙니다.

꼭 Vugu를 체험해보세요!

Vugu: A modern UI library for Go+WebAssembly