前端開發週報：PWA 將與安卓原平生起平坐

前端開發週報：PWA 將與安卓原平生起平坐、V8 團隊致力於提升 ES2015 特性性能 爲InfoQ中文站特供稿件，首發地址爲這裏；如需轉載，請與InfoQ中文站聯繫。從屬於筆者的Web 前端入門與工程實踐。

前端開發週報：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 Twitter's mobile web traffic (that's 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 陳宇森分享瞭如何在工做與家庭之間尋找一個平衡點、如何高效工做地同時運營本身的感情。