共 2015 字，讀完需 4 分鐘。周末是時(shí)隔兩月的家人團(tuán)聚，而每次內(nèi)容的準(zhǔn)備平均需要我集中精力工作 3 小時(shí)，所以第 59 期的內(nèi)容今早才準(zhǔn)備好，對(duì)不住大家了。本期的引子是“選 Flow 還是 TypeScript”，緣起于去年底的 JS 調(diào)查報(bào)告展示 39% 的程序員聽(tīng)說(shuō)過(guò)會(huì)準(zhǔn)備采用 TypeScript，你是其中一份子么？從想用到真正開(kāi)始用缺的就是實(shí)踐。而筆者也是最近才開(kāi)始擁抱 TypeScript。下面是本周精選內(nèi)容，請(qǐng)享用。
文章教程
架構(gòu)師必讀：開(kāi)源軟件的架構(gòu)
英文系列名為《The Architecture of Open Source Applications》，這個(gè)系列文章強(qiáng)烈推薦有志于成為架構(gòu)師的同學(xué)閱讀，里面介紹了不少開(kāi)源軟件的設(shè)計(jì)理念，全套分四冊(cè)，完全開(kāi)源，覆蓋的開(kāi)源軟件有上古神器，也有黑馬新秀，如果你沒(méi)有思考過(guò)這些司空見(jiàn)慣的東西到底是怎么設(shè)計(jì)的，相信這里面的文章會(huì)給你不少啟發(fā)。最新的系列叫做《500 Lines or Less》，用 500 行代碼能做什么？比較有意思。
util.promisify 用法詳解
Node.js 8 增加的新特性，讓你把各種基于回調(diào)的函數(shù)方便的轉(zhuǎn)成 Promise，這樣就可以在 async/await 上下文使用了，這篇文章介紹了基本用法。
對(duì)比 Flow 和 TypeScript
主標(biāo)題：JS 中的類型系統(tǒng)，原作者也是蠻拼的，JS 中類型系統(tǒng)的對(duì)比做了多次分享，早期對(duì)比了 Flow 和 TypeScript 1.x，后來(lái)對(duì)比了 Flow 和 TypeScript 2.x，最后還把 ELM 加入到對(duì)比里面。這是中篇的鏈接，對(duì)比的風(fēng)格更學(xué)術(shù)化，如果你想對(duì)選用 Flow 還是 TypeScript 做出非常嚴(yán)謹(jǐn)?shù)倪x擇，這篇是不得不看的。
從 Flow 到 TypeScript
作者在使用 React 開(kāi)發(fā)的早些時(shí)候，因?yàn)?TypeScript 還不夠完善，遂全部采用 Facebook 開(kāi)源的靜態(tài)檢查方案 Flow，時(shí)過(guò)境遷發(fā)現(xiàn) TypeScript 更能滿足需求，雖然標(biāo)題里有 vs 字眼，但是明顯傾向于 TypeScript，并且給出了從 Flow 到 TypeScript 的基本步驟。TypeScript 是 2016 年 JS 調(diào)查報(bào)告中 39% 的開(kāi)發(fā)者聽(tīng)說(shuō)過(guò)并且原因試用的技術(shù)，你還在徘徊猶豫么？
React Native 漸進(jìn)式圖片加載思路
WEB 和 APP 領(lǐng)域的很多東西都是通用的，對(duì)于多圖的應(yīng)用，圖片加載的優(yōu)化必不可少，這篇文章介紹了在 React Native 中實(shí)現(xiàn)圖片漸進(jìn)式加載的方案，并且有實(shí)際的代碼示例。
開(kāi)發(fā)工具
Lighthouse：讓 Dev Tools 如虎添翼
Google 官方出品，目前已經(jīng)內(nèi)置在 Chrome Dev Tools 中，可以用來(lái)對(duì)你的網(wǎng)頁(yè)，尤其是 H5 做全面的診斷，給出的報(bào)告涵蓋 PWA、性能、可訪問(wèn)性、最佳實(shí)踐等方面，不得不說(shuō)，一份報(bào)告就有太多值得學(xué)習(xí)的地方。并且 Lighthouse 還提供了命令行工具，可以很好的與你的 CI 流程結(jié)合。
ZangoDB：瀏覽器中的 MongoDB
ZangoDB 是基于 HTML5 中 IndexedDB 的類似于 MongoDB 的數(shù)據(jù)庫(kù)封裝庫(kù)，如果你熟悉 MongoDB 的各種語(yǔ)法，那么在瀏覽器中書(shū)寫(xiě) MongoDB 的代碼來(lái)做數(shù)據(jù)過(guò)濾、分頁(yè)、投影、排序、更新和聚合已經(jīng)不是什么難事。
代碼框架
FastImage：高性能的 React Native 圖片組件
這周對(duì)公司 APP 做圖片加載優(yōu)化，調(diào)研時(shí)找到了 CachedImage 和 FastImage，其中 FastImage 更新，但是允許開(kāi)發(fā)者對(duì)圖片加載的調(diào)度有更大的自主權(quán)，兩者都支持 Placeholder、文件系統(tǒng)緩存。你可以根據(jù)自己的需要選用。
FeatherIcon：美觀的開(kāi)源圖標(biāo)庫(kù)
社區(qū)中能找到的圖標(biāo)庫(kù)越來(lái)越多，選擇的時(shí)候你會(huì)考慮哪些要素？是否開(kāi)源、圖標(biāo)的種類、版權(quán)、受歡迎程度、添加新圖標(biāo)的難度？Feather Icon 使用 MIT 授權(quán)，主維護(hù)者也比較勤奮，使用者不少，設(shè)計(jì)風(fēng)格比較簡(jiǎn)潔，你也可以看看。
找找靈感
學(xué)會(huì)做任何事情
你會(huì)教人如何使用筷子么？看起來(lái)很簡(jiǎn)單的事情，貌似找到他的關(guān)鍵，并且講解給別人就沒(méi)有那么容易了。wiki-how 里面有各種如何做 XXX 的教程，當(dāng)你學(xué)一個(gè)新的東西時(shí)候，寫(xiě)個(gè)新教程的時(shí)候是不是可以參考呢？
程序員應(yīng)該訪問(wèn)的最佳網(wǎng)站
已經(jīng)有人在掘金發(fā)過(guò)了，里面收錄了程序員工作生活可能涉及到的各種網(wǎng)絡(luò)資源的列表，比如怎么準(zhǔn)備面試、去哪里看新聞、哪里有不錯(cuò)的視頻教學(xué)、有哪些不錯(cuò)的 Youtube 頻道、免費(fèi)的編程書(shū)等等，如果你想練習(xí)提高自己的英文，這里的每個(gè)鏈接都可為你所用。
動(dòng)畫(huà)漸變函數(shù)圖示
恰到好處的動(dòng)畫(huà)能讓你的應(yīng)用體驗(yàn)更加流暢，談到動(dòng)畫(huà)，不得不提到漸變函數(shù)（即 easing functions），漸變函數(shù)基本決定了動(dòng)畫(huà)的視覺(jué)效果，每種不同的漸變函數(shù)到底是怎樣的曲線？這里用圖示法給你生動(dòng)的解釋。
視頻教程
學(xué)習(xí) Recompose 中的高階組件和函數(shù)式組件
來(lái)自 egghead.io，如果你使用了 React 相當(dāng)長(zhǎng)的時(shí)間，比如說(shuō)一年，但是還不知道函數(shù)式組件、高階組件是啥，這個(gè)視頻教程當(dāng)屬于敲黑板系列了，如果說(shuō) 《React Best Practice and Design Patterns》是文字版的，那么這個(gè)就是視頻版的，雖然基于 Recompose 講解，但是很多模式即使不用它也可以自己實(shí)現(xiàn)。
egghead.io：60 分鐘學(xué)會(huì) ES6
是 egghead.io 上為數(shù)不多的多人合作的視頻課程，通過(guò)實(shí)際的編碼演示了 ES6 中的各種新特性，如果你只是看了 ES6 的各種新語(yǔ)法、結(jié)構(gòu)，但是還是羨慕別人的代碼為啥寫(xiě)的那么溜，可以來(lái)看看這個(gè)，當(dāng)然，最好的辦法是自己跟著練。
精彩問(wèn)答
如何使用 Git 管理大文件？
如何使用 Git 管理諸如 PSD、二進(jìn)制文件、數(shù)據(jù)庫(kù)文件等的大文件？這里給出了詳細(xì)的步驟，有版本的東西就好追溯，軟件演化周期的各種資源都是一樣的，而 Git 在做這種記錄的時(shí)候有著天然的優(yōu)勢(shì)。
如何使用 JS 格式化貨幣數(shù)字？
可能不少同學(xué)會(huì)想到去找個(gè)庫(kù)，如果你的需求很簡(jiǎn)單，何不自己嘗試寫(xiě)個(gè)呢？這是個(gè)正則的解法，注意答案被討論的比較多，謹(jǐn)慎采用（仔細(xì)看文檔總是有好處的）。
One More Thing
本文作者王仕軍，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。如果你覺(jué)得本文對(duì)你有幫助，請(qǐng)點(diǎn)贊！如果對(duì)文中的內(nèi)容有任何疑問(wèn)，歡迎留言討論。想知道我接下來(lái)會(huì)寫(xiě)些什么？歡迎訂閱我的掘金專欄或知乎專欄：《前端周刊：讓你在前端領(lǐng)域跟上時(shí)代的腳步》。
Happy Hacking
