前端週刊第 55 期：10X 程序員？

共 2127 字，讀完需 4 分鐘。我本週讀到 1 篇比較有趣的文章叫作《The 10x developer is NOT a myth》，無論你承不認可，也無論你有沒有意識到，程序員的效率有時會有天壤之別，10X 程序員的概念很早就出現了，怎樣纔算 10X 程序員？跟普通程序員的區別在哪裏？推薦你抽時間細讀，若是你不肯意看中文，能夠看看我寫的《工程師作事的三重境界》。下面是本週精選的內容，請享用。

技術動態

使用 Node.js 的那些理由還站得住腳麼？

技術社區的活力從各類撕逼的發生頻率能看出來，這篇文章開頭認可 Node.js 已經很是流行而且愈來愈流行，可是做者認爲早些年列出的使用 Node.js 幾大理由是站不住腳的，由於其餘技術也在進步，在各個方面他們都比 Node.js 作的更好，你怎麼看？

ES6 模塊加載登錄 Chrome Canary 60

不知道 ES6 模塊的同窗應該去看看 Ponyfoo 或者 Jake 的文章，Chrome Canary v60 已經提供了 ES6 模塊的支持，不過須要你手動打開支持。這篇文章能夠說是新特性嚐鮮文章，而且對如何開始在項目中使用這個功能、如何作恰當的回退都提出了可行的方案。

文章教程

讓無狀態 React Component 渲染快 45% 的黑科技

無狀態 React Component 的概念就是那些純粹負責渲染且沒有狀態變化的 Component，這篇文章的做者給出了讓這類 Component 渲染加快的技巧：就是把它們當函數使、而不是當 Component 來使，若是你持懷疑態度，能夠先看看他是怎麼分析的，而後本身作實驗來驗證。

從 Angular.js 到 Vue.js 的遷移之路

你的老系統是使用 Angular 1.x 開發，如今又不想使用變化太快的 Angular 2.x、4.x 版本？能夠看看這篇文章的做者如何從 Angular 1.x 遷移到 Vue.js。

玩轉 React Native 動畫所須要掌握的

設計得當的交互動畫可以讓你的應用驚豔用戶，使用戶沉浸其中，典型的好比 Slack 的官方應用，做者在這邊文章會跟你解釋改如何去解剖一個動畫（透明度、位置、尺寸、顏色），讓你瞭解 React Native 動畫的潛力，而且分享瞭如何設計可以使用到整個 React Native 應用中的動畫的技巧。

用 VSCode 作 React 開發推薦配置

與下面收錄的 Atom 前端開發終極配置相呼應，這篇文章講的是如何在 VSCode 配置好 ESLint、Prettier、Flow 以方便 React 開發，給目前在這個場景下的同窗。

用 Atom 作 JS/React 開發的終極配置

雖然不少同窗如今已經轉向 Visual Studio Code 了，這個編輯器我也推薦，但對已經很熟 Atom 做爲開發工具的同窗這篇文章文章也不失其參考價值。怎麼纔算是徹底掌握一個代碼編輯器？把他當記事本用就好了？徹底不是這麼回事，你須要花時間去打磨和練習。這篇文章的做者花了幾個月的時間把 Atom 的配置、插件、快捷鍵調到最優，可能不徹底適合你，可是他的思路確定是值得學習的。

開發工具

Vim Awesome：很是棒的 Vim 插件站點

不是典型的 Awesome 清單，而是個獨立的網站，收錄了全部的 Vim 插件，作了分類，首頁上能看到最受歡迎的 Vim 插件，使用 Vim 的同窗請收下，使用其餘 IDE 的同窗請繞路，哈哈。

Keycastr：小巧的按鍵可視化工具

在你作技術演示、錄製編輯器快捷鍵或者其餘的 GIF 動圖時，若是想全方位的把你的操做展現給觀看的人，按鍵可視化必會讓你的輸出增色很多，Keycastr 是 Mac 下的一款按鍵可視化小工具，啓動的時候會報錯，你須要用管理員身份給他 Accessibility/Privacy 權限。

代碼框架

execa：一個更好的 Node.js child_process

由在 npm 上發了 1000+ 個包的 Sindre Sorhus 出品，相比 Node.js 內置的
child_process，這個會好用不少，主要的優勢有：Promise 化、自動處理子命令輸出結尾、比內置大 500 倍的輸出 Buffer、更好的 Windows 支持、在父進程退出時自動清理子進程等，常常用 Node.js 來寫腳本的同窗能夠考慮看看。

BriteCharts：基於 D3.js 的圖表繪製庫

BriteCharts 是一款基於 D3.js V4 版本的圖表繪製庫，研究過 D3 的同窗可能都會以爲 D3 就是繪圖領域裏面的 DOM，直接使用它你的自由度更大，可是繪圖成本相對更高。而 BriteChart 這樣的庫幫你封裝了常見的圖表，能夠用很是直觀的方式在頁面中渲染。整個倉庫使用 ES6 編寫，而且測試覆蓋率也很是好，源代碼自己就是個不錯的學習資源。若是尋找其餘 D3.js 圖表庫的同窗能夠去搜搜 C3.js 和 NVD3.js。

視頻教程

基於 Chrome Dev Tools 的現代前端工做流

Umar Hansa 在 Render Conf 2017 上所作的分享，主題是基於 Chrome Dev Tools 的現代前端工做流，裏面的乾貨很是多，若是你想完全掌握 Chrome Dev Tools，這篇絕對不容錯過。內容涵蓋：FPS Meter、Paint Profiler、Timeline Recorder、Source Code Profiling 等 15 個主題。

egghead.io: 在生產環境中使用 Webpack

Webpack 無疑是前端社區中最受歡迎的 JS 應用打包工具，由於內置了太多的功能，它的學習曲線也很是的陡峭，讓它跑起來就要費很多的功夫，跟別提用它來作更多的事情了，Kent C. Dodds 在這個系列視頻教程中會用實例幫你理解 Webpack 最經常使用的功能，以及如何優化 Webpack 的配置讓它跑的更快。

精彩問答

如何讓 Git 使用我最喜歡的編輯器？

對標題我先稍做解釋，Git 的某些操做可能會打開系統中的某個編輯器讓你填寫內容，典型的就是 commit 的時候若是沒指定 commit message，就會默認打開 VI 讓你填寫，如何把填寫 commit message 的編輯器替換成我本身喜歡用的 Vim、Atom、VSCode？改下全局配置就好了，高票答案中有兩個方案，要仔細看。

作 React Native 開發時如何打日誌？

打日誌多是衆多調試手段中最古老，關鍵時候也最有效的手段，相比而言 React Native 開發時的日誌打法有不少，你都用過哪些？哪些比較好用？看看這篇問答。

真機調試 React Native 應用時打不開熱更新？

可能部分同窗遇到過，在真機調試 React Native 應用時，發現調試選項中並無 Live Reload 和 Hot Module Reloading 的選項，這會對開發調試的效率產生很大的影響，問題產生的緣由主要在網絡，可是解決的辦法超過 3 個步驟。

One More Thing

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

Happy Hacking