前端週刊第59期：選 Flow 仍是 TypeScript？

共 2015 字，讀完需 4 分鐘。週末是時隔兩月的家人團聚，而每次內容的準備平均須要我集中精力工做 3 小時，因此第 59 期的內容今早才準備好，對不住你們了。本期的引子是「選 Flow 仍是 TypeScript」，緣起於去年末的 JS 調查報告展現 39% 的程序員據說過會準備採用 TypeScript，你是其中一份子麼？從想用到真正開始用缺的就是實踐。而筆者也是最近纔開始擁抱 TypeScript。下面是本週精選內容，請享用。

文章教程

架構師必讀：開源軟件的架構

英文系列名爲《The Architecture of Open Source Applications》，這個系列文章強烈推薦有志於成爲架構師的同窗閱讀，裏面介紹了很多開源軟件的設計理念，全套分四冊，徹底開源，覆蓋的開源軟件有上古神器，也有黑馬新秀，若是你沒有思考過這些司空見慣的東西究竟是怎麼設計的，相信這裏面的文章會給你很多啓發。最新的系列叫作《500 Lines or Less》，用 500 行代碼能作什麼？比較有意思。

util.promisify 用法詳解

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

對比 Flow 和 TypeScript

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

從 Flow 到 TypeScript

做者在使用 React 開發的早些時候，由於 TypeScript 還不夠完善，遂所有采用 Facebook 開源的靜態檢查方案 Flow，時過境遷發現 TypeScript 更能知足需求，雖然標題裏有 vs 字眼，可是明顯傾向於 TypeScript，而且給出了從 Flow 到 TypeScript 的基本步驟。TypeScript 是 2016 年 JS 調查報告中 39% 的開發者據說過而且緣由試用的技術，你還在徘徊猶豫麼？

React Native 漸進式圖片加載思路

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

開發工具

Lighthouse：讓 Dev Tools 如虎添翼

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

ZangoDB：瀏覽器中的 MongoDB

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

代碼框架

FastImage：高性能的 React Native 圖片組件

這周對公司 APP 作圖片加載優化，調研時找到了 CachedImage 和 FastImage，其中 FastImage 更新，可是容許開發者對圖片加載的調度有更大的自主權，二者都支持 Placeholder、文件系統緩存。你能夠根據本身的須要選用。

FeatherIcon：美觀的開源圖標庫

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

找找靈感

學會作任何事情

你會教人如何使用筷子麼？看起來很簡單的事情，貌似找到他的關鍵，而且講解給別人就沒有那麼容易了。wiki-how 裏面有各類如何作 XXX 的教程，當你學一個新的東西時候，寫個新教程的時候是否是能夠參考呢？

程序員應該訪問的最佳網站

已經有人在掘金髮過了，裏面收錄了程序員工做生活可能涉及到的各類網絡資源的列表，好比怎麼準備面試、去哪裏看新聞、哪裏有不錯的視頻教學、有哪些不錯的 Youtube 頻道、免費的編程書等等，若是你想練習提升本身的英文，這裏的每一個連接均可爲你所用。

動畫漸變函數圖示

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

視頻教程

學習 Recompose 中的高階組件和函數式組件

來自 egghead.io，若是你使用了 React 至關長的時間，好比說一年，可是還不知道函數式組件、高階組件是啥，這個視頻教程當屬於敲黑板系列了，若是說 《React Best Practice and Design Patterns》是文字版的，那麼這個就是視頻版的，雖然基於 Recompose 講解，可是不少模式即便不用它也能夠本身實現。

egghead.io：60 分鐘學會 ES6

是 egghead.io 上爲數很少的多人合做的視頻課程，經過實際的編碼演示了 ES6 中的各類新特性，若是你只是看了 ES6 的各類新語法、結構，可是仍是羨慕別人的代碼爲啥寫的那麼溜，能夠來看看這個，固然，最好的辦法是本身跟着練。

精彩問答

如何使用 Git 管理大文件？

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

如何使用 JS 格式化貨幣數字？

可能很多同窗會想到去找個庫，若是你的需求很簡單，何不本身嘗試寫個呢？這是個正則的解法，注意答案被討論的比較多，謹慎採用（仔細看文檔老是有好處的）。

One More Thing

本文做者王仕軍，商業轉載請聯繫做者得到受權，非商業轉載請註明出處。若是你以爲本文對你有幫助，請點贊！若是對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱個人掘金專欄或知乎專欄：《前端週刊：讓你在前端領域跟上時代的腳步》。

Happy Hacking