为什么前端开发要选择 GraphQL

为什么前端开发要选择 GraphQL

这篇博客其实是以一次公司内的技术分享为基础做的调研和总结归纳,包含了我自己很多不成熟的观点看法。这次分享主要是想向新同事介绍为什么我们选择在项目中大规模使用 GraphQL 而不是更传统更简单的 RESTful API。

GraphQL 是什么

在上一篇有关 GraphQL 的博客里,我简单地说明了 GraphQL 的定义及其大致用途,贴了官网链接就开始介绍我使用 GraphQL 的“更优雅的”方式,对 GraphQL 本身描述得并不多。这里又贴一下英文的定义:A query language for your API

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

划重点,它是一种查询语言使数据可查询的运行时。作为一种语言,它有自己的语法,能够定义Type, Enum, Input, Fragment, Query, Mutation等元素,熟悉 Typescript 的朋友会对此感到亲切。而在前端开发中需要重点关注的是以下几个部分:

阅读更多
好久不见,前端再见

好久不见,前端再见

断断续续写前端项目也有好几年了,从大二接触 Javascript 和 Vue 时的兴奋,到接触小程序和 React 时的“渐入佳境”,再到这段时间的感到无比疲惫,我希望我在前端开发上大规模投入的阶段先暂告一段落了。为什么有这样的疲惫感呢?原因总结起来有以下几点:

  1. 前端开发面临的大多不是技术问题,是产品问题或美学问题,最终目标是让用户满意;
  2. 前端开发过于琐碎,需要处理的细枝末节极多,每个页面元素都有相应的状态需要管理;
  3. 前端难于抽象,对应到用户上则表现为具体业务需求是千变万化的。
阅读更多
打包发布 React 组件库

打包发布 React 组件库

起因

「代码写了不测等于白写」我总是跟身边的朋友这样调侃。然而我们写前端项目时很难在代码层面进行测试,大部分函数都是基于事件响应,接收用户输入的参数,并对页面组件或数据产生一定副作用,Mock 起来很麻烦。所以前端项目的测试往往都是端到端测试,即模拟用户在页面上进行操作,测试路径越离奇越好,因为无法提前预知用户会如何使用,所以最好在测试时可劲儿造。

曾经还会想着用 Cypress 等自动化工具进行端到端测试,例如用代码定义【打开某页面–>拖拽滑动条至页面下方–>点击输入框使之获取焦点–>输入“Hello world”–>按下回车–>等待页面响应–>观察响应是否符合预期】这个过程,但只要遇到元素稍多的页面,编写测试用例的过程就会变得机械呆板。

如果组件足够小,内容够聚焦,那么测一下也不是不可以。因为想在不同的项目中复用同一套富文本编辑组件(体积比较大,且包含机器构建的 JS),我把它单独提出来作为 NPM 包发布以便各个项目安装使用。这当中编码和测试都遇到了一些问题。

阅读更多
2022年我希望...

2022年我希望...

新年的元月已然过半,但直到现在我才能说我完成了上一年的工作。我一直在追求“忙的时候闲一点,闲的时候忙一点”的从容,这一年大部分时间是保持着这个状态的,让我非常欣慰。但是真正从学生身份蜕变成“开发者”“软件工程师”(或者“社畜”?其实即使是自嘲我也不太喜欢这个词),还是有着截然不同的感受和体会的。对于 2022 也有着无数的憧憬。

阅读更多

Nginx 基础

背景

Nginx 读作 engine x,是一个高性能的 HTTP 和反向代理服务器,还能用作邮件代理服务器或是通用的 TCP/UDP 代理服务器。有过后端程序部署经历的同学应该会有所了解,用 Nginx 能够很方便地完成反向代理、服务静态文件、实现负载均衡、接入 HTTPS 协议等任务。

根据官方文档里面写到的,除了提供静态文件服务、反向代理和负载均衡等功能之外,还提供以下包括单不限于若干个方面的支持:

  1. FastCGI, uwsgi 之类服务器和反向代理服务器的缓存支持;
  2. 以域名/IP 为基础的虚拟服务器、Keep-alive 和流水线链接的支持;
  3. 访问日志、错误日志的输出和格式化,带缓存的日志写机制;
  4. 3xx-5xx 错误码重定向,根据正则表达式重写 URI (Rewrite);
  5. 基于客户端地址的访问控制和函数调用;
  6. HTTP referer 的验证、支持除了 GET 外的几种 HTTP 方法: PUT/DELETE/COPY/MOVE/MKCOL;
  7. FLV/MP4 的流播放、响应限流、限制单点的并发连接数和请求数;
  8. 等等…(上面只列了我读得懂的)

Nginx 的功能实在太多了,在这里全部列出来不太可能。一直以来我对 Nginx 都停留在“配置是什么,work 就行”的态度。因为这周程序部署时遇到的一点问题,上网搜了好多帖子、博客寻求解决方法那种捉襟见肘、有病乱投医的样子让我觉得很狼狈。借此为契机,决定周末看一下 Nginx 的官方文档。nginx 旧版的官网文档组织混乱,建议移步 Nginx Plus (Nginx 的商业版)官网。Nginx 和 Nginx Plus 的对比放在这里

阅读更多

如何相对优雅地使用 GraphQL

关于 GraphQL,它的官网(需要科学上网)是这样介绍的:

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余,也让 API 更容易地随着时间推移而演进,还能用于构建强大的开发者工具。

作为 RESTful API 的竞品,GraphQL 从开源之初就备受关注,一是因为它是由 Facebook 开源的项目,二是它挑战了 RESTful API 的地位,这是很关键的一点。RESTful API 利用 URI 的具体内容和请求方法来区分请求的资源或者方法,其中的资源 URI 容易与路由路径产生混淆和重复;资源数量达到一定的数目之后,如何给资源 URI 起名或许也是一件困难的事情。而 GraphQL 则鼓励开发者将所有需要请求的信息显式的写在请求体当中,精确到具体的字段,不多也不少。

我参与的几个项目都是用 GraphQL 作为 API 的基础,我总结出了一个在前端相对优雅地使用 GraphQL 的方法。这篇博客不讨论 GraphQL 的基本概念,主要介绍这个方法。(为省篇幅,这篇博客里面的代码均不做异常处理)

阅读更多
记2021年小程序大赛

记2021年小程序大赛

从本科到现在总共参加过三次微信小程序大赛,前几天刚完成赛区决赛的答辩,心想着以后应该都不想再参加了,于是想记录一下这次的参赛经历。

2018 和 2020

2018 阴差阳错

微信小程序从 2017 年正式上线博得广大关注,在第二年 2018 年春季,微信就推出了全国高校微信小程序开发大赛,吸引了很多大学生参加,我就是其中一个。正在读大二的我报名了一位学长组织的 SRT(Student Research Training) 项目,原本的题目是要开发一款在线客服平台。然而当时已经把项目申请里面提到的客服平台提前完成了,于是我们真正做的就变成了小程序。甚至还用这个小程序参加了第一届的微信小程序大赛。

阅读更多
我毕业了

我毕业了

从 2016 年 8 月来到北京上学,到现在已经快要五年了。近期借着学校给 2020 届补办毕业典礼的契机,得以穿上学士服跟朋友们同学们一起拍毕业照。课程学习生活暂告一段落,心里有很多感慨不吐不快。

大概从以下几个方面来聊一聊吧:专业选择给我的影响,母校之于我的意义以及自己的成长和收获。

专业选择

用为期两天的高考结束了漫长枯燥的高中生活之后,我进入了软件学院继续学习,专业名称是软件工程。其实我填报志愿时对母校的专业不是很了解,在招生组老师和学长学姐的介绍之下选择了这个和计算机相关性最大的专业。(对没错,当时我们省不招计算机)

阅读更多
青岛(二)

青岛(二)

从青岛回来之后马上就是学生节和一系列的课程、任务和作业,根本没时间和心情来写这篇博客,所以青岛(二)这一篇拖了很久…
但是过了一个多月的时间很难再拾起当时的心情了,从拍下来的照片里才能记起来去过哪里有哪些好玩的地方,可以说是看图说话。反正也没人看,我直接这样随便写写就当给自己一个交代好了,不喜欢做半途而废的事情。正义虽然会迟到,但永远不会缺席。

这一篇我们主要是去了崂山、信号山公园、天主教堂、五四广场转了转。

阅读更多
青岛(一)

青岛(一)

说在前面

最近两个月遇到了不少的烦心事,让我颓废了好一阵子:懒得写博客,懒得跟人说话。很久没有到过海边,都要忘了在海边吹风是什么感觉了,趁着这次五一假期,和两个朋友一起去青岛玩了玩。虽然总共只待了 3 天 4 晚,但是还是有两点收获:

  1. 青岛是一个不错的城市;
  2. 不要在黄金周出游;

首先,临海的青岛让我这个南方人感受到了久违的湿润,终于不用担心因为干燥导致的皮肤瘙痒和手指倒刺,让我能够把身体乳和护手霜安心地放在行李箱里。青岛风景很美,海鲜很丰富,从视觉和味觉上都给了我满足感。

阅读更多