前端中台扫盲

中台

课堂笔记

什么是中台

前端中台扫盲_第1张图片
以拍电影为例: 我们看到的前台就是产出的电影本身,后台是整个拍摄组,那么中台就相当于横店影视城,提供可复用的场景来供后台使用,比如拍古装、民国片对应的场景,来产出不同的电影。

前台:所见即所得
后台:复杂逻辑
中台:拥有可复用的场景的平台

中台的作用/特点

减少重复劳动、赋能、平台化

中台的划分

主要分为:前台与后台之间的中台、技术中台、业务中台、组织中台
举例: GraphQL、FireBase、Kubernetes、PostgREST、LeanCloud等

前端中台扫盲_第2张图片

除此之外还有两种特殊的
孵化中台的中台:例如Spark、Storm等,可以孵化语音识别、人脸识别的AI中台,而这些孵化的中台可以给其它项目来用
调度中台的中台:比如淘宝会把很多中台产出的项目合成到一个时间线上,这些都是需要有一个中台来调度

涉及到的代码概念

元数据(metadata):用来描述数据的数据,比如下图中常见的请求头和响应头

前端中台扫盲_第3张图片

高阶函数

  • 处理函数的函数(arr.reduce)
  • 返回函数的函数 (koa中 app.use())


Proxy server:代理服务器
ES6 Proxy: 方便开发者劫持对对象的操作

  • getter/setter
  • Function call/construct


来看下面这段代码,axios,从空对象空手套白狼,来拦截get方法,一层层拦截name,method属性

前端中台扫盲_第4张图片

使用如下:

前端中台扫盲_第5张图片

小结

元数据可以用来生成新项目的数据库,生成接口调用。


用高阶函数,固化处理逻辑、留空处理逻辑,固化处理逻辑就是刚才说的孵化的AI人脸识别的中台就是专门做AI识别的逻辑,留空处理举个例子就是reduce方法留空了处理逻辑,传过来方法才开始处理。


Proxy来代替用户去做一些事,并且可以无感知的优化。比如数据库中间件,当用户秒杀下单时,自动做读写分离,交易太多打爆了之后重新把数据库重新拉起来,一笔一笔的去重新下订单。

简单项目举例:

层级 应用场景 面向人群 作用
前台 营销页面 用户 元数据生成页面
后台 营销后台 产品、营销、策划 生成元数据
中台 套娃中台 前端、后台 扩展元数据

简单列举一个表单配置项的例子,我们在前端提交下图这样的元数据给后端存储,前端通过fetch来获取对应页面的元数据:

前端中台扫盲_第6张图片

在前端页面这样去填充:

前端中台扫盲_第7张图片


前端中台扫盲_第8张图片

最终用户看到的是这样的页面:

前端中台扫盲_第9张图片


业务扩展方向


海报配置项、表单配置项、RestfulAPI生成项

总结

我们听过阿里提出的「大中台、小前台」,但是对中台这个概念却一直不能理解,通过文中对中台的特点,作用以及划分来逐步完善对它的认知。

并且对涉及到的元数据、高阶函数、proxy等概念也做了概述。然后通过代码举例来说明元数据到页面的展示,希望大家能对中台这个概念有一个了解。


思考:中台和基建、PaaS服务有什么关系?

你可能感兴趣的:(前端)