Web 開發的將來：React、Falcor 和 ES6

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端點。

放棄現有的技術棧意味着開發人員要走出本身的溫馨區，部分人可能會抵觸，認爲新選擇沒必要要或過於複雜。Ray也有相似的想法，但當他對React、 webpack、Falcor有了深刻地瞭解以後，他改變了這種想法，認爲這是一個面向將來的Web開發技術棧，Widen即將推出的部分軟件產品將會使 用下面討論的全部技術：

• 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參考指南。

爲了幫助讀者更好地理解這些技術，Ray使用它們建立了一個單頁應用程序，並詳細解釋了整個的建立過程及相關技術的工做原理。感興趣的讀者能夠閱讀原文，並從GitHub上下載該應用程序的源碼。

相關連接

• ReactJS 的詳細介紹：請點這裏
• ReactJS 的下載地址：請點這裏