前端每週清單第 53 期：Go 與 WebAssembly, React Suspense 演練, CSS 技巧

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID: frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

• Go 語言的 WebAssembly 架構: 本文檔描述了 Go 編譯器中即將加入的 WebAssembly 架構設計方案，該方案會被合入目前的 Go 1.11 版本。這也意味着咱們可使用 Go 來編寫 WebAssembly 模塊代碼，從而也爲 Go 提供了相似於 JavaScript 這樣可以編寫 Web 端應用的能力。可預見該架構會對軟件工程生態體系有必定積極的影響。

• Flutter beta 1 發佈: 做爲 Mobile Word Congress 2018 的一部分，近日 Flutter 正式發佈了其首個 Beta 版本。Flutter 是 Google 新的移動端界面框架，用來幫助開發者快速構建高質量的跨平臺原生界面。Flutter 致力於實現如下目標：原生的無縫集成與性能保障，高效率的開發以及大量跨平臺的 UI 工具/組件庫。

• 再見，PhantomJS: 隨着 Chrome 與 Firefox 紛紛推出了 Headless 模式，本來許多的 PhantomJS 開發活動都逐漸停滯。近日，PhantomJS 宣佈將會歸檔其項目，而且中止開發操做；PhantomJS 2.1.1 將會是最後一個穩定版本。感謝 PhantomJS 這些年來帶給咱們的功能特性，它已經很好地完成了最初的目標與歷史使命，感謝 & 再見。

開發教程

步步爲營，掌握基礎技能

• Google 發佈機器學習速成課程: 爲了幫助更多的人瞭解與學習機器學習相關的知識技能，Google 發佈了人工智能學習網站 Learn with Google AI。本次課程，一共是 15 小時，其中包括 25 節課程以及 40 多項練習，該課程並不要求任何前置的學習內容，很是適合於各個層次的初學者。很是值得一提的是，本次課程提供了很是完美的中文支持，包括中文配音，中文課程材料以及中文概念講解。更多相關內容參考 數據科學與機器學習實戰手冊。

• 深刻探究 ES2018 與 ES2019: 本小冊是對於 ES2018 與 ES2019 的特性進行全面的介紹與講解，目前涵蓋了 ES2018 中的 Asynchronous iteration, Rest/Spread Properties, RegExp named capture groups, RegExp Unicode property escapes, RegExp lookbehind assertions, s (dotAll) flag for regular expressions, Promise.prototype.finally(), Template Literal Revision 等特性。更多相關內容參考 現代 JavaScript 開發：語法基礎與工程實踐。

• React Suspense 演練: Dan 在 JSConf Iceland 上演示的 Async React Demo 吸引了大量的關注，併爲咱們介紹了 Time Slicing 與 React Suspense 這兩個特性。本文便是對於 Movie Search 案例的分析與實踐，從而瞭解 React Suspense API 的相關特性，包括了 simple-cache-provider.SimpleCache, simple-cache-provider.createResource, ReactDOM.unstable_deferredUpdates 等。更多相關內容參考現代 Web 開發基礎與工程實踐--React 篇。

工程實踐

立足實踐，提示實際水平

• 你或許不知道的 CSS 技巧: 本文是對於 CSS 中的一些特性用法進行介紹，有點相似於 30 Seconds of CSS 這樣的 CSS 實用代碼片。本文涉及到的技巧譬如基於寬度的垂直排版，多背景動畫，字體簡寫等等。更多相關內容參考 CSS CheatSheet。

• Electron 應用自動更新方案設計: 在發佈一個桌面應用以前，必需要考慮的一個問題是：怎麼更新（迭代）？做者設計和實現了 Electron 應用的一整套自動更新方案，而且已應用於產品上，因此寫下這篇文章和你們分享，能夠怎麼設計和實現一個 Electron 應用的自動更新，咱們對於自動更新需求的考慮可能比你想得稍微複雜一些。本文將首先從需不須要更新開始談起，接着談怎麼從人肉更新一步步進化到無痛的自動更新。而後，我會向你介紹，一個完善後的自動更新需求能夠是怎樣的。最後，也是最關鍵的一部分 —— 咱們該採起怎樣的更新思路，又該如何設計咱們的產品邏輯。更多相關內容參考現代 Web 應用架構與性能調優。

• 前端案例分析: 在前端學習實踐的過程當中，咱們可能會閱讀不少相似於構建 Todo List 的文章，他們是不錯的入門文章，卻沒法告訴你如何來解決真實的，大規模應用中的問題。本文則是列舉了一系列企業級應用的實踐案例，包括了來自 Facebook, Twitter, Google, Airbnb 等公司的演講或者文章。更多相關內容參考 Awesome Web Reference。

深度閱讀

深度思考，昇華開發智慧

• Didact Fiber: Incremental reconciliation: 這是一篇很是不錯的深刻講解 Fiber 實現的文章。Didact 是做者實現的類 React 教學型框架，而本文則矚目於如何將 didact 中的部分代碼重寫以使其適配於最新的 React 16 架構；做者直接使用了來自 React 代碼庫中的結構、變量以及函數名，從而方便理解。本文依次介紹了爲什麼須要 Fiber，如何調度 MicroTasks，Fiber 的數據結構、流程與實現等內容。更多相關內容參考現代 Web 開發基礎與工程實踐--React 篇。

• 重構 Redux: 隨着 React 發佈新的 Context API，又有了許多關於 Redux 的討論：狀態管理是否依然解決？衆所周知，狀態管理一直是應用開發中的難點之一，本文便是對於狀態管理中常見的問題進行從新考量：咱們是否須要額外的狀態管理庫，Redux 是否值得使用，是否有更好地狀態管理方案等。更多相關內容參考現代 Web 應用架構與性能調優。

• 從 JS 到 DOM 的雙向追蹤: Chrome 66 中針對內存泄漏分析進行了優化，從而方便開發者調試內存泄漏相關的問題。如今 Chrome DevTools 可以追蹤而且快照 C++ DOM 對象，而後從 JavaScript 對象開始列舉出全部的可達對象。該特性是 V8 垃圾收集器中提供的新 C++ 追蹤機制的應用之一，更多相關內容參考Web 內存泄漏分析。

開源項目

樂於分享，共推前端發展

• Pandora.js: Pandora.js 是阿里開源的 Node.js 應用管理工具，其基於 TypeScript 開發，提供了管理、衡量、追蹤等一系列的特性。Pandora.js 源於多年企業級 Node.js 應用管理實踐，致力於提供從管理監控，到調試部署等全流程的支持。

• filepond: filepond 是靈活有趣的 JavaScript 文件上傳控件，它提供了漂亮的過場交互動畫以及良好的用戶體驗，而且利用客戶端圖片優化技術來保證高性能的上傳。

• just-dashboard: just-dashboard 可以基於 YAML 或者 JSON 配置文件生成數據面板，從而避免了開發者或者數據工程師重複的勞動。just-dashboard 還容許使用 jq 查詢，或者指定某個組件的數據抓取地址，just-dashboard 會在運行時動態抓取數據而且渲染爲圖表。

• prompts: prompts 是能夠在命令行中使用的，輕量級、美觀大方、用戶友好的交互式提示。與其餘框架相比，prompts 沒有過多的外部依賴，儘量地簡化內部複雜度。

巔峯人生

• 過完年跳槽，要考慮哪些要素？: 發完獎金了，過完年了，又到了人心躁動的時節。很多 IT 圈的小夥伴可能在思考，要不要換工做。今天和你們聊聊 IT 人換工做這個話題，樓主也面試過的很多候選人，站在面試官的角度，談談什麼樣的 IT 人會在面試中加分。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆 「 加羣 」。投稿請發郵件到 editors@cn.infoq.com，註明 「 前端之巔投稿 」。