Vugu:后端要抢前端程序员的饭碗了?[每日前端夜话0x99]

每日前端夜话 0x99

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:1360 字

预计阅读时间:5 分钟

翻译: 疯狂的技术宅

来源: vugu

Vugo 是什么

Vugu 是一个 Go语言开发库,可以很容易地使用 Go 语言编写 Web 用户界面。

其基本思路如下:

  • 在 .vugu 文件中编写 UI 组件。这些文件类似于你在 JavaScript 框架中看到的 UI 组件(例如 .vue 文件)。但是它们不包含 JavaScript,而是包含用于 iffor 和其他类似的 Go 语言表达式。

  • 每个 .vugu 文件都被转换为对应的 .go 文件。Vugu 项目中有一个开发服务器,可以在页面重新加载时自动执行此操作,或者用 vugugen 命令行工具与 go generate 集成。代码生成还尝试在需要时提供合理的默认值,以便 .vugu 文件包含尽可能少的样板,同时也然允许进行大量的自定义。

  • 你的项目被编译为 WebAssembly 模块并在浏览器中运行。同样,开发服务器在启动项目时也很容易。随着项目的发展,你需要自定义此过程的一部分,不过这些可以轻松的完成。

  • Vugu库(包:github.com/vugu/vugu) 提供了在网页上将 HTML DOM 的功能有效同步 到 .vugu 文件中的标记。同时支持附加 DOM 事件处理(单击等)和将大页面分解成组件等功能。

什么是 WebAssembly

由 Google、Microsoft、Mozilla、Apple 等几家大公司合作发起的 WebAssembly 是一种新的字节码格式,主流浏览器都已经支持 WebAssembly。和 JS 需要解释执行不同,WebAssembly 字节码和底层机器码很相似可快速装载运行,因此性能相对于 JS 解释执行大大提升。也就是说 WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行.

WebAssembly优点

  • 体积小:由于浏览器运行时只加载编译成的字节码,一样的逻辑比用字符串描述的 JS 文件体积要小很多;

  • 加载快:由于文件体积小,再加上无需解释执行,WebAssembly 能更快的加载并实例化,减少运行前的等待时间;

能编译成 WebAssembly 字节码的高级语言:

  • AssemblyScript

  • c\c++

  • Rust

  • Kotlin

  • go

Vugo 快速上手

让我们创建一个在你的浏览器中运行的基本工作Vugu应用程序。它只需要三个小文件即可启动。确保至少安装了 Go 1.12

  1. 在任何你喜欢的地方创建一个新的空文件夹。我们将用名称 testapp 作为示例。你创建的每个文件都将直接放在此文件夹中,不需要子文件夹。

  2. 创建 go.mod ,它用来指定 Go 模块名称。首先你可以按照显示的模式选择自己喜欢的名称作为占位符。例如:

1module example.org/someone/testapp
  1. Create a Vugu component file.We'll put a click handler and an element that toggles to demonstrate some basic functionality. This first component should be called root.vugu :

  2. 创建一个 Vugu 组件文件。我们将放置一个单击处理程序和一个切换元素来演示一些基本功能。第一个组件应该叫做 root.vugu

 1<div class="my-first-vugu-comp">
 2    <button @click="data.Toggle()">Test</button>
 3    <div vg-if="data.Show">I am here!</div>
 4</div>
 5
 6<style>
 7    .my-first-vugu-comp { background: #eee; }
 8</style>
 9
10<script type="application/x-go">
11    type RootData struct { Show bool }
12    func (data *RootData) Toggle() { data.Show = !data.Show }
13</script>
  1. 创建开发服务器代码文件。注意,这个文件不会被编译为 WebAssembly。这是一个为你的程序提供服务的服务器。 devserver.go

 1// +build ignore
 2
 3package main
 4
 5  import (
 6       "log"
 7       "net/http"
 8       "os"
 9       "github.com/vugu/vugu/simplehttp"
10   )
11
12  func main() {
13       wd, _ := os.Getwd()
14       l := "127.0.0.1:8844"
15       log.Printf("Starting HTTP Server at %q", l)
16       h := simplehttp.New(wd, true)
17       // include a CSS file
18       // simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }
19       log.Fatal(http.ListenAndServe(l, h))
20  }
  1. 运行服务器。在同一目录下,运行命令 go run devserver.go

    片刻之后,服务器就应该启动。它在 Windows、Linux 或 Mac 上的工作方式相同。

  2. 访问:http://127.0.0.1:8844/

  3. 惊叹于你创造的奇迹。

Vugu 文件概述

Vugu 文件有三个部分:标记、样式和代码

标记是 HTML 元素,它是文件的显示部分。通常它是一个简单的 div 标签,例如:

1<div class="some-name">
2  <!-- ... -->
3</div>

它显示在文档中的适当位置。根组件(默认名为 “root” 并且位于 root.vugu 中)通常位于页面的 <body> 标记内。除   <script><style> 之外,该元素可以是任何类型。

样式是一个常规的 <style> 标记,包含使用此组件输出的 CSS。为了避免冲突,样式应该适当地加上前缀(对应于上面顶级标记元素上的 id 或类)。

代码是 Go 语言代码,会被逐字复制到最终的 .go 文件中。它被放入具有特定内容类型的脚本标记中,如下所示:

1<script type="application/x-go">
2// Go code here
3</script>

注意:不支持 JavaScript,只支持 Go 代码。只可以有一种语言。

来源: https://www.vugu.org/

下面夹杂一些私货:也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 !

在公众号内回复“体系”查看高清大图

长按二维码,加大鹏老师微信好友

拉你加入前端技术交流群

唠一唠怎样才能拿高薪

小手一抖,资料全有。长按二维码关注 前端先锋 ,阅读更多技术文章和业界动态。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章