【在主画面加入捷径】
       
【选择语系】
繁中 简中

[书籍回顾] Learn WebAssembly 评价

REVIEW

    前言

    简单地说,WebAssembly 是用在浏览器中的新的二进位文件格式,程序运行速度会比 JavaScript 快得多。由于各大主流浏览器皆已支援 WebAssembly,除非项目仍需支援 Internet Explorer 等旧浏览器,应该都可以放心地使用此格式 (参考这里这里)。

    目前支援 WebAssembly 最好的语言是 C、C++、Rust,在本文撰写时,其他语言对 WebAssembly 的支援仍在实验性阶段。由于 Rust 算是小众语言,社群资源比较少;相对来说,使用 C (或 C++) 来撰写 WebAssembly 程序是较常见的选择。由此可知,WebAssembly 算是相对进阶的技术,因为 WebAssembly 开发者要掌握 C (或 C++) 和 JavaScript 等网页技术,才能顺利地在项目中使用 WebAssembly。

    做为世界上第一本关于 WebAssembly 的教材,代表 WebAssembly 已经受到主流出版媒体的青睬;虽然 WebAssembly 仍算是相对小众的技术,未来应该会有更多网页应用程序使用 WebAssembly 达到更好的效能和体验。本书共 501 页,分为 10 章,算是一本中量级的书籍。接下来,我们会逐一介绍各个章节的内容。

    1. What is WebAssembly?

    由于 WebAssembly 算是相对新颖的技术,本章花了一些篇幅介绍 WebAssembly 的由来。虽然开发者可以手刻 WebAssembly 程序代码,但 WebAssembly 本身算是相对低阶的语言,比较常见的方式是用高阶语言写好后再转 WebAssembly,本章也介绍了目前各语言对 WebAssembly 的支援度。此外,作者花一些篇幅解释 WebAssembly 和 JavaScript 之间的关系,因为现阶段大部分的网页应用程序仍是用 JavaScript 写成。

    2. Elements of WebAssembly - Wat, Wasm, and JavaScript API

    WebAssembly 程序有三个部分:

    • Wat:文字格式
    • Wasm:二进位格式
    • JavaScript API:调用 WebAssembly 模块的 API

    Wat 是在开发期间用来观察 Wasm 模块的内部实现,类似于我们将 C (或 C++) 程序代码转成组语后观看其实际运行方式;实务上不太会手写 Wat,所以了解一下其概念即可。

    另外一个重点是使用 JavaScript API 和 Wasm 互动,现阶段 Wasm 的角色算是 JavaScript 的延伸模块,我们仍需要撰写一些胶水 (glue) 程序代码以使用 Wasm。本章重点在于讲解该 JavaScript API 的概念,而非其使用方式,看本段的重点在于了解相关概念而非记忆技术细节。

    3. Setting Up a Development Environment

    本书对于建置开发环境的部分分比较细,拆成两章。本章先介绍建置开发环境的工具:

    • VS Code (Visual Studio Code)
    • Node.js
    • Git
    • 开发用服务器
    • 支援 WebAssembly 的浏览器,像 Chrome 或 Firefox

    本章用一个写好的范例来测试环境是否可用,至于 C (或 C++) 编译环境则留待下一章来介绍。

    4. Installing the Required Dependencies

    本章介绍 Emscripten 及 EMSDK 及其安装方式。简单地说,Emscripten 是 C (或 C++) 转 Wasm 的编译器,EMSDK 则是管理开发环境的工具组。用 EMSDK 是为了避免因开发环境不兼容造成无法顺利开发程序的问题。

    5. Creating and Loading a WebAssembly Module

    这章会带着读者实际写一个简短的 WebAssembly 程序,并将其载入网页。由于 Emscripten 有移植 SDL函数库,我们可以在 WebAssemlby 中使用 SDL,本章的范例有用到 SDL 产生一些简单的图形。

    虽然 Emscripten 可以帮我们自动产生生载入 Wasm 的网页,自己写网页和胶水程序代码不会太难,所以不用太依赖这项特性。本章会介绍如何自动产生网页和自己客制样板程序代码。

    6. Interacting with JavaScript and Debugging

    延续上一章,本章继续深入介绍 WebAssembly 模块如何和 JavaScript 互动。JavaScript 和 C (或 C++) 的互动是双向的,我们可以从 JavaScript 调用 C (或 C++) 程序代码,也可以从 C (或 C++) 调用 JavaScript 程序代码,本章各自展示一些相关的简短范例。

    7. Creating an Application from Scratch

    本章展示一个完整的应用程序范例,在这个范例中,会用 C 语言的结构做一个链结串行 (linked list),还会用到数个 JavaScript函数库,包括 Vue.js 和 D3.js 等。这个范例程序规模稍微大一点,故作者提供完整的项目程序代码,以免打错程序代码导致无法顺利执行该程序。

    8. Porting a Game with Emscripten

    除了撰写新的 WebAssembly 程序外,移植现有的 C (或 C++) 程序到 WebAssembly 也是一个受欢迎的应用。实际上已经有一些开发团队将项目移植到 WebAssembly 上 (可见这里)。透过移植程序,可以让现有的项目获得新生命。

    本章移植了一个以 C++ 写成的俄罗斯方块游戏,由于该项目使用 SDL,移植难度算低,这应该是原作者刻意安排的。移植算是相对困难的技巧,因为要追踪整个项目的程序代码,并且知道要改那里才可以让程序顺利运作。由于每个项目移植时会碰到的问题各有不同,死记本章中修改的地方意义不大,重点是观摩修改后对程序的影响以了解为什么要更动那些地方。

    9. Integrating with Node.js

    WebAssembly 程序一开始的发布目标是浏览器,不过,后来逐渐拓展到浏览器外的领域,像是 Node.js。本节展示两个和 Node.js 相关的应用,一个是在伺服端搭配 Express,一个是以 Webpack 打包客户端程序。由本章实例可知,我们以后可以把 WebAssembly 程序当成 Node.js 的延伸模块,用来加速 Node.js 应用程序。

    10. Advanced Tools and Upcoming Features

    本章介绍一些 WebAssembly 相关的工具和技巧:

    • WABT:在 Wat、Wasm、C 之间相互转换
    • Binaryen:WebAssembly 编译器和工具链
    • 不透过 EMSDK 而用 LLVM 编译 WebAssembly
    • WasmFiddle 和其他数个在线撰写 WebAssembly 的平台
    • 用 web worker 平行执行 WebAssembly 程序
    • WebAssembly 即将实现的新特性

    由于本章的工具和技巧对于开发 WebAssembly 程序不是必需的,大致浏览一下,学习需要的部分即可。

    结语

    即使完全不会 WebAssembly,我们仍然可以用 JavaScript 来撰写网页程序;因此,WebAssembly 对于网页程序开发者来说算是加分的项目。WebAssembly 不会完全取代 JavaScript,而会以延伸模块的角色和 JavaScript 合作。不论是要帮某一段关键步骤加速或是移植某个现有的项目,我们都可以考虑使用 WebAssembly。

    如何购买

    点选以下链接即可购买本书。