Widen是一家数字资产管理解决方案提供商。目前,其技术栈还很是传统,包括服务器端的Java、浏览器端的AngularJS、提供REST API支持的Jersey以及jQuery、 Underscore、lodash、jQuery UI和Bootstrap等各类库。近日,该公司的首席开发人员Ray Nicholus在一篇文章中提出了一个面向将来的Web开发技术栈,用于取代现有的工具。html
虽然他们已经习惯并信任现有的技术栈,但为了实现如下几个目标,Ray但愿引入一个全新的技术集合:前端
一种新的、闪亮的方法:做为一名开发人员,他但愿经过采用一个全新的工具集得到全新的视角,并有所进步。react
简洁:他不喜欢 AngularJS 1.x 陡峭的学习曲线,更令他失望的是,AngularJS v2的学习曲线更加陡峭。Java也有这样的特色。另外,他但愿可以尽量地避免样板代码,应用程序能够快速投入应用而又无损可扩展性,前端很容易描述为 一组独立的专用组件的集合。他还但愿用一种更好的方法取代难以维护和改进的传统REST API。webpack
高效:他但愿能够消除由传统REST API所致使的没必要要的请求和响应开销。git
优雅:他但愿编写优雅、易读的代码。在用户界面上查找和修改数据要直观,最好是开发者只须要考虑本身的数据模型,而不用关心可用的API端点。es6
放弃现有的技术栈意味着开发人员要走出本身的温馨区,部分人可能会抵触,认为新选择没必要要或过于复杂。Ray也有相似的想法,但当他对React、 webpack、Falcor有了深刻地了解以后,他改变了这种想法,认为这是一个面向将来的Web开发技术栈,Widen即将推出的部分软件产品将会使 用下面讨论的全部技术:github
React:Ray认为,React与Angular&Ember 的不一样之处在于其有限的应用范围和空间占用。Angular&Ember的定位是框架,而React主要是做为应用程序“视图”。React不包含依赖注入或“服务”支持,不须要“jq-lite”,也不依赖于jQuery。开发人员能够直接使用JSX编写标记,而无需Ember Handlebars。React会维护一个“虚拟DOM”,并经过它更新真正的DOM,避免了没必要要的重排与重绘。总之,他很是喜欢React这种用途相对专注的特性。并且,React让他能够将复杂的应用程序切分红更小的组件。web
Falcor:这是一个由Netflix开源的、很是新的库。不一样于传统REST API,它只提供惟一的一个端点。有了它,开发者再也不须要向不一样的服务器端点请求不一样的数据,而是向同一个端点请求不一样的模型数据。服务器端能够识别请求参数,并由Falcor Router调用恰当的router函数。也就是说,Falcor提供了一个更加直观的API,就是开发者的数据模型。这能够确保服务器永远不会返回没必要要的模型数据, 节省了带宽。Falcor客户端还可使用缓存数据为连续的请求提供服务,减小服务器响应时间。要了解更多关于Falcor的信息,能够查看Jafar Husain的视频。npm
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上下载该应用程序的源码。