【網絡文摘】2016年裏作前端是怎樣一種體驗

問：最近我接手了一個新的Web項目，不過老實說我已經很久沒碰過這方面的代碼了。據說前端的技術棧已經發生了極大的變革，不知道你如今是否是仍然處於最前沿的開發者陣列？

答：準確來講，過去俗稱的寫網頁的，如今應該叫作Front End Engineer，我確實屬於這所謂的前端工程師。而且我才從JSConf與ReactConf面基回來，所以我以爲我以爲我仍是瞭解目前Web前端領域最新的面貌的。
問：不錯不錯，個人需求其實也不復雜，就是從後端提供的REST風格的EndPoint來獲取用戶活動數據而且將其展現在前端界面上。而且須要以列表形式展現，同時，列表要支持篩選排序等操做，對了，還要保證前端數據和服務端保持一致。按照我如今的理解，我打算用jQuery來抓取與展示數據，你以爲咋樣？
答：不不不，如今估計已經沒多少人使用jQuery了吧。你能夠試試React，畢竟這是2016年了啊。
問：額，好吧，那啥是React啊？
答：這是個很是不錯的源自Facebook的前端庫，它可以幫你便捷地響應界面事件，同時保證項目層級的可控性與還說得過去的性能。
問：不錯不錯，那我是否是就能夠用React來展現數據了呢？
答：話是這麼說沒錯，不過你須要添加React與React DOM依賴項到你的頁面中去。
問：等等，React不是一個庫嗎？爲啥要添加兩個依賴呢？
答：不要急，前者是React的核心庫，後面呢算是DOM操做的輔助庫，這樣就能讓你用JSX來描述你的界面佈局了。
問：JSX？啥是JSX？
答：JSX是一個相似於XML的JavaScript語法擴展，它是另外一種描述DOM的方式，能夠認爲是HTML的替代品。
問：等等，HTML咋啦？
答：都2016了，直接用HTML早就過期了。
問：好吧，那是否是我把兩個庫添加到項目中我就可使用React了？
答：額，還要一些小的工具，你須要添加Babel到你的項目中，這樣你就能用了。
問：又是一個庫？Babel又是什麼鬼？
答：你能夠把Babel認爲是一個轉譯工具，能夠將某個特定版本的JavaScript轉譯爲任意版本的JavaScript。你能夠選擇不使用Babel，不過那也就意味着你只能用煩人的ES5來編寫你的項目了。不過既然都是2016了，我建議你仍是使用最新的ES2016+語法吧。
問：ES5？ES2016+？我已經迷茫了，ES5，ES2016+又是啥？
答：ES5是ECMAScript 2015的縮寫，也是如今被絕大部分瀏覽器所支持的JavaScript語法。
問：ECMAScript？
答：是的，你應該知道JavaScript最先於1995年提出，然後在1999年第一個正式版本定稿。以後的十數年裏JavaScript的發展一直很凌亂，不過通過七個版本以後已經逐步清晰了。
問：7個版本？那麼ES5與ES2016+又是第幾個版本呢？
答：是的，分別指第五個版本與第七個版本。
問：等等，那第六個版本呢？
答：你說ES6？估計我剛纔沒有講明白，ECMAScript的每一個版本都是向前兼容的，當你使用ES2016+的時候也就意味着你在使用以前全部版本的全部特性啦。
問：原來是這樣啊，那爲啥必定要用ES2016+而不是ES6呢？
答：是的，你可使用ES6，不過若是你要使用async與await這些特性，你就要去用ES2016+了。不然你就還不得不去使用ES6的Generator來編寫異步代碼了。
問：我如今完全迷糊了，我只是想簡單地從服務端加載些數據而已，以前只須要從CDN加載下jQuery的依賴庫，而後用Ajax方法來獲取數據便可，爲啥我如今不能這麼作呢？
答：別傻了，每一個人都知道一味使用jQuery的後果就是讓你的代碼變得一團亂麻，這都2016了，沒人再想去面對這種頭疼的代碼了。
問：你說的是有道理，那如今我是否是就把這三個庫加載進來，而後用HTML的Table來展現這些數據？
答：嗯，你能夠選擇一個模塊打包工具將這三個依賴庫打包到一個文件中。
問：額，啥是模塊打包工具啊？
答：這個名詞在不一樣的環境下指代也不一樣，不過在Web開發中咱們通常將支持AMD與CommonJS的工具稱爲模塊打包工具。
問：AMD與CommonJS又是？
答：它們是用於描述JavaScript庫與類之間交互的接口標準，你有聽過exports與requires嗎？你能夠根據AMD或者CommonJS的規範來定義多個JavaScript文件，而後用相似於Browserify的工具來打包它們。
問：原來是這樣，那Browserify是啥呢？
答：Browserify最先是爲了不人們把本身的依賴一股腦放到NPM Registry中構建的，它最主要的功能就是容許人們將遵循CommonJS規範的模塊打包到一個文件中。
問：NPM Registry？
答：這是一個很大的在線倉庫，容許人們將代碼與依賴以模塊方式打包發佈。
問：就像CDN同樣？
答：仍是有很大差別的，它更像一個容許人們發佈與下載依賴庫的中心倉庫。
問：哦，我懂了，就像Bower同樣啊。
答：對噠，不過2016年了，一樣沒啥人用Bower了。
問：嗯嗯，那我這時候應該從npm庫中下載依賴了是吧？
答：是的，譬如若是你要用React的話，你能夠直接用Npm命令來安裝React，而後導入到你的項目中，如今絕大部分主流的JavaScript庫都支持這種方式了。
問：嗯嗯，就像Angular同樣啊。
答：不過Angular也是2015年的流行了，如今像VueJS或者RxJS這樣的纔是小鮮肉，你想去學習它們嗎？
問：不急不急，咱們仍是先多聊聊React吧，貪多嚼不爛。我還想肯定下，是否是我從npm下載了React而後用Browserify打包就能夠了？
答：是的。
問：好的，不過每次都要下載一大堆依賴而後打包，看起來好麻煩啊。
答：是的，不過你可使用像Grunt或者Gulp或者Broccoli這樣的任務管理工具來自動運行Browserify。對了，你還能夠用Mimosa。
問：Grunt？Gulp？Broccoli？Mimosa？咱們到底在討論啥？
答：不方，咱們在討論任務管理工具，不過一樣的，這些工具也是屬於2015年的弄潮兒。如今咱們流行使用Webpack咯。
問：Makefiles?聽起來有點像是一個C或者C++項目啊。
答：沒錯，不過很明顯Web的演變之路就是把全部事情弄複雜，而後再回歸到最基礎的方式。估計不出你點你就要在Web中寫彙編代碼了。
問：額，你剛纔好像提到了Webpack？
答：是的，這是一個兼顧了模塊打包工具與任務運行器的打包工具，有點像Browserify的升級版本。
問：嗷嗷，這樣啊，那你以爲哪一個更好點呢？
答：這個因人而異了，不過我我的是更加偏好於Webpack，畢竟它不只僅支持CommonJS規範，還支持ES6的模塊規範。
問：好吧，我已經被CommonJS/ES6這些東西完全搞亂了。
答：不少人都是這樣，多了，你可能還要去了解下SystemJS。
問：天哪，又是一個新名詞，啥是SystemJS呢？
答：不一樣於Browserify與Webpack 1.x，SystemJS是一個容許你將多個模塊分封於多個文件的動態模塊打包工具，而不是所有打包到一個大的文件中。
問：等等，不過我以爲按照網絡優化規範咱們應該將全部的庫打包到一個文件中。
答：是的，不過HTTP/2快要來了，併發的HTTP請求已經不是夢。
問：額，那時候是否是就不須要添加React的依賴庫了？
答：不必定，你能夠將這些依賴庫從CDN中加載進來，不過你仍是須要引入Babel的吧。
問：額，我剛纔好像說錯了話。
答：是的，若是按照你所說的，你須要在生產環境下將全部的babel-core引入，這樣會無故端增長不少額外的性能消耗。
問：好吧，那我到底應該怎麼作呢？
答：我我的建議是用TypeScript+Webpack+SystemJS+Babel這一個組合。
問：TypeScript？我一直覺得咱們在說的是JavaScript！
答：是的，TypeScript是JavaScript的超集，基於ES6版本的一些封裝。你應該還沒忘記ES6吧？
問：我覺得咱們剛纔說到的ES2016+就是ES6的超集了。爲啥咱們還須要TypeScript呢？
答：由於TypeScript容許咱們以靜態類型語言的方式編寫JavaScript，從而減小運行時錯誤。都2016了，添加些強類型不是壞事。
問：原來TypeScript是作這個的啊！
答：是的，還有一個就是Facebook出品的Flow。
問：Flow又是啥？
答：Flow是Facebook出品的靜態類型檢測工具，基於函數式編程的OCaml構建。
問：OCamel？函數式編程？
答：你沒聽過嗎？函數式編程？高階函數？Currying?純函數？
問：我一無所知。
答：好吧，那你只須要記得函數式編程在某些方面是優於OOP的，而且咱們在2016年應該多多使用呦。
問：等等，我在大學就學過了OOP，我以爲挺好的啊。
答：是的，OOP確實還有不少可圈可點的地方，不過你們已經認識到了可變的狀態太容易引起未知問題了，所以慢慢的全部人都在轉向不可變數據與函數式編程。在前端領域咱們能夠用Rambda這樣的庫來在JavaScript中使用函數式編程了。
問：你是否是專門一字排開名詞來了？Ramda又是啥？
答：固然不是啦，Rambda是相似於Lambda的庫，源自David Chambers。
問：David Chambers？
答：David Chambers是個很優秀的程序員，他是Rambda的核心貢獻者之一。若是你要學習函數式編程的話，你還應該關注下Erik Meijer。
問：Erik Meijer？
答：另外一個函數式編程領域的大神與佈道者。
問：好吧，還會讓咱們回到React的話題吧，我應該怎麼使用React來抓取數據呢？
答：額，React只是用於展現數據的，它並不可以幫你抓取數據。
問：個人天啊，那我怎麼來抓取數據呢？
答：你應該使用Fetch來從服務端獲取數據。
問：Fetch？
答：是的，Fetch是瀏覽器原生基於XMLHttpRequests的封裝。
問：那就是Ajax咯？
答：AJAX通常指僅僅使用XMLHttpRequests，而Fetch容許你基於Promise來使用Ajax，這樣就可以避免Callback hell了。
問：Callback Hell?
答：是的，每次你向服務器發起某個異步請求的時候，你必需要添加一個異步回調函數來處理其響應，這樣一層又一層地回調的嵌套就是所謂的Callback Hell了。
問：好吧，那Promise就是專門處理這個哩？
答：沒錯，你能夠用Promise來替換傳統的基於回調的異步函數調用方式，從而編寫出更容易理解與測試的代碼。
問：那我如今是否是直接使用Fetch就行了啊？
答：是啊，不過若是你想要在較老版本的瀏覽器中使用Fetch，你須要引入Fetch Polyfill，或者使用Request、Bluebird或者Axios。
問：來啊，互相傷害吧，你仍是直接告訴我我還須要瞭解多少個庫吧！
答：這但是JavaScript啊，但是有成千上萬個庫的。並且很多庫還很大呢，譬如那個嵌了一張Guy Fieri圖片的庫。
問：你是說Guy Fieri?我據說過，那Bluebird、Request、Axios又是啥呢？
答：它們能夠幫你執行XMLHttpRequests而後返回Promises對象。
問：難道jQuery的AJAX方法不是返回Promise嗎？
答：請忘掉jQuery吧，用Fetch配合上Promise，或者async/await可以幫你構造合適的控制流。
問：這是你第三次提到Await了，這究竟是個啥啊？
答：Await是ES7提供的關鍵字，可以幫你阻塞某個異步調用直到其返回，這樣可以讓你的控制流更加清晰，代碼的可讀性也能更上一層樓。你能夠在Babel中添加stage-3 preset，或者添加syntax-async-functions以及transform-async-to-generator這兩個插件。
問：好麻煩啊。
答：是啊，不過更麻煩的是你必須先預編譯TypeScript代碼，而後用Babel來轉譯await。
問：爲啥？難道TypeScript中沒有內置？
答：估計在下一個版本中會添加該支持，不過目前的1.7版本的TypeScript目標是ES6，所以若是你還想在瀏覽器中使用await，你必需要先把TypeScript編譯爲ES6，而後使用Babel轉譯爲ES5。
問：我已經無話可說了。
答：好吧，其實你也不用想太多，首先你基於TypeScript進行編碼，而後將全部使用Fetch的模塊轉譯爲ES6，而後再使用Babel的stage-3 preset來對await等進行Polyfill，最後使用SystemJS來完成加載。若是你打算使用Fetch的話，還可使用Bluebird、Request或者Axios。
問：好，這樣說就清晰多了，是否是這樣我就達到個人目標了？
答：額，你的應用須要處理任何的狀態變動嗎？
問：我以爲不要把，我只是想展現數據。
答：那還行，不然的話你還須要瞭解Flux、Redux等等一系列的東西。
問：我不想再糾結於這些名詞了，再強調一遍，我只是想展現數據罷了。
答：好吧，其實若是你只是想展現數據的話，你並不須要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，還須要引入任務管理器。
答：是啊。
問：我是否是還須要某個函數式編程語言，或者強類型語言？
答：是啊。
問：而後若是用到await的話，還須要引入Babel？
答：是啊。
問：而後就可使用Fetch、Promise了吧？
答：別忘了Polyfill Fetch，Safari目前還不能原生支持Fetch。
問：是否是，學完這些，就OK了？
答：額，目前來看是的，不過估計過幾年咱們就須要用Elm或者WebAssembly咯~
問：我以爲，我仍是乖乖去寫後端的代碼吧。
答：Python大法好！

 

來源：http://www.javashuo.com/article/p-kqyedtmv-ee.html