前端週刊第59期：選 Flow 還是 TypeScript？

wangshijun發表於2019-02-16

週末是時隔兩月的家人團聚，而每次內容的準備平均需要我集中精力工作 3 小時，所以第 59 期的內容今早才準備好，對不住大家了。本期的引子是“選 Flow 還是 TypeScript”，緣起於去年底的 JS 調查報告展示 39% 的程式設計師聽說過會準備採用 TypeScript，你是其中一份子麼？從想用到真正開始用缺的就是實踐。而筆者也是最近才開始擁抱 TypeScript。下面是本週精選內容，請享用。

文章教程

架構師必讀：開源軟體的架構

英文系列名為《The Architecture of Open Source Applications》，這個系列文章強烈推薦有志於成為架構師的同學閱讀，裡面介紹了不少開源軟體的設計理念，全套分四冊，完全開源，覆蓋的開源軟體有上古神器，也有黑馬新秀，如果你沒有思考過這些司空見慣的東西到底是怎麼設計的，相信這裡面的文章會給你不少啟發。最新的系列叫做《500 Lines or Less》，用 500 行程式碼能做什麼？比較有意思。

util.promisify 用法詳解

Node.js 8 增加的新特性，讓你把各種基於回撥的函式方便的轉成 Promise，這樣就可以在 async/await 上下文使用了，這篇文章介紹了基本用法。

對比 Flow 和 TypeScript

主標題：JS 中的型別系統，原作者也是蠻拼的，JS 中型別系統的對比做了多次分享，早期對比了 Flow 和 TypeScript 1.x，後來對比了 Flow 和 TypeScript 2.x，最後還把 ELM 加入到對比裡面。這是中篇的連結，對比的風格更學術化，如果你想對選用 Flow 還是 TypeScript 做出非常嚴謹的選擇，這篇是不得不看的。

從 Flow 到 TypeScript

作者在使用 React 開發的早些時候，因為 TypeScript 還不夠完善，遂全部採用 Facebook 開源的靜態檢查方案 Flow，時過境遷發現 TypeScript 更能滿足需求，雖然標題裡有 vs 字眼，但是明顯傾向於 TypeScript，並且給出了從 Flow 到 TypeScript 的基本步驟。TypeScript 是 2016 年 JS 調查報告中 39% 的開發者聽說過並且原因試用的技術，你還在徘徊猶豫麼？

React Native 漸進式圖片載入思路

WEB 和 APP 領域的很多東西都是通用的，對於多圖的應用，圖片載入的優化必不可少，這篇文章介紹了在 React Native 中實現圖片漸進式載入的方案，並且有實際的程式碼示例。

開發工具

Lighthouse：讓 Dev Tools 如虎添翼

Google 官方出品，目前已經內建在 Chrome Dev Tools 中，可以用來對你的網頁，尤其是 H5 做全面的診斷，給出的報告涵蓋 PWA、效能、可訪問性、最佳實踐等方面，不得不說，一份報告就有太多值得學習的地方。並且 Lighthouse 還提供了命令列工具，可以很好的與你的 CI 流程結合。

ZangoDB：瀏覽器中的 MongoDB

ZangoDB 是基於 HTML5 中 IndexedDB 的類似於 MongoDB 的資料庫封裝庫，如果你熟悉 MongoDB 的各種語法，那麼在瀏覽器中書寫 MongoDB 的程式碼來做資料過濾、分頁、投影、排序、更新和聚合已經不是什麼難事。

程式碼框架

FastImage：高效能的 React Native 圖片元件

這周對公司 APP 做圖片載入優化，調研時找到了 CachedImage 和 FastImage，其中 FastImage 更新，但是允許開發者對圖片載入的排程有更大的自主權，兩者都支援 Placeholder、檔案系統快取。你可以根據自己的需要選用。

FeatherIcon：美觀的開源圖示庫

社群中能找到的圖示庫越來越多，選擇的時候你會考慮哪些要素？是否開源、圖示的種類、版權、受歡迎程度、新增新圖示的難度？Feather Icon 使用 MIT 授權，主維護者也比較勤奮，使用者不少，設計風格比較簡潔，你也可以看看。

找找靈感

學會做任何事情

你會教人如何使用筷子麼？看起來很簡單的事情，貌似找到他的關鍵，並且講解給別人就沒有那麼容易了。wiki-how 裡面有各種如何做 XXX 的教程，當你學一個新的東西時候，寫個新教程的時候是不是可以參考呢？

程式設計師應該訪問的最佳網站

已經有人在掘金髮過了，裡面收錄了程式設計師工作生活可能涉及到的各種網路資源的列表，比如怎麼準備面試、去哪裡看新聞、哪裡有不錯的視訊教學、有哪些不錯的 Youtube 頻道、免費的程式設計書等等，如果你想練習提高自己的英文，這裡的每個連結都可為你所用。

動畫漸變函式圖示

恰到好處的動畫能讓你的應用體驗更加流暢，談到動畫，不得不提到漸變函式（即 easing functions），漸變函式基本決定了動畫的視覺效果，每種不同的漸變函式到底是怎樣的曲線？這裡用圖示法給你生動的解釋。

視訊教程

學習 Recompose 中的高階元件和函式式元件

來自 egghead.io，如果你使用了 React 相當長的時間，比如說一年，但是還不知道函式式元件、高階元件是啥，這個視訊教程當屬於敲黑板系列了，如果說《React Best Practice and Design Patterns》是文字版的，那麼這個就是視訊版的，雖然基於 Recompose 講解，但是很多模式即使不用它也可以自己實現。