很多不明真相的群众会说：JavaScript 在开发大型应用时表现很差，因为它甚至识别不了变量的类型，而且对于重构也非常不友好。
有人说 JS 很慢，现在它变快了。有人说我们没有开发工具，现在我们拥有最好的工具。有人说它开发大型应用时烂透了，但我们就是要用 JS 亮瞎他们的双眼。
当我开始接触 JavaScript 时，业界只有一种浏览器可以支持：NetScape。它完全霸占了整个市场，直到微软开始通过操作系统来普及 IE。在那个时代，说 JavaScript 的开发工具非常不给力一点都没有错。
但是这种局面并没有持续很久，今天，在我见过的所有编程语言中，JavaScript 拥有最优秀的开发工具生态系统。
请注意我并没说“最优秀的 IDE（集成开发环境）”。如果你要找的是一个集合了你要的所有开发工具的 IDE，那就去看看微软的 Visual Studio for C#。和 Unity 一起使用会更给力。我自己没有用过，不过据可靠开发者所说，它非常稳定。
我用过 C++ 和 Unreal Game Engine。第一次试用的时候，我就意识到 web 平台开发工具还有一段很长的路要走。
但是从那时起，我们已经走了很长的路，我们现在用的 JS 工具让高级 IDE 的自动补全看起来像个婴儿的咀嚼玩具。尤其是，JavaScript 的运行时工具在所知的语言中没有任何对手。
在我见过的所有编程语言中，JavaScript 拥有最优秀的开发工具生态系统。
开发工具是什么？
开发工具是让开发人员过的更轻松的一些软件。传统上我们一般认为主要包括集成开发环境、代码检查工具、编译器、调试器和性能测试工具。
但是 JavaScript 是一种动态语言，伴随它动态本质而来的是对更多运行时开发者工具的需求。毫无疑问 JavaScript 并不缺少这种工具。
在这篇文章中，我将将一些运行时工具，以及一些能够加强程序运行时可见性和调试性的库。开发工具和库之间的界限开始变得模糊。随之而来的是令人兴奋的结果。
TL;DR quick list:
- Atom & atom-ternjs
- Chrome Dev Tools
- PageSpeed Insights
- Firefox Developer Edition
- BrowserSync
- TraceGL
- ironNode
- ESLint
- rtype (the spec) & rfx (the library) Warning: These are unfinished developer previews.
- Babel
- Greenkeeper.io & updtr
- React
- Webpack + Hot module replacement
- Redux + Redux DevTools
关于工具
你的开发生活将会围绕着两个东西：编辑器和运行时环境（比如，浏览器、平台、和你为之编码的设备）。
编辑器：我的开发职业生涯是从使用体积大、集成度高的 IDE 开始的，比如 Borland IDE，Microsoft Visual Studio，Eclipse，WebStorm。在我看来，这其中最好的当属 WebStorm 和 Visual Studio。
但是我受够了这些 IDE 带来的臃肿，所以近几年来，我都是用更加简单不花哨的编辑器来进行编码。主要是 Sublime Text，但最近我又换用了 Atom。你还需要 atom-ternjs 来开启 JavaScript 智能识别。看看这篇《SuperChange JavaScript Development in Atom》来了解许多很棒的 Atom 插件。
你可能还想看一看 Visual Studio Code。一个瘦身版 Visual Studio，给那些喜欢像 Sublime Text 和 Atom 一样最轻量可扩展编辑器的人的。
我还会在终端使用 vim 来进行一些快速的编辑操作。
调试器：我怀念那些在我开始 web 编程时的集成调试器，但是 Chrome 和 Firefox 的团队已经将运行时调试提升到了一个新的高度。现在好像每个人都知道 Chrome 的开发者工具并了解如何逐步跟踪代码，但是你知不知道它在高级性能和内存分析和审查还有优秀的特性。你用过 flame charts 或者 dominators view 吗？
说到性能审查，你还需要了解 PageSpeed Insights：
（https://www.youtube.com/watch?list=PLOU2XLYxmsILKwwASNS0xgfcmakbK_8JZ&v=bDUDuQy3R7Y）
除了这些优点，还有很多很棒的特性，比如可以支持动态编辑 CSS，还有帮助你编辑动画效果。快去了解 Chrome 的开发者工具，你不会后悔的。
（https://www.youtube.com/watch?v=hJdqtBeAUNI）
Firefox 也不甘示弱，它有一款针对开发者专用的浏览器。Firefox Developer Edition：
（https://www.youtube.com/watch?list=PLo3w8EB99pqLRJBWRCoyGTIrkctoUgB9W&v=g9k4IrtaPMs）
BrowserSync：BrowserSync 是一款测试响应式布局非常好用的工具，它可以让你一次操作多种浏览器。换句话说，你可以用 BrowserSync CLI 模拟在电脑、平板和手机打开你的应用。
你可以让它监视文件，并在文件修改的时候自动重载同步刷新浏览器。像滚动、点击和表单交互等动作也会跨设备同步，因此你可以很容易地测试应用的工作流，保证各个平台的一切都正常工作。
（https://www.youtube.com/watch?v=heNWfzc7ufQ）
TraceGL：TraceGL 是一种运行时调试工具，它可以让你在软件中的方法实时调用时观察它们，而不是手动逐步跟踪代码，一次走一步。它非常强大并且极其实用。
（https://www.youtube.com/watch?v=TW6uMJtbVrk）
ironNode：ironNode 是一款基于 Electron 构建 的 Node 桌面调试应用，Electron 是跨平台桌面运行时工具， Atom 编辑器就是用它写的。和 node-inspector 一样，ironNode 让你利用和 Chrome 的开发者工具相似的功能，来追踪你的代码。
（https://www.youtube.com/watch?v=pxq6zdfJeNI）
配合 Babel ，调试下面这个 “debug.js” 脚本：
|
1 2 |
require('babel-core/register'); require('./index'); |
启动调试器：
|
1 |
iron-node source/debug.js |
用起来神奇得很。
代码检查：ESLint 是我迄今为止在所有语言中用过的最好的代码检查工具。我喜欢它更甚于 JSHint，更不用说 JSLint。如果你还不确定用什么，那么别纠结了就用 ESLint 吧。为什么它这么厉害呢？
可配置性非常强——每一个选项都可以启用或者禁用。甚至可以给他们加参数。
可以创建你自己的规则。你有没有自己的编码风格，想施行到团队上？可能会有相应的规则，但是如果没有，你可以给自己写一个。
支持插件——你在用一些特殊的语法么？ES6+ 或者未来 JavaScript 版本的试验性特性么？没问题。用于小 UI 组件的 React JSX 语法？没问题。你自己试验性 JavaScript 语法扩展？没问题。
类型支持：JavaScript 是弱类型语言，也就是说你没必要声明所有的变量类型。在像 C++ 和 Java 的语言中声明所有的变量这么多年之后，我一开始用 JavaScript 就瞬间感受到肩膀上的重量明显轻了许多。类型声明使得你的源文件更凌乱，没有它们，函数反而更容易理解。
和人们普遍的认识相反，JavaScript 确实是有类型的，但是 JavaScript 是针对“值”有类型，而不是变量。变量类型可以通过类型推理来识别和预测，这就是 Atom 的 TernJS 插件的作用。
也就是说，类型注释和签名声明确实起到了作用：它们为开发者提供了好的文件编制。它们还可以为 JavaScript 引擎和编译器作者提供一些重要的性能优化。JavaScript 程序员开发应用时，你不需要为提高性能而担心。把这些都交给引擎和规范团队吧。
但是关于类型注释，我最喜欢的是运行时类型反射，和可以用它激活的运行时开发工具。想解开这些工具的真面目，可以读一下这篇《The Future of Programming: WebAssembly and Life After JavaScript》。
多年来，我使用 JSDoc 进行注释、文件编制和类型预测。但是我受够了它恶心的限制。感觉它像是为其他语言而写然后硬塞进 JavaScript 的（事实上也正是如此）。
TypeScript 的结构类型解决方案也让我印象深刻。
尽管 TypeScript 有以下这些问题：
它不是标准的 JavaScript，选择 TypeScript 就意味着选择它的编译器和工具生态系统——通常会和那些要和 JavaScript 标准共存的解决方案说再见。
它是完全基于类的。一个尴尬的适用于 JavaScript 的原型和对象组合。
它没有提供运行时解决方案，不过，他们正在用新的 JavaScript 反射 API 试验特性进行研究。但是你将要依赖非常试验性，可能符合也可能不符合标准的标准特性。
基于这些理由，我启动了 rtype 和 rfx 项目（尚未完工）。rtype 是设计用来给那些已经了解 JavaScript 的读者自我记录的一种函数和接口签名规范。rfx 是用于封装你现有 JS 函数和对象用来添加类型元数据的一个库。它还可以有选择地添加自动运行时的类型检查。我正积极与人们合作改进 rtype 和 tfx。欢迎你也一起贡献。
要记住它们现在还在初始阶段，短时间内肯定会有一些重大变化。
Babel：Babel 是一种编译器，它可以让你在现在的 JavaScript 代码中使用 ES6+ 尚未支持的特性、JSX 等等。它的工作原理是将代码转换为等价的 ES5。一旦你开始使用，我敢说你会很快对那些新颖语法上瘾的，因为 ES6 增加了很多非常有用的语法规则，比如解构赋值、默认参数值、剩余和展开参数、简洁对象字面量，等等……看看这篇《How to Use ES6 for Universal JavaScript Apps》来详细了解。
Greenkeeper.io：Greenkeeper 监控你的项目依赖，并且自动向你的项目提交请求。你要确保已经设置了 CI 解决方案来自动检测提交请求。如果测试通过，只需要点击“merge”即可搞定。如果失败了，你可以手动跟进，找出哪里需要修改，或者直接关掉 PR。
如果你更喜欢亲力亲为，那么看看 updtr。我建议你在第一次使用 Greenkeeper 之前，在项目上运行 updtr。
Webpack：Webpack 会将模块和依赖打包成针对浏览器的静态资源。它支持大量有趣的特性，比如模块热插拔，它可以让当前浏览器中的代码在你修改文件时自动更新，而不用刷新页面。模块热插拔是迈向真正持续实时开发反馈回路的第一步。如果你没在使用它，那么你应该开始用了。为了快速入门，看看 Universal React Boilerplate 项目中的 webpack 配置。
React：有一点跑题，因为 React 严格来说不算是开发者工具。它倒跟 UI 库有更多的共性。把 React 看成是现代版 jQuery：一种操作 DOM 的简单工具。但是 React 的能力可不仅限于此。它实际上是一个 UI 抽象层，可以将你从 DOM 中抽象出来。实际上，除了 DOM 你可以用 React 做很多事，包括原生移动端 UI 接口（iOS 和 Android），WebGL，canvas，等等。Netflix 将它用于 Gibbon 电视设备渲染接口。
那我为什么会将它列为开发者工具呢？因为一些优秀的开发者工具使用React 的抽象层来使得未来经验的开发者工具成为可能，特性有热加载（页面无刷新更新你当前运行的代码），时间旅行，等等……阅读不要停！
Redux + Redux 开发者工具：Redux 是受 React/Flux 架构和函数式编程中纯函数理念启发的一种应用状态管理库。它也是开发者工具列表的又一个库？没错。原因如下：
（https://www.youtube.com/watch?v=xsSnOQynTHs）
Redux 和 Redux 开发者工具使得一些针对当前运行代码的真正下一代调试交互成为可能。它可以针对应用内发生的动作为你提供非常棒而且易于理解的视图：
它甚至可以让你用 time travel 调试特性来从时间上来回转变。这是它用 slider 视图时的样子：
结论
在我见过的所有语言中，JavaScript 拥有最丰富的开发者工具。就像你看到的，比起集成的IDE 环境，这更像东拼西凑的，但是我们正经历着 JavaScript 发展的寒武纪大爆炸时期。未来，我们或许可以看到更多集成开发者工具产品。同时，我们也将一窥编程的未来。
随着 JavaScript 在统一应用状态和不变性（这就是让 Redux 开发者工具中 time travel 调试成为可能的特性）走得更深，我预测我们能够看到更多实时编程功能上线。
我也相信，我们正在创建的应用和我们用来创建应用的开发环境之间的界限会随着时间的推移变得模糊。比如，Unreal 游戏引擎可以将编辑的蓝图融入游戏引擎本身，这可以让开发者和设计者从正在运行的游戏内部创建复杂的行为。我想，未来我们也会慢慢开始在 web 和原生移动应用中看到这些特性。
在我了解的任何语言中，JavaScript 的代码审查，运行时监视和 time travel 调试特性难逢敌手，但是我们还可以做得更多，将类似 Unreal Engine 4 中蓝图系统的工具带给我们。我等不及想看到接下来会发生什么了。
