[go-app/WASM]. - #1 WASM 그리고 Vugu와 go-app 비교

 

Background(배경)

Javascript의 느려터진 속도를 대신하여 컴파일언어를 이용해 웹브라우저에서 네이티브 코드를 동작시키는 것을 WASM(Web Assembly) 이라 합니다. WASM의 선두주자는 현재 RUST, C, C++ 이 있지만,

3언어 모두 저에게는 적합하지 않아... Go언어를 통해 사용하고자 합니다.

 

 

 

WASM의 현재 생태계 방식은 크게 2가지로 나뉩니다.

https://developer.mozilla.org/ko/docs/WebAssembly/Rust_to_wasm

쉽게 말해서, 컴파일언어를 통해 전체적인 웹앱을 만들 것인가? 또는 기존 JS와 함께 WASM을 사용할 것인가 입니다.

즉 MDN의 말은 굳이 양자택일을 할 필요없이 JS를 대체하는 것이 아닌 우리는 공존할 수 있어! 입니다.

 

 

잠깐 먼저 찍먹해보자면,

Go언어도 RUST와 마찬가지로 다음과 같은 명령으로 바로 WASM 포맷으로 빌드가 가능합니다.

GOARCH=wasm GOOS=js go build -o app.wasm

 

 

Go언어의 WASM 생태계도 크게 다르지 않습니다.

https://github.com/golang/go/wiki/webassembly

GitHub - golang/go: The Go programming language

위 링크는 github go언어의 공식 wasm의 관한 위키입니다.

여기서 쉬운예시도 존재하지만, 하단을보면 오픈소스들이 눈에띕니다.

가장 대표적이고 인기있는 WASM Framework로는 Vugu, go-app 이 있습니다.

 

여러분의 시간은 귀하니 제가 조사해왔습니다.

 

 

Vugu

어딘가 익숙한 이름 그대로 Vue를 모티브로하여, .vugu 확장자에서 작성합니다. 컴포넌트위주의 개발이 가능하다는 특징이 존재하고, Vue.js를 사용할 때와 마찬가지로 작성하는 코드도 유사한데, JS만 Go로 대체합니다.

 

 

거두절미하고, 코드부터 보시죠

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


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


<script type="application/x-go">
import "log"

type Root struct {
	Show bool `vugu:"data"`
}

func (c *Root) Toggle(event vugu.DOMEvent) {
	c.Show = !c.Show
	log.Printf("Show Toggled! Value is now %t", c.Show)
}
</script>

오... 코드와 함께 정말 충격적이게 찢어버렸습니다.

Vugu는 좀 특별한 방법을 사용한 깐부인데, 이 프레임워크는 .vugu로 작성한 코드를 go 파일로 변환합니다.

이를 통해 JS로 래핑해서 WASM을 동작시킵니다.

 

 

 

Vugu의 장점

devserver로 파일서빙을 계속 감지하여 WASM이 새로 빌드 될 때마다 서버를 재실행 하지 않아도 가능합니다.

(사실 이건 커스텀해도 가능합니다... 어차피 서버끼고 하는거라면 말이죠...)

그외의 장점은 Vue와 같은 스타일의 문법을 사용한다는 점이 가장 매력적으로 다가 올 수 있습니다. 거부감도 적고 HTML 태그를 그대로 작성할 수 있을테니까요!

 

Vugu의 단점

업데이트가 2021.11.18 기준 2021.04 이후로 업데이트가 없습니다.

Github 스타가 절대적인 인기와 지표를 나타내는 것은 아니지만, 그래도 꽤나 많은 지지를 얻고 있으며 아직까지도 사용하는데 문제가 없다고 합니다. (왜 전 안될까요? ㅋㅋㅋ)

뭐 안되는 것 도 있고... 실제로 런 해보았을때는 뭔가 Svelte보다 느려터진 느낌...?

 

 

왜 Vugu를 선택하지 않았는가?

업데이트가 안되는 점이 가장 문제가 크다고 생각합니다.

그 다음으로는 일단 Example이 실행이 안됐던 문제..와

.vugu -> .go -> .wasm 으로 3번의 컴파일 변환 과정을 거쳐야하는데 사실 이것도 좀 그렇긴하네요.. 이럴빠엔 그냥 WASM 짜서 비즈니스 로직만 JS에서 직접 실행하는게 더 편해보입니다..

 

 

 

 

Go-APP

고앱은 React-Based 를 기반으로 한 리액티브 Framework입니다.

Go WASM 프레임워크 중 가장 많은 Star를 차지하고 있습니다. 가장 큰 장점은 PWA가 Base이며, SEO에 친숙하게 Prerender를 지원 합니다.

 

찍먹해보면... 이런 느낌입니다.

 

 

Go-APP 장점

1. SEO를 위한 Prerender 지원

 - app의 가장 큰 장점은, PWA를 기본 내장하여 리소스 요청의 낭비를 줄이고, Prerender에 대한 Cache를 지원합니다.

 

2. Static Generate

 - 또한 리액티브가 WASM이다보니 엄청 빠릿빠릿합니다! GenerateStaticWebsite 라는 함수를 지원해주기는 하는데 JAM Stack으로 쓸 수 있을지는 아직 확신할 수 없을것 같네요.

 

3. Life Cycle

 - Updated / Render / Mount 등 다양한 Life Cycle도 존재합니다.

 

4. 컴포넌트 단위 개발

 - 컴포넌트 단위 개발을 지향하며, 강력하게 지원합니다!

 

5. 라우팅

 - 클라이언트 서버 라우팅 모두 지원합니다. (맞춰줘야합니다..)

 

Go-APP 단점

1. OnPreRender

 - 서버 응답만 데이터를 채워주고 렌더링 이후에는 안나옵니다. (정말 SEO 크롤 봇을 위한 용도...)

 

2. HTTP Server

 - 기본적으로 net/http 모듈을 사용하는데 저는 fiber 또는 하다못해 fasthttp를 사용하고 싶었지만, WASM 빌드랑 같이돌리면 tcplisten에서 에러가 나오기 땜에 분리과정이 필요로 합니다.  (최초 한번이면 되니깐......)

 

3. HTML 작성

 - 가장 큰 문제입니다. 저는 익숙해졌지만... 이 녀석은 HTML 코드조차 Go 코드로 작성해야 합니다. 정말 CSS 를 제외하고는 모두 Go로 작성하여야 해요!

 

4. WASM의 공통 단점

-  WASM 모두의 공통적인 단점으로 HTML 레이아웃의 개발 현황을 ... 컴파일언어니깐...

HMR 지원이 안되서, 변경하고 런(빌드 -> 컴파일) -> 새로고침 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

 

 

그럼에도 불구하고 최강의 속도를 얻고 싶으시다고요? 지금 바로 이 시리즈를 함께 하세요!