都 4202 年了，还不知何为低代码？

叫叫技术团队
2,109 阅读3分钟

原创 舒晓满 / 叫叫技术团队

何为低代码

低成本代码的开发，通过拖拽、可视化配置、交互逻辑代码等，快速生成页面。下面是：宜搭的演示 kyp7k-7jksu.gif

低代码的优势

全面性

无代码低代码源代码
易上手🌟🌟🌟🌟🌟🌟
开发周期🌟🌟🌟🌟🌟🌟
生态🌟🌟🌟🌟🌟🌟
适用场景🌟🌟🌟🌟🌟🌟
  • 易上手：传统的开发学习成本高，相较于拖拽生成页面，使非开发人员更易上手
  • 开发周期：传统开发需要经历：拉分支、整理数据流、编码、lint 等操作。低代码、无代码所见即所得，拖拽生成页面即可立马投放
  • 生态：无代码应用面窄，不够灵活，不能面对复杂多变的业务，所以目前很多大厂如阿里、京东、百度、腾讯等，都在发展低代码，都有较为成熟的解决方案、组件、库可供参考
  • 适用场景：无代码只能适用于一些简单的页面，如推广页、官网首页、详情页等，如遇到一些复杂的页面，如表单，组件联动、多数据源、流程判断等，则低代码可以胜任

可以看到，相对于另外的两个偏科生，低代码更像是一个各方面稳定的五边形战士

渐进式

根据业务复杂程度，灵活增加参与人员

业务产品前端后端
文案、布局修改的需求🌟
有简单交互的需求🌟🌟
有复杂交互的需求🌟🌟🌟
依赖后端数据源的需求（无模板）🌟🌟🌟🌟
依赖后端数据源的需求（有模板）🌟🌟🌟

逃生舱

低代码并非唯一选择。当低代码开发的业务不断发展，到了过于复杂，难以维护的程度，此时可通过转码插件将低代码转为源代码，回归到原始的开发流程

出码插件（react版）

出码插件.jpg

解决的问题

将低沟通成本

参与的环节和人员越多，需要同步对齐的就越多

  • 传统业务需要：业务 => 产品 => 前端、后端 => 测试

  • 低代码：业务 => 低代码（其余人员视项目复杂情况动态参与）

业务快速沉淀

很多业务、需求大同小异，偏向于同质化

  • 大量模板，一键生成宜搭模板.jpg
  • 根据业务需求，量身定制（表单、流程、报表等页面）image.png

应对频繁迭代

前期业务探索，需要不断试错，导致需求频繁变更

  • 增删字段、模块
  • 修改布局
  • 样式改动
  • 后端接口变动

改需求表情包.jpeg

实现方案

低代码主要有两种实现方案：组件绝对定位、组件树结构

绝对定位组件树
自适应🌟
逃生舱🌟
项目无侵入性🌟
布局多样性🌟
编辑器、渲染器复杂度🌟

现主流的低代码实现方案都是组件树结构，以下着重介绍此方案

组件树结构关系图

渲染器原理

源码开发

import { Button, Card } from 'antd';

const Index = () => {
  return (
    <Card title='按钮'>
      <Buttpn type='primary'>提交</Buttpn>
    </Card>
  );
};

低代码开发

{
  "componentName": "Card",
  "props": {
    "title": "按钮"
  },
  "children": [
    {
      "componentName": "Button",
      "props": {
        "type": "primary",
        "children": "提交"
      }
    }
  ]
}

源码开发、低代码开发最终执行代码

React.createElement(
  Antd.Card,
  {
    title: '按钮'
  },
  React.createElement(
    Antd.Button,
    {
      type: 'primary'
    },
    '提交'
  )
);

国内低代码平台

Q&A

  • 低代码如何嵌入到现有项目？
    • 通过 npm 包引入、iframe 嵌套
  • 嵌入了低代码的项目，是否会降低用户体验？
    • 不会。渲染低代码页面本质是一个 js 库，和接入项目是同一个版本的 react、组件库，做到了无感接入
  • 用了低代码的业务，以后就只能用低代码开发？
    • 不是。可通过出码插件，将结构化的 schema 转为源代码
  • 如果内置的原始组件不满足需求，应该如何处理？
    • 可针对不同业务，开发业务相关的组件，再动态引入该包

参考文档

www.zhihu.com/question/40… www.sohu.com/a/714435097… github.com/taowen/awes… github.com/baidu/amis lowcode-engine.cn/index aws.amazon.com/cn/what-is/… www.ibm.com/cn-zh/topic…

avatar
文章
阅读
粉丝