转载

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上下载该应用程序的源码。

感谢魏星对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博（@InfoQ，@丁晓昀），微信（微信号： InfoQChina ）关注我们，并与我们的编辑和其他读者朋友交流（欢迎加入InfoQ读者交流群 Web开发的未来：React、Falcor和ES6 ）。