作者：小影前端团队——听说

背景

如果说2020年是微前端大火的一年，那么2021年则是低代码的元年。2021年开年，“低代码”成了各大云厂商加码的重点。随着公司业务量不断增加，大量的任务堆叠到我们前端这边来，我们也在思考如何探索搭建一套自有的低代码平台。

什么是低代码

“低代码“ 并不是一个很新的概念，最早可追溯到20世纪90年代，英文全称为Low-Code Development Platform，期望更多的人可以参与到应用程序开发当中，不仅是具有专业编程能力的程序员，非技术背景的业务人员同样可以构建应用；对于大型企业来讲，低代码开发平台还可以降低IT团队培训、技术部署的初始成本。

为什么一直没有发展起来，个人思考觉得原因不外乎两种：

这是一个看起来容易，做起来却不知如何下手的东西
很多大厂其实都已经有了自己的低代码的产品，出于各种原因并没有开放。

调研

低代码是一套完整的解决方案，包括从页面编辑 => 页面生成 => 页面展示完整的流程，那如果从头开始做这一套东西，时间周期、成本与其带来的收益相较而言可能就没有那么多了。从哪里入手，以最快、最低成本的方式去接入，后续再不断完善似乎这才是我们自己低代码的正解。

从我们现有的后台来看，页面主要分为三部分: sider、header、content 三部分；我们最为紧急的问题是如何处理content的动态配置，相对sider与header部分暂可先放置；所以我们第一步是content 的动态配置

首先我们先分析我们80%的页面，发现他们都长这样

对当前页面我们可以解构出来如下所示的结构

会发现我们日常处理的内容其实大概就几种：列表页、Form表单、布局。那我们最重要的就是解决这个问题。

架构设计

考虑我们现有情况，为满足第一步接入，需要实现两部分：渲染引擎 & 组件库

渲染引擎

如何根据配置生成组件？如何能够根据配置生成原生HTML组件和自定义组件，我们可以根据React渲染的规则，对于原生组件，标签为小写的特点，区分是否为原生组件。

let Comp;
// tagName 是否为小写
if(tagName.toLowerCase() === tagName){
    // 组件为原生组件
    Comp = TagName;
} else {
    // 从自定义组建中根据tagName读取具体组件
    Comp = CustomMap[tagName];
}

那么一个简单的渲染引擎就可以编写为如下形式

let renderConf = (conf) => {
    const { name, key, props, children } = conf;

    // 处理组件名称
    const Comp;
    if(name.toLowerCase() === name){
        Comp = name;        
    } else {
        Comp = ComponentMap[name];
    }
    
    // 递归渲染具体组件
    return <Comp key={key} {...props} >
        {
          children && children.length ? 
              children.map(child => renderConf(child)) : null
         }
    </Comp>
}

Low code 最核心的东西其实就是渲染这部分，其他的所有的工作都是针对渲染这部分的优化。这里就不具体展开了效果展示通过上面架构设计，我们已经可以通过配置实现Content页面的功能，具体效果如下：

成果及展望

基于现有的架构，我们已经能够通过配置，解决80%以上的需求，开发效率上得到很大的提升。

当前的架构还不够完善，还需要一定人力的投入，对于可视化部分尚未开发，可视化是相对复杂和成本较高的部分，目前暂时不考虑开发。当我们业务量不断上升后，可视化也将在未来阶段逐步落地。

低代码平台，我们还在持续研究和跌打中，想了解更多细节，可以联系我们一起讨论和学习。

招贤纳士

小影前端团队，是一个年轻、活动且富有创造力的团队，隶属于小影科技开发中心，Base 在风景如画的杭州。团队在日常的业务对接之外，还在互动技术、图像渲染、跨端技术、工程化平台、性能体验、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，并一直保持好奇，持续探索前端技术。如果你想大胆自信的表达你的想法；如果你想有个机会实现自己的想法；如果你希望落地的想法有一个团队来支撑；如果你愿意跟一群积极向上的小伙伴干一些持续迭代自己，持续提升技术能力的事；如果你相信相信的力量；那就加入我们吧！快戳链接>>>quvideo.jobs.feishu.cn/s/eV8jfyf

低代码平台在小影的探索和实践

背景

什么是低代码

调研

架构设计

渲染引擎

成果及展望

招贤纳士