浅谈业务中台前端设计

做前端中台业务一年多的时间,有一些心得体会,和大家分享分享。

  • 中台是什么
  • 中台业务的价值是什么
  • 做了哪些前端中台业务
  • 如何设计前端中台业务
  • 未来展望

中台是什么

百度百科的解释比较言简意赅:“中台,互联网术语,一般应用于大型企业。一般是指搭建一个灵活快速应对变化的架构,快速实现前端提的需求,避免重复建设,达到提高工作效率目的。”
当公司发展到一定规模,就需要建设中台团队来提高工作效率。
在前后端分离的协作模式下,会分为后端中台、前端中台。
对于前端中台来讲,常见的有BFF中台、业务中台等等。
我今天要分享的,主要是业务中台的一些经验。

中台业务的价值是什么

中台业务的大背景,诞生于“降本增效”的大号角下。
无论公司大小,无论业绩如何,“降本增效”一直都是一个不变的、可以挖掘的话题。
企业需要盈利,除去增加利润之外,经营成本也是需要考虑的重要部分。而人力成本或者说协作成本作为经营成本的重要组成,投入一定的时间和经历,产出服务或者工具,从而降低成本

做了哪些前端中台业务

大致列举一下。

  • 低代码加载器(xxx官网接低代码平台前端技术方案)
  • 统一登录页(xxx账号统一过渡页业务线对接)
  • webComponents(webComponents版本管理方案设计)
  • 微应用(微应用主子应用通信设计、微应用前端按配置渲染)
  • 网关插件(xxx与yyy免登、zzz ISV优化对接文档)

光看业务可能比较模糊,下面来谈谈技术实现细节。

项目技术
低代码加载器@xxx/yyy-hydrate、next slug路由
统一登录页localStorage天然域名隔离、前端网关proxy
webComponents@xxx/direflow-component、@xxx/direflow-utils、@xxx/direflow-deploy、前端网关接口、webpack复制重命名插件
微应用localStorage、React Context
网关插件基于koa的BFF网关

如何设计前端中台业务

关于如何设计前端业务,我觉得主要有几个方面需要考虑

  • 通用性尽可能强
  • 使用方接入尽可能简单
  • 文档尽可能详细、更新及时
  • 接入前自测并充分相信接入方

通用性尽可能强

通用性强其实有一个非常大的前提:前端技术栈统一、前端基建完善(比如前端网关、前端发布平台)。
得益于TUYA前端技术栈统一为基于next.js的React技术栈,以及完善的前端基建,通用性强这一点有着先天的不用考虑兼容性的优势,只需要考虑“业务通用”即可。
例如在xxx业务线,有业务线A、业务线B、业务线C、业务线D、业务线E等等业务线。
在开发中台业务时,主要需要考虑:技术方案在各个业务线是否通用?

举例来说:

  • 前端组件如何既兼容UI框架 v3,又兼容UI框架v4
  • 网关插件是否既支持协议A,又支持协议B
  • 若项目以微应用子应用方式下沉,主应用是否具备接入能力
  • 微应用前端按配置渲染,context方式可以无感注入到hook及组件

使用方接入尽可能简单

前端中台设计,面向的是业务线各团队的前端提供服务。
如何让“使用方接入尽可能简单”,这个可谓是非常重要。

举例来说

  • 低代码加载器接入:遇到next版本不一问题,需要一一统一。只有统一后,才能统一使用npm包接入
  • 统一登录页:数据存储localStorage、配置代理即可
  • webComponents:初期以script脚本链接接入、后期优化为脚本实时接入和更新;组件功能尽可能收敛,减少接入方工作量
  • 微应用:主子应用统一通信方式为foo,提供统一子应用获取应用信息npm包
  • 网关插件:尽可能将逻辑收敛到网关插件内部,例如登录态获取、api调用、redirect等等

文档尽可能详细、更新及时

一份清晰、易用的文档非常重要。
可以帮助接入方更快速的接入,可以节约很多沟通时间。
如果链路较为复杂,尽可能提供一份清晰的链路图(推荐使用mermaid绘制链路图)。

文档主要考虑几个方面

  • api / props 说明
  • 清晰的demo
  • 文字少一点,一图胜千言
  • 链路图、架构图、原理图
  • changelog(如果更新非常频繁的话)
  • 容易踩坑的一些友好提醒备注

接入前自测并充分相信接入方

在做前端中台初期,公共模块开发完成后,我会直接在业务线的项目中,做一次接入测试,确保链路可通、服务可用。
当服务在第一条业务线接入成功,并且在线上成功运行时,功能可用性已达成。
当有第二条业务线接入时,虽然接入方对链路不清楚,但是作为服务提供方,已经有了自测以及第一条业务线的接入,需要充分相信对方,辅助接入即可

未来展望

除去上述的很多方法论或者说经验之外,想要做好业务中台前端设计,还有很多事需要做:

  • 增强服务意识和沟通能力
  • 拥抱新技术、拓宽技术栈
  • 提升代码通用性、内聚性

趁你还年轻,做个优秀的前端工程师
努力成为优秀的前端工程师! 文章在微信公众号:大大大前端 同步更新,期待你的关注~
4k 声望
4.1k 粉丝
0 条评论
推荐阅读
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图
4k 声望
4.1k 粉丝
宣传栏