vugu

Вугу

Vugu - это экспериментальная библиотека для веб -интерфейсов, написанных в Go и нацеливание на Webassembly. Руководство и документы на https://www.vugu.org. Годок на https://godoc.org/github.com/vugu/vugu.

Если вы когда -либо хотели написать пользовательский интерфейс не в JS, а чистое, и запустите его в своем браузере, прямо сейчас ... это (экспериментальное;) будущее здесь!

Представляем Vugu (произносится /ˈvuː.ɡuː/), библиотека, вдохновленная Vuejs, в Go Targeting Wasm.

Нет узла. Нет JS. Нет NPM. Нет папки Node_modules, конкурирующая с вашей музыкальной библиотекой за дисковое пространство.

Обновления ♨

• 2024-05-25 Переезд в процесс сборки на основе мага Присоединяйтесь к разговору: суслики на Slack, Channel #vugu

Основные моменты

• Запускает в браузере с помощью webassembly
• Однолетные компоненты
• VUE-подобный синтаксис разметки
• Напишите идиоматический код GO
• Быстрое прототипирование
• ~ 3 -минутная установка
• Стандартные инструменты сборки

Начинать

Начало работы: http://www.vugu.org/doc/start

Все еще работа в процессе, но многие вещи уже функциональны. Некоторые работают очень хорошо.

Вы должны иметь go v1.22.3 как минимум для использования vugu . Нам требуется изменения для цикла, которые были введены в GO V1.22, и V1.22.3 был последним в то время.

Строительство vugu для участников

Теперь vugu использует Mage для управления сборкой инструментов vugu - vugugen , vugufmt и vgfrom . Маг также используется для управления процессом тестирования.

Пожалуйста, смотрите обновленную инструкцию по сборке в Руководстве для участников

Запуск примеров

Чтобы запустить примеры, вы должны установить инструмент mage , docker и goimports . vugu использует mage для управления процессом сборки.

Самый простой способ установки mage - это:

 git clone https://github.com/magefile/mage
cd mage
go run bootstrap.go

Вы должны запустить mage из корня модуля из vugu , ​​это каталог, где существует верхний уровень 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 скопирует все в каталоге, включая критический локальный файл .gitignore в новый каталог примеров. Пожалуйста, сделайте Sire .gitignore присутствует, чтобы гарантировать, что файлы, сгенерированные VUGU, не отправляются в репозиторий.

Затем вам нужно отредактировать ./examples/my-new-example/go.mod , чтобы изменить имя модуля. Этот шаг имеет решающее значение.

Имя модуля должно быть изменено в соответствии с примером, поэтому в этом случае имя модуля будет изменено на github.com/vugu/vugu/examples/my-new-example

Затем вы можете отредактировать root.vugu , root.go по мере необходимости для поддержки примера или добавить больше *.vugu и *.go файлы по мере необходимости.

Файлы main_wasm.go и wasm_exec.js не должны быть отредактированы.

Файл примеров index.html должен будет отредактировать в двух разных местах. Первая - это линия 11

 <script src="/fetch-and-display/wasm_exec.js"></script>

Чтобы изменить путь, чтобы отразить название примера. В этом случае:

 <script src="/my-new-example/wasm_exec.js"></script>

Второе изменение аналогично, но отражает путь main.wasm Binary. Это около строки 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

Сокращенная дорожная карта

• Перейти к сборке на основе мага
• Однолетные компоненты (похожи на .vue); .vugu -> .go Generation.
• Включает CSS в компонентах.
• Основное управление потоком с VG-IF, VG-FOR и вывод с VG-контентом.
• Динамические атрибуты с <tag :prop='expr'> .
• Вложенные компоненты с динамическими свойствами
• Эффективно синхронизируется с браузером Dom.
• Статический вывод HTML (отличный для тестов).
• События DOM, щелчок и т. Д.
• Отслеживание модификации, чтобы избежать ненужных вычислений, где это возможно.
• Основной инструмент Dev и Prod Server, легко начать работу
• Переписать все, чтобы это не так ужасно внутри страны
• Маршрутизатор URL (в процессе)
• Поддержка компиляции Tinygo
• Рендеринг на стороне сервера (работает, требует больше документации и примеров)
• События компонентов только для
• Слоты
• Библиотека компонентов (ы) (WIP!)
• Оптимизация производительности
• И гораздо больше ...

Примечания

Он построен больше как библиотека, чем на рамки . В то время как Vugu действительно выполняет генерацию кода для ваших файлов компонентов .vugu (и даже выведет по умолчанию main_wasm.go для нового проекта и автоматически создавать свою программу после обновления страницы), в основном вы все еще находитесь в контроле. Общий поток программы, проводка приложений и инициализация, цикл рендеринга, который поддерживает страницу в синхронизации с вашими компонентами - вы контролируете все это. Фреймворки вызывают ваш код. Vugu - это библиотека, ваш код вызывает его (даже если Вугу генерирует немного этого для вас вначале, чтобы облегчить ситуацию). Одна из основных целей для Вугу, ​​когда дело доходит до того, что разработчики впервые сталкиваются с ним, состояла в том, чтобы сделать его очень быстро и легко начать, но без навязывания ненужных ограничений на то, как структурирован проект. Go Строительствуйте (а теперь модульная система) потрясающая. Идея состоит в том, чтобы использовать это в максимально возможной степени, а не перепрограммировать колесо.

Таким образом, вы не найдете инструмент командной строки Vugu, который запускает сервер разработки, вместо этого вы найдете в документах подходящий фрагмент кода, который вы можете вставить в файл, и go run сами. Для генерации кода, в то время как есть http.handler, который может сделать это после обновления страницы, вы также можете (и должны!) Запустить vugugen через go generate . В Вугу есть много небольших решений, которые следуют этой философии: везде возможно, просто используйте существующий механизм вместо того, чтобы заново изобретать. И продолжайте делать это, пока не появится доказательство того, что что -то еще действительно нужно. Пока что это работало хорошо. И это позволяет Вугу сосредоточиться на конкретных вещах, которые он приносит на стол.

Примеры

Примеры реализаций могут быть найдены в примерах репозитории

Плагин VSCODE

Поскольку большая часть вашего кода будет в файлах .vugu , вам нужно будет установить Vscode-Vugu Credits, которые отправляются в @binhonglee.