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

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

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

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

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

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

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

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

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

這周對公司 APP 做圖片加載優(yōu)化，調(diào)研時找到了 CachedImage 和 FastImage，其中 FastImage 更新，但是允許開發(fā)者對圖片加載的調(diào)度有更大的自主權(quán)，兩者都支持 Placeholder、文件系統(tǒng)緩存。你可以根據(jù)自己的需要選用。

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

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

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

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

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

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

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

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

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

Happy Hacking