旁白：遙遠(yuǎn)的外太空，一個代號為js的星球暴露了它的坐標(biāo)，程序員星球派出了三位美女程序員，去這個神秘的星球考察。

特效：飛船

演員出場，擺pose

旁白： 然后飛船在登陸過程中被層層阻撓，經(jīng)過破譯信號，三位美女程序員發(fā)現(xiàn)，她們需要回答對方提出的問題，才能登星球。

js： 開發(fā)一個網(wǎng)頁，用來展示服務(wù)端數(shù)據(jù)，用戶可以對數(shù)據(jù)進(jìn)行篩選，使用什么技術(shù)

a： 當(dāng)然是用react

js： 什么是react

b： react是用來展示數(shù)據(jù)的庫，它可以使代碼維護(hù)性更高。使用react很簡單，只需要引入react和react dom這兩個依賴，然后用babel編譯一下就可以了。

js： 什么是babel

c： Babel 是一個轉(zhuǎn)譯工具，Babel 能把你寫的 JS 轉(zhuǎn)譯成任意版本的 JS。babel也可以用來編譯es6

js： es6是什么

a: es6是javascript的一個版本，因為絕大部分瀏覽器都支持es5，所以需要把es6編譯成es5，現(xiàn)在沒人直接用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: 是的，你應(yīng)該使用 Grunt、Gulp 或者 Broccoli 這樣的任務(wù)管理工具，它們能自動運行 Browserify。

js：又是什么

b:? 任務(wù)管理工具。不過我們現(xiàn)在已經(jīng)不用了，現(xiàn)在我們用的都是 Webpack。

js： Webpack 是什么？

c: 另一種模塊管理工具，同時也是一個任務(wù)管理工具。你可以認(rèn)為它是 Browserify 的加強(qiáng)版。。Webpack 告訴你應(yīng)該如何管理你的依賴，Webpack 允許你使用不同的模塊管理器，不只是 CommonJS，甚至支持 ES6 模塊。

js：回到 React 吧，用 React 我怎么從服務(wù)器獲取數(shù)據(jù)？

a:額，React 沒有提供這個功能，你只能用 React 展示數(shù)據(jù)。

js：服了啊。那我怎么獲取數(shù)據(jù)？

b:你用 Fetch API 就可以了。

js：啥玩意？這個 API 的名字很爛啊。

c:我也覺得是啊。Fetch API 是瀏覽器提供的異步請求接口。

js：哦，那不就是 AJAX。

a:AJAX 只是使用 XMLHttpRequest 對象，但是 Fetch API 可以讓你用 Promise 風(fēng)格來發(fā)起異步請求，幫你擺脫「回調(diào)地獄」。

js：天吶我到底需要多少個庫？

b:這是 JS，同一件事情有上千個庫在做。我們了解庫，而且我們有最好的庫，我們有海量的庫，要什么有什么。

js：好吧，有了這些，我終于可以獲取數(shù)據(jù)然后用 React 展示數(shù)據(jù)了，對吧？

c:你的網(wǎng)頁需要處理狀態(tài)變更嗎？

js：唔，不用吧。我只是想展示數(shù)據(jù)。

a: 那就好，不然我就得跟你解釋 Flux，以及 Flux 的一些實現(xiàn)，比如 Flummox、Alt、Fluxible。不過說真的你應(yīng)該用 Redux。

js： ?吐血，這么多知識，你們是怎么知道的。

abc：我們都在程序員星球的alloyteam學(xué)院進(jìn)修！

js： 我也想去

特效。飛船著陸，兩個星球建交。