前端周刊第 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