嘿，我最近接到一个Web项目，不过老实说，我这两年没怎么接触Web编程，听说Web技术已经发生了一些变化。听说你是这里对新技术最了解的Web开发工程师？
准确地说，我是一名「前端工程师」。不过你算是找对人了。我对今年的技术别提多熟了，前端可视化、音乐播放器、能踢足球的无人机，你尽管问吧。我刚去JS大会和React大会逛了一圈，没有什么新技术是我不知道的。
厉害。是这样的，我要开发一个网页，用来展示用户的最新动态。我想我应该通过后端接口获取数据，然后用一个table来展示数据，用户可以对数据进行排序。如果服务器上的数据变化了，我还需要更新这个table。我的思路是用jQuery来做。
可别用jQuery！现在哪还有人用jQuery。现在是年了，你绝对应该用React。
哦，好吧，React是什么？
React是一个非常厉害的库，Facebook的牛人写的。它能让页面更可控，性能极高，而且使用起来很简单。
听起来确实不错。我能用React展示服务器传来的数据吗？
当然可以，你只需要添加两个依赖，一个是React，一个是ReactDOM
额，等下，为什么是两个库？
React是我说的库，ReactDOM是用来操作DOM的。因为这些DOM是用JSX写的，所以需要一个专门的库来操作。
JSX？JSX是什么？
JSX是对JS的扩展，它看起来跟XML差不多，可以用来写HTML，你可以认为JSX是一种更优雅的HTML写法。
为什么不用HTML了……？
现在可是年啊，没有直接写HTML的。
对哦。好吧，加了这两个依赖，是不是就可以开始用React了？
不行哦。你需要添加Babel，然后才能用React。
Babel是另一个库？
嗯，Babel是一个转译工具，Babel能把你写的JS转译成任意版本的JS。你不一定非要用Babel，但是如果你不用的话，你就只能写ES5的语法了。你知道的，现在是年，你怎么能不使用ES+的语法呢？ES+多么酷啊。
ES5是啥？ES+又是啥？我有点晕。
ES5就是ECMAScript5。大部分人都会使用ES5，因为大部分浏览器都支持ES5。
ECMAScript是啥……
你晓得的，JS是年诞生的，而JS的标准是制定出来的。那时候JavaScript还叫做Livescript，只能运行在网景的浏览器里。那时真是混乱的年代，现在好了，我们有了JS的7个版本的规范。
7个版本？那ES5和ES+是？
分别是第5个版本和第7个版本。
诶，那第六个版本呢？
你说的是ES6。每个版本都是上一个版本的超集，所以你直接使用最新的ES+就好了。
对哦。为什么不用ES6呢？
好吧，你可以用ES6，但是你就用不到async和await这么酷的语法了。用ES+比较好。用ES6的话你就只能用generator来控制异步任务流了。
不知道你在说什么……你说了太多我听不懂的名词了。我只是想从服务器取点数据，我以前用jQuery挺好的，从CDN引入jQuery，我就能用AJAX获取数据了，现在不能这样做吗？
大哥，都年了，没人用jQuery好吗。所有人都知道用jQuery只会造出「意大利面条」一样的代码（不可维护）
好吧，所以我现在要加载三个库才能获取并展示数据。
对的，其实你可以用「模块管理器」把这三个库「打包」成一个文件。
哦，什么是模块管理器……
不同平台的模块管理器不同啦。前端的模块管理器一般指管理AMD或者CommonJS模块的东西。
好……吧，什么是AMD和CommonJS？
是两个定义。我们有很多方式来描述JS中多个库或类的交互方式，比如exports和requires。你可以按照AMD或者CommonJS的API来书写JS，然后用Browserify将它们打包。
听起来很有道理。不过，什么是Browserify？
是一个工具，用来将CommonJS形式的JS文件打包起来，放到浏览器里运行。用npm仓库的人发明了CommonJS。
npm仓库是什么……
是一个公开的仓库，用于放置可依赖的模块。
就像一个CDN么？
不太一样。它更像是一个数据库，每个人都能在上面发布代码，也能下载上面的代码。你可以在开发的时候将这些代码下载到本地来使用，必要的时候也能上传到CDN。
听起来像是Bower！
是的，不过现在是年了，没有人用Bower了……
好吧，我知道了，所以我应该用npm来安装依赖。
对的。我举个例子吧，如果你要使用React，你直接用npm安装React，然后在代码里导入React就可以了。大部分JS库都能这么安装。
嗯，Angular也可以。
Angular是年的事情了。不过今年Angular还没死，还有VueJS和RxJS等等，你想学一学么？
还是用React吧。我刚才已经学了够多东西了。所以我用npm安装React然后用Browerify来打包就好了？
是的。
这么做看起来有点过于复杂啊。
确实。这就是为什么你应该使用Grunt、Gulp或者Broccoli这样的任务管理工具，它们能自动运行Browserify。不对，你现在可以用Mimosa。
你在说什么……
任务管理工具。不过我们现在已经不用了。去年我们还在用，后来改成了Makefiles，但是现在我们用的都是Webpack。
我以为只有C/C++项目才会用Makefiles。
是的，不过显然我们做Web开发的，喜欢先把事情搞复杂，然后回归到最朴素的状态。每年我们都是这么搞的。你就看着吧，过不了两年，我们就可以在网页上写汇编了。
唉，你刚才说的Webpack是什么？
另一种模块管理工具，同时也是一个任务管理工具。你可以认为它是Browserify的加强版。
哦，好吧，为什么Webpack是加强版？
额，可能并没有加强吧。Webpack告诉你应该如何管理你的依赖，Webpack允许你使用不同的模块管理器，不只是CommonJS，甚至支持ES6模块。
这都是哪跟哪啊，我都被绕晕了。
大家都被绕晕了，不过等SystemJS出来了就好了。
天呐，又一个JS库，这是什么鬼？
呵呵，不像Browserify和Webpack1.x，SystemJS是一个动态的模块加载器。
等下，刚才不是说应该把所有依赖打包成一个文件吗？
话是这么说，但是等HTTP/2普及之后，不打包反而更好。
那为什么我们不直接在页面里添加React的三个依赖文件呢？
不行。你可以从CDN加载这些文件，但是你还是要在本地用Babel转译。
唉，这么鹾？
是的，你不能在生产环境上运行babel，你应该在发布到生产环境之前，运行一系列的任务，包括压缩、混淆、内联化CSS、延迟加载script……
我懂了我懂了。既然我不能直接用CDN，那么我应该怎么做？
我会考虑用Webpack+SystemJS+Babel来转译Typescript。
Typescript？我们不是在说JavaScript吗？！
Typescript也是JavaScript呀，它比JS更好用，是JS的超集，它是基于ES6的，就是我们刚才谈论的ES6，你还记得吧。
ES+已经是ES6的超集了，怎么又冒出来一个Typescript？
是这样的，Typescript能让我们写出「强类型」的JS，从而减少运行时的错误。年，我们应该让JS支持强类型了。
显然Typescript可以做到。
Flow也可以做到，区别是Typescript需要编译，而Flow只是检查语法。
唉，Flow是？
是一个静态类型检查器，就是Facebook的人写的。使用OCaml写的，函数式编程很叼的。
OCaml？函数式编程？
如今大牛都用这些东西，都年了，你懂的，函数式编程、高阶函数、柯里化、纯函数这些概念。
不知道你在说什么。
一开始大家都不知道。这么说吧，你只需要知道函数式编程比面向对象编程厉害，年我们就指着函数式编程了。
等下，我大学里学过面向对象编程，当时我觉得它还不错。
Java在被Oracle买下来之前也挺不错啊。我的意思是，面向对象以前是不错，现在依然有人用它，但是现在所有人都发觉状态变换是很难维护的，所以大家都开始用「不可变对象」和函数式编程了。Haskell的人已经用这套东西用了很久了，不过幸运的是Web开发领域里有Ramda这样的库，让我们用JS就可以进行函数式编程了。
你刚刚是不是又抛出了几个名词？Ramnda又是什么？
不是Ramnda，是Ramda，跟Lambda表达式有点像。是DavidChambers写的库。
谁？
DavidChambers，大神一个。blablabla
我不得不打断你一下了。这些东西看起来都不错，但是我觉得它们都太复杂，而且没必要。我只是想获取数据然后展示，我很确定这种情况下我不需要掌握这些知识。
回到React吧，用React我怎么从服务器获取数据？
额，React没有提供这个功能，你只能用React展示数据。
服了啊。那我怎么获取数据？
你用FetchAPI就可以了。
啥玩意？这个API的名字很烂啊。
我也觉得是啊。FetchAPI是浏览器提供的异步请求接口。
哦，那不就是AJAX。
AJAX只是使用XMLHttpRequest对象，但是FetchAPI可以让你用Promise风格来发起异步请求，帮你摆脱「回调地狱」。
回调地狱？
是的，每次你发起一个异步请求，就得等待它响应。这时你就得在函数里使用一个函数，这种嵌套调用就是回调地狱。
好吧。Promise解决了这个问题么？
是的。用Promise来管理回调，你就可以写出更易读的代码，更容易测试的代码。甚至可以同时发起多个请求，然后等待它们全部返回。
Fetch也能做到吗？
是的。但前提是你的用户使用了新版的浏览器，不然的话你就需要加一个Fetch的「polyfill」，或者使用Request、Bluebird或者Axios这些库。
天呐我到底需要多少个库？
这是JS，同一件事情有上千个库在做。我们了解库，而且我们有最好的库，我们有海量的库，要什么有什么。
你刚才说的几个库都是干什么的？
这几个库操作XMLHttpRequest然后返回Promise对象。
好像jQuery的ajax方法做的是同样的事吧……
从年起我们就不用jQuery了。用Fetch，大不了加个Polyfill，要不然用Bluebird、Request或者Axios都行。然后用await和async管理Promise，这样才能控制好异步任务。
这是你第三次说await了，那是什么东西？
await能让你拦住一个异步调用，让你更好地控制异步返回的数据，大大增强了代码的可读性。await非常好用，你只需要在Babel里添加stage-3配置，或者添加syntax-async-functions和transform-async-to-generator插件就可以了。
听起来像是疯了。
没疯。为了使用await，把Typescript编译之后再用Babel转译一道的人才是疯了。
啥玩意？Typescript不支持await？
下个版本就支持了。
我已经无话可说了。
你看其实很简单。用Typescript写代码，用Fetch发起异步请求，所有代码编译成ES6，然后用上Babel的stage-3配置项，把ES6转译成ES5。所有代码用SystemJS加载。如果你用不了Fetch，就加个polyfill，或者用Bluebird、Request或者Axios，这样你就可以用await来处理Promise了。
看了我们对于「简单」的理解是不同的。好吧，有了这些，我终于可以获取数据然后用React展示数据了，对吧？
你的网页需要处理状态变更吗？
唔，不用吧。我只是想展示数据。
那就好，不然我就得跟你解释Flux，以及Flux的一些实现，比如Flummox、Alt、Fluxible。不过说真的你应该用Redux。
你说的这些我就当耳旁风了。再说一次，我只想展示数据。
这样啊，如果你只是想展示数据，其实你不需要React。你只需要一个模板引擎。
你逗我呢？
我只是告诉你你可以用什么技术。
别说了，真的。
我想说，即使只是用一个模板引擎，我还是会用Typescript+SystemJS+Babel的。
我只是想在页面上展示数据，你就告诉我用哪个模板引擎就好了。
有很多，你用过哪一个？
额，太久没用了，不记得了。
jTemplates、jQote还是Pure？
额，不记得，还有别的么？
Transparency?JSRender?MarkupJS?KnockoutJS?这一个支持双向绑定。
还有吗？
PlatesJS?jQuery-tmpl?Handlebars?还有些人在用。
有点像。有哪些跟最后一个比较像的？
Mustache,underscore?我记得连Lodash都有一个模板引擎，不过这是年的事情了。
额，也许是再新一点的库？
Jade?DustJS?
没用过
DotJS?EJS?
没用过。
Nunjucks?ECT?
没用过。记不起来了，要是你的话，你用哪个？
我应该会用ES6原生的模板字符串
我猜猜，只有ES6支持。
对的。
需要用Babel
对的。
需要用npm安装
对的。
需要用Browserify或者Webpack，或者SystemJS
对的。
如果没用Webpack的话，我还需要一个任务管理工具。
对的。
但是由于我要用函数式编程和强类型语言，所以我首先要用上Typescript或者Flow。
对的。
如果我要用await，那我就必须用Babel转译。
对的。
然后我就能用上Fetch、Promise和各种炫酷的东西。
嗯，别忘了加上Fetch的Polyfill，因为Safari不支持Fetch。
你猜怎么着，我们就聊到这吧。我不做了，我不做Web了，我也不想再碰JS了。
没事，过不了几年，我们都会用Elm或者WebAssembly了。
我要回后端去了，我受不这些变动、版本更新、编译和转译了，如果有人能跟上JS的脚步，那这个人一定是疯了。
我理解你。我建议你去Python。
为什么？
听说过Python3吗？
原文：哪家白癜风医院最权威白癜风症状图