共 2015 字侈贷，讀完需 4 分鐘。周末是時隔兩月的家人團聚，而每次內(nèi)容的準備平均需要我集中精力工作 3 小時俏蛮，所以第 59 期的內(nèi)容今早才準備好撑蚌，對不住大家了。本期的引子是“選 Flow 還是 TypeScript”搏屑，緣起于去年底的 JS 調(diào)查報告展示 39% 的程序員聽說過會準備采用 TypeScript争涌，你是其中一份子么？從想用到真正開始用缺的就是實踐辣恋。而筆者也是最近才開始擁抱 TypeScript亮垫。下面是本周精選內(nèi)容，請享用伟骨。
文章教程
架構(gòu)師必讀：開源軟件的架構(gòu)
英文系列名為《The Architecture of Open Source Applications》饮潦，這個系列文章強烈推薦有志于成為架構(gòu)師的同學閱讀，里面介紹了不少開源軟件的設(shè)計理念携狭，全套分四冊继蜡，完全開源，覆蓋的開源軟件有上古神器逛腿，也有黑馬新秀稀并，如果你沒有思考過這些司空見慣的東西到底是怎么設(shè)計的，相信這里面的文章會給你不少啟發(fā)单默。最新的系列叫做《500 Lines or Less》碘举，用 500 行代碼能做什么？比較有意思搁廓。
util.promisify 用法詳解
Node.js 8 增加的新特性引颈，讓你把各種基于回調(diào)的函數(shù)方便的轉(zhuǎn)成 Promise，這樣就可以在 async/await 上下文使用了枚抵，這篇文章介紹了基本用法线欲。
對比 Flow 和 TypeScript
主標題：JS 中的類型系統(tǒng)，原作者也是蠻拼的汽摹，JS 中類型系統(tǒng)的對比做了多次分享李丰，早期對比了 Flow 和 TypeScript 1.x，后來對比了 Flow 和 TypeScript 2.x逼泣，最后還把 ELM 加入到對比里面趴泌。這是中篇的鏈接，對比的風格更學術(shù)化拉庶，如果你想對選用 Flow 還是 TypeScript 做出非常嚴謹?shù)倪x擇嗜憔，這篇是不得不看的。
從 Flow 到 TypeScript
作者在使用 React 開發(fā)的早些時候氏仗，因為 TypeScript 還不夠完善吉捶，遂全部采用 Facebook 開源的靜態(tài)檢查方案 Flow，時過境遷發(fā)現(xiàn) TypeScript 更能滿足需求，雖然標題里有 vs 字眼呐舔，但是明顯傾向于 TypeScript币励，并且給出了從 Flow 到 TypeScript 的基本步驟。TypeScript 是 2016 年 JS 調(diào)查報告中 39% 的開發(fā)者聽說過并且原因試用的技術(shù)珊拼，你還在徘徊猶豫么食呻？
React Native 漸進式圖片加載思路
WEB 和 APP 領(lǐng)域的很多東西都是通用的，對于多圖的應(yīng)用澎现，圖片加載的優(yōu)化必不可少仅胞，這篇文章介紹了在 React Native 中實現(xiàn)圖片漸進式加載的方案，并且有實際的代碼示例剑辫。
開發(fā)工具
Lighthouse：讓 Dev Tools 如虎添翼
Google 官方出品干旧，目前已經(jīng)內(nèi)置在 Chrome Dev Tools 中，可以用來對你的網(wǎng)頁揭斧，尤其是 H5 做全面的診斷莱革，給出的報告涵蓋 PWA、性能讹开、可訪問性盅视、最佳實踐等方面，不得不說旦万，一份報告就有太多值得學習的地方闹击。并且 Lighthouse 還提供了命令行工具，可以很好的與你的 CI 流程結(jié)合成艘。
ZangoDB：瀏覽器中的 MongoDB
ZangoDB 是基于 HTML5 中 IndexedDB 的類似于 MongoDB 的數(shù)據(jù)庫封裝庫赏半，如果你熟悉 MongoDB 的各種語法，那么在瀏覽器中書寫 MongoDB 的代碼來做數(shù)據(jù)過濾淆两、分頁断箫、投影、排序秋冰、更新和聚合已經(jīng)不是什么難事仲义。
代碼框架
FastImage：高性能的 React Native 圖片組件
這周對公司 APP 做圖片加載優(yōu)化，調(diào)研時找到了 CachedImage 和 FastImage剑勾，其中 FastImage 更新埃撵，但是允許開發(fā)者對圖片加載的調(diào)度有更大的自主權(quán)，兩者都支持 Placeholder虽另、文件系統(tǒng)緩存暂刘。你可以根據(jù)自己的需要選用。
FeatherIcon：美觀的開源圖標庫
社區(qū)中能找到的圖標庫越來越多捂刺，選擇的時候你會考慮哪些要素谣拣？是否開源募寨、圖標的種類、版權(quán)森缠、受歡迎程度绪商、添加新圖標的難度？Feather Icon 使用 MIT 授權(quán)辅鲸，主維護者也比較勤奮，使用者不少腹殿，設(shè)計風格比較簡潔独悴，你也可以看看。
找找靈感
學會做任何事情
你會教人如何使用筷子么锣尉？看起來很簡單的事情刻炒，貌似找到他的關(guān)鍵，并且講解給別人就沒有那么容易了自沧。wiki-how 里面有各種如何做 XXX 的教程坟奥，當你學一個新的東西時候，寫個新教程的時候是不是可以參考呢拇厢？
程序員應(yīng)該訪問的最佳網(wǎng)站
已經(jīng)有人在掘金發(fā)過了爱谁，里面收錄了程序員工作生活可能涉及到的各種網(wǎng)絡(luò)資源的列表，比如怎么準備面試孝偎、去哪里看新聞访敌、哪里有不錯的視頻教學、有哪些不錯的 Youtube 頻道衣盾、免費的編程書等等寺旺，如果你想練習提高自己的英文，這里的每個鏈接都可為你所用势决。
動畫漸變函數(shù)圖示
恰到好處的動畫能讓你的應(yīng)用體驗更加流暢阻塑，談到動畫，不得不提到漸變函數(shù)（即 easing functions）果复，漸變函數(shù)基本決定了動畫的視覺效果陈莽，每種不同的漸變函數(shù)到底是怎樣的曲線？這里用圖示法給你生動的解釋据悔。
視頻教程
學習 Recompose 中的高階組件和函數(shù)式組件
來自 egghead.io传透，如果你使用了 React 相當長的時間，比如說一年极颓，但是還不知道函數(shù)式組件朱盐、高階組件是啥，這個視頻教程當屬于敲黑板系列了菠隆，如果說 《React Best Practice and Design Patterns》是文字版的兵琳，那么這個就是視頻版的狂秘，雖然基于 Recompose 講解，但是很多模式即使不用它也可以自己實現(xiàn)躯肌。
egghead.io：60 分鐘學會 ES6
是 egghead.io 上為數(shù)不多的多人合作的視頻課程者春，通過實際的編碼演示了 ES6 中的各種新特性，如果你只是看了 ES6 的各種新語法清女、結(jié)構(gòu)钱烟，但是還是羨慕別人的代碼為啥寫的那么溜，可以來看看這個嫡丙，當然拴袭，最好的辦法是自己跟著練。
精彩問答
如何使用 Git 管理大文件曙博？
如何使用 Git 管理諸如 PSD拥刻、二進制文件、數(shù)據(jù)庫文件等的大文件父泳？這里給出了詳細的步驟般哼，有版本的東西就好追溯，軟件演化周期的各種資源都是一樣的惠窄，而 Git 在做這種記錄的時候有著天然的優(yōu)勢蒸眠。
如何使用 JS 格式化貨幣數(shù)字？
可能不少同學會想到去找個庫睬捶，如果你的需求很簡單黔宛，何不自己嘗試寫個呢？這是個正則的解法擒贸，注意答案被討論的比較多臀晃，謹慎采用（仔細看文檔總是有好處的）。
One More Thing
本文作者王仕軍介劫，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)徽惋，非商業(yè)轉(zhuǎn)載請注明出處。如果你覺得本文對你有幫助座韵，請點贊险绘！如果對文中的內(nèi)容有任何疑問，歡迎留言討論誉碴。想知道我接下來會寫些什么宦棺？歡迎訂閱我的掘金專欄或知乎專欄：《前端周刊：讓你在前端領(lǐng)域跟上時代的腳步》。
Happy Hacking
