이게 뭐야?

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

Go1.12 이상이 필요합니다.
매우 간단한 배치 강좌.일단 움직이면 간단해.나는 이런 일을 할 것이다.

프로젝트 폴더 만들기

go.모드를 만듭니다.go mod init.

Vugu의 구성 요소 파일을 생성합니다.root.vugu라는 파일을 만들고 샘플 코드를 복사합니다

개발용 서버 제작.이것도 devserver입니다.go라는 파일을 만들고 예시 코드를 복사합니다

개발 서버 시작go run devserver.go

브라우저에서 액세스http://127.0.0.1:8844/

놀라움

간단하네.
전선을 살짝 만져본 느낌, 이게 Vue예요.

살짝 개조해 볼게요.

상기 강좌에서 단추의 스위치는 문자 표시를 열고 닫을 수 있습니다.
이것만 심심하니까 조금만 개조해 주세요.
Elm의 Hello World에 존재하는 계수기 프로그램을 만들어 보세요.
이런 느낌을 줄 수 있는 초간단 카운터 앱.

상술한 강좌의 루트.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 대충 이것일 거예요.이런 느낌은 한번 해보면 바로 나타난다.

끝내다

새로 나온 거니까.문서가 아직 드물군요.
어린 새인 나에게 나는 아직 얼마나 좋은지 모른다...
남의 소식을 얌전히 기다리다.