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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可能不少同學(xué)會(huì)想到去找個(gè)庫(kù)，如果你的需求很簡(jiǎn)單，何不自己嘗試寫個(gè)呢？這是個(gè)正則的解法，注意答案被討論的比較多，謹(jǐn)慎采用（仔細(xì)看文檔總是有好處的）。

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

Happy Hacking