摘要：本文作者王仕軍，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。想知道我接下來會寫些什么歡迎訂閱我的掘金專欄或知乎專欄前端周刊讓你在前端領(lǐng)域跟上時(shí)代的腳步。

共 2127 字，讀完需 4 分鐘。我本周讀到 1 篇比較有趣的文章叫做《The 10x developer is NOT a myth》，不管你承不承認(rèn)，也不管你有沒有意識到，程序員的效率有時(shí)會有天壤之別，10X 程序員的概念很早就出現(xiàn)了，怎樣才算 10X 程序員？跟普通程序員的區(qū)別在哪里？推薦你抽時(shí)間細(xì)讀，如果你不愿意看中文，可以看看我寫的《工程師做事的三重境界》。下面是本周精選的內(nèi)容，請享用。

技術(shù)社區(qū)的活力從各種撕逼的發(fā)生頻率能看出來，這篇文章開頭承認(rèn) Node.js 已經(jīng)非常流行并且越來越流行，但是作者認(rèn)為早些年列出的使用 Node.js 幾大理由是站不住腳的，因?yàn)槠渌夹g(shù)也在進(jìn)步，在各個(gè)方面他們都比 Node.js 做的更好，你怎么看？

不知道 ES6 模塊的同學(xué)應(yīng)該去看看 Ponyfoo 或者 Jake 的文章，Chrome Canary v60 已經(jīng)提供了 ES6 模塊的支持，不過需要你手動(dòng)打開支持。這篇文章可以說是新特性嘗鮮文章，并且對如何開始在項(xiàng)目中使用這個(gè)功能、如何做恰當(dāng)?shù)幕赝硕继岢隽丝尚械姆桨浮?/p> 文章教程 讓無狀態(tài) React Component 渲染快 45% 的黑科技

無狀態(tài) React Component 的概念就是那些純粹負(fù)責(zé)渲染且沒有狀態(tài)變化的 Component，這篇文章的作者給出了讓這類 Component 渲染加快的技巧：就是把它們當(dāng)函數(shù)使、而不是當(dāng) Component 來使，如果你持懷疑態(tài)度，可以先看看他是怎么分析的，然后自己做實(shí)驗(yàn)來驗(yàn)證。

你的老系統(tǒng)是使用 Angular 1.x 開發(fā)，現(xiàn)在又不想使用變化太快的 Angular 2.x、4.x 版本？可以看看這篇文章的作者如何從 Angular 1.x 遷移到 Vue.js。

設(shè)計(jì)得當(dāng)?shù)慕换?dòng)畫能夠讓你的應(yīng)用驚艷用戶，使用戶沉浸其中，典型的比如 Slack 的官方應(yīng)用，作者在這邊文章會跟你解釋改如何去解剖一個(gè)動(dòng)畫（透明度、位置、尺寸、顏色），讓你了解 React Native 動(dòng)畫的潛力，并且分享了如何設(shè)計(jì)能夠使用到整個(gè) React Native 應(yīng)用中的動(dòng)畫的技巧。

與下面收錄的 Atom 前端開發(fā)終極配置相呼應(yīng)，這篇文章講的是如何在 VSCode 配置好 ESLint、Prettier、Flow 以方便 React 開發(fā)，給目前在這個(gè)場景下的同學(xué)。

雖然很多同學(xué)現(xiàn)在已經(jīng)轉(zhuǎn)向 Visual Studio Code 了，這個(gè)編輯器我也推薦，但對已經(jīng)很熟 Atom 作為開發(fā)工具的同學(xué)這篇文章文章也不失其參考價(jià)值。怎么才算是完全掌握一個(gè)代碼編輯器？把他當(dāng)記事本用就行了？完全不是這么回事，你需要花時(shí)間去打磨和練習(xí)。這篇文章的作者花了幾個(gè)月的時(shí)間把 Atom 的配置、插件、快捷鍵調(diào)到最優(yōu)，可能不完全適合你，但是他的思路肯定是值得學(xué)習(xí)的。

不是典型的 Awesome 清單，而是個(gè)獨(dú)立的網(wǎng)站，收錄了所有的 Vim 插件，做了分類，首頁上能看到最受歡迎的 Vim 插件，使用 Vim 的同學(xué)請收下，使用其他 IDE 的同學(xué)請繞路，哈哈。

在你做技術(shù)演示、錄制編輯器快捷鍵或者其他的 GIF 動(dòng)圖時(shí)，如果想全方位的把你的操作展示給觀看的人，按鍵可視化必會讓你的輸出增色不少，Keycastr 是 Mac 下的一款按鍵可視化小工具，啟動(dòng)的時(shí)候會報(bào)錯(cuò)，你需要用管理員身份給他 Accessibility/Privacy 權(quán)限。

由在 npm 上發(fā)了 1000+ 個(gè)包的 Sindre Sorhus 出品，相比 Node.js 內(nèi)置的
child_process，這個(gè)會好用很多，主要的優(yōu)點(diǎn)有：Promise 化、自動(dòng)處理子命令輸出結(jié)尾、比內(nèi)置大 500 倍的輸出 Buffer、更好的 Windows 支持、在父進(jìn)程退出時(shí)自動(dòng)清理子進(jìn)程等，經(jīng)常用 Node.js 來寫腳本的同學(xué)可以考慮看看。

BriteCharts 是一款基于 D3.js V4 版本的圖表繪制庫，研究過 D3 的同學(xué)可能都會覺得 D3 就是繪圖領(lǐng)域里面的 DOM，直接使用它你的自由度更大，但是繪圖成本相對更高。而 BriteChart 這樣的庫幫你封裝了常見的圖表，可以用非常直觀的方式在頁面中渲染。整個(gè)倉庫使用 ES6 編寫，并且測試覆蓋率也非常好，源代碼本身就是個(gè)不錯(cuò)的學(xué)習(xí)資源。如果尋找其他 D3.js 圖表庫的同學(xué)可以去搜搜 C3.js 和 NVD3.js。

Umar Hansa 在 Render Conf 2017 上所做的分享，主題是基于 Chrome Dev Tools 的現(xiàn)代前端工作流，里面的干貨非常多，如果你想徹底掌握 Chrome Dev Tools，這篇絕對不容錯(cuò)過。內(nèi)容涵蓋：FPS Meter、Paint Profiler、Timeline Recorder、Source Code Profiling 等 15 個(gè)主題。

Webpack 無疑是前端社區(qū)中最受歡迎的 JS 應(yīng)用打包工具，因?yàn)閮?nèi)置了太多的功能，它的學(xué)習(xí)曲線也非常的陡峭，讓它跑起來就要費(fèi)不少的功夫，跟別提用它來做更多的事情了，Kent C. Dodds 在這個(gè)系列視頻教程中會用實(shí)例幫你理解 Webpack 最常用的功能，以及如何優(yōu)化 Webpack 的配置讓它跑的更快。

對標(biāo)題我先稍作解釋，Git 的某些操作可能會打開系統(tǒng)中的某個(gè)編輯器讓你填寫內(nèi)容，典型的就是 commit 的時(shí)候如果沒指定 commit message，就會默認(rèn)打開 VI 讓你填寫，如何把填寫 commit message 的編輯器替換成我自己喜歡用的 Vim、Atom、VSCode？改下全局配置就行了，高票答案中有兩個(gè)方案，要仔細(xì)看。

打日志可能是眾多調(diào)試手段中最古老，關(guān)鍵時(shí)候也最有效的手段，相比而言 React Native 開發(fā)時(shí)的日志打法有很多，你都用過哪些？哪些比較好用？看看這篇問答。

可能部分同學(xué)遇到過，在真機(jī)調(diào)試 React Native 應(yīng)用時(shí)，發(fā)現(xiàn)調(diào)試選項(xiàng)中并沒有 Live Reload 和 Hot Module Reloading 的選項(xiàng)，這會對開發(fā)調(diào)試的效率產(chǎn)生很大的影響，問題產(chǎn)生的原因主要在網(wǎng)絡(luò)，但是解決的辦法超過 3 個(gè)步驟。

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

Happy Hacking