「2019 JSConf.Asia - Kas Perch」WebAssembly - JS 的將來和 Web 多語言開發

特別說明

這是一個由 simviso 團隊對 JSConf.Asia 中關於 WebAssembly 相關話題進行翻譯的文檔，內容並不是直譯，其中有一些是譯者自身的思考。分享者是 Kas Perch，Cloudflare 的一名開發人員。

如今，讓咱們一塊兒來了解下什麼是 WebAssembly。

視頻地址：WebAssembly - JS 的將來和 Web 多語言開發

視頻翻譯版權歸 simviso 全部

本次參與翻譯人員

前端公衆號

1、前言

你們好，太棒了。就像他們所說，若是咱們搞定了 WebAssembly 技術，那麼就搞定了 JS 的將來和 Web 多語言開發。

正如介紹所言，我叫 Kas Perch，如今是 Cloudflare 公司的一名 Avocado 開發人員。同時，我也很癡迷於機器人編程，而且寫過相關書籍。

我已經寫了兩本使用 JS 給機器人編程的書。我週末也會在 twitch 上直播一些硬件和軟件相關的東西。

我養了兩隻貓，它們是個人最愛。左邊的貓叫 Ace，右邊的叫 Aria。它們如今對我很生氣，由於我已經離開它們三個星期了。

我可能再過一個星期纔回去，它們是真的很生個人氣。

言歸正傳，大家來到這裏就是爲了聽一些關於 WebAssembly 的一些東西

2、什麼是 WebAssembly

這項技術已經有五年了，咱們還在維護中，咱們冷靜下來思考一下，爲何直到如今尚未人指出該如何使用它。由於人們很難作到該如何更容易的去理解它（由於它很抽象），這也是爲何咱們要來談下它究竟是什麼。

首先，我想說，它不是一個編程語言（注：WebAssembly 是驅動編程語言的存在，此處就至關於一個獵頭，針對後面這句話），就像你曾經去領英上面招聘員工同樣，你說你須要一個有十年開發經驗的 Node.js 程序員。

這個就像是在說，我是一個 WebAssembly 程序員，就好像若是你不會 WebAssembly 編程，你就不會寫 WebAssembly 程序（就比如若是你不會 Nodejs，你就不會使用 Nodejs 編程）。

其次，WebAssembly 不會取代 JS ，同時它可讓 JS 駕馭任何事。

JS 並不會沒落，更不會被 WebAssembly 戰勝，由於它並非爲了戰勝 JS 而設計的。

WebAssembly 偏偏是咱們沒法去忽視的東西，由於它可讓咱們走得更遠

我但願在接下來二十幾分鍾大家能被我征服，由於 WebAssembly 是將來的發展趨勢。

很差意思，按錯了。

那麼 WebAssembly 究竟是什麼呢？

它爲其餘語言提供編譯服務，你能夠將其餘語言編譯成 WebAssembly，它是一種規範（相似於 jvm 支持的 class 字節碼）和要編譯成的目標文件類型。

這對於 JS 來講是一種能力的加強。WebAssembly 根本就不是想要取代 JS ，而是仍然讓 JS 作它所擅長的領域，同時也能讓 JS 也能作它所不擅長的領域，這就是它要作的事情。

但更重要的是，WebAssembly 表面上很神奇，但卻不只僅只是表面上神奇，我會在後面解釋這點。

WebAssembly 的目標就是將你用其餘語言寫的代碼編譯成 wasm 類型文件。

WebAssembly 已經很好的支持了 Rust 語言，C/C++，GO 和 C# 已經能夠用 WebAssembly 編譯。

還有不少語言沒有提到，固然我能想到的主要就這四個，尤爲是 Rust， WebAssembly 對它進行了至關多的優化，你有機會能夠嘗試一下，這絕對是一個很是酷的編程體驗。

那麼這裏，你可能會問：爲何要用其餘語言來寫 Web 程序？你爲何要這麼作？爲何你會在這裏放上 Laurie Voss（npm 的做者） 的演講照片，而後你使用其餘語言來說這些東西？

主要有兩個理由：A，我想要和 Laurie Voss 進行合照。B，讓你們一塊兒擁抱 WebAssembly。

3、下一個 Ajax

對於瀏覽器來講它就像是下一個 Ajax（就比如是下一個喬布斯）。

在這週末，我已經看到了不少有這樣（驚訝）表情了。

OK，就像下一個喬布斯（這裏是 Ajax），聽起來很酷。

可是個人意思是說 Ajax 真的高度可信而且使客戶端層面應用成爲可能，因此說，Ajax 是一個變革，而 WebAssembly 將是下一步的一個變革。

這是我今天早上找到的一張超可愛的寶可夢 GIF，我就想着要把它貼上來。

爲了跟貼圖保持一致我特地選用了「進化」這個詞，不知道大家注沒注意 GIF 周邊我還寫了字的哈。

這時候你可能想着說，行吧，可能這就是下一個 Ajax，但仍是抱着幾分遲疑態度。

這幅畫是我早上在 OneNote 上畫的。

我把它稱爲 「ancient.png.」

讓咱們回過來看這張圖，這上面有 HTML，CSS 和 JS。

好比當你打開社交網頁的時候js就會播放煩人的音樂，服務器會返回全部這些東西，全部的東西都在這裏。

請將你的視線隨着我手指移動，當你點擊一個連接的時候，它會返回一個頁面，你一直點擊它就一直會給咱們返回一個頁面。

每當你想要從服務器獲取新信息的時候，你就須要手動對瀏覽器進行刷新操做。

我將這張圖稱之爲 then.png，Ajax 不是一個 button 但勝似 button。

Ajax 請求頁面，而後獲取頁面內容，咱們經過發送 Ajax 請求，來避免刷新頁面的操做。

咱們經過 Ajax 獲得返回的結果，Ajax 結果可能會是另一個頁面的請求。

基於這個，咱們獲得了一系列的單頁應用程序。

當咱們的服務器提供了Restful 風格的 API 的時候，也提供臨時的 HTML CSS 和 JS 文件。

這纔是我要說的，請看我用高亮顏色所標記出的 WebAssembly 的內容，這裏突出了它的工做原理。

能夠看到頁面請求、返回的頁面結果，在這個過程當中 WebAssembly 只是作一些計算而已。

咱們依然來看兩個圖中左側的 Browser，而後使用 service worker 做爲你的第三方模塊。一樣是在這個Browser中，你可使用一些 Ajax 請求，同時服務器就相似於圖上的 LOL OK。我可能甚至都不是一個真正的服務器，我只是 serverless 服務器上的一個函數而已。

而後返回你的結果。整個過程簡直難以想象！

OK，相信你如今應該有點感受了。

4、對 JS 進行加強

可以在瀏覽器中計算內容，不必定非要用 JS 來實現。

這就是一件大事！至關重要！

那爲何這很重要？爲何咱們要這麼關注？

咱們之因此這麼關心是由於咱們對 JS 進行加強。

我知道，這個話題你也許聽到過不少次，甚至都已經厭倦了。可是這也是事實，JS 在某些方面的確不擅長。

咱們並不須要爲了使用 WebAssembly 而重寫整個項目代碼，誰也不想重構整個代碼庫，就像五年前那些包含了單元測試的代碼，我想沒人願意來幹這個事情（想重構舉起大家的手，可是沒有）。

挺好

更少的請求調用意味着更少的延遲，也就意味着咱們能夠爲用戶提供更快的 Web 應用。

高性能一直都是很重要的。這樣的話，咱們就無需對服務器進行成千上百萬次的請求。

因此，咱們來談談該如何對 JS 進行加強。

我相信在你的工做過程當中已經看到過不少次這種表達式（0.1 + 0.2 === 0.3 // false）了吧,其實0.1 + 0.2 = 0.30000000000000004（精度運算），因此 0.1 + 0.2 === 0.3 是 false

因此若是你正在作的事情對數字精讀有很高的要求，好比：金融應用、股票交易、貨幣兌換。那麼很顯然，這些並非 JS 的強項。

你須要對那些運行着不一樣語言的服務器發送一個 Ajax 請求，服務器會返回給你精確的結果，而後你對返回的結果進行了錯誤的轉換（經過 JS 對返回的 JSON包含的數字類型的字符串進行轉換，出現精讀丟失）。

因此經過 WebAssembly，你就能夠在瀏覽器中使用正確的工具來完成這項工做，好比：Rust，C，或者其餘浮點數超過32位的語言。

其它 JS 不太強的地方還有，JS 的類型強制轉換會有一些負面效應，好比：" " == 0 爲 true。我真的很難去理解它，我能夠說他們輸入了一個非零的數字。

獲得和預想中不同的結果，這個結果對我來說徹底是出乎意料的，好比你用 1 和經過選擇器（document.getElementById）獲取的 input 的值相加，結果只是鏈接字符串。可是你使用 Number函數處理 input 元素的值，那就會進行兩個數字相加，即便後者不是一個真正的數字，可能只是一個 NaN，而後 1+ 9可能也是 NaN。

這下知道個人意思了吧，類型強制轉換在這裏會很棘手。

說到類型，typeof 關鍵字是一個迷。就像圖中最後一條同樣，讓人煩躁了不少年（typeof [] === 'array' // false）

若是你以前看過個人演講，你就會知道使用了 WebAssembly 也就意味着使用了正確的工具來完成對應的工做。工欲善其事必先利其器。

WebAssembly 使用正確的工具來完成 Web 上的工做。

咱們不須要再經過 JS 來作它不擅長的事情。

這對 Web 和瀏覽器應用程序來講都是一件大事。

可是這將會幹掉 JS。

噢， 咱們將會使用 WebAssembly 去寫全部的應用程序，WebAssembly 將會...,不，冷靜，冷靜。

開個玩笑，它不會幹掉 JS。

它讓 JS 作它擅長的事情，從而使它變得更好。在 DOM 操做上，React 和其餘框架會快得離譜，JS 引擎也使 DOM 操做速度更加快。

我不認爲 WebAssembly 會很快戰勝 JS 和 DOM 操做。也許在遙遠的未來，它能夠作到，可是近期看來並不會實現。

而且 JS 也很擅長於操做 CSS 樣式，WebAssembly 也不會取代 JS 去操做 CSS。

因此，WebAssembly 用於加強 JS，同時你也能夠在此基礎上使用 JS，這並不矛盾。

而且 WebAssembly 解決了 JS 所不擅長的，這也減輕了 JS 的負擔。

就好像我和個人對象同樣。他是很討厭洗衣服的，真的，特別討厭。而我又特別討厭作菜，因此他作菜我洗衣服，而且這樣搭配很是完美。

可是如今他仍是必須洗本身的衣服，由於我要出差三週，而他只有兩週的衣服穿，因此不得不洗。

就像 Ajax 作的那樣，WebAssembly 經過營造更好的瀏覽器體驗來使互聯網變得更好。

當你想到這些影響時，這更好的瀏覽器體驗簡直使人激動。就像 Jeff Goldblum（美國演員）使人激動那樣。

5、舉個例子

讓咱們經過這個 Demo 來進一步表達個人意思。

這個 Demo 使用了 wasm-imagemagick 技術，若是你以前沒有用過 imagemagick 的話我能夠解釋一下：imagemagick 是一個命令行工具，專用於建立和操縱圖片。

它可以建立GIF動畫，它可以建立圖片的單元格，它可以建立分形圖。它是一個很是強大的庫以致於我不想用任何其餘語言去重寫它，更不用說 JS。

咱們將要以十倍快於 JS 的速度來操縱這些圖片，因此從某種意義上說 JS 自己並不能作到。

它真正強大的地方在於你不用重寫任何代碼就能夠經過該工具來完成咱們的工做。

讓咱們來看看。但願這行得通。

它以前都是好好的因此此次可能就不行了，你知道我意思吧。

好了我攝像頭打開了。咱們來選擇一張照片，我要點下面（作鬼臉），照片照出來老是顯得我很蠢，因此我放棄掙扎了。

OK，這些按鈕的意思是……我把它調大一點大家就看得清了個人舌頭和這些按鈕了。

咱們點右旋，而後在下面你就能夠看到右旋的圖片了。這真的真的是很快的了，再左旋一下，你用 CSS 也能快速作到，這好像沒什麼了不得。咱們來調個灰度，boom, 灰度，沒有閃屏。咱們來加點對比度。去掉對比度呢？去掉對比度了。JS 能這麼快嗎？不可能！

對，這就是個人 Demo，我會在推特上發一下這個 Github 倉庫，這是徹底開源的，你想的話能夠嘗試一下。

對，這是個人 Demo。

哈謝謝大家

6、關於 Nodejs

可是 Nodejs 呢？等等……關於 Nodejs？

這是瀏覽器的工做，對，這徹底是瀏覽器中的技術，我剛剛說的也徹底是跟瀏覽器相關的。

可是，爲何我會提到 Nodejs 呢?

我說起它（Nodejs）的緣由是它是模塊本地化的，有誰在跑 npm install 的時候看到過 C 編譯出錯？

大部分人的手都應該舉起來了，由於這實在是太常見了，模塊本地化實在是 Node 中的一個大坑。

這東西真的很是愚蠢，甚至讓你想喊出 Bryan Cranston(絕命毒師男主)嘴裏喊的。你可能能從他的脣語裏讀出來，他喊的是 BLAH，他喊得並非…額你知道的

爲何這些模塊如此之坑？緣由是它們必須在下載時從新編譯，並且必須爲每個體系結構從新編譯它們。

就拿樹莓派平臺來講，由於在這個平臺上根本不能正常的工做，就會有人在 Github 上面去提issue ，同時也就意味着你會花很長時間在 Github 上去討論這個問題。

他們要麼會爲你的平臺編譯一個版本，要不就直接不支持這個平臺。

的確這也是很棘手的，Github 上面的討論的確讓人感到糟糕。可是我很遺憾的告訴你，這個並不支持 Windows 系統。

首先聲明，我很感激hecc(高等教育協調理事會)在 node-gyp 方面所作的研究，他們完成了這是個彷佛不可能完成的任務。所以我很尊重他們。

可是 WebAssembly 只能在 Node8.0 以上版本正常工做。記住這個8.0版本，爲何他能夠在 Node8.0 以上的版本運行呢？

由於這個版本的 WebAssembly 模塊已經預編譯了，不須要構建。因此這對於任何平臺都是十分便捷，均可以經過 Node 來運行。因此對於整個架構，都不會再有下載重編譯這個步驟了。

的確是這樣，我已經試過了，你也能夠嘗試一下，這真的太棒了。

引用 Laurie Voss 今天早上說的一句話

每一個人都不看好 node-gyp，可是 WebAssembly 偏偏讓咱們作到了。

這是 Nodejs 的里程碑。在不久的未來，當 Node8 不在維護的時候，Node8 如下的版本將再也不兼容。

這並不意味着人們不能使用它，好比 Android3.0 版本。

其它

OK，WebAssembly 正在往 serverless 上進擊。例如，我在 CloudFlare 工做，咱們有運行着 V8 引擎的雲平臺，因此你能夠在 serverless 上運行 WebAssembly，這很酷！

咱們如今爲現場的聽衆提供了一個免費的 serverless 平臺。

個人意思是，假設大家中的某些人正在觀看這段視頻或者直播，可是大家沒有這個平臺的會員，而後還想白嫖。不要誤會個人意思哈，我只是也不喜歡付款而已。

若是你掃描這個二維碼，你能夠保留一個 workers 的子域，而不是 dev 環境，它包含了 30 個 worker ，天天能處理 10 萬個請求，在每秒內，比我不使用 JS 作運算要稍微多一點。

這個我以後會再展現，它在咱們的展位上也有放。但我會等大家都掃完，我再切到下一個 PPT。放二維碼顯然不是由於我不想讓大家看見我。

我想你們基本都掃完了。

此次談話的重點是試着擁抱 WebAssembly ，我我的特別喜歡 Rust。

我學到更多關於 Rust 的知識就像我學到新東西同樣。就好像這不是在 13 天內創造出來的。

我沒有瞧不起 JS。它是有史以來最好的語言之一，但它是在13天內完成的，而 Rust 絕對不是在 13 天內完成的。

它絕對是通過深思熟慮的。

WebAssembly 是 JS 全部形式的將來，儘管我但願能向你展現它將創造更好的瀏覽器體驗。

它將棄用 node-gyp。

從如今起的五年裏實際上它並無這樣作，請不要引用個人話。

但它可能會棄用 node-gyp。你能夠引用個人話。

最後一個問題是，若是你如今是招聘經理，我想讓你作一些很是重要的事，那就是僱傭一個和你不一樣的人。

他們可能與你有所不一樣，他們可能會相信你的不一樣之處，他們可能會有所不一樣，他們的性別認同可能與你僱傭他們的性別不一樣。

在你告訴我這很難以前，我會讓你去找 LaBeouf 先生談這件事。

不難，儘管去作！

有人會以某種方式僱用與你不一樣的人。

無論怎麼樣，感謝你們的聆聽 ~