AC girls 星球入侵

旁白：遥远的外太空，一个代号为js的星球暴露了它的坐标，程序员星球派出了三位美女程序员，去这个神秘的星球考察。

特效：飞船

演员出场，摆pose

旁白： 然后飞船在登陆过程中被层层阻挠，经过破译信号，三位美女程序员发现，她们需要回答对方提出的问题，才能登星球。

js： 开发一个网页，用来展示服务端数据，用户可以对数据进行筛选，使用什么技术

a： 当然是用react

js： 什么是react

b： react是用来展示数据的库，它可以使代码维护性更高。使用react很简单，只需要引入react和react dom这两个依赖，然后用babel编译一下就可以了。

js： 什么是babel

c： Babel 是一个转译工具，Babel 能把你写的 JS 转译成任意版本的 JS。babel也可以用来编译es6

js： es6是什么

a: es6是javascript的一个版本，因为绝大部分浏览器都支持es5，所以需要把es6编译成es5，现在没人直接用es5了，都是用6,或7，就像iphone一样。

js：所以我只需要引入依赖的库，把代码用babel编译，就可以了？

b: 其实你可以用「模块管理器」把这三个库「打包」成一个文件。

js: 什么是模块管理器

c: 一般指的是管理amd或cmd模块的东西

js：什么是amd，cmd

a: 两种定义，用来描述模块的交互方式，你可以按amd或cmd的api来写代码，然后用browserify打包

js：什么是browserify

b: 是一个将commonjs形式的js文件打包起来的工具。npm上的模块都是commonjs形式的

js：什么是npm

c: 是一个公开的仓库，用于放置可依赖的模块。

js：所以我用 npm 安装 React 然后用 Browerify 来打包就好了？

a: 是的，你应该使用 Grunt、Gulp 或者 Broccoli 这样的任务管理工具，它们能自动运行 Browserify。

js：又是什么

b:  任务管理工具。不过我们现在已经不用了，现在我们用的都是 Webpack。

js： Webpack 是什么？

c: 另一种模块管理工具，同时也是一个任务管理工具。你可以认为它是 Browserify 的加强版。。Webpack 告诉你应该如何管理你的依赖，Webpack 允许你使用不同的模块管理器，不只是 CommonJS，甚至支持 ES6 模块。

js：回到 React 吧，用 React 我怎么从服务器获取数据？

a:额，React 没有提供这个功能，你只能用 React 展示数据。

js：服了啊。那我怎么获取数据？

b:你用 Fetch API 就可以了。

js：啥玩意？这个 API 的名字很烂啊。

c:我也觉得是啊。Fetch API 是浏览器提供的异步请求接口。

js：哦，那不就是 AJAX。

a:AJAX 只是使用 XMLHttpRequest 对象，但是 Fetch API 可以让你用 Promise 风格来发起异步请求，帮你摆脱「回调地狱」。

js：天呐我到底需要多少个库？

b:这是 JS，同一件事情有上千个库在做。我们了解库，而且我们有最好的库，我们有海量的库，要什么有什么。

js：好吧，有了这些，我终于可以获取数据然后用 React 展示数据了，对吧？

c:你的网页需要处理状态变更吗？

js：唔，不用吧。我只是想展示数据。

a: 那就好，不然我就得跟你解释 Flux，以及 Flux 的一些实现，比如 Flummox、Alt、Fluxible。不过说真的你应该用 Redux。

js：  吐血，这么多知识，你们是怎么知道的。

abc：我们都在程序员星球的alloyteam学院进修！

js： 我也想去

特效。飞船着陆，两个星球建交。