What?

GraphQL 是一种类似于 SQL 的结构化查询语言,由 facebook 于2012年创造,于2015年开源。SQL 在服务端定义,GraphQL 在客户端定义,也就是说 GraphQL 将数据的操作控制权从后端转移到了前端。

facebook 创造 GraphQL 的目的是取代以前用的 Restful API,这个方案之漂亮,连 jQuery 之父也忍不住啧啧称叹:

Why?

传统的 Restful API 存在的主要问题是无法灵活、精准的匹配前端的数据需求。

  首先,产品的需求经常变,于是前端需要的接口也经常变,比如遇到版本迭代,即便整个数据库结构没有任何变化,常常也需要重写或新增很多接口。其次,前端存在不同的平台,可能对同一类数据的请求,web 端和 app 端需要的字段是不一样的。

  后端的接口要做到与前端的需求一一匹配,会极大的增加后端的工作量,因此后端的基本原则是“为多个请求提供一个接口并集,而不是分别为每个请求单独提供接口”,“有现成可用,就尽量不新增接口”,比如前端需要两个接口 {1, 2}、{1, 3, 4},后端只需提供一个接口 {1, 2, 3, 4}。

  于是前端对数据的需求和后端提供的接口常常无法精准匹配。前端总会遇到这样的情况:请求的接口常常返回很多冗余数据;为了拿到一组数据,不得不发送多个请求;请求到的数据不符合需要的格式,不得不做额外处理;有时某个接口就只少了一个字段……

  一方面冗余的数据和多次的请求必然会影响产品体验,另一方面围绕 Restful API 建立的前后端协作模式会导致大量沟通成本,以致于尽管前后端分离了,很多团队的开发环节仍然离不开旧时代的“联调”。

  解决问题的办法可以是“深入推进前后端技术融合、全面加强前后端协作沟通、狠抓落实文档规范……”,这些都是办法,但对于 facebook 这种体量的产品,靠人力解决上述问题的成本可能是我们无法想象的,而且这也不像是技术人员解决问题的方式,至少 facebook 的工程师不这么想。他们的解决方案是:前端定义所需数据结构,后端根据数据结构自动查询数据库并按指定的数据结构返回数据,用啥取啥,真正实现后端云服务化。

  自动化实现,应该永远是每个程序员解决问题的第一思路。

How?

  前端向后端发送的 GraphQL 就是一串字符串,它的结构和 json 类似,其中包含增、删、改、查的指令,括号中定义了一些参数。服务端收到请求就会根据指定的指令、字段和参数返回所需的结构化数据,所见即所得。

具体的教程网上已有不少,在此不做深究。本文目的重在对技术的理解,而非对技术的使用。

Pros?

  1、网络层数据无冗余。特别是在移动端,冗余数据可能带来不小的延迟;

  2、前后端沟通成本低。根本用不着联调,后端也用不着写什么接口文档;

  3、灵活应对各种变化。前端取数据跟吃自助餐似的,私人订制,予取予求;

Cons?

  既然这么牛,怎么似乎没啥人用呢?

  以下参考尤雨溪的回答:https://www.zhihu.com/question/38596306?sort=created

  1、服务端结构必须符合 GraphQL spec 的规范,这意味着后端需要重写;

  2、GraphQL 非常适合特定的前端框架如 React,对于不使用前端框架的公司,就比较尴尬了;

  3、数据库查询这一层的性能优化比较难做,对于 facebook 这不是问题,对于其它公司可能就是个问题;

  4、GraphQL 需要后端配合,然而由于路径依赖、风险厌恶等可能的因素,前端要推动 GraphQL 必然会遇到各种阻力。

新技术探究之 GraphQL的更多相关文章

  1. 华为5G空口新技术(2015年)

    2015-03-24 长江后浪推前浪,4G建设方兴未艾,业界关于5G的讨论已如火如荼.对于每一代移动通信,空口技术都相当于王冠上的明珠. 在月初的世界移动通信大会上,华为发布了面向5G的新空口,并展出 ...

  2. Why GraphQL? 6个问题

    Why GraphQL? 6个问题 GraphQL, 是一个API的标准: specification. 对于每个新技术, 要搞清楚的6个问题: 1.这个技术出现的背景, 初衷, 要达到什么样的目标或 ...

  3. 基于React和GraphQL的黛梦设计与实现

    写在前面 这是笔者在中秋无聊写着玩的,假期闲暇之余憋出来的帖子.麻雀虽小,但五脏俱全,涉及到的方方面面还是蛮全的.所以就设计了一个黛梦(demo)------ 打通了GraphQL的接口与前端交互的流 ...

  4. 探究javascript对象和数组的异同,及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. [原] KVM 虚拟化原理探究(1)— overview

    KVM 虚拟化原理探究- overview 标签(空格分隔): KVM 写在前面的话 本文不介绍kvm和qemu的基本安装操作,希望读者具有一定的KVM实践经验.同时希望借此系列博客,能够对KVM底层 ...

  6. [原] KVM 虚拟化原理探究 —— 目录

    KVM 虚拟化原理探究 -- 目录 标签(空格分隔): KVM KVM 虚拟化原理探究(1)- overview KVM 虚拟化原理探究(2)- QEMU启动过程 KVM 虚拟化原理探究(3)- CP ...

  7. [原] KVM 虚拟化原理探究(6)— 块设备IO虚拟化

    KVM 虚拟化原理探究(6)- 块设备IO虚拟化 标签(空格分隔): KVM [toc] 块设备IO虚拟化简介 上一篇文章讲到了网络IO虚拟化,作为另外一个重要的虚拟化资源,块设备IO的虚拟化也是同样 ...

  8. [原] KVM 虚拟化原理探究(5)— 网络IO虚拟化

    KVM 虚拟化原理探究(5)- 网络IO虚拟化 标签(空格分隔): KVM IO 虚拟化简介 前面的文章介绍了KVM的启动过程,CPU虚拟化,内存虚拟化原理.作为一个完整的风诺依曼计算机系统,必然有输 ...

  9. [原] KVM 虚拟化原理探究(4)— 内存虚拟化

    KVM 虚拟化原理探究(4)- 内存虚拟化 标签(空格分隔): KVM 内存虚拟化简介 前一章介绍了CPU虚拟化的内容,这一章介绍一下KVM的内存虚拟化原理.可以说内存是除了CPU外最重要的组件,Gu ...

随机推荐

  1. 搜索技术---solr

    solr 企业站内搜索技术选型 在一些大型门户网站.电子商务网站等都需要站内搜索功能,使用传统的数据库查询方式实现搜索无法满足一些高级的搜索需求,比如:搜索速度要快.搜索结果按相关度排序.搜索内容格式 ...

  2. C#设置richtextbox某一段文本颜色

    假设 RichTextBox1 文本是"你好,我爱你中国",想要把中国变为红色,则 可以先找到中的位置是 7 :国的位置是8 设置 RichTextBox1.SelectionSt ...

  3. 根据wsdl文件用soapUi快速创建webService服务(有图有真相)

    最近公司业务上使用webservice 频繁.由于之前都是自己搭建webservice 自己定义提供给别人服务,现在则相反需求都是根据人家提供的wsdl 文件来生成 我们平台需要提供的接口.刚开始不知 ...

  4. GRPC在NET上的实践(记录篇)

    GRPC是什么? GRPC是一个开源RPC框架,于2015年3月开源,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于Protobuf 3.0(Protocol Buffer ...

  5. dns劫持分析

    最近在做dns解析,关注的重点在查询域名ns记录上,异常日志中捕获到一个域名,dig查询: 查询请求类型为ns,dig结果确只有一条A记录.处于好奇,查询类型改为a类型: 这个域名dig 查询A记录, ...

  6. js中 substr(), substring(), slice()的区别

    一.作用 三者都是基于原字符串创建新字符串的方法. 接收一到两个参数,第一个参数截取字符串的开始位置(字符下标,从0开始),第二个参数因方法不同而不同,后面不同点会说到. 另外,三个方法都不会修改原字 ...

  7. win2012中添加架构FTP服务器

    打开IIS管理器(win+R输入inetmgr后回车或通过 添加FTP站点

  8. 普通自适应遗传算法AGA的PC和PM公式解读

    写在前面 本文对于普通自适应遗传算法的Pm和Pc的公式进行了解读,此公式为M.Srinivas 和 L .M. Patnaik在1994年的<Adaptive Probabilities of ...

  9. javascript痛点之二作用域链

    1.执行环境(执行上下文) 先看段代码 var a = 10; var b = 20; function cc(){ var c = 30; alert("b="+b); } cc ...

  10. javascript痛点之三闭包

    先来看看第一节的例子 'use strict'; function num(){ //用var声明一个变量num1 var num1 = 15; } alert(num1);//num1 is not ...