前端每週清單第 41 期 : Node 與 Rust、OpenCV 的火花，網絡安全二三事

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

新聞熱點

國內國外，前端最新動態

• PWA 是否能帶來新一輪大前端技術洗牌？: 本文是 Brilliant Open Web 團隊成員，百度資深前端工程師彭星分享的對於 PWA 與大前端技術的見解。本文回顧了 Web 在移動時代遭遇的兩大枷鎖：用戶體驗枷鎖與用戶留存枷鎖，討論了 PWA 成爲解開枷鎖鑰匙的可行性，分析了其是否能真正彌補 Web 的劣勢。

• 77% 的網站仍然使用有漏洞 JavaScript 庫: 上週 Snyk 發佈了開源社區安全現狀報告，發現隨着開源社區的日漸活躍，開源代碼中包含的安全漏洞以及影響的範圍也在不斷擴大。本文則是從 Web 安全的角度對於數據進行了深度分析，發現統計的超過 433000 站點中， 77% 使用了至少一個包含已知漏洞的前端 JavaScript 庫；更多詳細的數據描述請查看原文。

開發教程

步步爲營，掌握基礎技能

• 基於 CSS Grid 的常見響應式佈局: CSS Grid 容許咱們在二維座標系上編排元素，在主流桌面瀏覽器逐步完善對其的支持以後，CSS Grid 也開始登錄到移動端瀏覽器；本文便是介紹如何利用 CSS Grid 實現常見的響應式佈局。本文依次介紹了圖文混排佈局、整頁圖片畫廊、卡片佈局、Holy Grail 佈局等等；更多 CSS Grid 相關資料查看這裏。

• 2018 年值得使用的 React 組件庫: 工欲善其事，必先利其器；做者根據自身的實踐經驗與 GitHub、Stack Overflow 等社區的活躍程度，在本文中爲咱們推薦了十餘個值得一試的 React 組件庫，以提升應用開發的效率。做者在文中討論的組件庫包括了 React Material UI、React-Bootstrap 、 React toolbox、React Belle 、 React Grommet、React Components by Khan Academy 、 Material Components Web、Ant Design React 、 Semantic UI React、Onsen UI 、 React Virtualized 等；更多 React 相關資料參考這裏。

• 基於 Rust 編寫高效安全的 Node.js 原生模塊: RisingStack 一直致力於提高 Node.js 的運行效率；不過去年面臨了一個窘境：已然達到 Node.js 自己的瓶頸。爲了突破天花板，RisingStack 決定將關鍵計算模塊以原生方式實現；而通過技術選型比較以後，他們決定使用 Rust，而不是 C++ 來編寫原生模塊。本文首先分析了 Node.js 服務端速度的瓶頸，而後展現瞭如何用 Rust FFI 與 Rust Neon 實現簡單的 URL 分析模塊，最後對比了這兩者以及 Node.js 實現方案之間的性能；更多 Node.js 學習參考深刻淺出 Node.js 全棧架構。

• 使用 Angular 與 Vue.js 實現相同的功能並比較: Angular 與 Vue.js 都是優秀的 Web 組件框架，兩者在某些語法風格上也有殊途同歸之妙，本系列便是經過利用這兩個框架編寫相同的，簡單而易擴展的應用，來仔細地對比兩者。本系列包括了四篇博文，首先從項目文件結構的角度對比了兩者；而後細緻地對於學習資料、組件語法中類似的代碼等內容進行了分析，最後還討論瞭如何使用 TypeScript 開發 Vue.js 應用。更多 AngularJS 與 Vue.js 學習資料能夠參考這裏。

工程實踐

立足實踐，提示實際水平

• 如何顯著提高 React 應用的性能: 應用性能優化是老生常談的問題，隨着咱們應用業務需求不斷地變化，性能問題也是綿延不絕；本文是又一篇優秀的討論 React 應用性能優化的文章。本文依次討論了不恰當的 shouldComponentUpdate 以及對於 PureComponent 的誤用反而會形成逆優化、如何快速修改 DOM 元素、如何避免過於頻繁地事件觸發與回調執行。更多 React 資料能夠閱讀 React 與前端工程化實踐。

• Helmet 與 Express 應用安全: Express 是流行的 Node.js 服務端框架，本文便是介紹如何使用 Helmet 以及其餘的框架來加強 Express 應用的安全性。本文詳細介紹了 HTTP 響應頭中的 X-DNS-Prefetch-Control、X-Frame-Options 、 Strict-Transport-Security、X-Download-Options 、 X-Content-Type-Options、X-XSS-Protection 等域的含義與做用；更多 Node.js 學習參考深刻淺出 Node.js 全棧架構。

• 或許類屬性中的箭頭函數並不如你所料: Arrow Function 箭頭函數是 ES6 的重要語法特性之一，其能優化咱們代碼的可讀性，還能自動綁定當前的 this 對象。不過本文做者表示，當咱們在類屬性中使用箭頭函數時，卻每每會不符合直覺的判斷；類屬性式的箭頭函數會被轉換爲構造函數中建立，所以並不能被子類繼承，而且這種模式的性能表現也差於綁定函數模式。更多 JS 學習能夠參閱現代 JS 語法基礎與工程實踐。

深度閱讀

深度思考，昇華開發智慧

• 我是如何 7 分鐘以內黑進 40 個網站的: 本文做者詳細介紹了對於某個包含漏洞的網站滲透提權的過程，是一篇不錯的安全實踐教程。做者依次使用了 Nmap 進行嗅探踩點，使用 gobuster 進行路徑枚舉，構造虛擬郵箱地址而且上傳 WebShell；而後從 cgi-admin/pages 獲取明文數據庫密碼而且成功地獲取所有數據庫權限。 更多 Web 安全相關知識能夠閱讀現代 Web 開發工程化實踐。

• Atom 中的遠程代碼執行: 本文做者針對 Atom 1.21.1 版本中，由於 Markdown 解析漏洞致使的遠程代碼執行（RCE ），進行了深度分析，也是不錯的瞭解常見的 Web 安全問題對桌面應用的影響的文章。本文首先介紹了 Atom 如何經過 CSP 來限制 XSS，而後分析了 Atom 是如何解析 Markdown 文件，如何針對這種解析機制構造 local DOM XSS Payload，以及如何執行本地任意代碼而且加載執行遠程代碼；更多 Web 安全相關知識能夠閱讀現代 Web 開發工程化實踐。

• 使用 Node.js 與 OpenCV 實現人臉識別: 近年來人工智能與深度學習的概念火熱，相關的理論技術也在工程項目中獲得了普遍的應用，每週清單以前也推薦過如何用 JavaScript 來實現機器學習算法；本文則是按部就班地介紹如何使用 Node.js 來構建簡單的人臉識別應用。本文從數據集準備開始入手，而後討論瞭如何訓練識別器、如何進行模型檢驗等內容；更多 Node.js 學習參考深刻淺出 Node.js 全棧架構。

開源項目

樂於分享，共推前端發展

• node-prune: node-prune 是簡單的用來移除 ./node_modules 中沒必要要文件的工具，譬如 MarkDown、TypeScript 源代碼文件等；從而儘量地減小 node_modules 中文件的體積，以加快應用部署的速度。

• react-i18next: react-i18next 是便捷易用的 React 國際化輔助庫，其能幫助咱們快速實現應用地國際化改造。

• bundle-buddy-webpack-plugin: Bundle Buddy 是著名的可以發現多個 JavaScript Chunks/Splits 中重複冗餘源代碼的工具，從而方便咱們選取合適的代碼分割參數，來最終提高頁面加載的性能。bundle-buddy-webpack-plugin 則是基於 Bundle Buddy 封裝的 Webpack Plugin，方便咱們集成到現有的開發流程中。

• aws-amplify: AWS Amplify 是面向 Web 前端與移動端開發者的，用於構建雲端應用的工具庫；其由 AWS 開源，目前僅支持 Amazon Web Services，可是其設計的初衷是提供插件化的、可以適用於多種雲端或者自定義服務端的工具。Amplify 提供了聲明式的接口，可以幫助開發者迅速添加使用狀況收集、權限校驗等功能。

巔峯人生

• 那個逃離北京的程序員說：我想工做到 70 歲: 本文是二叉樹出品的《衆生相》十集人物紀錄片的第三集，講述了綽號老神仙的 Linux 內核開發者 , 吳峯光博士 「 逃離北京 」 之旅；這個帶有夢幻色彩的詞是如此代價高昂，以致於對很多人而言成爲一種奢侈的選擇。而踏上這條 「 逃離 」 之路的實踐者們，是否真的收穫了他們想要的東西？本文並未談及具體的技術，而是從生存、生活等等角度談談技術人員的道路選擇。

前端之巔

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

前端之巔微信底圖－5.jpg