说说React,Flux,Reray和GraghQL

前几天看到同事转发的《ReactEurope
Conf 参会感想》,这篇文章讲的react的一些理念感觉有些道理,但我对react最终能很好的实现learn once, write everywhere还是持怀疑态度,毕竟世界是多样的,Apple的iOS(扁平化风格),Google的Android各自有自己的UI规范(Material
Design和AngularJs Material Design
),即使React的理念很好,在别人的地盘上也不一定能弄出多大成果。但在Web前端领域,React作为创新者,必然会推动整个前端开发的进步。

这几年前端开发领域的快速发展,个人感觉主要有几个原因:互联网行业对用户体验的高要求和前端项目的复杂化,导致以前基于jquery框架和插件的前端代码逐渐复杂化,跟不上需求的快速变化,代码膨胀导致维护成为问题,这个是催生新框架的实际需求;前端项目的生命周期相对比较短,一些活动页面可能就用几天,一般的主站页面几个月也会大改版,相当于服务器端,前端的历史包袱少,工程师更可能倾向于使用新技术提供开发效率;互联网的原住民90后开始写代码了,这部分人可能很多是从前端入手开发的,他们更喜欢从国外引入新的框架。这也是React现在很热的一个原因。

我感觉现在React的问题是目标太大,既要做web前端,还要做做iOS原生页面,后面还要搞Android原生UI。虽然FaceBook的研发能力挺强,Virtual DOM的概念很好,有点像UI层的JVM了,可是大家都知道,即使是JVM做了十几年了,还是主要在服务器上用,目前对跨平台的支持也不是特别理想,而UI领域是更加感性和多样化的,对UI原生层的依赖相对更复杂,各移动平台有自己的UI规范,并且差别很大,因此VDOM在移动端的前景不容乐观。就移动端开发来说,React
VDOM相当于在Apple和Google的地盘上另外建立一种开发方式,以后必然会出现利益博弈。 特别是Android平台情况复杂,各种版本,不同的分辨率,各种厂商定制设备,各种定制UI,很怀疑React后面能不能hold住,我估计React Android 10月份跳票的可能性大。

下面说说Flux架构。Flux
是一个Facebook开发的、利用单向数据流实现的应用架构,用于 React。Flux应用有三个主要的部分组成:调度程序、存储和视图(React
组件)。现在的Flux架构只是个概念,缺少官方标准实现,第三方的实现又有点乱,就连我们公司都自己弄了个iFlux架构,相关的框架太多,后面必然会统一,一些Flux框架后面肯定会死掉或合并。

相对于AngularJS,React不是一个完整的前端解决方案,很多地方还需要补充,这就对团队的技术能力提出了要求,而AnguarJS框架相对完善,适合作为整体的前端开发解决方案使用,适合大规模工程化开发。至于AngularJS
2,还是等浏览器能普遍支持ES6的时候再考虑吧。

个人感觉后面Relay会逐渐替代Flux。Relay是Facebook在React.js
Conf(2015年1月)上首次公开的一个新框架,用于为React应用处理数据层问题。在Relay中,每个组件都使用一种叫做GraphQL的查询语句声明对数据的依赖。组件可以使用this.props访问获取到的数据。开发者可以自由地组合React组件,而Relay负责把不同组件的数据查询语句(原文的query)集中高效地组织并处理,向组件提供精确粒度的数据(没有多余数据),当数据变化时通知相应组件更新,并在客户端维护一份包含所有数据的数据缓存store

最后说下GraphQL。GraphQL是一种用于描述复杂、嵌套的数据依赖的查询语句。它已经在Facebook的原生APP上使用了多年。在服务器端,我们通过配置将GraphQL与底层的数据查询代码映射起来。这层配置使得GraphQL可以访问不同的底层存储系统。Relay使用GraphQL作为数据查询语句,但并不指定GraphQL的具体实现。

我觉得GraphQL是一个很好的想法,可能是这一系列项目中后面最有前途的。GraphQL确实解决了REST
API的一些痛点,特别是在移动网络环境下接口返回太多冗余数据的问题,这个问题在目前移动网络流量费还不够便宜,速度还不够快的情况下很重要。GraphQL的发展前景是看好的,但目前需要完善生态环境,特别是基于Java的实现框架,Android和iOS的客户端支持框架,有了这些东西才能真正推动GraphQL的普及,目前仅有node.js版本是远远不够的,毕竟大多数服务器端项目都不是Node.js的,大多数服务器端工程师也不精通js。在Android客户端,已经有大量支持REST的网络情况框架,例如Spring Android,Google
Volley等。

以上文字只是个人看法,至于是否使用React要根据具体的项目和研发团队情况具体分析。

版权声明:本文为博主原创文章,转载请保留出处http://blog.csdn.net/offbye

时间: 2024-12-10 06:41:14

说说React,Flux,Reray和GraghQL的相关文章

react flux

Overview 为了方便理解,主要的英文名词都没有翻译.比如:dispatcher(调度者). store(仓库).view(视图) Flux是Facebook用来构建用户端的web应用的应用程序体系架构.它通过利用数据的单向流动为React的可复用的视图组件提供了补充.相比于形式化的框架它更像是一个架构思想,不需要太多新的代码你就可以马上使用Flux构建你的应用. Flux应用主要包括三部分:dispatcher.store和views(React components),千万不要和MVC(

【天赢金创】React flux九浅一深

这个是 Facebook 官方学习 Flux 的 todo 例子 想用这个例子来总结一下怎么从零开始用 React 和 Flux 构建一个 App Structure App ├─ javascripts │ ├─ actions │ │ ├─ TodoActions.js │ ├─ components │ │ ├─ TodoComponents │ │ │ ├─ TodoApp.js │ │ │ ├─ Header.js │ │ │ ├─ MainSection.js │ │ │ ├─ Fo

react及flux架构范例Todomvc分析

react及flux架构范例Todomvc分析 通过分析flux-todomvc源码,学习如何通过react构建web程序,了解编写react应用程序的一般步骤,同时掌握Flux的单向数据流动架构思想 关于react react一个最吸引我的特性是组件,它是模块化的,所有的组件是独立的,又可以通过嵌套来构建更大型的组件,一个个小组件经过层层组装,最终形成web应用程序,它让我开始重新思考如何去构建大型的web应用程序. 关于Flux Flux是一个思想而非框架,强调数据自上而下传递的单向流动理念

學習 React.js:用 React.js 和 Flux 創建一個簡單的購物車

Creating A Simple Shopping Cart with React.js and Flux Ken Wheeler (@ken_wheeler) 簡介 歡迎來到學習 React 的第四章這也是最後一章!到現在,我們已經學習了怎樣利用 React 的 API 來創建狀態型組件,如何應用它們,以及如何運用臉書的 Flux 架構來工作的 今天我們將把所有的這一切放到一塊,來創建一個簡單的購物車應用.在現在的電商網站上,產品的詳細頁面相互依賴,而 React 有助於簡化並有效的組織它們

学习react

推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.shtml 官网上面的文档组织的确是有点乱,但还是要通过官网学习,建议从认真跟着官网上这篇教程做 http://reactjs.cn/react/docs/tutorial.html  ,之后可以选择性看其他部分内容 慕课网上面关于react的视频  http://www.imooc.com/index

2015-2016前端知识体系

一.框架与组件 ?bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset.按钮.图片.菜单.表单 组件UI样式:按钮组.字体图标.下拉菜单.输入框组.导航组.面包屑.分页.标签.轮播.弹出框.列表.多媒体.警告 响应式布局:布局.结构.样式.媒体.javascript响应式 第三方插件:插件管理 ?jQuery.zepto使用原理以及插件开发 支持amd.cmd.全局变量的模块化封装 $.fn.method = function(){} ?mvc/mvv

前端JavaScript规范

JavaScript规范 目录 类型 对象 数组 字符串 函数 属性 变量 条件表达式和等号 块 注释 空白 逗号 分号 类型转换 命名约定 存取器 构造器 事件 模块 jQuery ES5 兼容性 HTML.CSS.JavaScript分离 使用jsHint 前端工具 类型 原始值: 相当于传值(JavaScript对象都提供了字面量),使用字面量创建对象. string number boolean null undefined var foo = 1, bar = foo; bar = 9

如何设计和实现一个web app

web app简介 web app其实不算是什么新鲜的东西,相比于传统的web和传统的app,web app这种web和app相结合的产物有的优点如下: 1. 开发上web app更有便捷性,ios开发一上来需要安装一堆东西,android开发也差不多,另外web app的学习成本要比平台客户端开发要低些,至少你不用去招聘ios和android程序员.只要具备基础web开发能力的人都可以比较快上手. 2. 部署方便,在很多情况下,部署一个单页web app只需要一个index.html页面文件作

为什么国人很难出高质量开源

FKP-REST是一套全栈javascript框架 为什么国人很难出高质量开源 作者:webkixi 乱侃 今天因为VueJS展开的讨论,话锋转转,就转到这个主题了.这个主题其实也一直是我想要了解的问题,毕竟是 这个FKPJS要走的路.怎么样才能做好开源. 这里先推荐一篇好文,<思考的八种境界>,文章不长,但却有些感悟,第一条就撞在胸口, <一.形成主见>,行文大概意思是:有自己的一套,即便是很浅薄. 是的,即便浅薄,那也是心血所成,正如我正在做的FKPJS,虽然浅薄,但却花费了我