低代码: 技术实现概述

概述

• 低代码或无代码开发是一种软件开发方法
• 它允许开发者通过图形用户界面和少量的手动编码来快速构建应用程序
• 这种方法极大地简化了传统的软件开发过程，减少了编写原始代码的需求
• 并缩短了从概念到部署的时间，低代码全栈开发是一种强大的工具
• 它让软件开发变得更加高效、灵活且易于访问
• 尤其适合那些希望快速推出产品并保持敏捷迭代的团队

低代码适用场景

• 业务流程自动化：例如审批流程、表单处理等
• 内部工具开发：创建定制化的管理工具、报表生成器等
• 原型设计与测试：快速构建应用原型以便于早期测试和反馈收集

低代码和无代码开发的比较

• 低代码和无代码开发都是现代软件开发领域中的重要趋势
• 它们旨在降低软件开发的技术门槛，使非技术背景的人也能参与到软件开发的过程中
• 下面是对这两种开发方式的比较：

1 ）无代码开发 (No-code)

• 定义：
  • 无代码开发是指使用图形化界面和预设的组件来构建应用程序的方法
  • 完全不需要编写任何代码。这种方法使得非技术背景的人员（如业务分析师）
  • 也能够构建出功能丰富的应用程序。
• 优点：
  • 易于上手：几乎不需要编程知识即可开始构建应用。
  • 快速开发：可以非常快速地创建原型和完整的应用程序。
  • 面向非技术人员：特别适合业务团队成员使用，他们可以自己构建所需的应用程序。
• 缺点：
  • 功能限制：可能无法实现复杂的业务逻辑或高度定制化的需求。
  • 扩展性有限：当应用需要增加更多的功能时，可能会遇到限制。
  • 依赖第三方平台：应用程序完全依赖于无代码平台的功能集。

2 ) 低代码开发 (Low-code)

• 定义：
  • 低代码开发允许开发者在可视化的环境中快速构建应用程序
  • 同时提供必要的代码编辑能力，以支持更高级的定制和扩展。
  • 通常会有一些预构建的组件和模板可用，但也支持手动编写代码。
• 优点：
  • 灵活性高：可以在不需要太多代码的情况下快速开发应用，同时也支持更复杂的逻辑。
  • 面向半技术人员：适合有一定编程经验的开发人员使用，业务分析师和领域专家可以参与到开发过程中，因为他们不需要深入的编程技能。
  • 扩展性强：当应用需要更复杂的定制时，可以通过编写代码来实现。
  • 减少开发时间和成本：由于减少了手工编码的需求，项目可以更快地完成，从而降低了开发成本。
  • 易于维护：平台通常提供更新和维护服务，减轻了开发者的负担。
  • 提高生产力：团队可以专注于创新而非基础架构搭建，这有助于提升整体生产力
• 缺点：
  • 学习曲线：尽管比传统编程简单，但对于完全没有编程经验的人来说仍然存在一定的学习门槛。
  • 潜在的成本：随着应用复杂度的增加，可能需要更多的人工干预和更高的开发成本。

3 ）综上所述

• 应用场景：无代码适用于构建简单的业务应用或原型，而低代码则更适合开发更为复杂的应用程序，尤其是那些需要一定程度定制化的场景。
• 目标用户：无代码平台主要面向非技术人员，而低代码平台则更多被半技术人员或具有基本编程技能的开发者所使用。
• 技术要求：无代码开发几乎不需要编程技能，而低代码开发则需要一定程度的编程知识。
• 功能和扩展性：低代码提供了更多的灵活性和扩展性，而无代码则更加注重易用性和速度。
• 选择哪种方法取决于项目的具体需求、团队的技术水平以及期望达到的应用程序复杂程度。
• 在实际应用中，企业可能会结合使用这两种方法，以达到最佳的开发效果。
• 我们主要关注低代码如何设计和实现

低代码全栈开发的关键特点包括

• 可视化构建：使用拖放组件和预定义模板来组装应用界面和后端逻辑，而不需要深入的编程知识。
• 自动化工作流：内置的工作流引擎可以处理常见的业务流程，如审批、通知等，无需额外的编程。
• 集成能力：能够轻松地与现有的系统和服务进行集成，比如数据库、云存储、身份验证服务等。
• 可扩展性：虽然主要依靠平台提供的功能，但仍然支持添加自定义代码以实现更复杂的功能或满足特定需求。
• 快速迭代：由于开发速度快，团队可以迅速测试假设并根据反馈进行调整。
• 跨平台兼容性：许多低代码平台支持多设备应用开发，如Web、iOS和Android等。

项目功能架构梳理

1 ）用户和基础登录(注册）功能 web

• 手机验证码(阿里云短信服务)或普通验证码(redis)功能
• 登录
• 注册
• 用户角色分: 普通用户，运营人员，管理人员

2 ）编辑器 web

• 编辑器上每个元素都对应相应的表单用于设置和保存
• 编辑器元素可以进行拖动，缩放，撤销，重做等
• 发布作品，生成url，可分享，可使用，可编辑

3 ）模板管理 web

• 模板列表
• 创建模板
• 保存模板
• 使用模板(进入编辑器)
• 下载模板图片

4 ）个人中心 web

• 个人设置
• 作品管理

5 ）组件库

• 组件库设计要通用化
• 可供编辑器使用，手机端使用，管理后端系统使用
• 文本，图片，图形，Final Page

6 ) 后端 API 和云服务

• 用于为所有前端web提供接口调用
• 数据库可以有 mongodb, mysql, redis等
• 云服务中可能会涉及OSS, SMS等服务

7 ）手机端或Web前端

• 一些页面用于提供给C端用户展示
• SSR渲染，事件/动画，微信分享

8 ）管理后端系统

• 用户管理
• 作品/模板管理等

9 ）监控平台

• 前端采集库
• 数据日志处理
• 监控数据可视化

10 ）自动化运维环境搭建

• 如果选用gitlab或github来做自动化运维的话，比如，我们选择了github
• 需要进行release管理，github-actions构建Docker或Docker Compose部署到阿里云ECS上
• 基于k8s或Docker Swarm 进行分布式部署
• 用于实现企业级CI/CD的流程

使用技术栈

• Vue3
• Nuxt3
• Typescript
• ESLint
• Vite
• Vue-Cli

2 ) 前端组件库以及样式解决方案

• Ant-design-vue
• NuxtUI
• Tailwind.css

3 ）Vue3 生态系统以及第三方工具

• Vuex / Vue-router
• Vue-test-utils
• 图片剪裁 Cropper.js
• 拖动排序 Vue-draggable-next
• 快捷键 Hotkeys.js
• 截图 Html2canvas

4 ）组件库打包以及发布

• Rollup 及其插件
• Npm 发布和配置
• Travis

5 ) 服务器端

• Egg.js / Typescript
• 加密 Bcrypt /MongoDB
• Mongoose / Redis
• Oauth2 / 登陆验证 JWT
• RBAC 权限系统
• 权限控制 Casl
• 本地多文件上传
• OSS 云文件上传
• Sharp 图片处理 / SSR

6 ）管理系统

• Nitro
• Nuxt3 Modules
• Nuxt-mongoose
• Unstorage
• ofetch / Zod
• Veevalidate
• Nuxt3 部署

7 ）性能优化

• Webpack-bundle-analyzer
• Webpack 构建优化
• Gzip 压缩
• 路由懒加载
• HTTP 缓存
• HTTP 压缩（Gzip + Brotli）
• HTTP/2

8 ）部署以及持续集成

• Docker, Docker-compose
• Github actions
• Release-it

9 ）云服务

• 阿里云 OSS
• 阿里云 ECS
• 阿里云 ACR
• 阿里云 SMS
• Gitee Oauth2

核心技术功能关注

• 数据和表单的对应关系怎样设计，数据的相互依赖和实时更新？
• 交互的复杂性，如何实现拖拽移动缩放排序，撤销重做？
• 画布、属性表单，两者的数据如何联动？
• 如何实现可扩展并且在前后端通用的组件库？

低代码关键技术思考

• 挖掘难点 - 找到项目中的痛点
• 技术解决方案 - 以文档的形式创造可追溯的思考模型
• 业务组件库 - 多项目复用的业务组件库
• 编辑器 - 界面到数据的映射