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的缩写,后正 ...
随机推荐
- [LeetCode] Range Sum Query - Immutable 区域和检索 - 不可变
Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...
- [LeetCode] Search for a Range 搜索一个范围
Given a sorted array of integers, find the starting and ending position of a given target value. You ...
- css
1.css代码语法 p{font-size:12px;color:red;}p 为选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如o ...
- 格式化 float 类型,保留小数点后1位
""" 练习 : 小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点, 并用字符串格式化显示出'xx.x%',只保留小数点后1位: &qu ...
- Block常用方法以及注意事项
1. ViewController间传递数据 2. Block的@property必须定义为copy
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- bzoj2243
2243: [SDOI2011]染色 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 6753 Solved: 2496[Submit][Status ...
- mysql在空闲8小时之后会断开连接(默认情况)
调试程序的过程发现,在mysql连接空闲一定时间(默认8小时)之后会断开连接,需要重新连接,也引发我对重连机制的思考.
- xv6的课本翻译之——附录B 系统启动器
Appendix B 附录 B Figure B-1 The relationship between logical, linear, and physical addresses. 图B-1:逻辑 ...
- Java多线程与并发库高级应用-面试题
第一题:现有的程序代码模拟产生了16个日志对象,并且需要运行16秒才能打印完这些日志,请在程序中增加4个线程去调用parseLog()方法来分头打印这16个日志对象,程序只需要运行4秒即可打印完这些日 ...