Web 開發的未來：React、Falcor 和 ES6
Widen是一家數字資產管理解決方案提供商。目前，其技術棧還非常傳統，包括服務器端的Java、瀏覽器端的AngularJS、提供REST API支持的Jersey以及jQuery、 Underscore、lodash、jQuery UI和Bootstrap等各種庫。近日，該公司的首席開發人員Ray Nicholus在一篇文章中提出了一個面向未來的Web開發技術棧，用于取代現有的工具。
雖然他們已經習慣并信任現有的技術棧，但為了實現以下幾個目標，Ray希望引入一個全新的技術集合：
- 一種新的、閃亮的方法：作為一名開發人員，他希望通過采用一個全新的工具集獲得全新的視角，并有所進步。
- 簡潔：他不喜歡AngularJS 1.x陡峭的學習曲線，更令他失望的是，AngularJS v2的學習曲線更加陡峭。Java也有這樣的特點。另外，他希望能夠盡可能地避免樣板代碼，應用程序可以快速投入應用而又無損可擴展性，前端很容易描述為一組獨立的專用組件的集合。他還希望用一種更好的方法取代難以維護和改進的傳統REST API。
- 高效：他希望可以消除由傳統REST API所導致的不必要的請求和響應開銷。
- 優雅：他希望編寫優雅、易讀的代碼。在用戶界面上查找和修改數據要直觀，最好是開發者只需要考慮自己的數據模型，而不用關心可用的API端點。 </ul>
- React：Ray認為，React與Angular&Ember的不同之處在于其有限的應用范圍和空間占用。Angular&Ember的定位是框架，而React主要是作為應用程序“視圖”。React不包含依賴注入或“服務”支持，不需要“jq-lite”，也不依賴于jQuery。開發人員可以直接使用JSX編寫標記，而無需Ember Handlebars。React會維護一個“虛擬DOM”，并通過它更新真正的DOM，避免了不必要的重排與重繪。總之，他非常喜歡React這種用途相對專一的特性。而且，React讓他可以將復雜的應用程序切分成更小的組件。
- Falcor：這是一個由Netflix開源的、非常新的庫。不同于傳統REST API，它只提供唯一的一個端點。有了它，開發者不再需要向不同的服務器端點請求不同的數據，而是向同一個端點請求不同的模型數據。服務器端可以識別請求參數，并由Falcor Router調用恰當的router函數。也就是說，Falcor提供了一個更加直觀的API，就是開發者的數據模型。這可以確保服務器永遠不會返回不必要的模型數據，節省了帶寬。Falcor客戶端還可以使用緩存數據為連續的請求提供服務，減少服務器響應時間。要了解更多關于Falcor的信息，可以查看Jafar Husain的視頻。
- webpack：作為一個模塊綁定器，webpack可以為React組件模塊化提供進一步的支持。它使開發者可以輕松壓縮和連接CSS及JavaScript，并通過生成source map大大地簡化調試工作。配置完成后，webpack會監控代碼，每次代碼發生變化，它就會生成新的bundles。客戶端無需再導入大量的CSS或JS文件，而只需要導入bundles，減少了頁面加載時的HTTP請求數。此外，webpack還提供了大量的插件，例如，使用jsx-loader可以將JSX轉換成JavaScript，使用babel-loader可以將ES6代碼轉換成兼容ES5的代碼。
- ES6：即ECMAScript 2015，是JavaScript的最新規范，定義了若干重要的新特性，比如胖箭頭函數、類、字符串插值、塊作用域等。更多信息，請查看Mozilla Developer Network上的ECMAScript 6參考指南。 </ul>
放棄現有的技術棧意味著開發人員要走出自己的舒適區，部分人可能會抵觸，認為新選擇不必要或過于復雜。Ray也有類似的想法，但當他對React、 webpack、Falcor有了深入地了解之后，他改變了這種想法，認為這是一個面向未來的Web開發技術棧，Widen即將推出的部分軟件產品將會使用下面討論的所有技術：
為了幫助讀者更好地理解這些技術，Ray使用它們創建了一個單頁應用程序，并詳細解釋了整個的創建過程及相關技術的工作原理。感興趣的讀者可以閱讀原文，并從GitHub上下載該應用程序的源碼。
來自：http://www.infoq.com/cn/news/2015/10/React-Falcor-ES6 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！