週報

每週天晚更新，首發 楓上霧棋的日誌

前端動態

一、TypeScript 發佈 3.7

• #33294 可選鏈；
• #32883 空值合併；
• #32695 斷言函數；
• #32372 --declaration 和 --allowJs 容許一塊兒使用；
• #33473 扁平錯誤信息

點擊 post 查看更多。

二、玉伯 - 個人前端成長之路

本文是玉伯分享的我的成長和帶團隊的一些感悟，總結了三個關鍵詞：全情投入、守正出奇、願等花開。相信專一於事情，心裏有相信，行動有堅持，成長每每是水到渠成。

三、npm 發佈 6.13.0，新增 fund 命令

npm 實現捐贈，首次爲開源代碼提供資助。自 Standard JS 在項目中實驗性內置廣告 事件後，npm 表示，打算在今年年末前爲開源開發人員開發一個衆籌平臺。本週週二，npm 發佈 6.13.0，新增 fund 命令，它的做用是爲有意捐贈者指明捐贈平臺。

四、精讀《React Conf 2019 - Day1》

React Conf 2019 在今年 10 月份舉辦，內容質量仍是一如既往的高。總的來看，今年的內容視野更廣了，不只僅有技術內容，還有宣揚公益、拓展到移動端、後端，最後還有對 web 發展的總結與展望。這屆 React Conf 讓咱們看到前端更多的可能性，咱們不只要關注技術實現細節，更要關注行業標準以及團隊願景。

五、如何啓用 React 併發模式

併發模式 是一組新功能，能夠幫助 React 應用程序保持響應狀態，並適當調整用戶的設備功能和網絡速度。不論是對 UX（用戶體驗），仍是 DX（開發者體驗），它都是一個巨大的改進。本文描述了它的啓用方法以及注意事項。

六、The Svelte Handbook

Svelte 是由 Rich Harris 也是 rollup 的做者，前端界的輪子哥，建立的 JavaScript UI 庫，首次提交於 2016，目前處於 V3。該框架最大的特色是沒有 virtual DOM，應用程序打包後的體積能作到很是小，被稱爲三大框架的替代方案。尤雨溪曾評價此框架爲最適合編譯可獨立分發的 Web Components 的框架。本手冊可幫助讀者快速學習 Svelte 並熟悉它的工做原理。

七、Winter - 前端團隊的成長

本文是 Winter 爲政採雲前端團隊作的關於 前端團隊成長 的主題分享的實錄。最終的總結是：從公司的角度來看，衡量一個前端團隊價值的方式是類似的，前端團隊的基石是質量和效率，在此基礎上，區分前端團隊的核心因素是業務價值，對於少數前端團隊，可能還會爲公司和行業帶來創新。

八、掌控前端數據流，響應式編程讓你看得更遠

InfoQ 採訪到近期參與 JSConf China 2019 的演講嘉賓 -- 豆瓣閱讀前端負責人馬申彥，就 響應式編程 以及豆瓣閱讀的前端實踐進行了探討，在 JSConf 上，他也對響應式編程進行了演講分享。本文爲採訪全文整理，但願對正在從事前端開發的你有所幫助。

九、Snyk 發佈最新 JavaScript 框架安全性報告

Snyk 主要調查了 Angular 以及 React 生態系統中的安全漏洞和風險，同時也連帶分析了 Vue.js、Bootstrap 和 jQuery，發現許多下載次數高達百萬次的熱門模塊都存在漏洞，最多見的問題就是跨站腳本漏洞（XSS）。Snyk 提到，React 核心組件存在數個漏洞，只有一個 React 核心項目漏洞，被指定官方 CVE 編號，Snyk 認爲，這證實了須要有一個漏洞數據庫記錄開源社羣的活動，以便發現相關的安全問題。

十、2019 成都 Web 全棧大會

成都 Web 全棧大會 是一場集 Web 先後端，跨平臺客戶端領域的綜合性開發者年會，是成都乃至整個西南地區開發者學習、交流的盛會，也是成都本土優秀科技企業，國內外名企在地宣傳、招聘的絕佳機遇！距離本次大會報名截止時間已經不到一週。

明星項目

一、immer

還在使用 immutable-js 麼，Immer 是 mobx 的做者寫的一個 immutable 庫，核心實現是利用 ES6 的 proxy，幾乎以最小的成本實現了 js 的 不可變數據結構，簡單易用、體量小巧、設計巧妙，知足了咱們對 JS 不可變數據結構的需求。最近發佈 V5，支持 Map 和 Set。

setState(
  produce(usersById_v1, draft => {
    // Modifying a map results in a new map
    draft.set("michel", { name: "Michel Weststrate", country: "NL" });
  }),
);
複製代碼

二、swr

出自 zeit，一個用於請求遠程數據的 React Hooks 庫，相比常見的數據請求庫提供了不少很酷且頗有腦洞的特性，好比導航切換時使用緩存數據進行優先渲染而後在進行對比更新，數據在 focus 時更新，輪詢檢查更新，分頁按需更新等，是具備較大潛力的請求類工具庫。

// When passing a function, SWR will use the
// return value as `key`. If the function throws,
// SWR will know that some dependencies are not
// ready. In this case it is `user`.
const { data: user } = useSWR("/api/user");
const { data: projects } = useSWR(() => "/api/projects?uid=" + user.id);
複製代碼

三、chakra-ui

Chakra UI 提供了一組可訪問，可重用和可組合的 React 組件，這些組件使構建網站或應用程序變得很是容易。

// font-size of `theme.fontSizes.md`
<Text fontSize="md" />

// shorthand using the `Flex` component
<Flex align="center" justify="center">
  Flex Container
</Flex>
複製代碼

本週熱點

一、GitLab 拒收中國和俄羅斯人

近日，由谷歌投資的全球第二大開源代碼託管平臺 GitLab 宣佈了一個「封鎖令」，禁止給中國/俄羅斯公民提供 offer，並表示在當前的地緣政治環境下，這是最爲人道的解決方案。

二、蘋果 Mac App Store 拒絕 Electron Apps

開發者報告，蘋果 Mac App Store 的應用審覈流程開始自動拒絕使用 Electron 框架開發的 App，緣由是它們使用的私有 API 調用。這些 API 調用是 Electron 框架的一部分，並不在應用之中。

最後

做者留了一個問題給你，而且不給答案。

咱們有一個 timer 函數，它返回的是一個 Promise，這個 Promise 在隨機一段時間後 resolve。咱們用 Promise.all 接受兩個 timer，最終打印的是什麼？

const timer = a => {
  return new Promise(res =>
    setTimeout(() => {
      res(a);
    }, Math.random() * 100),
  );
};

const all = Promise.all([timer("first"), timer("second")]).then(data =>
  console.log(data),
);
複製代碼