Vugu ist eine experimentelle Bibliothek für Web -UIs in Go und Targeting WebAssembly. Leitfaden und Dokumente unter https://www.vugu.org. Godoc unter https://godoc.org/github.com/vugu/vugu.
Wenn Sie schon immer eine Benutzeroberfläche nicht in JS schreiben wollten, sondern reinen GO ... und sie in Ihrem Browser ausführen wollten ... das (experimentell;) Zukunft ist hier!
Einführung von Vugu (ausgesprochen /ˈvuː.ɡuː/), einer von Vuejs inspirierten Bibliothek in Go Targeting WASM.
Kein Knoten. Nein JS. Kein NPM. Kein NODE_MODULES -Ordner im Wettbewerb mit Ihrer Musikbibliothek für Festplattenraum.
Erste Schritte: http://www.vugu.org/doc/start
Noch in Arbeit, aber viele Dinge sind bereits funktional. Einige funktionieren wirklich gut.
Sie müssen Go V1.22.3 als Minimum zur Verwendung vugu haben. Wir benötigen die für Schleifenänderungen, die in Go v1.22 eingeführt wurden, und V1.22.3 war der letzte zum Zeitpunkt des Schreibens.
vugu für Mitwirkende vugu verwaltet nun Magier, um den Aufbau der vugu -Tools zu verwalten - vugugen , vugufmt und vgfrom . Der Magier wird auch verwendet, um den Testprozess zu verwalten.
Weitere Informationen finden Sie in der aktualisierten Build -Anweisung im Leitfaden für die Mitwirkenden
Um die Beispiele auszuführen, müssen Sie das mage , docker und goimports installieren lassen. vugu verwendet mage , um den Build -Prozess zu verwalten.
Der einfachste Weg zur Installation mage ist:
git clone https://github.com/magefile/mage
cd mage
go run bootstrap.go
Sie müssen mage aus der Modulwurzel von vugu ausführen. Dies ist das Verzeichnis, in dem die oberste Ebene go.mod .
Sie benötigen auch das goimports -Tool installiert. Es ist sehr wahrscheinlich, dass Sie dies bereits installiert haben, normalerweise als Teil eines Editor -Plugins. Wenn nicht, kann es installiert werden mit:
go install golang.org/x/tools/cmd/goimports@latest
Um die Beispiele auszuführen, benötigen Sie auch docker installiert. Wenn Sie docker nicht installiert haben, folgen Sie den Anweisungen der Docker -Installation. Jedes Beispiel wird von einem lokalen nginx -Container bedient.
Alle Beispiele befinden sich im examples . Jedes Unterverzeichnis von examples enthält ein einzelnes Beispiel. Jedes Beispiel ist das eigene Go -Modul.
Es ist einfach, alle Beispiele zu bauen und zu servieren, wie:
cd path/to/vugu
mage examples
oder
cd path/to/vugu
mage -v examples
Jedes Beispiel wird an einer URL der Form serviert
http://localhost:8888/<name-of-example-directory>
Zum Beispiel, um das Beispiel für das fetch-and-display -Beispiel zu sehen, wäre die URL:
http://localhost:8888/fetch-and-display
Oder wenn Sie nur ein einzelnes Beispiel verwenden möchten:
cd path/to/vugu
mage singleExample <name-of-example-module>
Zum Beispiel, um nur dem Beispiel für das fetch-and-display zu dienen, wäre der Befehl:
cd path/to/vugu
mage singleExample github.com/vugu/vugu/example/fetch-and-display
Wenn Sie ein neues Beispiel erstellen müssen, ist der Prozess ziemlich einfach. Der kritische Punkt besteht darin, es auf ein funktionierendes Beispiel zu stützen.
Zum Beispiel
cd /path/to/vugu
cp -r ./examples/fetch-and-display/ ./examples/my-new-example
Der cp kopiert alles im Verzeichnis, einschließlich der kritischen lokalen .gitignore -Datei in das neue Beispielverzeichnis. Bitte machen Sie den Vater .gitignore ist vorhanden, um sicherzustellen, dass die von Vugu generierten Dateien nicht an das Repository übermittelt werden.
Sie müssen dann die ./examples/my-new-example/go.mod bearbeiten, um den Modulnamen zu ändern. Dieser Schritt ist kritisch.
Der Modulname muss so geändert werden, dass sie mit dem Beispiel übereinstimmen github.com/vugu/vugu/examples/my-new-example
Sie können dann den root.vugu , root.go nach Bedarf bearbeiten, um das Beispiel zu unterstützen, oder nach Bedarf mehr *.vugu und *.go -Dateien hinzufügen.
Die Dateien main_wasm.go und wasm_exec.js sollten nicht bearbeitet werden.
Die Beispiele index.html -Datei muss an zwei verschiedenen Orten bearbeitet werden. Das erste ist circa Linie 11
<script src="/fetch-and-display/wasm_exec.js"></script>
Um den Pfad zu ändern, um den Namen des Beispiels widerzuspiegeln. In diesem Fall:
<script src="/my-new-example/wasm_exec.js"></script>
Die zweite Veränderung ist ähnlich, spiegelt jedoch den Weg des main.wasm Binary wider. Dies ist Circa Line 29
WebAssembly.instantiateStreaming(fetch("/fetch-and-display/main.wasm"), go.importObject).then((result) => {
was in diesem Fall geändert würde in:
WebAssembly.instantiateStreaming(fetch("/my-new-example/main.wasm"), go.importObject).then((result) => {
Das neue Beispiel kann dann gebaut und serviert werden mit:
cd /path/to/vugu
mage examples
Oder individuell wie folgt:
cd /path/to/vugu
mage singleExample github.com/vugu/vugu/example/my-new-example
<tag :prop='expr'> . Es ist eher wie eine Bibliothek als wie ein Framework aufgebaut. Während Vugu die Codegenerierung für Ihre .vugu -Komponentendateien durchführt (und sogar ein Standard -Main_wasm.go für ein neues Projekt ausgibt und Ihr Programm automatisch auf der Seite "Seite aktualisiert hat), haben Sie im Grunde noch die Kontrolle. Gesamtprogrammfluss, Anwendungsverkabelung und Initialisierung, die Renderschleife, die die Seite synchronisiert mit Ihren Komponenten hält - Sie haben die Kontrolle über all das. Frameworks rufen Ihren Code an. Vugu ist eine Bibliothek, Ihr Code ruft sie auf (auch wenn Vugu zu Beginn ein bisschen für Sie generiert wird, um die Dinge einfacher zu machen). Eines der Hauptziele für Vugu, wenn es um Entwickler geht, war es, es sehr schnell und leicht zu gestalten, ohne unnötige Einschränkungen für die Struktur eines Projekts aufzuerlegen. Gehen Sie das Erstellen von Werkzeugen (und jetzt das Modulsystem) ist fantastisch. Die Idee ist, dies so weit wie möglich zu nutzen, anstatt das Rad neu zu programmieren.
Sie werden also kein Vugu -Befehlszeilen -Tool finden, das einen Entwicklungsserver ausführt. Stattdessen finden Sie in den Dokumenten einen geeigneten Codeausschnitt, den Sie in eine Datei einfügen und sich selbst go run können. Für die Codegenerierung, während es einen HTTP.Handler gibt, der dies auf der Seite von Seite erledigt, können Sie vugugen auch über go generate ausführen (und sollten!). In Vugu gibt es viele kleine Entscheidungen, die dieser Philosophie folgen: Verwenden Sie bei einem vernünftigen, nur den vorhandenen Mechanismus, anstatt neu zu erfinden. Und machen Sie das weiter, bis Beweise dafür sind, dass etwas anderes wirklich benötigt wird. Bisher hat es gut funktioniert. Und es ermöglicht Vugu, sich auf die spezifischen Dinge zu konzentrieren, die es auf den Tisch bringt.
Beispiele für Implementierungen finden Sie in Beispiel -Repositorys
Da der größte Teil Ihres Codes in .vugu Dateien ist, müssen Sie VSCODE-VUGU-Credits installieren, um @BinHonglee zu erhalten.