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的更多相关文章

  1. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  2. Web框架概述——React.js

    目前,在前端Web开发中,三大热门框架为React.js,Vue.js,Angular.js .当然,三大框架各有各的优缺点,这里就不多说了,下面我就针对前段时间所学的React框架做一下整体知识点的 ...

  3. web开发与设计--js数据类型,js运营商

    1. js数据类型划分:号码值类型,布尔,串 由typeof能够看到什么类型的数据被详述. 举例: <span style="font-family:Microsoft YaHei;f ...

  4. web开发常用的js验证,利用正则表达式验证邮箱、手机、身份证等输入

    正则表达式验证 //邮箱 \-])+\.)+([a-zA-Z0-]{,})+$/; email = document.getElementById("email").value; ...

  5. 微信web开发的上传图片js接口

    $('.chooseImage').click(function(){ wx.chooseImage({ count: pic_num, // 默认9,大于9也是显示9 sizeType: ['com ...

  6. 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍

      使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...

  7. Snap.svg – 现代 Web 开发必备的 JavaScript SVG 库

    SVG 是一种很好的 Web 技术方案,可以用来创建互动,在任何大小的屏幕上都会很好看.与分辨率无关的矢量图形.而这里推荐的 Snap.svg 这个 JavaScript 可以让你像 jQuery 操 ...

  8. 6个好用的Web开发工具

    在过去的几年间,涌现出了很多Web开发工具,它们大多还是比较吸引人的,方便了我们的工作.我们可以学习一下这些新东西,短时间就可以拓宽思路(PHP100推荐:学习10分钟,改变你的程序员生涯).这些应用 ...

  9. PHP开发人员对JAVA的WEB开发入门(初版-已废弃)

    最近准备对其他部门PHP开发的童鞋做一个对JAVA的培训.知己知彼,百战不殆,我要先了解点PHP,才能确认他们的基础,达到好的授课效果. PHP(原始为Personal Home Page的缩写,后正 ...

随机推荐

  1. C#/ASP.NET定时任务执行管理器组件–FluentScheduler定时器

    必须JobManager初始化 方式1: public void Start()         {             JobManager.AddJob(() => FetchingDa ...

  2. OSG3.40 编译时,无法打开输入文件“optimized.lib”

    解决方案: 正常情况下,下图中会多出一项:ZLIB_LIBRARY_RELEASE,之后屡次编译,都提示"无法打开输入文件"optimized.lib"" 因为 ...

  3. [LeetCode] Find Peak Element 求数组的局部峰值

    A peak element is an element that is greater than its neighbors. Given an input array where num[i] ≠ ...

  4. 45分钟带你入门Linux(附:笔者在工作室开讨论班录制的视频讲解)

    第一部分    熟悉Linux基本操作 一.初识Linux 1.Linux特点 ◊  开放性 ◊  多用户 ◊  多任务 ◊  良好的用户界面 ◊  设备独立性 ◊  丰富的网络功能 ◊  可靠的系统 ...

  5. 【WPF】值是枚举的RadioButton 绑定问题

    源 1.RadioButton 2.IValueConverter 3.枚举 xaml实现 <RadioButton Content="单打热身" GroupName=&qu ...

  6. 利用StringEscapeUtils对字符串进行各种转义与反转义(Java)

    apache工具包common-lang中有一个很有用的处理字符串的工具类,其中之一就是StringEscapeUtils,这个工具类是在2.3版本以上加上的去的,利用它能很方便的进行html,xml ...

  7. javascript关闭页面

    var browserName=navigator.appName; if (browserName=="Netscape") { window.open('','_parent' ...

  8. Base64原理解析

    一. Base64编码由来 为什么会有Base64编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像ASCII码的控制字符就 不能通过邮件传送.这样用途就受到了很大 ...

  9. 通过iMindMap改善你的工作方式的教程

    对于iMindMap 10,已经介绍了很多新增与改进的功能,你以为已经结束了?其实不然,本文,小编还会继续和你分享它的一个新功能与一个更新功能.这两个功能将在不经意间改善你的工作方式. 多媒体支持 在 ...

  10. UBER的故事

    今天分享一个很好的视频,19分钟,这个视频讲了过去几年一家伟大公司的成长的思路,这个演讲的PPT很棒,演讲者的语速.语调.表情等也非常适合大家在日常工作中学习.   链接:http://v.youku ...