前端每周清單第3期：Instant App將至，WebAssembly將獲默認支持，PWA實踐漸增

作者：王下邀月熊

編輯：尾尾

新聞熱點

國內國外，前端最新動態

• 《WebAssembly 成員就 API 設計與二進位格式達成一致》：近日，WebAssembly CG 成員單位 Chrome、Edge、Firefox 以及 Webkit 就初始版本的 WebAssembly API 以及 二進位格式達成一致，標誌著瀏覽器預覽階段的結束，各大瀏覽器會開始默認支持 WebAssembly，讓我們拭目以待。
• 《備受矚目的 Instant App 即將到來》：Android 一向致力於讓用戶能以更加省力的方式發現並使用各種應用，而 Android Instant App 正是這一理念的集中體現——這是一種用戶無需安裝即可運行 Android 應用的全新方式。
• 《為快速生成基於JS的Web應用，微軟發布系列工具》 Microsoft發布了一系列工具，用於快速生成基於JavaScript的Web應用，這些工具包含了dotnet new和對Node.js的巧妙運用。
• 《Ant Design 2.7.3 發布，阿里前端設計語言&前端框架》：Ant Design 2.7.3 發布了，Ant Design 是螞蟻金服開發和正在使用的一套企業級的前端設計語言和基於 React 的前端框架實現。
• 《斯坦福 CS 授課開始用 JavaScript 替換 Java》：今年春學期，斯坦福計劃將 CS106J 課程實驗性地使用 JavaScript 而不是 Java 進行教學；並且將 CS106S: "Programming Abstraction and Social Good" 作為獨立課程發布，鼓勵學生思考他們未來能夠承擔的社會職位。

開發教程

步步為營，掌握基礎技能

• 《CSS Grid 指南》: 網格系統是布局設計的核心之一，在 Web 開發中我們經常需要藉助第三方庫來創建合適的網格系統。而 CSS Grid 則是一個二維布局系統，能夠輔助開發者創建基於網格的用戶界面，此文則是詳細地介紹 CSS Grid 的語法細節以及調試實例
• 《基於 Vue.js 開發一個 Pokemon Battle 指南》: 此文是非常詳細的如何利用 Vue.js 開發一個寵物小精靈的戰鬥場景的教程，還是挺有意思的。
• 《Web 常見許可權認證技術詳解》：此文詳細闡述了 Web 開發中常用的許可權認證技術，首先介紹了 Web 開發中與許可權相關的常見名詞，而後介紹了 HTTP Basic Authentication、基於 Session 的認知、基於 Token 的認證、JWT、OAuth 以及 OpenID。
• 《ECMAScript 4 背後的故事》: 此文是對於 1999 ~ 2008 年之間 JavaScript 世界發生的大事件的詳細介紹，闡述了 ECMAScript 4 從提出到角力到流產的前世今生。
• 《React Native 與 Swift 性能對比》：作為混合式開發框架，React Native 在運行時仍然會實際調用 Objective-C 或者 Java。此文作者同時用 Swift 與 React Native 構建了相同的應用，並且從 CPU、GPU、內存使用、電池耗費等多個角度對這二者進行性能分析。結果表明二者性能相差無幾，Swift 在 CPU 佔用略佔優勢，二者的 GPU 佔用不相伯仲，而 React Native 在內存上則有一定長處。
• 《React 與 MobX 開發中的測試驅動開發》: 此文對於 React 與 MobX 的基本使用進行了介紹，闡述了為何作者認為 MobX 是個不錯的 Redux 的替代以及如何對 MobX 進行單元測試。
• 《基於 React 與 GraphQL 的全棧開發指南》：GraphQL 最早由 Facebook 提出以解決複雜多變的查詢問題，彌補 REST 中的不足。它允許界面組件以聲明式獲取數據而忽略後端實現細節。本系列文章是由 Apollo 團隊提供，講解如何基於 React 與 GraphQL 開發應用。

工程實踐

立足實踐，提示實際水平

• PWA《百度搜索對PWA的探索和初步實踐》: 此文是百度搜索資深Web前端工程師沈洲在前端之巔微信群中的分享整理總結而成，介紹了百度天氣 PWA 應用的開發實踐。
• PWA餓了么大前端團隊PWA內容專欄：《PWA 實踐：從一個簡單的頁面開始》與[《PWA實踐：理解和創建 Service Worker 腳本》]。
• PWA《工程實踐中的 PWA 利器清單》: 此文是 Google Chrome 團隊的 Addy Osmani 所寫，介紹了這兩年來他們團隊開發或者推薦的一系列能夠用於生產環境的 PWA 開發工具或者輔助庫。此文作者同時來列舉了目前在很多主流站點應用 PWA 之後帶來的一系列包括離線優先、首屏載入優化等提升用戶體驗的實踐案例。
• 《React 開發中的 10 個微模式》：此文是 Gilbertson 在工作中總結而來的 React 開發中常見的設計模式總結，譬如輸入域的唯一標識分配、CSS 控制等。
• 《美團點評前端無痕埋點實踐》：構建一個數據平台大體上包括數據採集、數據上報、數據存儲、數據計算，以及數據的可視化展示等幾個重要的環節。前端數據採集與上報是整個流程中最重要的一環，只有確保前端數據生產的全面、準確、及時，最終產生的數據結果才是可靠的、有價值的。為了解決前端埋點的準確性、及時性、開發效率等問題，業內各家公司從不同角度，提出了多種技術方案，此文則是美團點評前端無痕埋點實踐。
• 《深入了解 JavaScript 中錯誤對象與堆棧跟蹤》：JavaScript 中 Error 對象的堆棧跟蹤信息包含了從異常拋出點到構造函數的所有棧幀信息，而手動地去捕獲與操作堆棧跟蹤信息有助於我們在開發測試或者異常處理相關的框架時有更好地實踐。
• 《Airbnb 使用 React 重構搜索功能的實踐》：早在 2015 年，Airbnb 的工程團隊就決定將 React 作為主要的前端開發棧，不過因為其搜索頁面過於複雜因此直到 2016 年初才開始遷移工作。此文就是 Airbnb 進行代碼重構的經驗介紹。

深度閱讀

深度思考，升華開發智慧

• 《對比探秘 WebAssembly 性能優越之謎》: 本系列文章通過有趣的漫畫介紹了 WebAssembly 的前世今生，並且與 JavaScript 就載入、解析、編譯、執行等瀏覽進行了詳細對比，從而介紹 WebAssembly 的性能緣何相較於 JavaScript 會好上很多。同時作者也強調，WebAssembly 與 JavaScript 各有所長，未來並不會存在太多的競爭，更多的是相輔相成，各司其職。
• 《對於在瀏覽器中使用 UDP 協議的一系列考慮》: 現代瀏覽器與網站大多構建於 HTTP 協議之上，而對於類似 agar.io 這樣的實時遊戲往往會選擇 WebSockets 協議。此文作者首先介紹了下這些基於 TCP 的應用層協議面對的所謂對頭阻塞問題，然後又討論了 QUIC 以及 WebRTC 在構建專用伺服器時的不足。最後，作者分析了使用 UDP 作為傳輸協議存在的問題，並且提出了 netcode.io 這個輕量級的傳輸加密的基於 UDP 封裝的網路協議。
• 《為何使用 Node.js ？》：此文來自於 Node.js 的技術專家 Tomislav Capan，此文最早發佈於 2013 年，詳細介紹了 Node.js 的內部原理，並且論述了 Node.js 適用的業務場景與典型的范模式。
• 《槽糕的 JavaScript 框架們》：此文作者 Matt Burgess 嚴肅地吐槽批評了幾乎所有的現今流行的 JavaScript 框架，與他上一篇文章偉大的 JavaScript 框架一起閱讀效果更佳。當然，作者並不是想讓大家回到茹毛飲血的歲月，而是希望能以辯證地態度去認識與使用框架。
• 《當我們在談大前端的時候，我們談的是什麼》：大前端到底指的是什麼？事實上大前端並沒有明確的定義，它由國內業界發明，甚至沒有對應的英文辭彙。在客戶端開發上，Native與HTML5之爭持續快十年，吵了人們都失去興趣了，從現在來看，並沒有誰取代誰，而是有融合的趨勢，融合之後的產物就是大前端。此文則是對於大前端的一些探討，還可以參考《大前端年終總結與展望：大前端時代即將來臨？》。
• 《來自 Google 的 API 設計指南》：這是來自於 Google 的網路 API 設計指南，最早於 2014 在 Google 內部推行，指導了包括 Cloud APIs 等在內的一系列對外服務。該指南同時適用於 REST API 與 RPC API，特別是 gRPC API。

開源項目

樂於分享，共推前端發展

• 《notie》：這是一個輕量級的、零依賴的面向 JavaScript 的通知、輸入以及選擇套件庫。它允許彈出警示信息、確認輸入框、允許用戶輸入信息、允許用戶進行選擇以及進行日期選擇等。
• 《跨瀏覽器通用存儲介面 Store.js》：Store.js 能夠根據瀏覽器情況自動選擇合適的底層存儲，並且提供了統一的 API 介面。Store.js 始於 2010 年，目前已經被運用到數以千計的站點中。而近日 Store.js 發布了 2.0 版本，其提供了完整的可插拔式的存儲支持以及大量的附加功能。
• 《Rapscallion》：React 服務端渲染的性能一直是廣為詬病，相較於其他前端框架會滿上很多，筆者在此文中也進行過簡要探討。而 Rapscallion 則是新的支持 React 服務端渲染的開源包體，它支持非同步非阻塞渲染，相較於renderToString其能達到將近 50% 的性能提升。同時 Rapscallion 官方還為我們準備了基於 Redis 的緩存實例。
• 《在瀏覽器中實現自動駕駛汽車》：人工智慧與深度學習的浪潮滾滾而來，也給我們帶來了很多有趣的應用。該項目利用 JavaScript 創建了一個完整的自我學習的代理，能夠在一個 2D 環境下控制某個車輛自動規避各種障礙 。用戶還可以通過滑鼠繪製出新的障礙，而小車可以通過強化學習不斷進行自我更新，值得一試。
• 《Caporal.js》：特性全面的可用於創建 Node.js 命令行工具的框架，包括了幫助信息生成、自動補全等。
• 《Gutenberg》：網頁列印時的格式錯亂一直是個頭痛的問題，而 Gutenberg,css 提供了一系列基本的僅在列印時才會載入的樣式，優化專用於列印的格式顯示。

巔峰人生

一覽眾山，聆聽巔峰故事

• 《程序員該如何過好他的整個職業生涯？》：此文是池建強在大咖說的分享總結整理而成。池建強為什麼要離開鎚子科技加入極客邦科技？程序員職業生涯的關鍵點是哪些？程序員如何做出好產品？專業性很重要嗎？怎麼看程序員的跳槽？如果你對這些問題感興趣，那麼此文值得一看。