摘要：發布本周正式發布，包含了一系列的特性提升與問題修復，同時也在不斷致力于將打造地更為輕巧與高性能。當然，姜振勇老師還會介紹的多種服務，包括大數據網絡和安全，展現彈性安全和高可擴展性的全方位能力。

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