前端技术周刊 2018-04-27

前端技术周刊 2018-04-27

Humphry: Men and their cycles，丝姐的生理期一乱我也乱了，推迟了一天周刊终于来了。

前端快爆

生态更新

• Firefox 61 正式支持 CSS shape-outside 属性，可以实现文字环绕指定的形状或者半透明图片，此举大大丰富了 Web 排版的多样性，从此开发者可以实现媲美杂志的图文排版。此前 Chrome 37、Safari 7.1 均已支持。?

Humphry: 别说，整个页面都显得社会好多，见丝姐的demo

• Node.js 10 发布，该版本将在今年10月成为 LTS 版本。新版升级包括 N-API 不再是实验特性，Async_hooks 旧版 API 被移除，依赖的 V8 版本升级到 6.6 等。新版还有一个实验性版本 Node-ChakraCore，能够完全支持 N-API。?
• npm@6 发布，新支持了 npm audit，可以通过 NSP 数据库的信息检验依赖包是否是安全的；同时，新版内置了 Webhook 功能；最后，比起一年前的 npm，新版有了17倍的性能提升。?
• Nginx-1.14.0 稳定版本发布，新支持了 HTTP/2 Push，ngx_http_mirror_module 和 ngx_http_grpc_module 亦有更新。?

瑞士军刀

• VSCode 插件推荐：自动计算 require package 大小、每行代码后面透出最近修改者、语法检查、TODO 高亮、书签、主题、Icons美化等等……快来磨磨你的“刀”吧！
• CSS Blocks：Linkedin 开源的 CSS-in-JS 库，支持完整的 CSS 作用域封装，项目级别的优化，面向对象的继承关系，Tree Shaking 和编译期异常检测。
• conditioner：一个通过在 DOM 上标记 data-module 来动态引入组件的工具库，亮点是通过声明式的语法来条件式动态加载组件，好处是同时支持 AMD 和 ESM，也可以嵌入任意现有打包流程。

专题：WebAssembly

Humphry: 2018 年，WebAssembly 的生态正在逐步完善，计算密集型的业务或将不再是 JavaScript 难以攻略的城池：视频编解码、物理模拟、机器视觉、加密、压缩……

时间轴

• 2018年4月及未来：BlinkOn 9：WebAssembly

BlinkOn 9 是一个低调的技术大会，本文为与会者对其中《面向开发的 WebAssembly》的介绍，包括在开发中的 WebAssembly 的实际应用和新增特性支持。

• 2018年3月，Rust 宣布 Rust 2018 将发布，并将 WebAssembly 作为发布目标之一
• 2018年2月，Firefox、Chrome V8 65+ 双双提速 WebAssembly
• 2018年2月，Parcel 1.5+、Webpack 4+ 内置 WebAssembly Loader
• 2017年11月，所有主流现代浏览器均已支持 WebAssembly

支持的浏览器：Safari 11+、Edge 16+、Chrome 57+、Firefox 52+

• 2017年5月， WebAssembly 正式击败 PNaCl

为什么 Mozilla 能赢 Google？这篇文章提到，WebAssembly 提供了跨浏览器支持的可能，而非局限于谷歌的生态链。

简介

• WebAssembly @MDN
• 认识 WebAssebmly
• WebAssembly 与 Rust 入门攻略
• 手写 WebAssembly 生命游戏，所附的项目地址

实践

• WebAssebmly 在机器视觉领域的实践
• WebAssembly 在⽩鹭引擎中的实践
• WebAssembly 在 PSPDFKit 的实践，及启动速度优化实践
• WebAssembly 帮助 Figma 消减3倍加载时间

社区生态

• WebAssembly Studio：在线 IDE，支持C、C++、Rust
• wasm-bindgen：该库提供了 Rust 和 JavaScript 的通信桥梁，允许 JavaScript 调用 Rust API 或让 Rust 函数捕获 JavaScript 异常
• wasm-pack：是一个用于将 Rust 包编译打包为 WebAssembly 的工具，经过编译，内容可直接发布到 npm
• webplatform：可以和 DOM 交互的 Rust 包

---

编辑：Humphry & 审阅：壹丝