最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

2022 重庆前端交流会「同舟」 —— Light Talk 话题四:重庆本土团队的技术积累

若思若想 onlyling 636浏览

2022 重庆前端交流会「同舟」 —— Light Talk,PPT 文件 话题四:重庆本土团队的技术积累 · 语雀

大家好,我是来自洪九果品的凌子清,接下来我给大家带来的主题是《重庆本土团队的技术积累》,两个内容,GraphQL 和 React Native。

技术栈

首先介绍一下术栈,可以看出我们是 React 方向,TypeScript 深度使用者,大致有三个方向,左上角的 web、右上角的 App、右下角的服务器端,中间采用了 GraphQL 接口方案。

GraphQL

大家可以通过旁边的二维码了解一下 GraphQL(https://graphql.org),接下来主要分享它在我们实际开发中的一些体验。

实际项目中步骤分为

  1. 前后端根据业务、需求定义接口(schema 文件)

  2. 前端根据需要写 GraphQL 查询语句

  3. 通过 graphql-codegen 统一的配置生成 js/ts 文件(react hook 和 Promise)

  4. 业务代码中使用接口请求接口

写查询语句

第 5、6 页

左侧第一个分页接口,右侧是它完整的返回数据,在写查询语句的时候我们没有要dbOwner,因为业务中用不着。

左侧第二个是下拉框的选项接口,其中某一个字段别我们重命名了。

我们来看看最后的接口返回情况,分页按照我们想要的字段返回了数据,没有 dbOwner 的话一次请求可以减少很多不必要的额外查询。

下面的下拉选项也按照想要的字段名返回了,后端不用改代码,前端也不用做多余的转换。

生成 js/ts 文件

第 7 页

把查询语句写好后,通过代码生成命令产出各种接口文件。

业务中使用

第 8 页

直接在代码里使用,接口参数、返回值都有类型提示。

参数错误

第 9 页

左侧是参数数据类型错误,约定了 dsType 是一个字符串,实际给了数字。

右侧是给了不在约定内的参数,Apollo 把参数过滤后,报错没有必填参数。

这两个错误并没有进入业务代码范围,在 GraphQL 服务中就被拦截了,基于约定(schema)预处理数据。

Qiufen

第 10 到 13 页,https://github.com/hjfruit/qiufen

期初使用 GraphQL 的时候,后端接口给了我们这样的文档,可以在线调试、搜索接口,但是不够好用,比以前的 swagger 使用体验差很多。

我们就做了一个关于 GraphQL 的文档及Mock 工具。

通过注释约定接口分类,搜索支持接口名、注释搜索,单个接口一组接口复制 gql 语句,单个接口跳转到在线调试页面等等。

gql 语句中添加 mock 指令自定义返回内容。

还可以接口参数自定义。

React Native

第 14 到 17 页

我们团体主要维护三个 App,其中一个在性能比较弱的 PDA 上使用,技术栈是 RN。

从 0.64.0 开始在项目中使用。当时正好在开发 PDA 项目,直接用上爱马仕,点击响应、渲染页面都快了不少。升级 RN 版本也能得到性能提升。

RN 团队博客给了一些对比数据,可以看看中文翻译。https://zhuanlan.zhihu.com/p/562106101

我们也做了一些简单的对比。

以下对比数据并不在 PPT 中,截图不适合暴露。设备是 OPPO A8,低端 Android 机器。

左边是首页初始化,每个灰色图形是一个独立的动画,一个小卡片有九个,一共八组。旧版本中大概是 4.7 秒,新的大概是 5.2 秒,反向升级了,如果只有一组的话只要三秒多。

右边是切换页面,旧的大概是 1.5 秒,新的降到了 1.2 秒,在计算过程中时间确实少了很多。

React Native Xiaoshu

第 18 页

在实际业务开发中我们大部分时间都是在实现、还原设计稿,在 React Native 这边发现市面上已经没多少 UI 组件库了,国内 Antd、美团两个开源的库已经接近停更,国外 react native elements、react native paper 或组件数量少或 API 不够丰富。

于是就参考了 web 移动端组件库开发了一套 React Native UI 组件库,小暑,目前小暑已经支持团队内所有的 App 开发。

大家可以扫描二维码看看文档,Android 用户可以下载预览 App 在真机上试用。

其他

第 19 页

除了以上的工具,我们内部还有打包平台、多语言管理平台。

打包平台目前已经代替 jenkins,为构建项目、打包、部署提供统一的交互。

多语言通过识别代码中文、收集、上传、同享翻译词汇,做多语言需求更简单,也更容易维护。

未来

第 20 页

以后还要做中台解决方案、App 容器化、监控平台。

转载请注明:OnlyLing - Web 前端开发者 » 2022 重庆前端交流会「同舟」 —— Light Talk 话题四:重庆本土团队的技术积累