Facebook的Web开发三板斧：React.js、Relay和GraphQL

1 React.js Pete Hunt认为JS模板分离了技术，但是并没有分离关注点，而框架并不知道如何分离关注点，解决这一问题的方案是组件，要充分利用JavaScript的能力，削弱模板的作用；Daniel Schafer和Jing Chen在2015年的React.js Conf上讲述了Facebook如何通过GraphQL改变既有的数据获取方式，让开发者更容易地在React应用中获取数据；Christopher Chedeau在《React：CSS in JS》中讲述了在大规模使用CSS时所面临的问题以及如何通过JS来解决。

总的来说，Facebook提出的Web开发理念可以概括为：将应用分解为一个个独立的组件，与该组件相关的样式、标记、验证以及数据要求都放到组件定义的内部，对于自我渲染所需的所有数据每一个组件都有明确的声明且保存在该组件内部，同时对于哪些行为会改变组件的状态，组件状态改变之后会有哪些反应也要有明确的定义。通过这种方式编写的组件能够封装它自身的逻辑，使得组件高内聚，组件之间低耦合，增强了复用性，同时也降低了开发人员的运维难度和复杂性。

2 Relay(Flux的替代） 什么是Relay

Relay是Facebook在React.js Conf（2015年1月）上首次公开的一个新框架，用于为React应用处理数据层问题。

在Relay中，每个组件都使用一种叫做GraphQL的查询语句声明对数据的依赖。组件可以使用 this.props 访问获取到的数据。

开发者可以自由地组合React组件，而Relay负责把不同组件的数据查询语句（原文的 query ）集中高效地组织并处理，向组件提供精确粒度的数据（没有多余数据），当数据变化时通知相应组件更新，并在客户端维护一份包含所有数据的数据缓存 store 。

3 什么是GraphQL

GraphQL是一种用于描述复杂、嵌套的数据依赖的查询语句。它已经在Facebook的原生APP上使用了多年。

在服务器端，我们通过配置将GraphQL与底层的数据查询代码映射起来。这层配置使得GraphQL可以访问不同的底层存储系统。Relay使用GraphQL作为数据查询语句，但并不指定GraphQL的具体实现。

理念

Relay是根据在Facebook构建大型应用的经验而诞生的。我们的首要任务是让开发者能以符合直觉的方式构建正确、高性能的WEB应用。它的设计使得即使是大型团队也能以高度隔离的方式应对功能变更。获取数据、数据变更、性能，都是让人头痛的问题。Relay则致力于简化这些问题，把复杂的部分交给框架处理，让开发者更加专注于应用本身。

将查询语句放到视图层代码中，开发者只需查看组件本身的代码就可以轻易理解组件的行为： 不需要考虑和理解组件所处的上下文 。组件可以在任何地方重用，而不用修改它的父组件或服务器端代码为它传递或准备数据。

与Flux的关系

在某些方面Relay的灵感来自于Flux，但是理论模型变得更加简化。Relay用缓存所有GraphQL数据的唯一的store代替了Flux中分散的store；相对于Flux由组件自行监听数据变更，Relay用框架管理数据订阅和视图更新。 Instead of actions, modifications take the form of mutations

在Facebook，我们有完全使用Flux的项目，有完全使用Relay的项目，也有两者兼用的项目。一个我们逐渐意识到的模式是让Relay管理应用级的数据流，而让Flux管理数据之外的应用状态。

” 著作权归作者所有。 商业转载请联系作者获得授权，非商业转载请注明出处。 作者：Saviio 链接：http://www.zhihu.com/question/33631170/answer/57068148 来源：知乎

去年我用grunt，后来用gulp，然后browserify来了，今年我用webpack，babel，工具的更换意味着开发体验也是越来越好。(os:要是Atom能变成Visual studio那样All in one IDE，那就感天动地了)(留意技术路线，取最后的） “

基于Koa快速开发Web应用/
如项目新建，建议采用 Baobab，不用redux,flux,