阿里雲前端周刊 - 第 30 期

01-29

1. React 16 新特性嘗鮮實戰教程

https://juejin.im/post/59f26fe5f265da43252889d9

React 16 的發布除開源許可證和 Fiber 機制全面開啟之外，還為我們提供了部分非常強大的新特性，本視頻教程將通過實例帶你探索這些新特性，從 Error Boundary 到 Text Only Component，再到 Portal，共 6 小節，19 分鐘，每個小節實例講解一個新特性，在講解新特性基本用法的同時會介紹新特性的最佳實踐。學完本視頻教程，你將能熟練把諸如 Error Boundary，Portal 等特性運用到你的實際項目中來提高開發效率和代碼質量，做到與時俱進。

2. 手把手教寫 TypeScript Transformer Plugin

https://mp.weixin.qq.com/s/P8fK6jDniY_pUFSBrEfMUQ

用過 ant-design 的同學可能對 babel-plugin-import 有印象，它可以幫助實現模塊的按需引用。在一個沒有使用 antd 全部組件的項目里，這樣做可以明顯減少打包後的代碼體積。可是，如果你在一個沒有使用 Babel 的 TypeScript 項目里，想要實現類似的功能，該怎麼辦呢？

3. Napa.js 簡介

https://blog.philipphauer.de/restful-api-design-best-practices/

本文介紹 Napa.js 的核心概念，帶領大家探索 Napa.js 是如何運轉起來的。關於它的由來和開發初衷，可以閱讀這篇文章。

其它

1. 前端防禦從入門到棄坑 - CSP 變遷

https://paper.seebug.org/423/

本文件介紹了 Content Security Policy （CSP）內容安全策略，是一個附加的安全層，有助於檢測並緩解某些類型的攻擊，包括跨站腳本（XSS）和數據注入攻擊。CSP的特點就是他是在瀏覽器層面做的防護，是和同源策略同一級別，除非瀏覽器本身出現漏洞，否則不可能從機制上繞過。CSP只允許被認可的JS塊、JS文件、CSS等解析，只允許向指定的域發起請求。

2. 全面進階 H5 直播

https://segmentfault.com/a/1190000008916399#articleHeader6

這篇文章主要介紹了，基於 HTML5 中的 video/audio 去處理音視頻流需要用的 Web 技術。

3. Rxjs 實踐-各種排序演算法排序過程的可視化展示

https://juejin.im/post/59f29b9a6fb9a04504071d58

學習了《演算法》的排序章節,想著做點東西，能將各種排序演算法的排序過程使用Rxjs通過可視化的方式展示出來，正好練系一下Rxjs的使用（作者語），本文不會太多介紹Rxjs的基本概念，重點介紹如何用響應式編程的思想來實現功能。

4. 遇見大數據可視化 - 那些 WOW 的數據可視化案例

https://www.qcloud.com/community/article/789846

數據可視化的內涵並非只是專業人員才能看得的懂的圖表，當你想要通過數據來宣傳證明自己時，你遇到的問題是大多數人並不能看懂你的圖表。那麼讓數據可視化的過程更加的生動有趣、通俗易懂就顯的尤為重要了。如何才能讓數據可視化在面向普羅大眾更容易接受和理解，甚至產生WOW的感覺呢？本文試著通過一些具體的數據可視化案例來說明。

5. 使用 Paint Timing API 提高性能

https://zhuanlan.zhihu.com/p/30389490

傳統上，前端性能主要集中在頁面載入時間上，來作為重要的性能指標。商業網站性能將顯示後端方面的粒度級的性能指標，如資料庫查找時間、模板編譯、伺服器響應時間等等。然而，當涉及到客戶端的時候，性能信息是有限的。這在一定程度上是由於有限的性能指標和瀏覽器提供的 API 。諷刺的是，一些非標準的性能跟蹤技術本身會對性能產生負面影響。由於新的面向性能的 API 出現，目前這種情況正在發生轉變。

6. Vue 項目架構設計與工程化實踐

https://github.com/berwin/Blog/issues/14

文中會講述作者從 0~1 搭建一個前後端分離的vue項目詳細過程