前端開發每周閱讀清單：PWA 將與安卓原生平起平坐、V8 團隊致力於提高 ES2015 特性性能

作者：王下邀月熊

編輯：尾尾

新聞熱點

前端領域最新動態

• 《PWA 將與安卓原生平起平坐》：自從谷歌提出PWA概念之後，它就持續受到移動開發界的關注。由於其可靠、快速、融入的特性，大大提升了網頁應用的用戶友好性。近日官方博客更進一步宣布將使PWA應用獲得和原生應用同等的待遇與許可權。
• 《React Studio Public Beta 2 發布》：React Studio Public Beta 2 發布啦，React Studio 是能夠基於類似於 React JS 這樣的組件化庫進行互動式 UI 設計的專業工具，能夠同時滿足設計師與開發者的需求。對於設計師而言，React Studio 徹底遵循了響應式與移動優先的原則，設計師能夠方便地將組件設計與應用流導出為 ReactJS 風格的 HTML/JavaScript 代碼。對於開發者而言，React Studio 是一個基於 create-react-app 模板創建的前端項目，它僅集成了必須的代碼，並且遵循了現代的開發流程，能夠輔助開發者快速構建 SPA 項目或者其他獨立組件。
• 《ECMAScript 中可選鏈提案》：相信每個 JavaScript 開發者都不會陌生於 Uncaught TypeError: Cannot read property property of null 這個錯誤，對於空指針的檢測，特別是對象嵌套屬性的空檢測成為了不可或缺的部分，譬如：var street = user.address && user.address.street。
• 《V8 團隊致力於提高 ES2015 特性性能》：最近幾個月以來 V8 團隊一直致力於提升 ES2015 新特性的性能表現。目前現代 Web 開發中通行的做法時候用 Babel 這樣的編譯器將那些引擎尚不支持的語法編譯為傳統的 ES5 語法，譬如經常使用的擴展操作符會被 Babel 編譯為Object.assign形式的語法組成，這樣不可避免的會帶來性能損耗與包體體積增大。傳統的 Crankshaft 編譯器難以直接優化for...of這樣的語法特性，而最新的 TurboFan 編譯流則從設計上就能夠支持控制流、異常處理以及解構賦值這些特性。包括之前 Crankshaft 雖然支持但是尚未優化的生成器等等特性也都得到了優化，最後的結果表明整體的語法性能提升了兩倍多。
• 《Twitter 宣布移動 Web 技術棧遷移到 Node.js，Express，React PWA》：近日，Twitter 工程師 Nicolas 宣布 Twitter 幾乎所有的移動流量遷移到了以 Node.js 為基礎的服務中（Today we moved all of Twitters mobile web traffic (thats like, a lot) to our new web stack – Node.js, Express, React PWA.）。在過去的兩年中，Twitter 移動 Web 技術棧主要是基於 Scala，Google Closure Templates 以及少量的 JavaScript。後來 CharlieCroom 開始嘗試將登出服務遷移到 JavaScript 技術棧中，並且進行了約 9 個月的線上測試，效果尚可，因此 Twitter 決定全部遷移到 JavaScript 技術棧中。同時，Twitter Web APP 還支持所謂的 PRPL 範式：主動推送首屏關鍵資源、僅渲染初始路由、預存其他路由、按需懶載入與創建剩餘路由。

開發教程

步步為營，掌握基礎技能

• 《HTMLReference:在案例中學習 HTML》：htmlreference.io 是免費的 HTML 學習指南，它以實例的方式講述各種元素的屬性與用法，適合於入門級開發人員學習 HTML 的基本語法。

• 《2017 前端開發手冊》：Front-End Developer Handbook 2017 由 Cody Lindley 編寫，面向每一個希望學習前端的開發者。該手冊概括地討論了前端工程化的相關實踐：在 2017 年中我們應該使用哪些前端工具以及如何學習去使用這些數據。該手冊的內容包含了 Web 技術的基礎：HTML、CSS、DOM 以及 JavaScript，以及基於這些技術構建的優秀開源項目。

• 《基於 Vue 與 DeepStream 構建實時 CRUD 應用》：Vue 是專註於 JavaScript UI 的漸進式庫，它提供了開發現代 Web 應用的各種先進的特性。而隨著移動互聯網的發展，實時技術也愈發重要；各種各樣的提供抽象介面的實時伺服器扮演著越發重要的作用，其中DeepStream 就是開源的、免費的並且性能表現相當優秀的實時伺服器。而本文就利用 Vue 與 DeepStream 這兩個開源工具構建實時交互的應用。

• 《現代 JavaScript 概念縱覽》：現代 JavaScript 開發在過去幾年中經歷了迅猛的變遷，並且這種變化的勢頭毫無停滯的預兆。對於很多前端開發者而言可能還不是很熟悉那些 JS 博客或者文檔中提及的時興的概念。此文討論了很多起到媒介作用以及高級的概念，和這些概念是如何被適用於現代 JavaScript 開發中的。本文我們會討論 Statefulness 與 Statelessness、Immutability 與 Mutability、Imperative 與 Declarative Programming、Higher-order Functions、Observables、以及 FP、RP、FPR 編程範式。
• 《一系列優秀的 Angular 2 組件集錦》：Angular 2 是非常不錯的前端開發框架，而本倉庫則是一系列開源的 Angular 2 組件的集錦。這些組件包括浮層、通知、氣泡、菜單、載入指示、表格、樹、時間、圖表、地圖、無限滾動、音視頻、SVG、PDF 以及各種各樣會在表單中用到的組件。

工程實踐

立足實踐，提示實際水平

• 《來自 MuseFinder 的 React 組件編寫實踐》：該指南來源於 MuseFind 在多年的產品開發中總結而來的 React 實踐經驗，其包含了對於組件聲明方式、樣式類的使用、初始狀態聲明、Props 聲明、方法聲明、Props 結構、裝飾器的使用、函數式組件的聲明等等多個方面。
• 《Vue.js 組件樣式指南》：該樣式指南提供了一種統一架構 Vue.js 代碼的建議，其目標是達成易於開發者與團隊成員理解以及尋找東西、易於 IDE 來審查代碼並且提供幫助、易於重用開發構建工具、易於獨立地緩存與使用代碼塊。該指南借鑒了 RiotJS樣式指南，主要還包含了以下幾個部分：基於模塊開發、Vue 組件命名，等等。

• 《關於Node.js存在反序列化遠程代碼執行漏洞的安全公告》：近日，國家信息安全漏洞共享平台（CNVD）收錄了Node.js反序列化遠程代碼執行漏洞（CNVD-2017-01206，對應 CVE-2017-594）。攻利用漏洞執行遠程執行操作系統指令，獲得伺服器許可權。由於目前驗證代碼已經公開，極有可能誘發大規模網站攻擊。Node.js反序列化模塊node-serialize庫中的unserialize()函數未做安全處理，該漏洞通過傳遞調用JavaScript IIFE函數表達式的方式實現遠程任意代碼執行的效果。攻擊者可通過遠程攻擊獲得當前伺服器運行環境許可權，由於實際部署中node.js運行環境較多為操作系統root許可權，因此可完全控制伺服器主機。CNVD對該漏洞的綜合評級為「高危」。目前，相關利用方式已經在互聯網上公開，近期出現攻擊嘗試爆發的可能。不過根據原作者表述，實際上這個庫在 GitHub 上一共只有 20 個 star，還有幾個是漏洞文章發布後引來的，而且下載量也是非常少。如果想要避免此類安全問題，需要解決的就是確保用戶輸入的安全。方法比如通過安全傳輸方式（內網 & 加密）傳輸序列化字元串、使用如 RSA 等簽名演算法對字元串進行完整化校驗。

• 《一次一個微優化，改進Node.js應用的吞吐量》：本文是多個提高 Node.js 應用吞吐量的小優化技巧介紹，包括儘可能地使用聚合 IO 操作，以批量寫的方式來最小化系統調用的次數、需要將發布的開銷考慮進內，清除應用中不同的定時器、CPU 分析器能夠給你提高一些有用信息，但是並不能完整地反饋整個流程、謹慎使用 ECMAScript 高級語法，特別是你還未使用最新的 JavaScript 引擎或者類似於 Babel 這樣的轉換器的時候、要洞察你的依賴樹的組成並且對你使用的依賴進行適當的性能評測。當我們希望去優化某個包含了 IO 功能的應用性能時，我們需要對於應用耗費的 CPU 周期以及那些妨礙到應用並行化執行的因素了如指掌。本文則是分享作者在提升 Apache Cassandra 項目中的 DataStax Node.js 驅動時的一些思考與總結出的導致應用吞吐量降級的關鍵因素。

• 《Web APP 實現水平滑頁翻頁交互效果的要點解析》：本文是張鑫旭老師分享的起點中文網支持水平滑頁閱讀效果的實踐，其核心是利用 CSS3 column 分欄布局。CSS3 column多欄布局是支持比較早的CSS3布局方式，目前IE10+以及其他所有現代瀏覽器都支持，IE瀏覽器不需要私有前綴，FireFox和Chrome雖然現在也不需要，但是，考慮到移動端以及可能一些用戶瀏覽器升級不及時的現狀，因此，-webkit-以及-moz-前綴目前還不能省略。

深度閱讀

深度思考，升華開發智慧

• 《Google 是如何構建 Web 框架的？》：眾所周知 Google 使用單一倉庫來存放與共享代碼，其中存放了超過 20 億行的代碼，並且其使用了基於 Trunk 的開發範式。對於很多其他公司的開發者而言，這一點可能非常不可思議，而本文即是以構建著名的 AngularDart 項目為例，介紹 Google 是如何構建大型開源的 Web 框架的。

• 《並發與並行：理解 Node.js 中 IO 底層機制》：本系列希望能幫助開發者深入了解開發並發應用的相關知識，而本文則是著眼於相對基礎的操作系統級別的調度、應用的 IO 這些知識。

• 《JavaScript 啟動性能瓶頸分析與解決方案》：隨著現代 Web 技術的發展與用戶交互複雜度的增加，我們的網站變得日益臃腫，也要求著我們不斷地優化網站性能以保證友好的用戶體驗。本文作者則著眼於 JavaScript 啟動階段優化，首先以大量的數據分析闡述了語法分析、編譯等步驟耗時佔比過多是很多網站的性能瓶頸之一。然後作者提供了一系列用於在現代瀏覽器中進行性能評測的工具，還分別從開發者工程實踐與 JavaScript 引擎內部實現的角度闡述了應當如何提高解析與編譯速度。

• 《驗證碼工作原理》：相信每一個 Web 開發者都對於驗證碼（CAPTCHA）的概念不陌生，它是卡內基梅隆大學提出的全自動公開的區分人類和計算機的圖靈測試技術，全稱為 Completely Automated Public Turing Test to Tell Computers and Humans Apart。而本文則是先介紹了驗證碼存在的價值與實際案例，繼而介紹了近年來常見的驗證碼的形式，從原始的數字、文字到最新的互動式驗證碼等等。同時也介紹了 Google 最新的自動行為檢測機制，有助於更加智能地進行人機區分檢測。

開源項目

樂於分享，共推前端發展

• 《svgo:基於 NodeJS 的 SVG 向量圖優化工具》：SVG Optimizer 是基於 NodeJS 的 SVG 文件優化工具，其允許用戶選擇需要的插件來進行相關的文件優化操作。SVG 文件，特別是那些經過協同編輯的文件，往往會包含大量冗餘的無用信息，譬如編輯器元數據、注釋、隱藏元素、默認值等等；這些冗餘信息會佔用額外的空間，而 SVGO 就是將這些冗餘信息移除。

• 《FuseBox:下一代模塊打包工具》：FuseBox 是一個集成了 Webpack、JSPM 與 SystemJS 優勢的新一代打包工具。它的最大優勢在於其速度非常快，基本上只要 50~100 毫秒進行重打包，從而對於開發者非常友好。並且對於babel-core這樣常用的工具 FuseBox 都集成在內，對於開發者而言直接零配置就可以使用了。FuseBox 並且內置支持 TypeScript 而不需要任何的其他配置，它能夠在數秒內就將你的代碼編譯打包完畢，並且提供了豐富的 Loader API 支持。

• 《Jasonette:基於 JSON 標記快速構建跨平台移動應用》：Jasonette 是一個新型的構建原生 iOS 與 Android 應用的方式，它允許使用簡單的 JSON 標記來聲明完整的原生應用。我們可以通過遠程修改 JSON 的方式來動態地實時修改應用，而整個應用的邏輯並不需要再硬編碼寫入到設備中。任何時刻你在服務端更新完 JSON 之後再次打開應用的時候，整個應用就會和服務端的聲明保持同步。
• 《GraphicsJS:輕量級繪圖庫》：目前 Web 開發中最常用的創建互動式圖片的技術選型當屬 SVG 與 Canvas，傳統的 Flash 與 Silverlight 已經慢慢淡出歷史的舞台。而對於 SVG 與 Canvas 的對比也顯示，如果是想創建與操作簡單的交互性圖片，那麼 SVG 當屬首選。SVG 本身是基於 XML 的向量圖，任何通過svg標籤載入的圖片都會成為 SVG DOM 中可操作的對象。而 GraphicsJS 正是基於 SVG 的簡單易用的 JavaScript 繪圖庫。
• 《redux-query:React/Redux 中查詢與管理網路狀態的庫》：對於很多開發者而言，同步本地狀態與網路狀態會是一件很麻煩的事情。其中需要太多的妥協與考量，甚至於面對不同的問題需要使用不同的技術棧。而 redux-query 即是 AmplitudeEng 的工程師在實踐中的總結與應用，它可以被當做基於 React/Redux 以及 RESTful API 的應用的很好的輔助工具。它允許將網路狀態鏈入到當前的 Redux Store 中，並且提供了刪除、樂觀更新、響應緩存、刪除重複等等優秀的功能。

巔峰人生

一覽眾山，聆聽巔峰故事

• 《25歲的科技公司CEO：程序員如何高效工作併兼顧家庭？》：長亭科技CEO 陳宇森分享了如何在工作與家庭之間尋找一個平衡點、如何高效工作地同時運營自己的感情。

http://weixin.qq.com/r/e0QJEcfEhpr5rYNy9xFp (二維碼自動識別)