摘要：在該版本發(fā)布之后，開發(fā)團(tuán)隊(duì)并不會(huì)繼續(xù)發(fā)布新的特性，而會(huì)著眼于進(jìn)行重大的錯(cuò)誤修復(fù)。發(fā)布每六個(gè)星期，團(tuán)隊(duì)就會(huì)創(chuàng)建新的分支作為發(fā)布通道，本文即是對新近發(fā)布的版本進(jìn)行簡要介紹。

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

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

TypeScript 2.7 發(fā)布: 本周，TypeScript 2.7 發(fā)布，本文則是對于該版本的特性進(jìn)行總結(jié)描述：嚴(yán)格的類屬性檢測，Definite assignment assertions，更為方便的 ECMAScript 模塊操作性，Symbol 與常量名屬性，對于 --watch 模式的優(yōu)化，以及對于數(shù)值、元組等數(shù)據(jù)類型的優(yōu)化等。

style-components 3.1.0 發(fā)布: 該版本引入了新的 CSS 注入機(jī)制，極大地優(yōu)化了生產(chǎn)環(huán)境下客戶端渲染的性能；同時(shí)還提供了流式服務(wù)端渲染的支持，保障了首字節(jié)返回的速度。styled-components v3.1.0 在生產(chǎn)環(huán)境下已經(jīng)默認(rèn)使用了 insertRule，一個(gè)可能不太為人所知的 API，卻能夠近十倍地提升初始化掛載效率，以及近二十倍地提升重渲染效率。

AngularJS 穩(wěn)定版本與 LTS 規(guī)劃: 作為現(xiàn)代 Web 框架的先驅(qū)，AngularJS 已然是用于構(gòu)建 Web 應(yīng)用的穩(wěn)定框架首選之一，并且為數(shù)百萬的開發(fā)者所使用。不過長江后浪推前浪，AngularJS 的占比與社區(qū)活躍度也在逐步下降，其開發(fā)團(tuán)隊(duì)也計(jì)劃發(fā)布最后一個(gè)重大的更新：1.7 版本，然后于 2018 年 7 月 1 日進(jìn)入 Long Term Support 階段。在該版本發(fā)布之后，開發(fā)團(tuán)隊(duì)并不會(huì)繼續(xù)發(fā)布新的特性，而會(huì)著眼于進(jìn)行重大的錯(cuò)誤修復(fù)。

V8 6.5 發(fā)布: 每六個(gè)星期，V8 團(tuán)隊(duì)就會(huì)創(chuàng)建新的分支作為發(fā)布通道，本文即是對新近發(fā)布的 6.5 版本進(jìn)行簡要介紹。該版本引入了對于 WebAssembly 代碼的流編譯機(jī)制，新的 WebAssembly API 提供了與 fetch 協(xié)同使用的抓取 WASM 源代碼并且進(jìn)行流式編譯的功能。此外，該版本還一如既往地著眼于性能優(yōu)化，不斷拓寬 JavaScript 內(nèi)建的優(yōu)化路徑，并且引入了新的 “deoptimization loop.” 機(jī)制來避免一些意外情況。

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

Progressive Web Apps 介紹: Progressive Web Apps (PWA) 是移動(dòng) Web 應(yīng)用開發(fā)中的新潮流之一，所謂的 PWA 即指那些使用了某些技術(shù)以保證用戶體驗(yàn)與原生應(yīng)用盡量一直的網(wǎng)頁。本文是對于 PWA 的入門介紹，主要討論了 Progressive Web Apps 的競品、Progressive Web Apps 的特性與優(yōu)勢等內(nèi)容。更多相關(guān)內(nèi)容參考 Awesome PWA Reference。

基于 MobX State Tree 的狀態(tài)管理: MobX State Tree 是另一個(gè)前端狀態(tài)管理框架，其雖然內(nèi)部使用了 MobX，卻提供了截然不同的設(shè)計(jì)模式與編程接口。MobX State Tree 設(shè)定好了數(shù)據(jù)的結(jié)構(gòu)與更新方式，而 MobX 僅僅提供了基礎(chǔ)的接口，MobX State Tree 還為我們提供了類型支持與模型創(chuàng)建接口。本文作者首先討論了 MobX State Tree 的設(shè)計(jì)理念，然后比較了分別以 MobX 與 MobX State Tree 實(shí)現(xiàn)相同功能的差異。更多相關(guān)資料參考 Awesome MobX Reference。

基于 Nuxt.js 的服務(wù)端渲染的 Vue 應(yīng)用: 對于很多初學(xué)者而言，服務(wù)端渲染可能并不是一件容易的事情，特別是在混雜了數(shù)據(jù)抓取、路由與權(quán)限控制等需求時(shí)。本文即深入淺出地介紹了如何利用 Nuxt.js 來構(gòu)建完整的 Vue.js 服務(wù)端渲染應(yīng)用，作者依次介紹了為什么需要服務(wù)端渲染、服務(wù)端渲染與 SEO、從零構(gòu)建 Nuxt.js 項(xiàng)目、自定義布局、Webpack 與靜態(tài)資源處理、隱式路由與代碼分割、嵌套路由、中間件等內(nèi)容。更多相關(guān)內(nèi)容參考 Awesome Vue Reference。

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

現(xiàn)代 Node.js 開發(fā)中的 JavaScript 代碼風(fēng)格: 性能問題一直是 JavaScript 中引人關(guān)注的部分，隨著 JavaScript 引擎與運(yùn)行時(shí)的不斷優(yōu)化，我們也需要不斷變革自身對于 JavaScript 優(yōu)化方式的考量。本文作者拋出了自己的觀點(diǎn)：隨著 Node.js 能同時(shí)跑在 ChakraCore 引擎與 V8 引擎上，并且 V8 引擎也引入了新的 Turbofan 優(yōu)化編譯器，JavaScript 開發(fā)者應(yīng)該更多地關(guān)注于寫出慣用的、可讀性高的、易于維護(hù)的代碼，而不應(yīng)該在花費(fèi)過多的精力去編寫編譯器友好的代碼。更多相關(guān)內(nèi)容參考 Awesome Node.js Reference。

來自 Google Cloud Platform 的十二個(gè)賬戶管理與權(quán)限控制的最佳實(shí)踐: 隨著應(yīng)用用戶數(shù)與復(fù)雜度的增加，安全問題也變得日漸重要，而其中的賬戶管理、權(quán)限控制與密碼管理無疑是安全的重要組成基石。這些方面卻往往容易被開發(fā)者忽視或者未能采取正確的措施，而 Google Cloud Platform(GCP) 一直致力于為用戶提供賬戶的創(chuàng)建、安全加固、管理等多中操作工具，本文即是其多年實(shí)踐總結(jié)而來的最佳實(shí)踐分享，以其幫助開發(fā)者打造安全、可擴(kuò)展、高可用的用戶權(quán)限認(rèn)證系統(tǒng)。更多相關(guān)資料參考 Awesome WebSecurity Reference。

理解 CSS 布局中的盒尺寸: Flexbox 與 CSS Grid 的核心特性之一，就是能將內(nèi)部的剩余可用空間分割給內(nèi)部元素；作者在本文中分享了一些對于 CSS 布局中尺寸單位與計(jì)算的考慮。作者首先會(huì)給出一些規(guī)范的解讀，然后深入講解 Flexbox 與 CSS Grid 中的尺寸計(jì)算規(guī)則。更多相關(guān)內(nèi)容參考 Awesome CSS Reference。

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

架構(gòu)師之路: 未來的職業(yè)規(guī)劃幾乎是每位開發(fā)者會(huì)考慮的事情，在職業(yè)生涯上我們也會(huì)有很多的選擇，本系列則是討論如何成為一位架構(gòu)師。本系列包含了如下的文章：如何成為架構(gòu)師，架構(gòu)師的利害相關(guān)，架構(gòu)師的類型，架構(gòu)師的特性等，更多相關(guān)內(nèi)容可以參考 Awesome SoftwareArchitecture Reference

Web 前端中的增強(qiáng)現(xiàn)實(shí)（AR）開發(fā)技術(shù): 增強(qiáng)現(xiàn)實(shí)（以下簡稱 AR）浪潮正滾滾而來，Web 瀏覽器作為人們最唾手可得的人機(jī)交互終端，正在大力發(fā)展 AR 技術(shù)。很多 Web 前端工程師也在尋求職業(yè)轉(zhuǎn)型，于是本文作者 GeekPlux 把近半年的相關(guān)調(diào)研結(jié)果在此匯結(jié)成文。本文力求把目前前端方向的 AR 技術(shù)都羅列一遍，細(xì)節(jié)不贅述，只做概括和科普，主要關(guān)注實(shí)現(xiàn)方式與關(guān)鍵技術(shù)。更多相關(guān)內(nèi)容參考 Awesome AR Reference。

如何避免攻擊者從網(wǎng)站中竊取信用卡賬戶與密碼: 本文作者曾撰文介紹自己是如何通過上傳分發(fā)惡意代碼來搜集用戶的敏感信息。本文中，作者則從加固的角度給出了保護(hù)用戶敏感信息的多個(gè)建議：并不需要刻意的避免第三方代碼，可以將敏感信息放在獨(dú)立的 HTML 文件中，并且將該文件通過 iframe 中加載，同時(shí)以靜態(tài)文件服務(wù)器的方式從不同的域名中訪問該文件。更多相關(guān)資料參考 Awesome WebSecurity Reference。

React 中 Clean Code 的實(shí)踐: 來自 Bara 的開發(fā)者在遵循 Clean Code 的前提下重構(gòu)了他們的代碼庫，以提升代碼的可讀性與可維護(hù)性。本文即是作者對于此次重構(gòu)過程的心得分享，其在末尾亦給出了一些個(gè)人的思考：分解組件與函數(shù)，保證每個(gè)組件或者函數(shù)的單層抽象；使用更易于理解的命名等。更多 React 相關(guān)資料參考 Awesome React Reference。

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

Kap: Kap 是使用 Web 技術(shù)構(gòu)建的開源屏幕錄制工具，目前僅有 macOS 版本。

Polka: Polka 是輕量級、高性能的 Express.js 替代框架；盡管 Express.js 的性能已然不錯(cuò)，Polka 仍然青出于藍(lán)而勝于藍(lán)，在很多的細(xì)節(jié)上做到了優(yōu)化。一言以蔽之，Polka 是內(nèi)置了路由、中間件以及子應(yīng)用的原生 HTTP 服務(wù)器。

Callbag: Callbag 是用于保證輕量級的 Observables 與 Iterables 的 JS 回調(diào)標(biāo)準(zhǔn)，callbags-basic 則是對于 Callbag 標(biāo)準(zhǔn)的具體實(shí)現(xiàn)，我們可以閱讀 André Staltz 編寫的這篇文章來了解更多信息。

Unstated: Unstated 是另一個(gè)狀態(tài)管理框架，其并未引入新的模式，而是基于 React 組件與 Context 的內(nèi)置設(shè)計(jì)構(gòu)建。Unstated 包含了三個(gè)部分，Container 是類似于 React.Component 的簡單類，但是會(huì)包含一些狀態(tài)相關(guān)的操作；Subscribe，允許傳入 Container 實(shí)例，并且將其傳遞到子組件中，Provider 則是作為根節(jié)點(diǎn)來存儲所有的實(shí)例。

2017 年，Mozilla 為 Web 做了哪些事情？: 2017 對于 Mozilla 來說是非常重要的一年。我們發(fā)布了歷史上最快的 Firefox，重新構(gòu)建了 DevTools 開發(fā)者工具，見證了四個(gè)主流瀏覽器對 WebAssembly 的支持，啟動(dòng)了開源的虛擬現(xiàn)實(shí)和語音識別平臺。我們的開發(fā)者關(guān)系團(tuán)隊(duì)也參與了全球 60 多場路演，見證了 MDN Web Docs 網(wǎng)站讀者數(shù)量幾乎增加了一倍。本文即是對 Mozilla 2017 工作的總結(jié)與盤點(diǎn)。

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請關(guān)注「前端之巔」公眾號后回復(fù) “ 加群 ”。投稿請發(fā)郵件到 [email protected]，注明 “ 前端之巔投稿 ”。