前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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，註明 “ 前端之巔投稿 ”。