vugu
1.0.0
Vugu는 WebAssembly를 대상으로 작성된 Web UI의 실험 라이브러리입니다. https://www.vugu.org의 가이드 및 문서. https://godoc.org/github.com/vugu/vugu의 Godoc.
JS가 아니라 순수한 Go ... 그리고 지금 브라우저에서 실행하고 싶었다면 지금 (실험적;) 미래가 여기 있습니다!
GO Targeting WASM에서 Vuejs에서 영감을 얻은 라이브러리 인 Vugu (발음 /ˈvuː.uuː/)를 소개합니다.
노드가 없습니다. JS가 없습니다. NPM 없음. 디스크 공간을 위해 음악 라이브러리와 경쟁하는 node_modules 폴더가 없습니다.
시작 : http://www.vugu.org/doc/start
여전히 진행중인 작업이지만 많은 것들이 이미 기능적입니다. 일부는 정말 잘 작동합니다.
vugu 사용하려면 최소 v1.22.3가 있어야합니다. 우리는 Go v1.22에 도입 된 루프 변경이 필요하며 v1.22.3은 당시 가장 마지막으로 가장 마지막이었습니다.
vugu 건설 vugu 이제 Mage를 사용하여 vugu 도구 인 vugugen , vugufmt 및 vgfrom 의 빌드를 관리합니다. MAGE는 또한 테스트 프로세스를 관리하는 데 사용됩니다.
기고자 안내서에서 업데이트 된 빌드 명령을 참조하십시오.
예제를 실행하려면 mage 도구, docker 및 goimports 설치되어 있어야합니다. vugu mage 사용하여 빌드 프로세스를 관리합니다.
mage 설치하는 가장 간단한 방법은 다음과 같습니다.
git clone https://github.com/magefile/mage
cd mage
go run bootstrap.go
vugu 의 모듈 루트에서 mage 실행해야합니다. 이것은 최상위 레벨 go.mod 하는 디렉토리입니다.
goimports 도구가 설치되어야합니다. 일반적으로 편집기 플러그인의 일부로 이미 설치했을 가능성이 높습니다. 그렇지 않으면 다음과 같이 설치할 수 있습니다.
go install golang.org/x/tools/cmd/goimports@latest
예제를 실행하려면 docker 도 설치해야합니다. docker 설치되지 않은 경우 Docker 설치 지침을 따르십시오. 각 예제는 로컬 nginx 컨테이너로 제공됩니다.
모든 예제는 examples 디렉토리에 있습니다. examples 의 각 하위 디렉토리에는 단일 예제가 포함됩니다. 각 예제는 자체 GO 모듈입니다.
모든 예제를 구축하고 제공하는 것은 다음과 같은 간단합니다.
cd path/to/vugu
mage examples
또는
cd path/to/vugu
mage -v examples
각 예제는 양식의 URL로 제공됩니다.
http://localhost:8888/<name-of-example-directory>
예를 들어 fetch-and-display 예제를 확인하려면 URL이 다음과 같습니다.
http://localhost:8888/fetch-and-display
또는 단일 예제 만 사용하려는 경우 :
cd path/to/vugu
mage singleExample <name-of-example-module>
예를 들어 fetch-and-display 예제 만 제공하려면 명령이 다음과 같습니다.
cd path/to/vugu
mage singleExample github.com/vugu/vugu/example/fetch-and-display
새 예제를 만들어야하는 경우 프로세스가 매우 간단합니다. 중요한 요점은 작업 예제에 기반을 두는 것입니다.
예를 들어
cd /path/to/vugu
cp -r ./examples/fetch-and-display/ ./examples/my-new-example
cp Critical Local .gitignore 파일을 포함한 디렉토리의 모든 것을 새 예제 디렉토리에 복사합니다. Vugu 생성 파일이 저장소에 제출되지 않도록 .gitignore 가 존재합니다.
그런 다음 모듈 이름을 변경하려면 ./examples/my-new-example/go.mod 를 편집해야합니다. 이 단계는 중요합니다.
모듈 이름은 예제와 일치하도록 변경되어야 하므로이 경우 모듈 이름이 github.com/vugu/vugu/examples/my-new-example 로 변경됩니다.
그런 다음 root.vugu , root.go 예제를 지원하는 데 필요한 경우 root.vugu를 편집하거나 필요에 따라 *.vugu 및 *.go 파일을 추가하십시오.
파일 main_wasm.go 및 wasm_exec.js 편집해서는 안됩니다.
examples index.html 파일은 두 개의 별개의 장소로 편집해야합니다. 첫 번째는 11 일 선 11 일입니다
<script src="/fetch-and-display/wasm_exec.js"></script>
예제의 이름을 반영하는 경로를 변경합니다. 이 경우 :
<script src="/my-new-example/wasm_exec.js"></script>
두 번째 변화는 비슷하지만 main.wasm 바이너리의 경로를 반영합니다. 이것은 29 일경입니다
WebAssembly.instantiateStreaming(fetch("/fetch-and-display/main.wasm"), go.importObject).then((result) => {
이 경우 다음으로 변경됩니다.
WebAssembly.instantiateStreaming(fetch("/my-new-example/main.wasm"), go.importObject).then((result) => {
그런 다음 새로운 예제는 다음과 함께 구축 및 제공 될 수 있습니다.
cd /path/to/vugu
mage examples
또는 개별적으로 다음과 같은 것 :
cd /path/to/vugu
mage singleExample github.com/vugu/vugu/example/my-new-example
<tag :prop='expr'> 가있는 동적 속성. 그것은 프레임 워크보다 라이브러리처럼 구축되었습니다. Vugu는 .vugu 구성 요소 파일에 대한 코드 생성을 수행하지만 (새 프로젝트에 대한 기본 main_wasm.go를 출력하고 페이지 새로 고침에 따라 프로그램을 자동으로 구축 할 수 있습니다), 기본적으로 여전히 제어하고 있습니다. 전체 프로그램 흐름, 애플리케이션 배선 및 초기화, 페이지를 구성 요소와 동기화하는 렌더 루프 - 모든 것을 제어 할 수 있습니다. 프레임 워크는 코드를 호출합니다. Vugu는 도서관입니다. 귀하의 코드는이를 호출합니다 (Vugu가 처음에 상황을 더 쉽게 만들기 위해 약간의 것을 생성하더라도). Vugu의 주요 목표 중 하나는 개발자가 처음 만난 개발자와 관련하여 시작하기가 매우 빠르고 쉽게 시작하는 것이었지만 프로젝트의 구조에 대한 불필요한 한계를 부과하지 않고는 없었습니다. GO 빌드 툴링 (및 이제 모듈 시스템)은 훌륭합니다. 아이디어는 휠을 다시 프로그래밍하기보다는 가능한 가장 먼 정도를 활용하는 것입니다.
따라서 개발 서버를 실행하는 Vugu 명령 줄 도구를 찾지 못하고 대신 문서에서 파일에 붙여 넣을 수있는 적절한 코드 스 니펫을 찾아서 직접 go run . Code Generation의 경우 페이지 새로 고침시이를 수행 할 수있는 HTTP.Handler가있는 경우 go generate 통해 vugugen 실행할 수 있습니다. Vugu에는이 철학을 따르는 많은 작은 결정이 있습니다. 합리적으로 가능한 한, 기존 메커니즘을 새로 발명하는 대신 사용하십시오. 그리고 다른 것이 실제로 필요하다는 증거가있을 때까지 계속 그렇게하십시오. 지금까지 잘 작동하고 있습니다. 그리고 Vugu는 테이블에 가져 오는 특정한 것들에 집중할 수 있습니다.
구현의 예는 예제 저장소로 찾을 수 있습니다
대부분의 코드가 .vugu 파일에 있으므로 VScode-vugu 크레딧을 설치해야합니다.
