38

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

 4 years ago
source link: https://www.tuicool.com/articles/fYvEZzz
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

每日前端夜话 0x99

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

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

正文共：1360 字

预计阅读时间：5 分钟

翻译： 疯狂的技术宅

来源： vugu

eyaqYvB.jpg!web

Vugo 是什么

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

其基本思路如下：

  • 在 .vugu 文件中编写 UI 组件。这些文件类似于你在 JavaScript 框架中看到的 UI 组件（例如 .vue 文件）。但是它们不包含 JavaScript，而是包含用于 if 、 for 和其他类似的 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。我们是认真的 ！ BbquyaF.png!web

zMFVruu.jpg!web

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

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

拉你加入前端技术交流群

唠一唠怎样才能拿高薪

JFNJFbv.jpg!web

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

MFryQjN.gif


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK