2016 年学 JavaScript 的感受
2016 年学 JavaScript 的感受
原文：https://medium.com/hackernoon/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
没有JavaScript框架是在撰写本文期间创建的。
以下灵感来自 Circle CI 的文章《是未来》。这里 可以阅读原文 。这篇文章只是一种观点，就像任何 JavaScript 框架一样，不应该太认真。
嘿，我得到了这个新的 web 项目，但是老实说，我已经有几年没有编写多少 web 代码了，我听说这个领域发生了一些变化。你是这里最新的网络开发者，对吗？
实际术语是前端工程师，但是的，我是合适的人选。2016 年做 web。视觉化、音乐播放器、踢足球的无人驾驶飞机，应有尽有。我刚从 JsConf 和 ReactConf 回来，所以我知道创建 web 应用程序的最新技术。
酷毙了。我需要创建一个页面来显示用户的最新活动，所以我只需要从 REST 端点获取数据，并将其显示在某种可过滤的表中，如果服务器中有任何变化，就更新它。我在想也许可以使用 jQuery 来获取和显示数据？
天哪，没有人再用 jQuery 了。你应该试着学习反应，这是 2016 年。
哦，好吧。什么反应？
这是一个超级酷的库，由脸书的一些人制作，它真的给你的应用程序带来了控制和性能，允许你非常容易地处理任何视图变化。
听起来不错。我可以使用 React 显示来自服务器的数据吗？
是的，但是首先你需要在你的网页中添加 React 和 React DOM 库。
等等，为什么是两个图书馆？
一个是实际的库，第二个是用来操作 DOM 的，现在你可以在 JSX 描述了。
JSX？什么是 JSX？
JSX 只是一个 JavaScript 语法扩展，看起来很像 XML。这是描述 DOM 的另一种方式，把它想象成一个更好的 HTML。
HTML 怎么了？
——都 2016 年了。再也没有人直接编写 HTML 代码了。
没错。总之，如果我添加这两个库，我就可以使用 React？
不完全是。你需要添加巴别塔，然后你就可以使用反应。
另一个图书馆？巴别塔是什么？
-哦，Babel 是一个 transpiler，允许你针对特定版本的 JavaScript，而你用任何版本的 JavaScript 编码。要使用 ReactJS，你不必包含 Babel，但除非你这样做，否则你会坚持使用 ES5，让我们现实一点，现在是 2016 年，你应该像其他酷孩子一样在 ES2016+中编码。
ES5？ES2016+？我在这里迷路了。什么是 ES5 和 ES2016+？
-ES5 代表 ECMAScript 5。这是大多数人瞄准的版本，因为它已经被大多数浏览器实现了。
ECMAScript？
-是的，你知道，在 1995 年首次发布之后，脚本标准 JavaScript 于 1999 年建立，当时 JavaScript 被命名为 Livescript，仅在 Netscape Navigator 中运行。那时候非常混乱，但谢天谢地现在事情很清楚了，我们已经有了这个实现的 7 个版本。
7 个版本。真的。而 ES5 和 ES2016+是？
——分别为第五版和第七版。
等等，第六个怎么了？
你是说 ES6 吗？是的，我的意思是，每个版本都是前一个版本的超集，所以如果你使用的是 ES2016+，你就在使用以前版本的所有功能。
没错。那为什么要用 ES2016+而不是 ES6 呢？
-嗯，你可以使用 ES6，但要使用 async 和 await 等酷功能，你需要使用 ES2016+。否则，您将不得不使用带有协程的 ES6 生成器来阻塞异步调用，以获得正确的控制流。
我不知道你刚才说了什么，所有这些名字都很混乱。看，我只是从服务器上加载一堆数据，我过去可以从 CDN 上加载 jQuery，并通过 AJAX 调用获得数据，为什么我不能这样做呢？
-2016 年了，没人再用 jQuery 了，它最终变成了一堆意大利面条代码。每个人都知道。
没错。所以我的选择是加载三个库来获取数据并显示一个 HTML 表。
好吧，你包括了这三个库，但是用一个模块管理器把它们捆绑起来，只加载一个文件。
我明白了。什么是模块管理器？
-定义取决于环境，但在 web 中我们通常指支持 AMD 或 CommonJS 模块的任何东西。
瑞莱特。而 AMD 和 CommonJS 是…？
-定义。有很多方法可以描述多个 JavaScript 库和类应该如何交互。你知道，出口和需求？您可以编写多个定义 AMD 或 CommonJS API 的 JavaScript 文件，并且可以使用 Browserify 之类的工具将它们捆绑在一起。
好的，这很有道理…我想。什么是 Browserify？
-这是一个允许你将 CommonJS 描述的依赖项捆绑到可以在浏览器中运行的文件的工具。它的创建是因为大多数人在 npm 注册表中发布这些依赖关系。
国家预防机制登记处？
这是一个非常大的公共存储库，聪明人将代码和依赖项作为模块放在这里。
比如 CDN？
不完全是。它更像一个中央数据库，任何人都可以发布和下载库，所以你可以在本地使用它们进行开发，然后如果你想的话，可以将它们上传到 CDN。
哦，就像鲍尔！
-是的，但是现在已经 2016 年了，没人再用 Bower 了。
哦，我明白了…那么我需要从 npm 下载库了？
是的。举个例子，如果你想使用 React，你可以下载 React 模块并把它导入到你的代码中。几乎所有流行的 JavaScript 库都可以这样做。
哦，像有棱角的！
——棱角分明就是这样的 2015。但是是的。Angular 将会出现在那里，旁边是 VueJS 或 RxJS 以及其他很酷的 2016 库。想了解这些吗？
让我们坚持使用 React，我现在已经学到太多东西了。所以，如果我需要使用 React，我从这个 npm 中获取它，然后使用这个 Browserify？
-是的。
仅仅抓住一堆依赖项并把它们绑在一起似乎过于复杂。
是的，这就是为什么你使用 Grunt 或 Gulp 或花椰菜这样的任务管理器来自动运行 Browserify。见鬼，你甚至可以用含羞草。
咕哝？大口？西兰花？含羞草？我们现在到底在说什么？
-任务管理器。但是他们不再酷了。我们在 2015 年使用它们，然后我们使用 Makefiles，但现在我们用 Webpack 包装所有东西。
Makefiles？我认为这主要用于 C 或 C++项目。
是的，但显然在网络上我们喜欢把事情变得复杂，然后回到基础。我们每年都这么做，等着瞧吧，一两年后我们会在网上组装。
叹气。你提到了一个叫网络包的东西？
这是浏览器的另一个模块管理器，同时也是一个任务运行器。就像是 Browserify 的更好版本。
哦，好吧。为什么更好？
-好吧，也许不是更好，只是更坚持你的依赖关系应该如何被绑定。Webpack 允许你使用不同的模块管理器，而不仅仅是 CommonJS，比如本地 ES6 支持的模块。
我对整个 CommonJS/ES6 的事情感到非常困惑。
-每个人都是，但是你不应该再关心 SystemJS 了。
耶稣基督，另一个名词-js。好的，这个系统是什么？
-与 Browserify 和 Webpack 1.x 不同，SystemJS 是一个动态模块加载器，它允许您将多个模块绑定在多个文件中，而不是将它们捆绑在一个大文件中。
等等，我以为我们想在一个大文件中构建我们的库并加载它！
是的，但是因为现在 HTTP/2 即将到来，多个 HTTP 请求实际上更好。
等等，所以我们不能只添加 React 的三个原始库吗？？
不完全是。我的意思是，你可以把它们作为 CDN 的外部脚本添加进来，但是你仍然需要包括 Babel。
叹气。这很糟糕，对吗？
是的，你将包括整个巴别塔核心，这对于生产来说是没有效率的。在制作过程中，你需要执行一系列的前期任务来为你的项目做好准备，让召唤撒旦的仪式看起来像煮鸡蛋的食谱。你需要缩小资产，丑化它们，在文件夹上方嵌入 css，延迟脚本，以及-
我知道了，我知道了。所以，如果你不想在 CDN 中直接包含这些库，你会怎么做呢？
我将使用 Webpack + SystemJS + Babel 组合从 Typescript 中转换它。
打字稿？我以为我们是用 JavaScript 编码的！
-Typescript 是 JavaScript，或者更好地说，是 JavaScript 的超集，更具体地说是 ES6 版的 JavaScript。你知道，我们之前谈过的第六个版本？
我以为 ES2016+已经是 ES6 的超集了！为什么我们现在需要这个叫做打字稿的东西？
——哦，因为它允许我们使用 JavaScript 作为一种类型化语言，并减少运行时错误。现在是 2016 年，你应该给你的 JavaScript 代码添加一些类型。
而 Typescript 显然做到了这一点。
-Flow 也一样，虽然它只检查类型，而 Typescript 是需要编译的 JavaScript 的超集。
唉…而心流是？
这是一个由脸书的一些人做的静态类型检查器。他们用 OCaml 编码，因为函数式 编程 很牛逼。
OCaml？函数式编程？
这是现在酷小孩用的，你知道，2016 年？函数式编程？高阶函数？Currying？纯函数？
我不知道你刚才在说什么。
——开头没人做。看，你只需要知道函数式编程比 OOP 更好，这就是我们在 2016 年应该使用的。
等等，我在大学学过 OOP，我觉得那很好？
——Java 在被甲骨文收购之前也是如此。我的意思是，OOP 在过去很好，今天仍然有它的用途，但现在每个人都意识到修改状态等同于踢婴儿，所以现在每个人都转向不可变对象和函数式编程。Haskell 的人多年来一直这样称呼它，不要让我从 Elm 的人开始，但是幸运的是，现在在 web 上我们有了像 Ramda 这样的库，允许我们在普通的 JavaScript 中使用函数式编程。
你只是为了它而放弃名字吗？兰达是什么鬼东西？
不，拉姆达。比如 Lambda。你知道，那个大卫·钱伯斯的图书馆？
哪个大卫？
大卫·钱伯斯。很酷的家伙。玩卑鄙的政变游戏。拉姆达的撰稿人之一。如果你真的想学习函数式编程，你也应该去埃里克·梅耶尔看看。
埃里克·梅耶尔是……？
——函数式编程的家伙也一样。很棒的家伙。他有很多演讲，在演讲中他用这件奇怪的颜色衬衫来贬低敏捷。你也应该看看 Tj、吴家浩·肯纳斯、辛德雷·索胡斯、保罗·爱尔兰、艾迪·奥斯马尼的作品
好的。我要打断你。所有这些都很好，但我认为所有这些都太复杂了，不需要获取数据并显示出来。我很确定我不需要认识这些人或者学习所有这些东西来创建一个包含动态数据的表。让我们回来作出反应。我如何用 React 从服务器获取数据？
嗯，你实际上不用 React 获取数据，只是用 React 显示数据。
哦，该死的我。那么你用什么来获取数据呢？
-使用 Fetch 从服务器获取数据。
你说什么？你用 Fetch 来取数据？不管是谁给这些东西命名，都需要一本辞典。
-我知道对吗？它是对服务器执行 XMLHttpRequests 的本机实现的名称。
哦，那么阿贾克斯。
-AJAX 只是 XMLHttpRequests 的使用。但是当然。Fetch 允许你做基于 AJAX 的 in promises，然后你可以解决以避免回调地狱。
回调地狱？
是的。每次对服务器执行异步请求时，您都需要等待它的响应，这使得您需要在函数中添加一个函数，这被称为来自地狱的回调金字塔。
哦，好吧。这个承诺解决了这个问题？
——确实。通过承诺操作回调，您可以编写更容易理解的代码，模拟和测试它们，同时执行并发请求并等待所有请求加载完毕。
这可以用 Fetch 来完成吗？
-可以，但前提是您的用户使用 evergreen 浏览器，否则您需要包含 Fetch polyfill 或 use Request、Bluebird 或 Axios。
看在上帝的份上，我需要知道多少个图书馆？他们有多少人？
——是 JavaScript。一定有成千上万的图书馆做着同样的事情。我们知道图书馆，事实上，我们有最好的图书馆。我们的图书馆很大，有时我们会在里面放上盖伊·菲力的照片。
你刚才是说盖伊·菲力吗？让我们结束这一切吧。这些蓝鸟，请求，Axios 库是做什么的？
-它们是执行返回承诺的 XMLHttpRequests 的库。
jQuery 的 AJAX 方法不是也开始返回承诺了吗？
-2016 年我们不再用“J”字了。只需使用 Fetch，当它不在浏览器中时 polyfill，或者使用 Bluebird、Request 或 Axios。然后在一个异步函数中用 await 管理 promise，这样就有了合适的控制流。
这是你第三次提到等待，但我不知道它是什么。
Await 允许你阻塞一个异步调用，允许你更好地控制何时获取数据，并提高代码的可读性。这太棒了，你只需要确保你在 Babel 中添加了 stage-3 预置，或者使用 syntax-async-functions 和 transform-async-to-generator 插件。
这太疯狂了。
不，疯狂的是你需要预编译类型脚本代码，然后用 Babel 转换它来使用 await。
瓦特？它不包含在 Typescript 中？
-它在下一个版本中可以，但从 1.7 版本开始，它只针对 ES6，所以如果你想在浏览器中使用 await，首先你需要编译针对 ES6 的 Typescript 代码，然后编译针对 ES5 的 Babel。
此时我不知道该说什么。
-看，这很简单。用 Typescript 编写所有代码。所有使用 Fetch 的模块将它们编译成目标 ES6，用 Babel 在 stage-3 预置上传输它们，并用 SystemJS 加载它们。如果你没有 Fetch，polyfill，或者使用 Bluebird，Request 或者 Axios，用 await 处理你所有的承诺。
我们对容易有不同的定义。所以，通过这个仪式，我终于获取了数据，现在我可以用 React 显示它了，对吗？
你的应用程序会处理任何状态变化吗？
呃，我不这么认为。我只需要显示数据。
哦，感谢上帝。否则我将不得不向你解释 Flux，以及像 Flummox，Alt，Fluxible 这样的实现。虽然说实话你应该用 Redux。
我将跳过这些名字。同样，我只需要显示数据。
-哦，如果你只是显示数据，你不需要反应开始。有了模板引擎，你会过得很好。
你在开玩笑吗？你觉得这很好笑吗？你就是这样对待你爱的人的吗？
我只是在解释你可以用什么。
停下来。别说了。
-我的意思是，即使只是使用模板引擎，如果我是你，我还是会使用 Typescript + SystemJS + Babel 组合。
我需要在页面上显示数据，而不是执行 Sub Zero 的原始 MK deadline。只要告诉我使用什么样的模板引擎，我就会从那里开始。
-有很多，你熟悉哪个？
呃，不记得名字了。那是很久以前的事了。
-jTemplates？jQote？纯？
呃，没有印象。又一个？
-透明度？JSRender？MarkupJS？KnockoutJS？那个是双向绑定的。
又一个？
-PlatesJS？jQuery-tmpl？车把？有些人还在用。
也许吧。有和上一个相似的吗？
-小胡子，下划线？老实说，我想现在连洛达什都有了，但那是 2014 年的事了。
犯罪..也许是新的。
-玉？DustJS？
号码
-DotJS？EJS？
号码
-努恩朱克斯？ECT？
号码
-Mah，反正没人喜欢 Coffeescript 语法。翡翠？
不，你已经说了杰德。
我是说帕格。我是说杰德。我是说，杰德现在是帕格了。
叹气。不记得了。你会用哪一个？
——大概只是 ES6 原生模板字符串。
让我猜猜。这需要 ES6。
-正确。
这取决于我用什么浏览器需要巴别塔。
-正确。
如果我想在不添加整个核心库的情况下包含它，我需要将它作为一个模块从 npm 加载。
-正确。
这需要 Browserify 或 Wepback，或者最有可能是另一个叫做 SystemJS 的东西。
-正确。
除非是 Webpack，否则理想情况下应该由任务运行者来管理。
-正确。
但是，因为我应该使用函数式编程和类型化语言，所以我首先需要预编译 Typescript 或添加这个流东西。
-正确。
如果我想使用 await，就把它发送给 Babel。
-正确。
这样我就可以使用获取、承诺、控制流和所有魔法。
-如果不支持的话，别忘了多填充抓取，Safari 还是处理不了。
你知道吗？我想我们到此为止了。实际上，我想我完了。我已经厌倦了网络，厌倦了 JavaScript。
-那很好，几年后我们都将在 Elm 或 WebAssembly 中编码。
我将返回到后端。我无法处理这么多的变化、版本、版本、编译器和传输器。如果 JavaScript 社区认为任何人都能跟上这种趋势，那它就是疯了。
我听到了。你应该试试 Python 社区。
为什么？
-听说过 Python 3 吗？
更新:感谢指出错别字和错误，我会根据提示更新文章。在 中讨论 HackerNews 和Reddit。
