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

前端每週清單：Instant App將至，WebAssembly將獲默認支持，PWA實踐漸增 爲InfoQ中文站特供稿件，首發地址爲這裏；如需轉載，請與InfoQ中文站聯繫。從屬於筆者的Web 前端入門與工程實踐。更多閱讀清單請轉向往期索引。

前端每週清單

新聞熱點

前端領域最新動態

• 《WebAssembly 成員就 API 設計與二進制格式達成一致》：近日，WebAssembly CG 成員單位 Chrome、Edge、Firefox 以及 Webkit 就初始版本的 WebAssembly API 以及 二進制格式達成一致，標誌着瀏覽器預覽階段的結束，各大瀏覽器會開始默認支持 WebAssembly，讓咱們拭目以待。( http://suo.im/AXQU )

• 《斯坦福 CS 授課開始用 JavaScript 替換 Java》：今年春學期，斯坦福計劃將 CS106J 課程實驗性地使用 JavaScript 而不是 Java 進行教學；而且將 CS106S: "Programming Abstraction and Social Good" 做爲獨立課程發佈，鼓勵學生思考他們將來可以承擔的社會職位。( http://suo.im/4DY8LJ )

• 《Ant Design 2.7.3 發佈，阿里前端設計語言&前端框架》：Ant Design 2.7.3 發佈了，Ant Design 是螞蟻金服開發和正在使用的一套企業級的前端設計語言和基於 React 的前端框架實現。( http://suo.im/3hwBf9 )

• 《備受矚目的 Instant App 即將到來》：Android 一貫致力於讓用戶能以更加省力的方式發現並使用各類應用，而 Android Instant App 正是這一理念的集中體現——這是一種用戶無需安裝便可運行 Android 應用的全新方式。( http://suo.im/1AddvL )

開發教程

步步爲營，掌握基礎技能

• 《CSS Grid 指南》: 網格系統是佈局設計的核心之一，在 Web 開發中咱們常常須要藉助第三方庫來建立合適的網格系統。而 CSS Grid 則是一個二維佈局系統，可以輔助開發者建立基於網格的用戶界面，此文則是詳細地介紹 CSS Grid 的語法細節以及調試實例。( https://tympanus.net/codrops/... )

• 《基於 Vue.js 開發一個 Pokemon Battle 指南》: 本文是很是詳細的如何利用 Vue.js 開發一個寵物小精靈的戰鬥場景的教程，仍是挺有意思的。( http://suo.im/1jwicW )

• 《Web 常見權限認證技術詳解》：此文詳細闡述了 Web 開發中經常使用的權限認證技術，首先介紹了 Web 開發中與權限相關的常見名詞，然後介紹了 HTTP Basic Authentication、基於 Session 的認知、基於 Token 的認證、JWT、OAuth 以及 OpenID。( https://github.com/teesloane/... )

• 《ECMAScript 4 背後的故事》: 本文是對於 1999 ~ 2008 年之間 JavaScript 世界發生的大事件的詳細介紹，闡述了 ECMAScript 4 從提出到角力到流產的前世此生。 ( http://suo.im/phBiE )

• 《React Native 與 Swift 性能對比》：做爲混合式開發框架，React Native 在運行時仍然會實際調用 Objective-C 或者 Java。此文做者同時用 Swift 與 React Native 構建了相同的應用，而且從 CPU、GPU、內存使用、電池耗費等多個角度對這兩者進行性能分析。結果代表兩者性能相差無幾，Swift 在 CPU 佔用略佔優點，兩者的 GPU 佔用不相伯仲，而 React Native 在內存上則有必定長處。( http://suo.im/2MWZnA )

• 《React 與 MobX 開發中的測試驅動開發》: 本文對於 React 與 MobX 的基本使用進行了介紹，闡述了爲什麼做者認爲 MobX 是個不錯的 Redux 的替代以及如何對 MobX 進行單元測試。( http://suo.im/2PE2A6 )

• 《基於 React 與 GraphQL 的全棧開發指南》：GraphQL 最先由 Facebook 提出以解決複雜多變的查詢問題，彌補 REST 中的不足。它容許界面組件以聲明式獲取數據而忽略後端實現細節。本系列文章是由 Apollo 團隊提供，講解如何基於 React 與 GraphQL 開發應用。( http://6me.us/O6p )

工程實踐

立足實踐，提示實際水平

• 《React 開發中的 10 個微模式》：此文是 Gilbertson 在工做中總結而來的 React 開發中常見的設計模式總結，譬如輸入域的惟一標識分配、CSS 控制等等 。 ( http://suo.im/42S8Kb )

• 《美團點評前端無痕埋點實踐》：構建一個數據平臺大致上包括數據採集、數據上報、數據存儲、數據計算，以及數據的可視化展現等幾個重要的環節。前端數據採集與上報是整個流程中最重要的一環，只有確保前端數據生產的全面、準確、及時，最終產生的數據結果纔是可靠的、有價值的。爲了解決前端埋點的準確性、及時性、開發效率等問題，業內各家公司從不一樣角度，提出了多種技術方案，本文則是美團點評前端無痕埋點實踐。( http://suo.im/fVPpT )

• 《工程實踐中的 PWA 利器清單》: 本文是 Google Chrome 團隊的 Addy Osmani 所寫，介紹了這兩年來他們團隊開發或者推薦的一系列可以用於生產環境的 PWA 開發工具或者輔助庫。此文做者同時來列舉了目前在不少主流站點應用 PWA 以後帶來的一系列包括離線優先、首屏加載優化等提高用戶體驗的實踐案例。 ( http://suo.im/1IxGPJ )

• 《深刻了解 JavaScript 中錯誤對象與堆棧跟蹤》：JavaScript 中 Error 對象的堆棧跟蹤信息包含了從異常拋出點到構造函數的全部棧幀信息，而手動地去捕獲與操做堆棧跟蹤信息有助於咱們在開發測試或者異常處理相關的框架時有更好地實踐。( http://suo.im/MiMWd )

• 《Airbnb 使用 React 重構搜索功能的實踐》：早在 2015 年，Airbnb 的工程團隊就決定將 React 做爲主要的前端開發棧，不過由於其搜索頁面過於複雜所以直到 2016 年初纔開始遷移工做。本文就是 Airbnb 進行代碼重構的經驗介紹。( http://6me.us/2mS )

• 《百度搜索對PWA的探索和初步實踐》: 本文是百度搜索資深Web前端工程師沈洲在前端之巔微信羣中的分享整理總結而成，介紹了百度天氣 PWA 應用的開發實踐，本週還分享了《PWA 實踐：從一個簡單的頁面開始》與《PWA實踐：理解和建立 Service Worker 腳本》等 PWA 相關內容 。(http://6me.us/JS85s)

深度閱讀

深度思考，昇華開發智慧

• 《對於在瀏覽器中使用 UDP 協議的一系列考慮》: 現代瀏覽器與網站大多構建於 HTTP 協議之上，而對於相似 agar.io 這樣的實時遊戲每每會選擇 WebSockets 協議。此文做者首先介紹了下這些基於 TCP 的應用層協議面對的所謂對頭阻塞問題，而後又討論了 QUIC 以及 WebRTC 在構建專用服務器時的不足。最後，做者分析了使用 UDP 做爲傳輸協議存在的問題，而且提出了 netcode.io 這個輕量級的傳輸加密的基於 UDP 封裝的網絡協議。( http://suo.im/3j4EV6 )

• 《對比探祕 WebAssembly 性能優越之謎》: 本系列文章經過有趣的漫畫介紹了 WebAssembly 的前世此生，而且與 JavaScript 就加載、解析、編譯、執行等瀏覽進行了詳細對比，從而介紹 WebAssembly 的性能緣何相較於 JavaScript 會好上不少。同時做者也強調，WebAssembly 與 JavaScript 各有所長，將來並不會存在太多的競爭，更多的是相輔相成，各司其職。( http://suo.im/3jsTUH )

• 《爲什麼使用 Node.js ？》：本文來自於 Node.js 的技術專家 Tomislav Capan，此文最先發佈於 2013 年，詳細介紹了 Node.js 的內部原理，而且論述了 Node.js 適用的業務場景與典型的範模式。( http://suo.im/3sFwvm )

• 《槽糕的 JavaScript 框架們》：此文做者 Matt Burgess 嚴肅地吐槽批評了幾乎全部的現今流行的 JavaScript 框架，與他上一篇文章偉大的 JavaScript 框架一塊兒閱讀效果更佳。固然，做者並非想讓你們回到茹毛飲血的歲月，而是但願能以辯證地態度去認識與使用框架。( http://6me.us/e9R )

• 《當咱們在談大前端的時候，咱們談的是什麼》：大前端到底指的是什麼？事實上大前端並無明確的定義，它由國內業界發明，甚至沒有對應的英文詞彙。在客戶端開發上，Native與HTML5之爭持續快十年，吵了人們都失去興趣了，從如今來看，並無誰取代誰，而是有融合的趨勢，融合以後的產物就是大前端。本文則是對於大前端的一些探討，還能夠參考《大前端年終總結與展望：大前端時代即未來臨？》。( http://6me.us/5XC )

• 《來自 Google 的 API 設計指南》：這是來自於 Google 的網絡 API 設計指南，最先於 2014 在 Google 內部推行，指導了包括 Cloud APIs 等在內的一系列對外服務。該指南同時適用於 REST API 與 RPC API，特別是 gRPC API。( http://6me.us/dgoI )

開源項目

樂於分享，共推前端發展

• 《notie》：這是一個輕量級的、零依賴的面向 JavaScript 的通知、輸入以及選擇套件庫。它容許彈出警示信息、確認輸入框、容許用戶輸入信息、容許用戶進行選擇以及進行日期選擇等。( https://github.com/jaredreich... )

• 《跨瀏覽器通用存儲接口 Store.js》：Store.js 可以根據瀏覽器狀況自動選擇合適的底層存儲，而且提供了統一的 API 接口。Store.js 始於 2010 年，目前已經被運用到數以千計的站點中。而近日 Store.js 發佈了 2.0 版本，其提供了完整的可插拔式的存儲支持以及大量的附加功能。 ( https://github.com/marcuswest... )

• 《Rapscallion》：React 服務端渲染的性能一直是廣爲詬病，相較於其餘前端框架會滿上不少，筆者在此文中也進行過簡要探討。而 Rapscallion 則是新的支持 React 服務端渲染的開源包體，它支持異步非阻塞渲染，相較於renderToString其能達到將近 50% 的性能提高。同時 Rapscallion 官方還爲咱們準備了基於 Redis 的緩存實例。( http://suo.im/3YS6pz )

• 《在瀏覽器中實現自動駕駛汽車》：人工智能與深度學習的浪潮滾滾而來，也給咱們帶來了不少有趣的應用。該項目利用 JavaScript 建立了一個完整的自我學習的代理，可以在一個 2D 環境下控制某個車輛自動規避各類障礙 。用戶還能夠經過鼠標繪製出新的障礙，而小車能夠經過強化學習不斷進行自我更新，值得一試。( http://suo.im/4egERz )

• 《Caporal.js》：特性全面的可用於建立 Node.js 命令行工具的框架，包括了幫助信息生成、自動補全等。 ( https://github.com/mattallty/... )

• 《Gutenberg》：網頁打印時的格式錯亂一直是個頭痛的問題，而 Gutenberg,css 提供了一系列基本的僅在打印時纔會加載的樣式，優化專用於打印的格式顯示。( https://github.com/BafS/Guten... )

巔峯人生

一覽衆山，聆聽巔峯故事