問：最近我接手了一個新的Web項目渣锦，不過老實說我已經(jīng)好久沒碰過這方面的代碼了沐扳。聽說前端的技術(shù)棧已經(jīng)發(fā)生了極大的變革症脂，不知道你現(xiàn)在是不是仍然處于最前沿的開發(fā)者陣列涝涤？
答：準(zhǔn)確來說媚狰，過去俗稱的寫網(wǎng)頁的，現(xiàn)在應(yīng)該叫做Front End Engineer阔拳，我確實屬于這所謂的前端工程師崭孤。并且我才從JSConf與ReactConf面基回來，因此我覺得我覺得我還是了解目前Web前端領(lǐng)域最新的面貌的糊肠。
問：不錯不錯辨宠，我的需求其實也不復(fù)雜，就是從后端提供的REST風(fēng)格的EndPoint來獲取用戶活動數(shù)據(jù)并且將其展示在前端界面上货裹。并且需要以列表形式展示嗤形，同時，列表要支持篩選排序等操作弧圆，對了赋兵，還要保證前端數(shù)據(jù)和服務(wù)端保持一致还最。按照我現(xiàn)在的理解，我打算用jQuery來抓取與展現(xiàn)數(shù)據(jù)毡惜，你覺得咋樣拓轻？
答：不不不，現(xiàn)在估計已經(jīng)沒多少人使用jQuery了吧经伙。你可以試試React扶叉，畢竟這是2016年了啊。
問：額帕膜，好吧枣氧，那啥是React啊垮刹？
答：這是個非常不錯的源自Facebook的前端庫达吞，它能夠幫你便捷地響應(yīng)界面事件，同時保證項目層級的可控性與還說得過去的性能荒典。
問：不錯不錯酪劫，那我是不是就可以用React來展示數(shù)據(jù)了呢？
答：話是這么說沒錯寺董，不過你需要添加React與React DOM依賴項到你的頁面中去覆糟。
問：等等，React不是一個庫嗎遮咖？為啥要添加兩個依賴呢滩字？
答：不要急，前者是React的核心庫御吞，后面呢算是DOM操作的輔助庫麦箍，這樣就能讓你用JSX來描述你的界面布局了。
問：JSX陶珠？啥是JSX挟裂？
答：JSX是一個類似于XML的JavaScript語法擴展，它是另一種描述DOM的方式背率，可以認為是HTML的替代品话瞧。
問：等等，HTML咋啦寝姿？
答：都2016了，直接用HTML早就過時了饵筑。
問：好吧，那是不是我把兩個庫添加到項目中我就可以使用React了根资？
答：額同窘，還要一些小的工具，你需要添加Babel到你的項目中想邦，這樣你就能用了。
問：又是一個庫丧没？Babel又是什么鬼？
答：你可以把Babel認為是一個轉(zhuǎn)譯工具呕童，可以將某個特定版本的JavaScript轉(zhuǎn)譯為任意版本的JavaScript。你可以選擇不使用Babel夺饲，不過那也就意味著你只能用煩人的ES5來編寫你的項目了。不過既然都是2016了往声，我建議你還是使用最新的ES2016+語法吧。
問：ES5烁挟？ES2016+婴洼？我已經(jīng)迷茫了，ES5柬采，ES2016+又是啥欢唾？
答：ES5是ECMAScript 2015的縮寫，也是現(xiàn)在被絕大部分瀏覽器所支持的JavaScript語法粉捻。
問：ECMAScript礁遣？
答：是的，你應(yīng)該知道JavaScript最早于1995年提出肩刃，而后在1999年第一個正式版本定稿祟霍。之后的十?dāng)?shù)年里JavaScript的發(fā)展一直很凌亂，不過經(jīng)過七個版本之后已經(jīng)逐步清晰了盈包。
問：7個版本沸呐？那么ES5與ES2016+又是第幾個版本呢？
答：是的呢燥，分別指第五個版本與第七個版本崭添。
問：等等，那第六個版本呢叛氨？
答：你說ES6呼渣？估計我剛才沒有講明白棘伴，ECMAScript的每個版本都是向前兼容的，當(dāng)你使用ES2016+的時候也就意味著你在使用之前所有版本的所有特性啦屁置。
問：原來是這樣啊焊夸，那為啥一定要用ES2016+而不是ES6呢？
答：是的蓝角，你可以使用ES6淳地，不過如果你要使用async與await這些特性，你就要去用ES2016+了帅容。否則你就還不得不去使用ES6的Generator來編寫異步代碼了颇象。
問：我現(xiàn)在徹底迷糊了，我只是想簡單地從服務(wù)端加載些數(shù)據(jù)而已并徘，之前只需要從CDN加載下jQuery的依賴庫遣钳，然后用Ajax方法來獲取數(shù)據(jù)即可，為啥我現(xiàn)在不能這么做呢麦乞？
答：別傻了蕴茴，每個人都知道一味使用jQuery的后果就是讓你的代碼變得一團亂麻，這都2016了姐直，沒人再想去面對這種頭疼的代碼了倦淀。
問：你說的是有道理，那現(xiàn)在我是不是就把這三個庫加載進來声畏，然后用HTML的Table來展示這些數(shù)據(jù)？
答：嗯愿棋，你可以選擇一個模塊打包工具將這三個依賴庫打包到一個文件中均牢。
問：額徘跪，啥是模塊打包工具翱迓突硝？
答：這個名詞在不同的環(huán)境下指代也不同，不過在Web開發(fā)中我們一般將支持AMD與CommonJS的工具稱為模塊打包工具浙于。
問：AMD與CommonJS又是羞酗？
答：它們是用于描述JavaScript庫與類之間交互的接口標(biāo)準(zhǔn)，你有聽過exports與requires嗎檀轨？你可以根據(jù)AMD或者CommonJS的規(guī)范來定義多個JavaScript文件参萄，然后用類似于Browserify的工具來打包它們讹挎。
問：原來是這樣吆玖，那Browserify是啥呢沾乘？
答：Browserify最早是為了避免人們把自己的依賴一股腦放到NPM Registry中構(gòu)建的，它最主要的功能就是允許人們將遵循CommonJS規(guī)范的模塊打包到一個文件中歪玲。
問：NPM Registry读慎？
答：這是一個很大的在線倉庫，允許人們將代碼與依賴以模塊方式打包發(fā)布幅狮。
問：就像CDN一樣？
答：還是有很大差異的擎值，它更像一個允許人們發(fā)布與下載依賴庫的中心倉庫鸠儿。
問：哦进每，我懂了，就像Bower一樣啊嘱兼。
答：對噠芹壕，不過2016年了踢涌，同樣沒啥人用Bower了斯嚎。
問：嗯嗯挨厚，那我這時候應(yīng)該從npm庫中下載依賴了是吧疫剃？
答：是的，譬如如果你要用React的話牲阁，你可以直接用Npm命令來安裝React城菊，然后導(dǎo)入到你的項目中凌唬，現(xiàn)在絕大部分主流的JavaScript庫都支持這種方式了客税。
問：嗯嗯更耻，就像Angular一樣啊捏膨。
答：不過Angular也是2015年的流行了，現(xiàn)在像VueJS或者RxJS這樣的才是小鮮肉锯七，你想去學(xué)習(xí)它們嗎讶隐？
問：不急不急，我們還是先多聊聊React吧效五，貪多嚼不爛畏妖。我還想確定下疼阔，是不是我從npm下載了React然后用Browserify打包就可以了迅细？
答：是的淘邻。
問：好的宾舅，不過每次都要下載一大堆依賴然后打包筹我，看起來好麻煩啊。
答：是的结澄，不過你可以使用像Grunt或者Gulp或者Broccoli這樣的任務(wù)管理工具來自動運行Browserify。對了囱修，你還可以用Mimosa破镰。
問：Grunt源譬？Gulp踩娘？Broccoli喉祭？Mimosa理卑？我們到底在討論啥蔽氨？
答：不方鹉究，我們在討論任務(wù)管理工具，不過同樣的妈嘹，這些工具也是屬于2015年的弄潮兒◇危現(xiàn)在我們流行使用Webpack咯。
問：Makefiles?聽起來有點像是一個C或者C++項目啊尔苦。
答：沒錯行施，不過很明顯Web的演變之路就是把所有事情弄復(fù)雜稠项，然后再回歸到最基礎(chǔ)的方式展运。估計不出你點你就要在Web中寫匯編代碼了拗胜。
問：額埂软，你剛才好像提到了Webpack所灸？
答：是的咖杂，這是一個兼顧了模塊打包工具與任務(wù)運行器的打包工具，有點像Browserify的升級版本懦尝。
問：嗷嗷陵霉，這樣啊，那你覺得哪個更好點呢伍绳？
答：這個因人而異了踊挠，不過我個人是更加偏好于Webpack，畢竟它不僅僅支持CommonJS規(guī)范冲杀，還支持ES6的模塊規(guī)范效床。
問：好吧，我已經(jīng)被CommonJS/ES6這些東西徹底搞亂了权谁。
答：很多人都是這樣剩檀，多了，你可能還要去了解下SystemJS旺芽。
問：天哪沪猴，又是一個新名詞采章，啥是SystemJS呢？
答：不同于Browserify與Webpack 1.x阱洪，SystemJS是一個允許你將多個模塊分封于多個文件的動態(tài)模塊打包工具利耍，而不是全部打包到一個大的文件中轴猎。
問：等等中鼠，不過我覺得按照網(wǎng)絡(luò)優(yōu)化規(guī)范我們應(yīng)該將所有的庫打包到一個文件中具温。
答：是的川陆，不過HTTP/2快要來了尸曼，并發(fā)的HTTP請求已經(jīng)不是夢拂封。
問：額萧恕，那時候是不是就不需要添加React的依賴庫了屹徘？
答：不一定酥宴，你可以將這些依賴庫從CDN中加載進來般堆，不過你還是需要引入Babel的吧和橙。
問：額办斑，我剛才好像說錯了話尚洽。
答：是的，如果按照你所說的店溢，你需要在生產(chǎn)環(huán)境下將所有的babel-core引入，這樣會無端端增加很多額外的性能消耗。
問：好吧顷蟆，那我到底應(yīng)該怎么做呢挤渔？
答：我個人建議是用TypeScript+Webpack+SystemJS+Babel這一個組合摇肌。
問：TypeScript框舔？我一直以為我們在說的是JavaScript刘绣！
答：是的，TypeScript是JavaScript的超集舰涌，基于ES6版本的一些封裝。你應(yīng)該還沒忘記ES6吧鸡典？
問：我以為我們剛才說到的ES2016+就是ES6的超集了。為啥我們還需要TypeScript呢货徙？
答：因為TypeScript允許我們以靜態(tài)類型語言的方式編寫JavaScript允蜈，從而減少運行時錯誤蒿柳。都2016了饶套，添加些強類型不是壞事。
問：原來TypeScript是做這個的袄萏健妓蛮！
答：是的，還有一個就是Facebook出品的Flow圾叼。
問：Flow又是啥蛤克？
答：Flow是Facebook出品的靜態(tài)類型檢測工具，基于函數(shù)式編程的OCaml構(gòu)建夷蚊。
問：OCamel构挤？函數(shù)式編程？
答：你沒聽過嗎惕鼓？函數(shù)式編程筋现？高階函數(shù)？Currying?純函數(shù)？
問：我一無所知矾飞。
答：好吧一膨，那你只需要記得函數(shù)式編程在某些方面是優(yōu)于OOP的，并且我們在2016年應(yīng)該多多使用呦凰慈。
問：等等汞幢，我在大學(xué)就學(xué)過了OOP，我覺得挺好的啊微谓。
答：是的森篷，OOP確實還有很多可圈可點的地方，不過大家已經(jīng)認識到了可變的狀態(tài)太容易引發(fā)未知問題了豺型，因此慢慢的所有人都在轉(zhuǎn)向不可變數(shù)據(jù)與函數(shù)式編程仲智。在前端領(lǐng)域我們可以用Rambda這樣的庫來在JavaScript中使用函數(shù)式編程了。
問：你是不是專門一字排開名詞來了姻氨？Ramda又是啥钓辆？
答：當(dāng)然不是啦，Rambda是類似于Lambda的庫肴焊，源自David Chambers前联。
問：David Chambers？
答：David Chambers是個很優(yōu)秀的程序員娶眷，他是Rambda的核心貢獻者之一似嗤。如果你要學(xué)習(xí)函數(shù)式編程的話，你還應(yīng)該關(guān)注下Erik Meijer届宠。
問：Erik Meijer烁落？
答：另一個函數(shù)式編程領(lǐng)域的大神與布道者。
問：好吧豌注，還會讓我們回到React的話題吧伤塌，我應(yīng)該怎么使用React來抓取數(shù)據(jù)呢？
答：額轧铁，React只是用于展示數(shù)據(jù)的每聪，它并不能夠幫你抓取數(shù)據(jù)。
問：我的天啊属桦，那我怎么來抓取數(shù)據(jù)呢熊痴？
答：你應(yīng)該使用Fetch來從服務(wù)端獲取數(shù)據(jù)。
問：Fetch聂宾？
答：是的果善，F(xiàn)etch是瀏覽器原生基于XMLHttpRequests的封裝。
問：那就是Ajax咯系谐？
答：AJAX一般指僅僅使用XMLHttpRequests巾陕，而Fetch允許你基于Promise來使用Ajax讨跟，這樣就能夠避免Callback hell了。
問：Callback Hell?
答：是的鄙煤，每次你向服務(wù)器發(fā)起某個異步請求的時候晾匠，你必須要添加一個異步回調(diào)函數(shù)來處理其響應(yīng)，這樣一層又一層地回調(diào)的嵌套就是所謂的Callback Hell了梯刚。
問：好吧凉馆，那Promise就是專門處理這個哩？
答：沒錯亡资，你可以用Promise來替換傳統(tǒng)的基于回調(diào)的異步函數(shù)調(diào)用方式澜共，從而編寫出更容易理解與測試的代碼。
問：那我現(xiàn)在是不是直接使用Fetch就好了白赌濉嗦董？
答：是啊，不過如果你想要在較老版本的瀏覽器中使用Fetch瘦黑，你需要引入Fetch Polyfill京革，或者使用Request、Bluebird或者Axios幸斥。
問：來啊匹摇，互相傷害吧，你還是直接告訴我我還需要了解多少個庫吧甲葬！
答：這可是JavaScript啊来惧，可是有成千上萬個庫的。而且不少庫還很大呢演顾，譬如那個嵌了一張Guy Fieri圖片的庫。
問：你是說Guy Fieri?我聽說過隅居，那Bluebird钠至、Request、Axios又是啥呢胎源？
答：它們可以幫你執(zhí)行XMLHttpRequests然后返回Promises對象棉钧。
問：難道jQuery的AJAX方法不是返回Promise嗎？
答：請忘掉jQuery吧涕蚤，用Fetch配合上Promise宪卿，或者async/await能夠幫你構(gòu)造合適的控制流。
問：這是你第三次提到Await了万栅，這到底是個啥坝蛹亍？
答：Await是ES7提供的關(guān)鍵字烦粒，能夠幫你阻塞某個異步調(diào)用直到其返回休溶，這樣能夠讓你的控制流更加清晰代赁，代碼的可讀性也能更上一層樓。你可以在Babel中添加stage-3 preset兽掰，或者添加syntax-async-functions以及transform-async-to-generator這兩個插件芭碍。
問：好麻煩啊。
答：是啊孽尽，不過更麻煩的是你必須先預(yù)編譯TypeScript代碼窖壕，然后用Babel來轉(zhuǎn)譯await。
問：為啥杉女？難道TypeScript中沒有內(nèi)置瞻讽？
答：估計在下一個版本中會添加該支持，不過目前的1.7版本的TypeScript目標(biāo)是ES6宠纯，因此如果你還想在瀏覽器中使用await卸夕，你必須要先把TypeScript編譯為ES6，然后使用Babel轉(zhuǎn)譯為ES5婆瓜。
問：我已經(jīng)無話可說了快集。
答：好吧，其實你也不用想太多廉白，首先你基于TypeScript進行編碼个初，然后將所有使用Fetch的模塊轉(zhuǎn)譯為ES6，然后再使用Babel的stage-3 preset來對await等進行Polyfill猴蹂，最后使用SystemJS來完成加載院溺。如果你打算使用Fetch的話，還可以使用Bluebird磅轻、Request或者Axios珍逸。
問：好，這樣說就清晰多了聋溜，是不是這樣我就達到我的目標(biāo)了谆膳？
答：額，你的應(yīng)用需要處理任何的狀態(tài)變更嗎撮躁？
問：我覺得不要把漱病，我只是想展示數(shù)據(jù)。
答：那還行把曼，否則的話你還需要了解Flux杨帽、Redux等等一系列的東西。
問：我不想再糾結(jié)于這些名詞了嗤军，再強調(diào)一遍注盈，我只是想展示數(shù)據(jù)罷了。
答：好吧型雳，其實如果你只是想展示數(shù)據(jù)的話当凡，你并不需要React山害，你只需要一個比較好的模板引擎罷了。
問：你在開玩笑沿量？
答：不要著急浪慌，我只是告訴你你可以用到的東西。
問：停朴则！
答：我的意思是权纤，即使你僅僅打算用個模板引擎，還是建議使用下TypeScript+SystemJS+Babel乌妒。
問：好吧汹想，那你還是推薦一個模板引擎吧！
答：有很多啊撤蚊，你有對哪種比較熟悉嗎古掏？
問：唔，好久之前用了侦啸，記不得了槽唾。
答：jTemplates?jQote?PURE?
問：沒聽過，還有嗎光涂？
答：Transparency庞萍？JSRender？MarkupJS?KnockoutJS?
問：還有嗎忘闻？
答：PlatesJS?jQuery-tmpl?Handlebars?
問：好像最后一個有點印象钝计。
答：Mustache?underscore？
問：好像更晚一點的齐佳。
答：Jade?DustJS?
問：不私恬。
答：DotJS?EJS?
問：不。
答：Nunjucks?ECT?
問：不炼吴。
答：Mah?Jade?
問：額践付，還不是。
答缺厉？難道是ES6原生的字符串模板引擎。
問：我估計隧土，這貨也需要ES6吧提针。
答：是啊。
問：需要Babel曹傀？
答：是啊辐脖。
問：是不是還要從npm下載核心模塊？
答：是啊皆愉。
問：是不是還需要Browserify嗜价、Webpack或者類似于SystemJS這樣的模塊打包工具艇抠？
答：是啊。
問：除了Webpack久锥，還需要引入任務(wù)管理器家淤。
答：是啊。
問：我是不是還需要某個函數(shù)式編程語言瑟由，或者強類型語言絮重？
答：是啊。
問：然后如果用到await的話歹苦，還需要引入Babel青伤？
答：是啊。
問：然后就可以使用Fetch殴瘦、Promise了吧狠角？
答：別忘了Polyfill Fetch，Safari目前還不能原生支持Fetch蚪腋。
問：是不是丰歌，學(xué)完這些，就OK了辣吃？
答：額动遭，目前來看是的，不過估計過幾年我們就需要用Elm或者WebAssembly咯~
問：我覺得神得，我還是乖乖去寫后端的代碼吧厘惦。
答：Python大法好！
