摘要：周末是時隔兩月的家人團聚，而每次內容的準備平均需要我集中精力工作小時，所以第期的內容今早才準備好，對不住大家了。下面是本周精選內容，請享用。本文作者王仕軍，商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

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

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

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

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

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

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

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

這周對公司 APP 做圖片加載優化，調研時找到了 CachedImage 和 FastImage，其中 FastImage 更新，但是允許開發者對圖片加載的調度有更大的自主權，兩者都支持 Placeholder、文件系統緩存。你可以根據自己的需要選用。

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

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

已經有人在掘金發過了，里面收錄了程序員工作生活可能涉及到的各種網絡資源的列表，比如怎么準備面試、去哪里看新聞、哪里有不錯的視頻教學、有哪些不錯的 Youtube 頻道、免費的編程書等等，如果你想練習提高自己的英文，這里的每個鏈接都可為你所用。

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

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

是 egghead.io 上為數不多的多人合作的視頻課程，通過實際的編碼演示了 ES6 中的各種新特性，如果你只是看了 ES6 的各種新語法、結構，但是還是羨慕別人的代碼為啥寫的那么溜，可以來看看這個，當然，最好的辦法是自己跟著練。

如何使用 Git 管理諸如 PSD、二進制文件、數據庫文件等的大文件？這里給出了詳細的步驟，有版本的東西就好追溯，軟件演化周期的各種資源都是一樣的，而 Git 在做這種記錄的時候有著天然的優勢。

可能不少同學會想到去找個庫，如果你的需求很簡單，何不自己嘗試寫個呢？這是個正則的解法，注意答案被討論的比較多，謹慎采用（仔細看文檔總是有好處的）。

本文作者王仕軍，商業轉載請聯系作者獲得授權，非商業轉載請注明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什么？歡迎訂閱我的掘金專欄或知乎專欄：《前端周刊：讓你在前端領域跟上時代的腳步》。

Happy Hacking