摘要：發(fā)布本周正式發(fā)布，包含了一系列的特性提升與問題修復(fù)，同時(shí)也在不斷致力于將打造地更為輕巧與高性能。當(dāng)然，姜振勇老師還會(huì)介紹的多種服務(wù)，包括大數(shù)據(jù)網(wǎng)絡(luò)和安全，展現(xiàn)彈性安全和高可擴(kuò)展性的全方位能力。

前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：frontshow），及時(shí)獲取前端每周清單。

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

Node.js 8 宣布進(jìn)入 LTS，Node.js 9 發(fā)布: 近日 Node.js 維護(hù)團(tuán)隊(duì)渲染 Node.js 8 正式進(jìn)入 Long-Term Support 狀態(tài)，這也意味著 Node.js 8 已做好了進(jìn)入生產(chǎn)環(huán)境的準(zhǔn)備，同時(shí) Node.js 9 即將成為當(dāng)前的發(fā)布線版本。Node.js 8 引入了 Async/Await、V8 6.1 等一系列的特性，相較于 Node.js 6 帶來了將近 20% 的性能提升；而 Node.js 9.0.0 則引入了 Async Hooks，并且對(duì)于 Errors、Child Processes、fs 等多個(gè)模塊進(jìn)行了優(yōu)化。更多關(guān)于 Node.js 8 的特性概述與 Node.js 9 的展望可以查看原文。

Angular 5 發(fā)布: 本周 Angular 5.0.0 正式發(fā)布，包含了一系列的特性提升與問題修復(fù)，同時(shí)也在不斷致力于將 Angular 打造地更為輕巧與高性能。新版本中 Angular CLI 會(huì)默認(rèn)啟用構(gòu)建優(yōu)化器，Angular Universal 項(xiàng)目引入了新的狀態(tài)轉(zhuǎn)化接口與 DOM 支持；而在編譯器方面，Angular 5 也對(duì)于 TypeScript Transform、空格、注解等進(jìn)行了提升，并且對(duì)于國(guó)際化、時(shí)區(qū)、HTTPClient、表單、路由等都進(jìn)行了優(yōu)化。

TypeScript 2.6 發(fā)布: 本周 TypeScript 2.6 版本正式發(fā)布，該版本中允許使用 --strictFunctionTypes 參數(shù)指定逆變的函數(shù)參數(shù)適配；并且為 tsc 添加了 --locale 標(biāo)志位以指定使用的本地語言，可以自行設(shè)定錯(cuò)誤的提示語言。同時(shí)該版本還優(yōu)化了 --watch 模式的編譯效率，并且允許使用 // @ts-ignore 來指定單行的錯(cuò)誤忽略；更多特性介紹可以查看原文。

步步為營(yíng)，掌握基礎(chǔ)技能

與時(shí)俱進(jìn)：React 16 新特性嘗鮮: React 16 的發(fā)布除開源許可證和 Fiber 機(jī)制全面開啟之外，還為我們提供了部分非常強(qiáng)大的新特性，本視頻教程將通過實(shí)例帶你探索這些新特性，從 Error Boundary 到 Text Only Component，再到 Portal，共 6 小節(jié)，19 分鐘，每個(gè)小節(jié)實(shí)例講解一個(gè)新特性，讓你在學(xué)會(huì)新特性用法的同時(shí)熟悉新特性的最佳實(shí)踐。學(xué)完本視頻教程，你將能熟練把諸如 Error Boundary，Portal 等特性運(yùn)用到你的實(shí)際項(xiàng)目中來提高開發(fā)效率和代碼質(zhì)量。更多 React 相關(guān)資料查看這里。

基于 Node.js 搭建零依賴的 HTTP/2 靜態(tài)文件服務(wù)器: 目前 HTTP/2 已經(jīng)在大部分的現(xiàn)代瀏覽器中得到了支持，從而使得開發(fā)者能夠利用多路復(fù)用、頭部壓縮、服務(wù)端推送等特性；Node.js 自 8.8.1 版本后也開始支持 HTTP/2，本文即是介紹如何使用 Node.js 創(chuàng)建簡(jiǎn)單的 HTTP/2 靜態(tài)文件服務(wù)器。鑒于瀏覽器端僅支持 HTTPS 信道的 HTTP/2 請(qǐng)求，本文首先介紹了如何使用 LetsEncrypt 來獲取 HTTPS 證書或者生成自簽發(fā)證書；然后展示了如何用 http2 及其回調(diào)來創(chuàng)建靜態(tài)文件服務(wù)器。接下來討論了如何使用 http2 庫中的服務(wù)端推送的接口，以及如何在現(xiàn)有應(yīng)用中集成使用 HTTP/2 服務(wù)器；更多 Node.js 實(shí)戰(zhàn)教程查看這里。

Kotlin 與 React: 隨著 Kotlin 宣布支持 Web 應(yīng)用與 iOS 應(yīng)用開發(fā)，其也成為了新的跨平臺(tái)解決方案的選擇之一；而 Create React Kotlin App 即是類似于 Create React APP 的，使用 Kotlin 來開發(fā) React 應(yīng)用的腳手架。Create React Kotlin App 目前依賴于 JDK 8（暫不支持 Java9），提供了類似于 Create React APP 的控制命令，同時(shí)也支持在 Intellij IDEA Ultimate 直接使用內(nèi)置的 JavaScript 調(diào)試器進(jìn)行調(diào)試。更多 React 教程查看這里。

立足實(shí)踐，提示實(shí)際水平

Node.js 最佳實(shí)踐清單: 本倉(cāng)庫是對(duì)于 Node.js 最佳實(shí)踐的清單匯總，包括了項(xiàng)目結(jié)構(gòu)、異常處理、代碼樣式、測(cè)試與質(zhì)量保障、部署到生產(chǎn)環(huán)境、安全、性能優(yōu)化等方面；更多 Node.js 學(xué)習(xí)資料查看這里。

搜狗地圖面向 SPA 和 Hybrid 的前端工程體系實(shí)踐: 本文為搜狗地圖前端主管周俊鵬老師在 QCon 上海 2017 上的演講總結(jié)而成，搜狗地圖前身是圖行天下，成立于 1999 年，是國(guó)內(nèi)第一家互聯(lián)網(wǎng)地圖服務(wù)網(wǎng)站，2005 年被搜狐收購(gòu)后改名為“搜狗地圖”。所以這個(gè)剛“開始”做的地圖產(chǎn)品比大多數(shù)人預(yù)料的還要老。搜狗地圖前端團(tuán)隊(duì)對(duì)前端工程體系的理解是：工程體系本質(zhì)上是一種服務(wù)，其服務(wù)的對(duì)象是技術(shù)團(tuán)隊(duì)所采用的技術(shù)以及組織架構(gòu)。而架構(gòu)本身也定位為一種服務(wù)，其服務(wù)的對(duì)象是具體的業(yè)務(wù)。更多 Web 工程化的討論查看這里。

Slack 桌面應(yīng)用的優(yōu)化：從 WebView 到 BrowserView: Slack 團(tuán)隊(duì)使用了基于 Electron 的混合開發(fā)技術(shù)來打造他們的桌面端應(yīng)用，不過很多時(shí)候因?yàn)槠湓愀獾男阅鼙憩F(xiàn)而廣為詬病。本文中 Slack 技術(shù)團(tuán)隊(duì)介紹了它們?cè)诩磳l(fā)布的 3.0 版本里面針對(duì)性能問題與用戶體驗(yàn)所做的一些優(yōu)化，主要就是從標(biāo)準(zhǔn)的 WebView 遷移到 BrowserView，以類似于 Chrome 中多 Tab 的方式來優(yōu)化單窗口的表現(xiàn)。除此之外，本文還討論了如何跨窗口管理 Redux Store、如何處理副作用與異步 Action、如何快速地重構(gòu)代碼等內(nèi)容；更多 Electron 學(xué)習(xí)資料查看這里。

深度思考，升華開發(fā)智慧

Netflix 工作機(jī)制簡(jiǎn)析：每次你點(diǎn)擊之后發(fā)生的事: Netflix 支撐著數(shù)百個(gè)國(guó)家數(shù)億用戶的數(shù)十億播放，正是其強(qiáng)大的基礎(chǔ)架構(gòu)支撐著業(yè)務(wù)的正常運(yùn)行，本文即是對(duì)于 Netflix 的工作機(jī)制與架構(gòu)進(jìn)行簡(jiǎn)要介紹。當(dāng)用戶點(diǎn)擊播放按鈕之后，Netflix 的數(shù)百個(gè)微服務(wù)或者獨(dú)立的程序構(gòu)成的 Netflix 服務(wù)就開始協(xié)同工作，檢驗(yàn)請(qǐng)求內(nèi)容的合規(guī)性，并且將其轉(zhuǎn)化為合適的尺寸，同時(shí)還要避免其被惡意復(fù)制。接下來服務(wù)器會(huì)將其復(fù)制存放在最靠近用戶的存儲(chǔ)點(diǎn)，而客戶端則會(huì)自動(dòng)選擇最合適的節(jié)點(diǎn)來加載數(shù)據(jù)；更多大廠架構(gòu)分享查看這里。

前端框架新選擇——基于 MVVM 的 San: 在 MVVM 早已被引入 Web 前端應(yīng)用開發(fā)的今天，其實(shí)我們已經(jīng)有了一些選擇，有了一些應(yīng)用開發(fā)的利器。它們的代表就是 Vuejs，React, angular。它們都致力于提升開發(fā)效率，希望幫開發(fā)者做更多的事，通過諸如聲明式的綁定，便可通過框架完成視圖層的自動(dòng)化 , 使得業(yè)務(wù)開發(fā)者可以有更多的精力，重新聚焦業(yè)務(wù)實(shí)現(xiàn)的關(guān)注點(diǎn)，回歸應(yīng)用開發(fā)的本質(zhì)。百度 EFE TEAM 歷時(shí)接近兩年時(shí)間設(shè)計(jì)、開發(fā) San 框架，一個(gè)實(shí)現(xiàn)了 MVVM 的 Web 組件化框架。在接近兩年的時(shí)間里，它不斷迭代，支撐了越來越多的業(yè)務(wù)。

HTTP 103: 近日 HTTP Working Group 宣布新的 HTTP 狀態(tài)碼 103 Early Hints 進(jìn)入 Version 5，本文即是關(guān)于該狀態(tài)碼的詳細(xì)起草文件。新的狀態(tài)碼允許服務(wù)端提前發(fā)送某些響應(yīng)頭，并且可以在響應(yīng)頭中通過 Link 屬性指明需要提前加載的文件，其能夠有助于實(shí)踐 Preloading 等預(yù)加載優(yōu)化。瀏覽器端在接收到 Early Hints 之后，實(shí)際的響應(yīng)頭之前即可開始進(jìn)行資源文件的加載；不過這樣分片地發(fā)送響應(yīng)頭同樣會(huì)存在風(fēng)險(xiǎn)，因此服務(wù)端應(yīng)當(dāng)在確定了客戶端的身份之后再發(fā)送 Early Hints 響應(yīng)頭。更多 HTTP 相關(guān)資料查看這里。

JavaScript 工作原理之深入 WebSockets 與 HTTP/2: 本文是該系列的第五篇文章，著眼于介紹常用的通信協(xié)議，討論他們的屬性特點(diǎn)并且選擇最合適的構(gòu)建方式與應(yīng)用場(chǎng)景；同時(shí)本文也快速地比較了 WebSockets 與 HTTP/2 各自的優(yōu)劣。本文首先介紹了 WebSocket 的請(qǐng)求格式與幀協(xié)議，以及 JavaScript 中常見的 WebSockets 控制回調(diào)；然后從請(qǐng)求頭、二進(jìn)制支持、多路復(fù)用、壓縮等多個(gè)角度比較了 HTTP/2 與 WebSockets，并且討論了 HTTP/2 + Server-Sent Events 的作用。更多 HTTP/2 相關(guān)資料查看這里。

樂于分享，共推前端發(fā)展

Bottery: Bottery 是由 Kate Compton 開源的一款非常有意思的對(duì)話式原型設(shè)計(jì)平臺(tái)，其提供了聊天、控制、編輯器、白板、審視器、狀態(tài)監(jiān)控器等界面；將聊天機(jī)器人與原型設(shè)計(jì)流有機(jī)結(jié)合起來，并且使用有限狀態(tài)機(jī)狀態(tài)遷移的思路來模擬我們產(chǎn)品設(shè)計(jì)中的原型設(shè)計(jì)思路流程。

Frappé Charts: Frappé Charts 是受 GitHub 啟發(fā)創(chuàng)建的零配置的，簡(jiǎn)單而大方的現(xiàn)代圖表庫。Frappé Charts 提供了常見的柱狀圖、折線圖、流線圖、熱點(diǎn)圖等多種圖表形式，以及靈活的數(shù)據(jù)變化監(jiān)聽接口。

mlhelper: mlhelper 是 JavaScript 中機(jī)器學(xué)習(xí)相關(guān)的算法與工具庫，其提供了常見的 kNN、決策樹（ID3）、矩陣運(yùn)算、向量運(yùn)算、文件解析以及常見的數(shù)據(jù)模型可視化功能。

Server.js: Server.js 是另一個(gè)簡(jiǎn)單而強(qiáng)大的 Node.js 框架，它致力于幫助開發(fā)者盡可能地簡(jiǎn)化項(xiàng)目開發(fā)的復(fù)雜度。Server.js 默認(rèn)地包含了很多 Express.js 中需要額外裝載的中間件，譬如請(qǐng)求體與文件解析、Cookie、Session、Gzip、Redis 等；此外，Server.js 還提供了彈性易擴(kuò)展的 API 設(shè)計(jì)方案與基于 WebSocket 的實(shí)時(shí)數(shù)據(jù)服務(wù)。

大咖告訴你：這才是支持你雙十一“剁手”的幕后功臣: 本文是 AWS 解決方案架構(gòu)師姜振勇分享的，中小型電商應(yīng)該如何應(yīng)對(duì)雙十一這樣的高并發(fā)訪問場(chǎng)景。對(duì)于注冊(cè)用戶量超過 3000 萬的小紅書來說，要想在雙十一搞定剁手黨，先要在平時(shí)了解客戶的喜好和需求，這就勢(shì)必要對(duì)數(shù)據(jù)進(jìn)行清洗、歸整，適于數(shù)據(jù)分析師使用。姜振勇老師告訴你小紅書這樣的電商，是如何借助 AWS 快速搭建高效的大數(shù)據(jù)統(tǒng)計(jì)、分析系統(tǒng)的。除此之外，你還能夠聽到小米網(wǎng)、SK 電信等客戶真實(shí)案例。當(dāng)然，姜振勇老師還會(huì)介紹 AWS 的多種服務(wù)，包括大數(shù)據(jù)、網(wǎng)絡(luò)和安全，展現(xiàn) AWS 彈性、安全和高可擴(kuò)展性的全方位能力。

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到 editors@cn.infoq.com，注明“前端之巔投稿”。