Я использую Go в качестве языка разработки последние 2 года, и мне всегда любопытно написать какой-нибудь интерфейс с использованием Go. Но какое-то время не везло, пока не вышел go 1.11.1 с экспериментальным портом WebAssembly. Итак, у меня были свои небольшие эксперименты с ним.

Я разработал два экспериментальных приложения:

https://rajnikant12345.github.io/resume/



rajnikant12345/resume
Мое резюме в Webassembly и GO. Внесите свой вклад в разработку rajnikant12345/resume, создав учетную запись на GitHub.github.com



https://rajnikant12345.github.io/wasmapp/



rajnikant12345/wasmapp
Внесите свой вклад в разработку rajnikant12345/wasmapp, создав учетную запись на GitHub.github.com



Какие?

Приложение wasmapp извлекает данные из REST API https://jsonplaceholder.typicode.com/users и отображает роботов, используя эти данные, и есть окно поиска, которое ищет роботов в приложении. Это приложение разработано с использованием Go и WebAssembly и пока работает на десктопе. Go необходимо оптимизировать некоторые начальные проблемы с памятью, чтобы он работал в браузере мобильного телефона.

Почему ?

Я хотел изучить некоторые технологии внешнего интерфейса, такие как react или angular, но не смог убедить себя, потому что я потерял контроль над своим кодом и отдал его каркас. Итак, я искал способ сделать это по-своему. Методы Go и WASM еще незрелые, но я чувствую, что это будущее, и стоит потратить немного времени и энергии.

Как ?

Хватит говорить, давайте сделаем это сейчас, я объясню, как я подошел к моему wasmap, тогда вы сможете легко понять мое приложение для резюме.

Предпосылка

  1. Я использовал GO 1.11.3, но все, что выше 1.11.1, должно работать.
  2. Редактор кода и все.

Я использовал немного HTML и немного CSS для веб-страницы и стилей, но код HTML написан внутри моих файлов go в виде простой текстовой строки или объектов dom.

Я использовал https://tachyons.io/ в качестве инструментария CSS.

Объяснение HTML-кода

index.html Это только код HTML, который мы увидим.

в этом файле мы извлекаем «main.wasm» и вызываем go.run(result.instance), это имеет смысл в wasm_exec.jsфайл. wasm_exec.js можно найти в папке GOROOT/misc/wasm. Этот файл на самом деле действует как связующее звено между webassembly и javascript, просто попробуйте его прочитать, и вы все поймете.

В текущей веб-сборке мы не можем получить доступ к объектам DOM, но с помощью wasm_exec.js и системного вызова GO/js в нашем коде GO, пакете мы можем получить доступ к объектам DOM и управлять ими. Мы увидим пример того, как я это делаю.

Я разработал небольшую оболочку для облегчения манипуляций с DOM, есть доступные оболочки, но иногда мне нравится делать это по-своему.



Движок пакета
Небольшая библиотека, которая помогает разрабатывать приложение с веб-сборкой и GOgodoc.org





rajnikant12345/engine
Небольшая библиотека, которая помогает разрабатывать приложения с помощью веб-сборки и GO — rajnikant12345/enginegithub.com



Я использую этот движок для манипулирования и рендеринга dom, я пытаюсь сделать это так же, как реагировать, но я делаю это в GO.

Код приложения GO

Я создал это приложение как компонент внутри стиля компонента, и каждый я создал такие компоненты, как полоса прокрутки, список карт, карта, приложение. Итак, иерархия похожа на

Самым верхним компонентом является приложение или приложение, затем у него есть два подкомпонента: поле поиска и полоса прокрутки.

В полосе прокрутки есть список карточек, а в списке карточек есть карточки.

Когда кто-то вводит в поле поиска, карточки, не содержащие текста в его имени, исчезают. Как показано на гифке выше.

С полем поиска связано действие, и все, включая действие и компоненты, написано на Go.

Давайте посмотрим на код

Взгляните на комментарии к коду, и это прояснит большую часть вещей.

main.go

Мы продолжим блокировать канал c, потому что мы не хотим, чтобы наша сборка завершалась, пока мы обрабатываем события, и хотим, чтобы наше приложение работало, пока мы не закроем браузер.

========================================

приложение / app.go

========================================

приложение/robos.go

========================================

приложение/scroll.go

========================================

приложение/cardlist.go

========================================

приложение/card.go

Теперь окно поиска и активный компонент этого приложения.

приложение/searchbox.go

На этом мой первый эксперимент с приложением wasm завершается. Я добился следующего:

  1. Получение данных JSON из сети.
  2. Управление компонентами приложения на ходу.
  3. Все это достигается с помощью GO, WebAssembly и syscall/js.
  4. Создал свою собственную оболочку DOM.

Надеемся, что Go и WebAssembly со временем улучшатся, поэтому мы сможем разрабатывать или создавать полный стек на одном языке.

Спасибо за чтение…