【大咖分享】BFF在千寻位置网前端的落地和演进

极客星芒
• 阅读 206
掌门教育前端技术分享会第一期已于1.23号落幕,以下为大咖讲师们现场演讲的整理稿,感谢大家的支持:

讲师介绍

唐兵,前端技术专家,来自千寻位置网业务中台前端团队
负责团队电商相关业务开发,团队BFF层技术负责人
团队日常工作内容,主要对公司门户、电商、营销、分销等业务提供前端支持,业务覆盖 PC、H5、App、小程序、NodeJS 等各种技术场景。

以下为唐兵同学的部分精彩演讲内容:

BFF的历史演化进程

【大咖分享】BFF在千寻位置网前端的落地和演进

前端BFF层,我们大概经历了四个阶段:

  1. serverAPI:后端直接将接口暴露给前端开发,进行业务调用,也是我们前端开发最常接触到的模式。
  2. internalRest:后端同学在底层service数据接口的基础上,进行业务页面逻辑聚合处理,再透传到前端进行页面数据渲染。
  3. Apoll-Graphql:业务接口聚合结构化、模块化,目前这块是由我们千寻位置网前端开发同学牵头;这里的背景是,目前公司后端服务基本都是采用微服务化开发,接口数据都是原子化交付,
  4. Apoll-Federation:在Graphql基础上,做支撑服务的拆分,以提供更好的开发体验

目前,千寻位置网前端处于第三向第四阶段过渡

InternalRest

对应后端开发同学来说,强耦合页面展示逻辑的开发方式来开发API,开发体验很差、有干扰,internalRest可以帮助开发同学做开发分层,把拼接数据这一层的逻辑从数据的核心模块里面剥离出去,后端的数据模型可以跟具体页面逻辑无关;

这种方式在前后端分离的开始阶段,确实会极大的加速业务开发,但随着业务的不断发展,很多非业务模型的必要字段难以维护;这就是典型的【数据的生产者和数据的消费者之间的工作边界不清晰】

Apoll-Graphql

为什么选择graphql,

  1. graphql允许前端开发同学可以自定义数据字段,它提供配置式的方式来定义、裁剪数据结构,前端同学无需写冗余代码
  2. graphql可以非常方便的帮助我们,实现业务页面的数据聚合,比如我们一个商城系统,有商场列表、购物车、公告信息等等,这里我们可以通过一个graphql的定义接口,就拿到所有数据,减少接口请求数量
  3. 结合graphql强制要求描述数据类型,我们可以非常清晰、直观的理解每一个数据的具体含义

NestJs-Graphql

【大咖分享】BFF在千寻位置网前端的落地和演进

为什么推荐使用NestJs:

我们在实际的项目开发中发现,在开发server层时,强类型语言的开发方式对数据更友好,NestJs相对于Koa来说,对数据类型支持更好,另外NestJs提供了很多通用的模块功能,比如使用Guard做用户校验,filter做数据异常的处理等等

Apoll-Federation

目前千寻位置网,很多的业务场景下面,前端BFF层程序并不是直接对外暴露的,而是通过web-gw(网关)来做分发,通过网关层再来做接口聚合,这样万一生产某一个服务发生错误异常,仍然可以保证我们其它的服务不会受影响

Gateway是通过数据schema定义来聚合具体业务数据,并且它可以支持跨项目式schema格式获取,可以极大的方便我们跨项目开发

Gateway除开项目代码内定义schema结构外,还提供了远程push-pull方式拉取schema结构,不过Apollo官方未提供独立部署的解决方案,需要我们自己开发一套 Schema 集成系统,千寻位置网自己也实现了一套,这个就比较因人而异了
【大咖分享】BFF在千寻位置网前端的落地和演进

更多精彩内容,欢迎关注

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Peter20 Peter20
4年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Stella981 Stella981
3年前
AssemblyScript 入门指南[每日前端夜话0xEB]
每日前端夜话0xEB每日前端夜话,陪你聊前端。每天晚上18:00准时推送。正文共:2459 字预计阅读时间:10分钟作者:DannyGuo翻译:疯狂的技术宅来源:logrocket!(https://oscimg.oschina.net/oscnet/b880277c594152a503
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
Node.js 12中的ES模块[每日前端夜话0x9E]
每日前端夜话0x9E每日前端夜话,陪你聊前端。每天晚上18:00准时推送。正文共:2552字预计阅读时间:10 分钟作者:BrianDeSousa翻译:疯狂的技术宅来源:logrocket!(https://oscimg.oschina.net/oscnet/2ccaf94cecd3
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Serverless SSR 技术在「腾讯在线教育」的实践
我们的团队!(https://oscimg.oschina.net/oscnet/up3d4f125b403e4897bef9c200a0b691f6fd9.JPEG)IMWeb团队隶属腾讯公司,是国内最专业的前端团队之一。我们专注前端领域多年,负责过QQ资料、QQ注册、QQ群等亿级业务。目前聚
Easter79 Easter79
3年前
TOP100summit:【分享实录
王洋:猫眼电影商品业务线技术负责人、技术专家。主导了猫眼商品供应链和交易体系从0到1的建设,并在猫眼与美团拆分、与点评电影业务融合过程中,从技术层面保障了商品业务的平稳切换,同时也是美团点评《领域驱动设计》课程的讲师。在加入猫眼电影之前,曾就职于蚂蚁金服,参与了阿里网商银行从0到1的建设,以及支付宝钱包、花呗等产品的研发。导读:互联网电影行业在2016年
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
极客星芒
极客星芒
Lv1
我为你褪去一身骄傲,你却转身朝她微笑
文章
3
粉丝
0
获赞
0