转载

掘金· 翻译计划｜JavaScript 生态之乱象

原文链接 : I’m a web developer and I’ve been stuck with the simplest app for the last 10 days
原文作者 : pistacchio
译文出自 : 掘金翻译计划
译者 : woota
校对者: iThreeKing , sqrthree

（原标题：作为一名 web 开发者，我已经被一个极度简单的 app 卡了 10 天）

我是一名全职开发者。我大部分工作的内容是网站的全栈开发。

偶尔，我也用 Python 或 Ruby 写写后端的服务器，有时写点儿 C# 。我还用 C++ 或 Node.js 开发一些命令行工具；我发现 Clojure 很有意思，我接触 Web 开发是在多年以前，那时用的是 Perl 和 PHP 。

而在我首次进入职业开发道路的时候，我写了几年 Java 。

在我第一次接触 JavaScript 时，它主要用来往网页上写“ 现在是几点 ”这样的东西。我说的是上个世纪 90 年代，每个人都想让自己的页面变得更加有趣， 动态地 告诉偶尔到来的访客今天是周几（哇！），并以此为乐。

这些年来，我们都发现 JavaScript 能做的远不止这些，我们都想要全效的 DHTML (Dynamic HTML)。

是的，我们的 HTML 变得充满 动态效果 了！

在过去的几年中，我用过一些不同的框架开发过几个比较大型的单页应用，有时候忙起来，JavaScript 代码组织的极烂，把 jQuery 调用写得到处都是。

大概 10 天前，我想开发一个简单的 SPA 给自己用，把一个小工具改写成一个小项目。这一般也就是两三天的功夫。

在过去的这半年，我一直在用 C# 写一个桌面应用。这是一个相当无聊的工作流管理程序，有一个网络服务后台和 winform 客户端。

当我起念要开发这个小型 web 应用的时候，我便预见这是一个尝试新技术的好机会，我曾在网上读到过一些，以此刷新我的 web 开发工具库并收获一点乐趣。想想都觉得激动，没什么太复杂的东西，也不用太费劲。

可事实证明，我根本无法着手编写这个简单的项目，因为我陷入了一种 分析瘫痪循环

到目前为止，我已经有了四到五次“失败的开始”。问题的核心是在选择上，以及要如何从过度繁多的工具库中挑选出合适的工具。

谁想写这样的代码

MyNotReallyClass.prototype.getCarrots = function () {}

ES6 都快落地了，它有了近似真正的类，并且 差不多 得到了完好的支持？市面上有那么多的打包工具，谁还想写十行

<script src="library-12.js"></script>

在页面的顶部？有那么多的框架帮我们组织应用，谁还要写这样的代码

$(‘.carrots’).innerHTML(myJson.some.property[3])

谁又想忽视如今编写浏览器端 Javascript 代码有了 Node.js 命令行工具辅助的事实？

所以我深入研究这些新事物，这些我曾经用过现在忘了或是发展了的事物。可天知道，除了一点 HTML 表单，我一直没能取得任何的进展。

请记住，这是一个简单的个人项目，我主要是想找点儿乐子，因此我的脑袋被设置为零容忍模式。一旦什么东西令我厌烦，我就抛开它去寻找其它的东西来抚平我的体验。

这是今天在 Javascript 领域尝试新技术我所期待的几个东西，例举如下：

首先，我想试试 Typescript 。在过去几个月中我一直写的是 C# ，我知道有一门静态类型的语言是多么棒的一件事：它让你对自己的代码更加自信。重构起来更为便利，IDE 自动补全，不论你写的类有多么的混乱，你都只要写一半的代码。

我需要两个外部的库来实现核心功能。它们不在 DefinitelyTyped 中，因此我花了半天时间学习 .d.ts 文件以及为这几个库写包装类。谈不上富有成效，但我还是写出来了。

我一开始就想用 Mocha 添加一些测试。这里是噩梦的开端。我尝试为项目添加多个 .tsconfig.json 文件，但 JetBrains WebStorm 不支持，因此编译器不断地把测试代码和实际代码打包在一起。我开始阅读指导，查看 gist ， StackOverflow 的相关问题。 使用这个 Gulp 配置文件。你必须先编译脚本，然后再对它们进行测试。但如果你测试也是用 Typescript 写，那你还得用这个 Gulp 插件不过它对 watchify 的支持不好 。第一天过后，我有了一堆被合并、编译过的文件， src 和 dest 、 test 文件夹触发了一些不必要的任务。我已经弄不懂底层究竟是怎么一回事。当编译代码时，依赖在哪里，我是应该 import 还是 require 或是 reference 这个文件？ 我去他大爷的 。

之前，我曾在一个小项目中简单地用过一点 React ，体验还不错。我想再试试它。为此我添加了一些 Gulp 配置。这里的问题出在了 React 本身。我已经设计好了我的数据模型，但是 React.js 喜欢把数据模型、状态、属性混在一起，为此我不得不重新思考这个问题。我的应用很简单但是表单很密集。你猜怎么着，React 官方文档说：

如果你是初次使用这套框架，注意 ReactLink 在绝大多数的应用中是用不到的，而且你应该小心使用它。在 React 中，数据单向流动：从拥有者到子对象。这是因为在冯·诺依曼计算模型中数据只能单向流动。你可以把它当做“单向数据绑定”。

说得很有道理的样子，但是一个表单，尤其是一个重表单，本质上就是一个双向绑定的东西。因此，React 在没有插件和 mixin 的情况下，对大量输入的支持不好。你得装饰所有的 input 框来支持这个功能。很快，事情就变得让人厌烦起来。还有，说到 mixin ，我用的是 ES6 但 React 的类不支持。 去他大爷的 。

所以，我需要大量的双向数据绑定，对吗？ Knockout 在这方面做得很出色，我也有过一点使用它的经验。再一次，我尝试使用 ES6 的类，但是 this 的绑定又乱作一团。不用类的话，代码很快变得混乱起来。在尝试了 React 后，Javascript 和 HTML 混起来看丑的一逼。HTML 包含在 Javascript 中，不过这还算有点道理。至少你能够组织合理的逻辑单元，并使它们内聚。

（这是一条愤怒的旁注，似乎不论我选择什么构建工具，都需要有一些观察任务跑在后台，来进行编译，检查，打包，测试。我在编辑器里写了一些东西，然后 Cmd+S 保存，Cmd+Tab 切回浏览器，再 Cmd+R 刷新页面，可我并没有察觉到有什么变化。你猜怎么着，有时候我动作比编译器快，或者是“观察”任务没有检测到我的编辑动作，抑或是它抛出了一个异常。）

所以，甚至在我开始写一行代码之前，就不得不先选好我所要用到的工具（依赖管理，打包，测试，构建等等），而且每一种选择都有众多的替代品，它们要么相互竞争，要么相互补充，或多或少更接近标准，或多或少更为成熟，又或者两个合在一起用效果多多少少更好一点。

你想使用哪种风格的 Javascript ？你要用转译器吗？用什么语言？要用 Grunt 吗？Gulp？Bower？Yeoman？Browserify？Webpack？Babel？Common.js？Amd？Angular？Ember？Linting？我究竟在说什么？我是不是把东西给搞混了？我困惑了吗？去他大爷的？对，去他大爷的。

如果你还认同我所说的话，现如今，制作一个 web-app 就好像在玩一个非常困难的 互动小说 游戏（如魔城）。让我们穿回多年以前来开发一个程序

你置身于一个程序房间。你只能开发命令行程序。出现在你面前的是 C 语言和 Assembly 语言

> 用 C 语言

好的，你可以开始编写你的程序

现在，让我们回到 2016 年：

你置身于一个 web 应用的房间。

> 开发 web 应用

你是要开发游戏吗？不妨考虑使用 Unity 或者 GameMaker 或类似的可为 web 导出的软件

> 开发 web 应用

你有没有想过用 web 技术来开发桌面程序呢？比如，你可以使用 NW.js 或 Electron

> 开发 web 应用

几门语言出现在了你的面前。你看到 Javascript，Coffescript，Typescript，Clojurescript，Dart，asm.js。如果你想浏览总共127种可用语言，输入“更多”。