Facebook的Web开发三板斧:React.js、Relay和GraphQL
2015-02-26 孙镜涛 InfoQ
Eric Florenzano最近在自己的博客上发表了一篇题为《Facebook教我们如何构建网站》的文章,他认为软件开发有些时候需要比较大的跨越,而这将会在2015年再次上演,主角们则是Facebook的React.js、Relay和GraphQL。
Eric Florenzano在该文章中提到:2003年Brad Fitzpatrick发布了Memcached,由此开启了LiveJournal架构的时代;2004年Google发布了MapReduce论文,由此诞生了Hadoop并开始风靡世界;2007年Amazon发布了Dynamo存储系统,让我们知晓了如何通过线性扩展的方式让数据库和应用程序一起工作,并导致了Cassandra、Riak等数据库的产生;2010年Twitter教会了我们如何通过客户端模板让服务器端变成一些简单的API,并引发了Web应用的又一次大转变;2012年Google发布了Angular.js 1.0,并最终成为流行的Web开发框架,这一切都有一个共同点,那就是:公司或者创业团队从生产中得到了沉痛的教训,从失败中找到了向前的出路,然后在将自己的技术突破共享出来的时候引发了一系列的变革。Fitzpatrick相信,在2015年Facebook将会通过React.js、Relay和GraphQL三把利剑引发Web应用开发的另一次跨越。
Fitzpatrick做出如此判断的理由主要是基于Facebook的员工在一些演讲中所透露出的Web开发理念。例如,Pete Hunt在2013年的JSConf上做了题为《React:重新思考最佳实践》的演讲,讲述了Facebook之所以会避开某些“最佳实践”的原因,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开发理念可以概括为:将应用分解为一个个独立的组件,与该组件相关的样式、标记、验证以及数据要求都放到组件定义的内部,对于自我渲染所需的所有数据每一个组件都有明确的声明且保存在该组件内部,同时对于哪些行为会改变组件的状态,组件状态改变之后会有哪些反应也要有明确的定义。通过这种方式编写的组件能够封装它自身的逻辑,使得组件高内聚,组件之间低耦合,增强了复用性,同时也降低了开发人员的运维难度和复杂性。
毫无疑问,Facebook提出的技术与理念对于大部分Web网站开发团队而言还是有一定借鉴意义的,其中的思想也值得我们深思与学习,但是Fitzpatrick的判断是否真的会实现,Facebook的React.js、Relay和GraphQL是否会引发Web开发的再一次变革,只有等待时间来验证了。
Facebook的Web开发三板斧:React.js、Relay和GraphQL的更多相关文章
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- Web框架概述——React.js
目前,在前端Web开发中,三大热门框架为React.js,Vue.js,Angular.js .当然,三大框架各有各的优缺点,这里就不多说了,下面我就针对前段时间所学的React框架做一下整体知识点的 ...
- web开发与设计--js数据类型,js运营商
1. js数据类型划分:号码值类型,布尔,串 由typeof能够看到什么类型的数据被详述. 举例: <span style="font-family:Microsoft YaHei;f ...
- web开发常用的js验证,利用正则表达式验证邮箱、手机、身份证等输入
正则表达式验证 //邮箱 \-])+\.)+([a-zA-Z0-]{,})+$/; email = document.getElementById("email").value; ...
- 微信web开发的上传图片js接口
$('.chooseImage').click(function(){ wx.chooseImage({ count: pic_num, // 默认9,大于9也是显示9 sizeType: ['com ...
- 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍
使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...
- Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库
SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...
- 6个好用的Web开发工具
在过去的几年间,涌现出了很多Web开发工具,它们大多还是比较吸引人的,方便了我们的工作.我们可以学习一下这些新东西,短时间就可以拓宽思路(PHP100推荐:学习10分钟,改变你的程序员生涯).这些应用 ...
- PHP开发人员对JAVA的WEB开发入门(初版-已废弃)
最近准备对其他部门PHP开发的童鞋做一个对JAVA的培训.知己知彼,百战不殆,我要先了解点PHP,才能确认他们的基础,达到好的授课效果. PHP(原始为Personal Home Page的缩写,后正 ...
随机推荐
- SQL Server中行列转换 Pivot UnPivot
SQL Server中行列转换 Pivot UnPivot PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PI ...
- JAVA基础知识xml,date
虽然说看文档最好是看官方原来的文档,但是呢,下面是我看别的人的总结,算做抛砖引玉吧,如果有不对的,我会在后期给更正或者自己来写一篇 1,JAVA中对xml的操作,包括schema,dtd等相关知识:标 ...
- Struts2 验证码图片实例
本文转载于DongLiYang的博客http://www.cnblogs.com/dongliyang/archive/2012/08/24/2654431.html 其中修改过一部分,针对使用注解而 ...
- [LeetCode] Design Snake Game 设计贪吃蛇游戏
Design a Snake game that is played on a device with screen size = width x height. Play the game onli ...
- python基础-异常处理
一.错误和异常 程序中难免出现错误,而错误分成两种 1.1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 def te ...
- asp.net webservice返回json问题
使用jQuery $.ajax方法请求webservice 一.方法返回值为string,将json格式的字符串返回 设置contentType为"application/json;char ...
- BOM以及定时器
一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...
- python通过函数改变变量取值
严格讲应该是"通过函数调用,改变引用对象".python中,要区分"变量名"和"对象" 如果是类的对象,是引用类型的,那么可以通过函数调用, ...
- [bigdata] kafka基本命令 -- 迁移topic partition到指定的broker
版本 0.9.2 创建topic bin/kafka-topics.sh --create --topic topic_name --partition 6 --replication-factor ...
- Mac OSX:Powerline风格的zsh配置
需要的工具 iTerm,一个替代OSX自带终端的软件,基于iTerm才能实现上面的效果: oh-my-zsh,zsh是OSX上最强大的shell,没有之一,但是配置过程较为复杂,这个脚本能够帮你一键配 ...