前端技術週刊 2018-04-27

前端技術週刊 2018-04-27

Humphry: Men and their cycles，絲姐的生理期一亂我也亂了，推遲了一天週刊終於來了。

前端快爆

生態更新

• Firefox 61 正式支持 CSS shape-outside 屬性，能夠實現文字環繞指定的形狀或者半透明圖片，此舉大大豐富了 Web 排版的多樣性，今後開發者能夠實現媲美雜誌的圖文排版。此前 Chrome 3七、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 & 審閱：壹絲