前端中台扫盲

中台

课堂笔记

什么是中台

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

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

中台的作用/特点

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

中台的划分

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



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

涉及到的代码概念

元数据（metadata）：用来描述数据的数据，比如下图中常见的请求头和响应头



高阶函数

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

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

• getter/setter
• Function call/construct

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



使用如下：

小结

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


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


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

简单项目举例：

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

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



在前端页面这样去填充：

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

业务扩展方向

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

总结

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

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


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