前端每週清單第 50 期: AngularJS and Long Term Support, Web 安全二三論

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID: frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

• TypeScript 2.7 發佈: 本週，TypeScript 2.7 發佈，本文則是對於該版本的特性進行總結描述：嚴格的類屬性檢測，Definite assignment assertions，更爲方便的 ECMAScript 模塊操做性，Symbol 與常量名屬性，對於 --watch 模式的優化，以及對於數值、元組等數據類型的優化等。
• style-components 3.1.0 發佈: 該版本引入了新的 CSS 注入機制，極大地優化了生產環境下客戶端渲染的性能；同時還提供了流式服務端渲染的支持，保障了首字節返回的速度。styled-components v3.1.0 在生產環境下已經默認使用了 insertRule，一個可能不太爲人所知的 API，卻可以近十倍地提高初始化掛載效率，以及近二十倍地提高重渲染效率。
• AngularJS 穩定版本與 LTS 規劃: 做爲現代 Web 框架的先驅，AngularJS 已然是用於構建 Web 應用的穩定框架首選之一，而且爲數百萬的開發者所使用。不過長江後浪推前浪，AngularJS 的佔比與社區活躍度也在逐步降低，其開發團隊也計劃發佈最後一個重大的更新：1.7 版本，而後於 2018 年 7 月 1 日進入 Long Term Support 階段。在該版本發佈以後，開發團隊並不會繼續發佈新的特性，而會着眼於進行重大的錯誤修復。
• V8 6.5 發佈: 每六個星期，V8 團隊就會建立新的分支做爲發佈通道，本文便是對新近發佈的 6.5 版本進行簡要介紹。該版本引入了對於 WebAssembly 代碼的流編譯機制，新的 WebAssembly API 提供了與 fetch 協同使用的抓取 WASM 源代碼而且進行流式編譯的功能。此外，該版本還一如既往地着眼於性能優化，不斷拓寬 JavaScript 內建的優化路徑，而且引入了新的 「deoptimization loop.」 機制來避免一些意外狀況。

開發教程

步步爲營，掌握基礎技能

• Progressive Web Apps 介紹: Progressive Web Apps (PWA) 是移動 Web 應用開發中的新潮流之一，所謂的 PWA 即指那些使用了某些技術以保證用戶體驗與原生應用盡可能一直的網頁。本文是對於 PWA 的入門介紹，主要討論了 Progressive Web Apps 的競品、Progressive Web Apps 的特性與優點等內容。更多相關內容參考 Awesome PWA Reference。
• 基於 MobX State Tree 的狀態管理: MobX State Tree 是另外一個前端狀態管理框架，其雖然內部使用了 MobX，卻提供了大相徑庭的設計模式與編程接口。MobX State Tree 設定好了數據的結構與更新方式，而 MobX 僅僅提供了基礎的接口，MobX State Tree 還爲咱們提供了類型支持與模型建立接口。本文做者首先討論了 MobX State Tree 的設計理念，而後比較了分別以 MobX 與 MobX State Tree 實現相同功能的差別。更多相關資料參考 Awesome MobX Reference。
• 基於 Nuxt.js 的服務端渲染的 Vue 應用: 對於不少初學者而言，服務端渲染可能並非一件容易的事情，特別是在混雜了數據抓取、路由與權限控制等需求時。本文即深刻淺出地介紹瞭如何利用 Nuxt.js 來構建完整的 Vue.js 服務端渲染應用，做者依次介紹了爲何須要服務端渲染、服務端渲染與 SEO、從零構建 Nuxt.js 項目、自定義佈局、Webpack 與靜態資源處理、隱式路由與代碼分割、嵌套路由、中間件等內容。更多相關內容參考 Awesome Vue Reference。

工程實踐

立足實踐，提示實際水平

• 現代 Node.js 開發中的 JavaScript 代碼風格: 性能問題一直是 JavaScript 中引人關注的部分，隨着 JavaScript 引擎與運行時的不斷優化，咱們也須要不斷變革自身對於 JavaScript 優化方式的考量。本文做者拋出了本身的觀點：隨着 Node.js 能同時跑在 ChakraCore 引擎與 V8 引擎上，而且 V8 引擎也引入了新的 Turbofan 優化編譯器，JavaScript 開發者應該更多地關注於寫出慣用的、可讀性高的、易於維護的代碼，而不該該在花費過多的精力去編寫編譯器友好的代碼。更多相關內容參考 Awesome Node.js Reference。
• 來自 Google Cloud Platform 的十二個帳戶管理與權限控制的最佳實踐: 隨着應用用戶數與複雜度的增長，安全問題也變得日漸重要，而其中的帳戶管理、權限控制與密碼管理無疑是安全的重要組成基石。這些方面卻每每容易被開發者忽視或者未能採起正確的措施，而 Google Cloud Platform(GCP) 一直致力於爲用戶提供帳戶的建立、安全加固、管理等多中操做工具，本文便是其多年實踐總結而來的最佳實踐分享，以其幫助開發者打造安全、可擴展、高可用的用戶權限認證系統。更多相關資料參考 Awesome WebSecurity Reference。
• 理解 CSS 佈局中的盒尺寸: Flexbox 與 CSS Grid 的核心特性之一，就是能將內部的剩餘可用空間分割給內部元素；做者在本文中分享了一些對於 CSS 佈局中尺寸單位與計算的考慮。做者首先會給出一些規範的解讀，而後深刻講解 Flexbox 與 CSS Grid 中的尺寸計算規則。更多相關內容參考 Awesome CSS Reference。

深度閱讀

深度思考，昇華開發智慧

• 架構師之路: 將來的職業規劃幾乎是每位開發者會考慮的事情，在職業生涯上咱們也會有不少的選擇，本系列則是討論如何成爲一位架構師。本系列包含了以下的文章：如何成爲架構師，架構師的利害相關，架構師的類型，架構師的特性等，更多相關內容能夠參考 Awesome SoftwareArchitecture Reference
• Web 前端中的加強現實（AR）開發技術: 加強現實（如下簡稱 AR）浪潮正滾滾而來，Web 瀏覽器做爲人們最唾手可得的人機交互終端，正在大力發展 AR 技術。不少 Web 前端工程師也在尋求職業轉型，因而本文做者 GeekPlux 把近半年的相關調研結果在此匯結成文。本文力求把目前前端方向的 AR 技術都羅列一遍，細節不贅述，只作歸納和科普，主要關注實現方式與關鍵技術。更多相關內容參考 Awesome AR Reference。
• 如何避免攻擊者從網站中竊取信用卡帳戶與密碼: 本文做者曾撰文介紹本身是如何經過上傳分發惡意代碼來蒐集用戶的敏感信息。本文中，做者則從加固的角度給出了保護用戶敏感信息的多個建議：並不須要刻意的避免第三方代碼，能夠將敏感信息放在獨立的 HTML 文件中，而且將該文件經過 iframe 中加載，同時以靜態文件服務器的方式從不一樣的域名中訪問該文件。更多相關資料參考 Awesome WebSecurity Reference。
• React 中 Clean Code 的實踐: 來自 Bara 的開發者在遵循 Clean Code 的前提下重構了他們的代碼庫，以提高代碼的可讀性與可維護性。本文便是做者對於這次重構過程的心得分享，其在末尾亦給出了一些我的的思考：分解組件與函數，保證每一個組件或者函數的單層抽象；使用更易於理解的命名等。更多 React 相關資料參考 Awesome React Reference。

開源項目

樂於分享，共推前端發展

• Kap: Kap 是使用 Web 技術構建的開源屏幕錄製工具，目前僅有 macOS 版本。
• Polka: Polka 是輕量級、高性能的 Express.js 替代框架；儘管 Express.js 的性能已然不錯，Polka 仍然青出於藍而勝於藍，在不少的細節上作到了優化。一言以蔽之，Polka 是內置了路由、中間件以及子應用的原生 HTTP 服務器。
• Callbag: Callbag 是用於保證輕量級的 Observables 與 Iterables 的 JS 回調標準，callbags-basic 則是對於 Callbag 標準的具體實現，咱們能夠閱讀 André Staltz 編寫的這篇文章來了解更多信息。
• Unstated: Unstated 是另外一個狀態管理框架，其並未引入新的模式，而是基於 React 組件與 Context 的內置設計構建。Unstated 包含了三個部分，Container 是相似於 React.Component 的簡單類，可是會包含一些狀態相關的操做；Subscribe，容許傳入 Container 實例，而且將其傳遞到子組件中，Provider 則是做爲根節點來存儲全部的實例。

巔峯人生

• 2017 年，Mozilla 爲 Web 作了哪些事情？: 2017 對於 Mozilla 來講是很是重要的一年。咱們發佈了歷史上最快的 Firefox，從新構建了 DevTools 開發者工具，見證了四個主流瀏覽器對 WebAssembly 的支持，啓動了開源的虛擬現實和語音識別平臺。咱們的開發者關係團隊也參與了全球 60 多場路演，見證了 MDN Web Docs 網站讀者數量幾乎增長了一倍。本文便是對 Mozilla 2017 工做的總結與盤點。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆 「 加羣 」。投稿請發郵件到 editors@cn.infoq.com，註明 「 前端之巔投稿 」。