初步认识低代码

优质资源分享

学习路线指引（点击解锁）	知识定位	人群定位
Python实战微信订餐小程序	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
Python量化交易实战	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

初步认识低代码

本篇主要介绍低代码是什么、低代码平台的分类、低代码能力指标、低代码平台的调查问卷，最后使用低代码前端框架 amis 初步搭建一个后台系统。

低代码是什么

低代码不是一个纯粹的编程工具，把它叫做生产力提高工具更为合适。

以前人们会在简历中写熟练使用 office等办公软件，以后人们可能会写熟练使用低代码平台（办公自动化的一种新能力）

程序员可以跟各个部门配合，把各种重复性的、最常用的流程沉淀成服务模块，在加上低代码平台或无代码平台，普通的办公人员（即非程序员，比如运营）就能用最简单、人性化的方式把它调用出来解决问题（或流程自动化），而无需额外的程序员投入。

简单的应用场景

某公司有个网上商城，每到大促期间，比如国庆节，运营就会要求开发许多活动页，通常一个活动页需要一个程序员约1天的时间，由于人力的限制，造成了开发需求和交付能力的差距。

该公司程序员小c通过和运营沟通，发现 90% 的活动页都很相似的，可以把这部分需求沉淀下来变成一个服务，另外的 10% 的活动页交由程序员定制开发。

最终小c花了2个月做了一个活动生成器（基于图形化拖拽、参数化配置，实现快速构建活动页的工具），据公司的运营反馈，大促期间，绝大多数的常规活动由运营自己通过活动生成器生成，无需程序员的额外投入，提高了生产力，解决了问题。

低代码平台的概念和分类

低代码这一概念由 Forrester 在 2014 年正式提出。

低代码，顾名思义，就是指开发者写很少的代码，通过低代码平台提供的界面、逻辑、对象、流程等可视化编排工具来完成大量的开发工作，降低软件开发中的不确定性和复杂性。实现软件的高效构建，无需重复传统的手动编程，同时兼顾业务人员和专业开发人员的更多参与。

广义的低代码：指所有可以帮助缺少编程基础的人员快速完成软件开发的技术和工具。

高德纳(Gartner) 认为，低代码主要有以下几个分支（或细分市场）：

• 无代码开发平台
• 低代码应用平台(LCAP)
• 多重体验开发平台(MXDP)
• 智能业务流程管理套件(iBPMS)

无代码开发平台

无代码开发平台（或“0代码”）属于低代码平台的一种，不提供或者仅支持有限的编程扩展能力。比如用来开发内部管理类或市场营销类表单。

如果需要没有专业开发人员协助的情况下进行“非编程开发”，可以考虑它。技术门槛低，需要注意工具的能力范围（应用场景有限），它们是专门为非编程人员设计的。

低代码应用平台(LCAP)

LCAP 属于狭义的低代码平台，是万金油类（什么都能应付）的产品，可用来开发前端和后端的应用。

这个市场囊括了大部分低代码技术供应商。

它通过声明式的模型驱动和基于元数据的服务来提供快速的应用开发、部署和执行。

多重体验开发平台(MXDP)

MXDP 提供快速开发跨平台 APP 的工具，一般用来开发多平台/多终端应用。

这类产品通常提供一套包含前端开发工具和后端服务的集成套件，使开发人员（有时甚至非开发人员）能够跨各种数字设备进行应用开发。

智能业务流程管理套件(iBPMS)

整合了AI 等技术的业务流程管理系统突出后端流程定义和数据整合能力，一般用于解决大型企业的跨系统业务流程。

Tip：低代码平台还可以根据其他维度进行分类，比如全栈平台还是仅前端页面、通用领域还是聚焦于 erp、crm、供应链等专业领域、开源的还是收费的、国内的还是国外的等等。

低代码的能力指标

高德纳(Gartner) 列出了低代码平台的 11 个关键能力指标。

Tip：在选择低代码平台的时候，这些指标可以给我们提供参考。

#mermaid-1657299911480 {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1657299911480 .error-icon{fill:#552222;}#mermaid-1657299911480 .error-text{fill:#552222;stroke:#552222;}#mermaid-1657299911480 .edge-thickness-normal{stroke-width:2px;}#mermaid-1657299911480 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1657299911480 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1657299911480 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1657299911480 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1657299911480 .marker{fill:#333333;stroke:#333333;}#mermaid-1657299911480 .marker.cross{stroke:#333333;}#mermaid-1657299911480 svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-1657299911480 .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-1657299911480 .cluster-label text{fill:#333;}#mermaid-1657299911480 .cluster-label span{color:#333;}#mermaid-1657299911480 .label text,#mermaid-1657299911480 span{fill:#333;color:#333;}#mermaid-1657299911480 .node rect,#mermaid-1657299911480 .node circle,#mermaid-1657299911480 .node ellipse,#mermaid-1657299911480 .node polygon,#mermaid-1657299911480 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1657299911480 .node .label{text-align:center;}#mermaid-1657299911480 .node.clickable{cursor:pointer;}#mermaid-1657299911480 .arrowheadPath{fill:#333333;}#mermaid-1657299911480 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1657299911480 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1657299911480 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-1657299911480 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-1657299911480 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1657299911480 .cluster text{fill:#333;}#mermaid-1657299911480 .cluster span{color:#333;}#mermaid-1657299911480 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1657299911480 :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;}低代码平台的 11 个关键能力指标易用性用户体验数据建模和管理的便利性流程与业务逻辑开发能力和效率开发平台的生态系统编程接口和系统集成能力支持更先进的架构和技术服务质量用户模型与软件生命周期的支持开发管理安全与合规* 易用性

易用性是低代码平台生产力的关键指标，指在不写代码的情况下能完成功能的多少。

• 用户体验

这个指标能够决定最终用户对开发者的评价。

比如给企业的客户或供应商的项目对用户体验的要求会高于企业内部用户使用的项目，对于内部（B2E）应用程序，简单的 web 表单或许就已满足。

• 数据建模和管理的便利性

这个指标就是通常所讲的”模型驱动“，模型驱动能够提供满足数据库设计范式的数据模型设计和管理能力。开发的应用复杂度越高，系统集成越高，这个能力就越关键。

• 流程与业务逻辑开发能力和效率

这个能力包含两点：
① 该低代码平台能否开发出复杂的工作流和业务。决定了项目是否可以成功交付
② 开发这些功能的便利性和易用性。决定了项目的开发成本。

• 开发平台的生态系统

低代码平台的本质是开发工具，内置的、开箱即用的功能无法覆盖全部的应用场景。这时，就得基于该平台的生态系统来提供更深入、更全面的开发能力。很多开发平台都在建立自己的插件机制，这也是平台生态的一个典型体现。

• 编程接口和系统集成能力

为避免数据孤岛，企业级应用通常需要与其他系统进行集成，协同增效。此时，内置的集成能力和编程接口就变得至关重要。除非确认在可预期的未来，项目不涉及系统集成和扩展开发。

• 支持更先进的架构和技术

开发出来的应用是否支持更先进的架构，比如对接IoT（物联网）、机器学习

此时深入了解低代码平台产品的架构就尤为重要

• 服务质量

服务质量指通常所说的”无故障使用时间“。

• 用户模型与软件生命周期的支持

软件开发整个生命周期，除了开发和交付，还有设计、测试、运维等环节。比如系统开发早期的用户模型建立和验证过程通常需要快速模拟和迭代，投入的开发力量甚至不少于正式开发。

如果一套低代码平台具备全生命周期所需的各项功能，将会大大简化开发者的技术栈，进一步提高工作效率。

开发的系统规模越大，这一能力就越重要。

• 开发管理

开发管理用于帮助开发团队负责人，降低软件开发管理过程中的各种人为风险。例如代码库权限管理、版本权限管理、发布权限管理。

现代软件开发中的敏捷开发能否在低代码中落地，也是衡量开发管理的重要指标。

开发规模越大，该指标越应当关注。

• 安全与合规

大型企业、特定行业企业（如军工、金融）通常对该指标的关注程度要更高一些。

该功能的具体体现有：支持本地部署、全SSL数据传输、密码强度策略、跨域访问控制、细粒度的用户权限控制等等

低代码平台的调查问卷

2018 年，高德纳(Gartner)追踪了 200 多家低代码开发工具供应商，对这些供应商进行了调查，发现在回应的 82 家供应商中，有 40% 的低代码供应商，每年可以从超过 54,000 个最终用户组织中收取 25 亿美元的工具收入（包括许可和订阅）。

在这些供应商中：

• 85% 的供应商认为自己是覆盖了用户体验、逻辑和数据的全栈，而不是专门处理应用程序的一部分
• 96% 的供应商认为自己提供了完整的软件开发生命周期(SDLC)，而不仅仅是设计和开发的加速器
• 88% 的供应商提供了公有云部署，62% 的供应商提供了私有云部署能力
• 84% 的供应商提供了 WebIDE（在线集成开发环境），30% 的供应商提供了桌面 IDE
• 78% 的供应商将数据库作为其工具的一部分
• 47% 的供应商生成的代码在大多数情况下可以进行手工编辑
• 79% 的供应商提供基于表单的用户界面，62% 的提供移动应用程序界面，而 5% 不到的提供了聊天机器人
• 95% 的供应商目标客户是业务线开发人员(技术型非编程开发人员)的前三个开发人员角色，而 40% 的供应商选择的头部开发人员角色是业务高级用户(业务型非编程开发人员)
• 55% 的供应商的主要终端用户类型是 B2E（企业对雇员），而 B2B（企业与企业） 和 B2C 的占比分别为 20% 和 25%

Tip：数据来源 Low-Code Development Technologies Evaluation Guide，仅作参考。

低代码平台 amis

实践出真理。我们尝试使用 amis 做一个后台系统。

amis 是什么

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。—— amis 官网

此刻（2022/07/08）在 github 上有 11.3k 的 Star。

amis 是百度的一个低代码平台。它不是全栈平台，仅处理应用程序的一部分，也就是前端页面。

终端用户类型不是B2C（企业对客户），他专注于中后台页面。虽然提供了大量常规UI组件，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果。

易用性方面，通过 json 配置来生成页面。

目标用户包括普通用户和开发者，据官网介绍：

• 没写过前端页面的人员可以做出专业且复杂的后台界面，做出来的页面不需要经过二次开发就能直接上线。
• 支持扩展。支持90%低代码，10%代码开发的混合模式，既提升效率，又不失灵活。

文档介绍

文档直接看amis 官网。文档内容很多，光组件倘若每个都用一下，至少得一天以上，笔者就不一一介绍，这里稍微提几个我们就马上开始实战：

快速开始

amis 有两种使用方法，笔者这里使用 JS SDK 的方式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2YbdpNtp-1657300326169)(https://images.cnblogs.com/cnblogs_com/blogs/665957/galleries/2185871/o_220708023030_amis-api-start.png “amis-api-start.png”)]

表单

比如要实现某个样式的表单，需要的 json 配置文件就在右侧的编辑代码处：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j96T4Nyy-1657300326171)(https://images.cnblogs.com/cnblogs_com/blogs/665957/galleries/2185871/o_220708023022_amis-api-form.png “amis-api-form.png”)]

接口请求

得发送接口出去，所以 API 这一篇得看一下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ysHMWlZ-1657300326172)(https://images.cnblogs.com/cnblogs_com/blogs/665957/galleries/2185871/o_220708023016_amis-api-api.png “amis-api-api.png”)]

主题样式

amis 提供了4种（云舍、Antd、ang、Dark）主题样式，比如选择Dark，样式变黑了：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vloMRWtj-1657300326174)(https://images.cnblogs.com/cnblogs_com/blogs/665957/galleries/2185871/o_220708023038_amis-api-theme.png “amis-api-theme.png”)]

项目需求

通过 amis 做初步搭建一个后台系统，包含登录和一个一级模块（任务计划），任务计划中包含列表，还有增加、删除、编辑和查询。

项目初始化

amis 提供两种使用方法：一种是用在 react（react 方式） 项目中，一种是对前端不甚了解的开发者（即 JS SDK 方式）。

笔者选用 JS SDK 方式。先用起来再说，笔者相信同样的需求用另一种方式（react）应该也能够实现。

新建项目 amis-test：

// 新建项目 
$ mkdir amis-test

// 通过 npm 初始化项目
amis-test> npm init -y

通过 npm i amis 下载包，但报错如下：

amis-test> npm i amis
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree  
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.6" from [email protected]     
npm ERR!   node_modules/amis
npm ERR!     amis@"*" from the root project
npm ERR!   peer react@"^18.2.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@">=16.8.6" from [email protected]     
npm ERR!     node_modules/amis
npm ERR!       amis@"*" from the root project
npm ERR!     peer react-dom@">=16.8.6" from [email protected]
npm ERR!     node_modules/amis-core
npm ERR!       amis-core@"*" from [email protected]
npm ERR!       node_modules/amis
npm ERR!         amis@"*" from the root project
npm ERR!       1 more (amis-ui)
npm ERR!     1 more (amis-ui)
npm ERR!   2 more (amis-core, amis-ui)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.2 || ^17.0.0" from [email protected]
npm ERR! node_modules/amis/node_modules/ansi-to-react
npm ERR!   ansi-to-react@"^6.1.6" from [email protected]
npm ERR!   node_modules/amis
npm ERR!     amis@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

换一种下载方式：

github 的 releases，文件是 sdk.tar.gz —— 官网_快速开始

chrome 下载失败、edge 下载成功，解压到项目根目录。

hello-world

新建文件 hello-world.html，内容直接拷贝于官网（快速开始）：

DOCTYPE html>