遮天,完结小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

WebAssembly和Go：對未來的觀望

我反對學(xué)習(xí) JavaScript 還有前端開發(fā)已經(jīng)不是秘密了。事實上，在 CSS 出現(xiàn)前我就學(xué)會了 HTML，不過 JavaScript 是我做 Web 開發(fā)好久后的事情了。當(dāng)看到現(xiàn)代 Web 的發(fā)展時，我感到不寒而栗。這個生態(tài)對于脫離已久的我來說是如此迷茫。Node, webpack, yarn, npm, frameworks, UMD, AMD，我的天啊!

成都創(chuàng)新互聯(lián)的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)。

目前我關(guān)注 WebAssembly 也已經(jīng)有段時間了，期望它能讓我在沒有典型 JavaScript 構(gòu)建的情況下編寫 Web 應(yīng)用程序。

當(dāng)聽到 WebAssembly(wasm) 最近支持 Go 語言時，我知道實驗的時機已經(jīng)成熟，并且迫切期待嘗試。在嘗試之前我讀了些好文章，而這篇文章將記錄我的一些體驗。

為了用 Go 來寫 wasm，你需要先下載 Go 源碼并編譯好。從 Go 1.11 開始，WebAssembly 將被原生支持，但現(xiàn)在還沒有 release。

你可以按照這里的步驟來編譯 Go。因為 Go 本身也是用 Go 語言實現(xiàn)的，所以在編譯之前你需要先有一個可以正常工作的 Go 二進制版本來自舉自己。最終，你系統(tǒng)里會有兩個不同的 Go 版本。注意：如果你后面忘了你系統(tǒng)里安裝了兩個版本的 Go，那可能會給你造成一些困擾。可以使用 direnv 來管理 Go 版本，這樣你就可以為不同的項目來配置不同的 Go 了。

安裝***的 Go 后，就可以體驗 WebAssembly 了。你需要一個 HTML 文件和一個 JavaScript 腳本來加載生成的 wasm 文件。這些都包含在 Go 安裝路徑下的 misc/wasm 目錄里。你可以復(fù)制它們到項目目錄，修改它們以加載你的 wasm 文件。

我的***個項目有點雄心勃勃，我打算用 Go 語言構(gòu)建一個看起來像 Web 組件的東西，編譯成 WebAssembly。我并沒有把整件事做完，因為我被每件事要如何都做得好弄得心煩意亂。

首先，我將 GOROOT/misc/wasm 中的 HTML 和 JavaScript 文件復(fù)制到一個新目錄中，并添加了一個 main.go 文件。根據(jù)我預(yù)先想好的計劃，我把 HTML 放進 DOM 的一個現(xiàn)有節(jié)點，這個 DOM 要在 HTML 中聲明。所以我創(chuàng)建了一個帶有 thing 作為 ID 的 HTML section 標(biāo)簽。

 
 
 
   
  
  
  Please wait...

我在 HTML 文件底部的腳本標(biāo)簽上面插入了這個。接下來，我知道我想程序化地替換這個節(jié)點，所以我查找了 Go 的 wasm 庫中與 DOM 交互的語法。為 Go 添加了一個 syscall/js 包，允許與 DOM 進行交互。我使用了這段 Go 代碼得到了一個 HTML 帶有 thing 作為 ID 的節(jié)點的引用：

 
 
 
   
  
  
  el := js.Global.Get("document").Call("getElementById", "thing")

現(xiàn)在我有一個空DOM節(jié)點的引用，我可以使用渲染的HTML來填充。因此下一步其實就是創(chuàng)建一些HTML并將其填充進去。

我將著名的TodoMVC應(yīng)用作為靈感。首先我創(chuàng)建兩個文件：todo.go和todolist.go。這些文件包含一些Go結(jié)構(gòu)來表示Todo事項，和Todo事項列表。

 
 
 
   
  
  
  type Todo struct {   
  
  
      Title     string   
  
  
      Completed bool   
  
  
      //Root      js.Value   
  
  
      tree *vdom.Tree   
  
  
  }   
  
  
     
  
  
  type TodoList struct {   
  
  
      Todos []Todo   
  
  
      Component   
  
  
  }   
  
  
     
  
  
  type Component struct {   
  
  
      Name     string   
  
  
      Root     js.Value   
  
  
      Tree     *vdom.Tree   
  
  
      Template string   
  
  
  }

我也有點自大，開始將東西提取到Component類型中，并認(rèn)為我可以將它嵌入到我的自定義類型中，以便向它們提供Web 組件功能。我沒有完成這個想法。。。在后文你會看到原因。

這些自定義Go類型每一個都有一個Render()方法和模板：

 
 
 
   
  
  
  var todolisttemplate = `   
  
  
  {{range $i, $x := $.Todos}}    
  
  
      {{$x.Render}}    
  
  
  {{end}}   
  
  
  
`   
  
  
     
  
  
  func (todoList *TodoList) Render() error {   
  
  
     
  
  
      tmpl, err := template.New("todolist").Parse(todoList.Template)   
  
  
      if err != nil {   
  
  
          return err   
  
  
      }   
  
  
      // Execute the template with the given todo and write to a buffer   
  
  
      buf := bytes.NewBuffer([]byte{})   
  
  
      if err := tmpl.Execute(buf, todoList); err != nil {   
  
  
          return err   
  
  
      }   
  
  
      // Parse the resulting html into a virtual tree   
  
  
      newTree, err := vdom.Parse(buf.Bytes())   
  
  
      if err != nil {   
  
  
          return err   
  
  
      }   
  
  
     
  
  
      if todoList.Tree != nil {   
  
  
          // Calculate the diff between this render and the last render   
  
  
          //  patches, err := vdom.Diff(todo.tree, newTree)   
  
  
  }       //  if err != nil {   
  
  
          //      return err   
  
  
          //  }   
  
  
     
  
  
          // Effeciently apply changes to the actual DOM   
  
  
          //      if err := patches.Patch(todo.Root); err != nil {   
  
  
          //          return err   
  
  
          //      }   
  
  
      } else {   
  
  
     
  
  
          todoList.Tree = newTree   
  
  
      }   
  
  
      // Remember the virtual DOM state for the next render to diff against   
  
  
      todoList.Tree = newTree   
  
  
     
  
  
      todoList.Root.Set("innerHTML", string(newTree.HTML()))   
  
  
      return nil   
  
  
  }

我的想法是用我找到的 vdom 包來做這些渲染，這樣的話渲染的效率會更高一些。這就是我遇到的***個問題。

GopherJS和Go/wasm之間的區(qū)別

vdom包專為GopherJS而寫，而 GopherJS 是一個從Go到Javascript的轉(zhuǎn)譯器。基于便捷，GopherJS使用js.Object類型。Go的新wasm庫syscall/js使用js.Value類型。它們精神上是相似的，但在實現(xiàn)上大為不同。這意味著我使用vdom渲染的想法是行不通的，除非我將vdom使用的js.Object移植到使用js.Value。盡管vdom的tree.HTML()函數(shù)在不用修改的情況下就可以運行，因此我可以將HTML節(jié)點的內(nèi)部HTML設(shè)置為vdom解析出的內(nèi)容。Render()函數(shù)解析Go結(jié)構(gòu)模板，將Go結(jié)構(gòu)的實例作為上下文來傳值。然后它用vdom庫創(chuàng)建一個解析dom樹，而且在函數(shù)的***一行渲染樹：

 
 
 
   
  
  
  todoList.Root.Set("innerHTML", string(newTree.HTML()))

此時，我已經(jīng)有了一個可以運行的Go/wasm原型，沒有連接任何事件。但是它確實可以渲染成dom并顯示在瀏覽器。這是巨大的一步;我當(dāng)時很興奮。

我創(chuàng)建了一個Makefile，這樣我就不用一次又一次的輸入冗長的編譯命令：

 
 
 
   
  
  
  wasm2:   
  
  
      GOROOT=~/gowasm GOARCH=wasm GOOS=js ~/gowasm/bin/go build -o example.wasm markdown.go   
  
  
     
  
  
  wasm:   
  
  
      GOROOT=~/gowasm GOARCH=wasm GOOS=js ~/gowasm/bin/go build -o example.wasm .   
  
  
     
  
  
  build-server:   
  
  
      go build -o server-app server/server.go   
  
  
     
  
  
  run: build-server wasm   
  
  
      ./server-app

基于現(xiàn)在的Web Assembly狀態(tài)，這個makefile也指出了一個至關(guān)重要的問題。新型瀏覽器會忽略WASM文件，除非給他們提供合適的MIME類型。這篇文章有一個簡單的HTTP文件服務(wù)器，它為web assembly文件設(shè)置了正確的MIME類型。我將其復(fù)制到我的項目，并將其用于應(yīng)用中。如果你的web服務(wù)器確實為.sasm文件配置好了，那么你就不需要自定義服務(wù)器。

提出挑戰(zhàn)

在這一點上，我意識到Web Assembly可以正常運行，而也許更重要的是：GopherJS的很多代碼很少甚至不用修改就可以在Web Assembly可以正常運行。我給自己提出挑戰(zhàn)( nerd sniped )。我嘗試的下一件事情是找一個 vecty 應(yīng)用并編譯它。由于vecty是專為GopherJS所寫，而且使用了js.Object類型而不是js.Vaule，因此要想失敗很困難。為了讓vecty在wasm中編譯，我 fork了vecty ，然后做了一些修改，一些處理，并注釋了很多代碼。

最終的結(jié)果就是放在在vecty/example目錄中的markdown編輯器可以在Web Assembly中***運行。本文有點冗長，因此我會讓你在這看源碼?？偨Y(jié)：它與GopherJS版本幾乎完全相同，但是在main()退出的時候web assembly也會退出，因此為了阻止退出并保持應(yīng)用運行，我在main()結(jié)尾添加了一個空的通道接收。

事件

Go 的 syscall/js 使用了一個非常不同的方法來進行事件注冊，我不得不修改 vecty 的事件注冊代碼才能使用 wasm 新的回調(diào)注冊，在這里我花了非常多的時間。不過直到現(xiàn)在，這個方法工作的還不錯。

結(jié)論

通過對這些事件課程的學(xué)習(xí)，我認(rèn)定 WebAssembly 就是 Web 開發(fā)的未來。它可以使用任何語言作為“前端語言”來進行 Web 開發(fā)，然后編譯為 wasm 就可以了。這給像我一樣并不想再學(xué)習(xí) Javascript，而可以使用自己喜歡的語言來進行 Web 開發(fā)的人帶來了很多好處。

本文名稱：WebAssembly和Go：對未來的觀望
標(biāo)題路徑：http://m.fisionsoft.com.cn/article/djhidge.html

新聞中心

其他資訊