前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
Node.js 8 宣佈進入 LTS，Node.js 9 釋出: 近日 Node.js 維護團隊渲染 Node.js 8 正式進入 Long-Term Support 狀態，這也意味著 Node.js 8 已做好了進入生產環境的準備，同時 Node.js 9 即將成為當前的釋出線版本。Node.js 8 引入了 Async/Await、V8 6.1 等一系列的特性，相較於 Node.js 6 帶來了將近 20% 的效能提升；而 Node.js 9.0.0 則引入了 Async Hooks，並且對於 Errors、Child Processes、fs 等多個模組進行了優化。更多關於 Node.js 8 的特性概述與 Node.js 9 的展望可以檢視原文。
Angular 5 釋出: 本週 Angular 5.0.0 正式釋出，包含了一系列的特性提升與問題修復，同時也在不斷致力於將 Angular 打造地更為輕巧與高效能。新版本中 Angular CLI 會預設啟用構建優化器，Angular Universal 專案引入了新的狀態轉化介面與 DOM 支援；而在編譯器方面，Angular 5 也對於 TypeScript Transform、空格、註解等進行了提升，並且對於國際化、時區、HTTPClient、表單、路由等都進行了優化。
TypeScript 2.6 釋出: 本週 TypeScript 2.6 版本正式釋出，該版本中允許使用 --strictFunctionTypes 引數指定逆變的函式引數適配；並且為 tsc 新增了 --locale 標誌位以指定使用的本地語言，可以自行設定錯誤的提示語言。同時該版本還優化了 --watch 模式的編譯效率，並且允許使用 // @ts-ignore 來指定單行的錯誤忽略；更多特性介紹可以檢視原文。
開發教程
步步為營，掌握基礎技能
與時俱進：React 16 新特性嚐鮮: React 16 的釋出除開源許可證和 Fiber 機制全面開啟之外，還為我們提供了部分非常強大的新特性，本視訊教程將通過例項帶你探索這些新特性，從 Error Boundary 到 Text Only Component，再到 Portal，共 6 小節，19 分鐘，每個小節例項講解一個新特性，讓你在學會新特性用法的同時熟悉新特性的最佳實踐。學完本視訊教程，你將能熟練把諸如 Error Boundary，Portal 等特性運用到你的實際專案中來提高開發效率和程式碼質量。更多 React 相關資料檢視這裡。
基於 Node.js 搭建零依賴的 HTTP/2 靜態檔案伺服器: 目前 HTTP/2 已經在大部分的現代瀏覽器中得到了支援，從而使得開發者能夠利用多路複用、頭部壓縮、服務端推送等特性；Node.js 自 8.8.1 版本後也開始支援 HTTP/2，本文即是介紹如何使用 Node.js 建立簡單的 HTTP/2 靜態檔案伺服器。鑑於瀏覽器端僅支援 HTTPS 通道的 HTTP/2 請求，本文首先介紹瞭如何使用 LetsEncrypt 來獲取 HTTPS 證照或者生成自簽發證照；然後展示瞭如何用 http2 及其回撥來建立靜態檔案伺服器。接下來討論瞭如何使用 http2 庫中的服務端推送的介面，以及如何在現有應用中整合使用 HTTP/2 伺服器；更多 Node.js 實戰教程檢視這裡。
Kotlin 與 React: 隨著 Kotlin 宣佈支援 Web 應用與 iOS 應用開發，其也成為了新的跨平臺解決方案的選擇之一；而 Create React Kotlin App 即是類似於 Create React APP 的，使用 Kotlin 來開發 React 應用的腳手架。Create React Kotlin App 目前依賴於 JDK 8（暫不支援 Java9），提供了類似於 Create React APP 的控制命令，同時也支援在 Intellij IDEA Ultimate 直接使用內建的 JavaScript 偵錯程式進行除錯。更多 React 教程檢視這裡。
工程實踐
立足實踐，提示實際水平
Node.js 最佳實踐清單: 本倉庫是對於 Node.js 最佳實踐的清單彙總，包括了專案結構、異常處理、程式碼樣式、測試與質量保障、部署到生產環境、安全、效能優化等方面；更多 Node.js 學習資料檢視這裡。
搜狗地圖面向 SPA 和 Hybrid 的前端工程體系實踐: 本文為搜狗地圖前端主管周俊鵬老師在 QCon 上海 2017 上的演講總結而成，搜狗地圖前身是圖行天下，成立於 1999 年，是國內第一家網際網路地圖服務網站，2005 年被搜狐收購後改名為“搜狗地圖”。所以這個剛“開始”做的地圖產品比大多數人預料的還要老。搜狗地圖前端團隊對前端工程體系的理解是：工程體系本質上是一種服務，其服務的物件是技術團隊所採用的技術以及組織架構。而架構本身也定位為一種服務，其服務的物件是具體的業務。更多 Web 工程化的討論檢視這裡。
Slack 桌面應用的優化：從 WebView 到 BrowserView: Slack 團隊使用了基於 Electron 的混合開發技術來打造他們的桌面端應用，不過很多時候因為其糟糕的效能表現而廣為詬病。本文中 Slack 技術團隊介紹了它們在即將釋出的 3.0 版本里面針對效能問題與使用者體驗所做的一些優化，主要就是從標準的 WebView 遷移到 BrowserView，以類似於 Chrome 中多 Tab 的方式來優化單視窗的表現。除此之外，本文還討論瞭如何跨視窗管理 Redux Store、如何處理副作用與非同步 Action、如何快速地重構程式碼等內容；更多 Electron 學習資料檢視這裡。
深度閱讀
深度思考，昇華開發智慧
Netflix 工作機制簡析：每次你點選之後發生的事: Netflix 支撐著數百個國家數億使用者的數十億播放，正是其強大的基礎架構支撐著業務的正常執行，本文即是對於 Netflix 的工作機制與架構進行簡要介紹。當使用者點選播放按鈕之後，Netflix 的數百個微服務或者獨立的程式構成的 Netflix 服務就開始協同工作，檢驗請求內容的合規性，並且將其轉化為合適的尺寸，同時還要避免其被惡意複製。接下來伺服器會將其複製存放在最靠近使用者的儲存點，而客戶端則會自動選擇最合適的節點來載入資料；更多大廠架構分享檢視這裡。
前端框架新選擇——基於 MVVM 的 San: 在 MVVM 早已被引入 Web 前端應用開發的今天，其實我們已經有了一些選擇，有了一些應用開發的利器。它們的代表就是 Vuejs，React, angular。它們都致力於提升開發效率，希望幫開發者做更多的事，通過諸如宣告式的繫結，便可通過框架完成檢視層的自動化 , 使得業務開發者可以有更多的精力，重新聚焦業務實現的關注點，迴歸應用開發的本質。百度 EFE TEAM 歷時接近兩年時間設計、開發 San 框架，一個實現了 MVVM 的 Web 元件化框架。在接近兩年的時間裡，它不斷迭代，支撐了越來越多的業務。
HTTP 103: 近日 HTTP Working Group 宣佈新的 HTTP 狀態碼 103 Early Hints 進入 Version 5，本文即是關於該狀態碼的詳細起草檔案。新的狀態碼允許服務端提前傳送某些響應頭，並且可以在響應頭中通過 Link 屬性指明需要提前載入的檔案，其能夠有助於實踐 Preloading 等預載入優化。瀏覽器端在接收到 Early Hints 之後，實際的響應頭之前即可開始進行資原始檔的載入；不過這樣分片地傳送響應頭同樣會存在風險，因此服務端應當在確定了客戶端的身份之後再傳送 Early Hints 響應頭。更多 HTTP 相關資料檢視這裡。
JavaScript 工作原理之深入 WebSockets 與 HTTP/2: 本文是該系列的第五篇文章，著眼於介紹常用的通訊協議，討論他們的屬性特點並且選擇最合適的構建方式與應用場景；同時本文也快速地比較了 WebSockets 與 HTTP/2 各自的優劣。本文首先介紹了 WebSocket 的請求格式與幀協議，以及 JavaScript 中常見的 WebSockets 控制回撥；然後從請求頭、二進位制支援、多路複用、壓縮等多個角度比較了 HTTP/2 與 WebSockets，並且討論了 HTTP/2 + Server-Sent Events 的作用。更多 HTTP/2 相關資料檢視這裡。
開源專案
樂於分享，共推前端發展
Bottery: Bottery 是由 Kate Compton 開源的一款非常有意思的對話式原型設計平臺，其提供了聊天、控制、編輯器、白板、審視器、狀態監控器等介面；將聊天機器人與原型設計流有機結合起來，並且使用有限狀態機狀態遷移的思路來模擬我們產品設計中的原型設計思路流程。
Frappé Charts: Frappé Charts 是受 GitHub 啟發建立的零配置的，簡單而大方的現代圖表庫。Frappé Charts 提供了常見的柱狀圖、折線圖、流線圖、熱點圖等多種圖表形式，以及靈活的資料變化監聽介面。
mlhelper: mlhelper 是 JavaScript 中機器學習相關的演算法與工具庫，其提供了常見的 kNN、決策樹（ID3）、矩陣運算、向量運算、檔案解析以及常見的資料模型視覺化功能。
Server.js: Server.js 是另一個簡單而強大的 Node.js 框架，它致力於幫助開發者儘可能地簡化專案開發的複雜度。Server.js 預設地包含了很多 Express.js 中需要額外裝載的中介軟體，譬如請求體與檔案解析、Cookie、Session、Gzip、Redis 等；此外，Server.js 還提供了彈性易擴充套件的 API 設計方案與基於 WebSocket 的實時資料服務。
巔峰人生
- 大咖告訴你：這才是支援你雙十一“剁手”的幕後功臣: 本文是 AWS 解決方案架構師姜振勇分享的，中小型電商應該如何應對雙十一這樣的高併發訪問場景。對於註冊使用者量超過 3000 萬的小紅書來說，要想在雙十一搞定剁手黨，先要在平時瞭解客戶的喜好和需求，這就勢必要對資料進行清洗、歸整，適於資料分析師使用。姜振勇老師告訴你小紅書這樣的電商，是如何藉助 AWS 快速搭建高效的大資料統計、分析系統的。除此之外，你還能夠聽到小米網、SK 電信等客戶真實案例。當然，姜振勇老師還會介紹 AWS 的多種服務，包括大資料、網路和安全，展現 AWS 彈性、安全和高可擴充套件性的全方位能力。
前端之巔
「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到 editors@cn.infoq.com，註明“前端之巔投稿”。
