一.low-code 是什么？

A low-code development platform (LCDP) is software that provides a development environment used to create application software through graphical user interfaces and configuration instead of traditional hand-coded computer programming. A low-code model enables developers of varied experience levels to create applications using a visual user interface in combination with model-driven logic.

通过 GUI、配置化的方式代替传统的手写代码编程，让经验背景不同的开发者都能在低代码开发平台上，基于可视化的 UI 和模型驱动的逻辑来创建应用程序

利用低代码平台创建整个 App，或者只在一些特定场景需要人工编码，减少了所需的人工代码量，一方面能够提高业务交付速度，另一方面也能让广大非专业开发者参与应用开发，降低了开发门槛和人力成本

技术上，实现低代码平台的关键要素是模型驱动设计、代码自动生成和可视化编程，通过这些手段来隐藏下层的代码细节

low-code 与 no-code

最 low 程度的 low-code 就是 no-code，也就是说，最大区别在于 no-code 无需编码：

No-code development platforms are similar to low-code development platforms but require no coding at all.

具体的，主要差异在于：

• 平台用户：任何业务人员都能使用无代码平台，而低代码平台只面向开发者（尽管专业要求不那么高）

• 核心设计：无代码平台倾向于采用声明式的模型驱动机制，让用户通过拖拽或简单的表达式来操纵完成应用设计，而低代码平台更倾向于通过人工编码来指定应用程序的核心结构

• 用户界面：无代码平台为了简化应用设计，一般只支持内置的 UI 库，而低代码平台可能会提供更灵活的 UI 选项，但代价是需要额外编码，使用上的复杂性有所增加

二.与 20 年前的 Dreamweaver 有什么区别？

听起来，似乎与网页三剑客时代的 Dreamweaver 没什么区别：

Dreamweaver

与现代的前端 low-code 开发平台相比，单从表面上看，可视化地自动生成一些代码确实没有太大区别，内在的实质性差异在于：

• 目标场景不同：Dreamweaver 更多地聚焦前端开发场景，而在 low-code 开发平台中，前端只是完整应用程序的一部分，服务端数据、路由、逻辑流程等都需要考虑在内

• 可视化操作粒度不同：现代 low-code 平台通常有组件、区块、页面、模板等多级复用抽象，Dreamweaver 只面向 HTML 原生标签

• 工程链路完备程度不同：Dreamweaver 仅覆盖到开发、预览、部署（FTP 上传）环节，而现代 low-code 平台大多涵盖了完整的生命周期，包括发布前的调试、测试，发布后的监控运维等各个环节

随着前端工程体系的一路演进，现代的 low-code 平台充分考虑了模块复用、生态接壤、前后端联动、工程管理等重要因素，在成熟度和开发效率方面相比 Dreamweaver 都有了质的飞跃

三.前端为什么需要 low-code？

近几年 low-code 理念在前端领域逐渐流行起来，主要有这些原因：

• 被资源化的前端开发者：工作量大，但技术要求大多不高，生产效率成为了必须要解决的问题

• 开放的前端技术体系：low-code 类代码生成工具很容易与前端技术体系结合起来

• 趋于成熟的前端工程化体系：成熟稳定的前提下，才会转而追求变革式的生产效率突破

被资源化的前端开发者

面对大量低技术含量的需求，前端开发者就变成了极易替代的资源（就像低值易耗资产一样），前端人力进而成为产品需求迭代的瓶颈

此时，最好的解决办法是通过工具化、自动化的方式提高生产效率，突破前端资源瓶颈，自然就有了 low-code 方向的探索和实践，诸如 jQuery 时代的表单生成器、移动时代的 H5 页面制作工具

开放的前端技术体系

与移动 Native 客户端、服务端等技术相比，前端技术体系最为开放（甚至所有源码都是公开的），体现在：

• 第三方模块引入成本极低：无论布局容器、样式主题、逻辑模块、甚至整站，一行标签直接引进来就能用，甚至能够随时动态引入

• 拥有基于 Web 标准的开放生态：整个前端生态都建立在统一的标准层之上，任何一点创新都很容易累积起来，也总能站在巨人的肩膀上进一步创新

因此，low-code 平台得以站在巨人肩上前行，在组件库、构建工具、甚至可视化设计、代码自动生成的基础上进一步探索。另一方面，前端 low-code 产物都能应用到现有的任何前端应用程序中，无论生成的是 React/Vue 组件、jQuery 表单，还是SPA（Single Page App）、MPA（Multiple Page App）

趋于成熟的前端工程化体系

既不在十几年前，也不在更远的将来，而是现在，为什么？

最重要的一点，low-code 平台的发展是在前端工程化体系趋于成熟的背景之下。毕竟只有温饱问题都解决得差不多了，才能转而追求更高的生产效率

从技术演进的角度来看，前端 low-code 探索与前端工程化的发展历程息息相关：

前端工程化历经了这样几个阶段：

• CLI 工具：脚手架、构建工具、调试服务等等

• GUI 客户端：GUI 化的 CLI 工具，除交互方式外区别不大

• 定制化端 IDE：基于 IDE 扩展脚手架、构建、调试、发布、监控等工程链路能力

• 云 IDE：基于 Web IDE 扩展一系列工程链路能力，进入云研发时代

黯羽轻扬，公众号：前端向后什么才是定制化 IDE 的核心价值？

在 CLI/GUI 工具时代，编码层面的效率提升主要体现在通过脚手架自动生成模板代码，减少了样板代码的编写，让开发者码得更少

在接下来的端/云 IDE 时代，API 提示、自动补全、代码片段（Snippets）等实用功能也通通集成进来了，让开发者码得飞快

IDE 时代之后，编码层面的效率提升已经达到极致，更进一步的生产效率提升需要变革式的突破。于是，迎来了 low-code 时代，让非专业开发者也能“码”得又好又快

从前端工程化的角度来看，low-code 是工程效率提升的重要方向（也是必经之路），不难发现其中的 low-code 演进痕迹：

• 模型驱动设计：从直接操作 DOM 到数据驱动视图，提升代码可预测性

• 代码自动生成：从模板到代码片段到搭建，不断减少人工代码量

• 可视化编程：从组件拼装到拖拽生成，减少低效的重复工作

P.S.实际上，low-code 平台的发展不局限于前端领域，移动 Native 客户端、服务端也有众多 low-code 探索，例如Xcode SwiftUI：

VS Server Explorer：

以及阿里云逻辑编排：

并且，据研究机构 Forrester 估计，低代码开发平台有着极其广阔的市场，可细分为数据库、请求处理、移动端、流程和通用低代码平台：

Segments in the market include database, request handling, mobile, process and general purpose low-code platforms.

（摘自Low-code development platform）

四.前端领域的 low-code 探索

审视传统的前端工作流：

业务需求 -> 设计稿 -> 应用/页面/组件开发（还原设计） -> 业务逻辑代码 -> 构建 -> 发布

具体的，还原设计分为 3 种方式：

• 开发单一组件：视觉效果还原以及模块功能开发

• 基于组件开发页面：组件拼装、组件间交互以及页面整体逻辑串联

• 基于页面开发应用：路由配置

其中许多环节都能通过代码生成工具提高效率：

• 设计稿 -> 组件代码：即自动化设计还原，例如imgcook

• 组件代码 -> 设计素材：反向转换，丰富设计素材

• 组件 -> 页面：通过可视化搭建简化组件拼装，自动生成页面代码

• 页面 -> 应用：可视化配置生成 SPA 或 MPA

• 业务需求 -> 业务逻辑代码：通过可视化地编辑条件、绑定数据、指定数据流向等方式生成样板化的业务逻辑代码

在设计还原自动化（以及反向转换）的基础上，UI 素材与前端组件之间的界限几乎不复存在了，UI 素材与前端组件能够互通（UI 素材即前端组件，前端组件即 UI 素材），不仅提升了双方的生产效率，还大幅降低了协作成本

五.low-code 模式下新的可能性

• 可视化研发模式：复杂度转移到工具中，专业性要求降低

• low-code 与智能化结合：素材/组件智能批量生成、结合端智能、个性化推荐等技术，让用户根本停不下来

• low-code 打入专业开发工具：在面向专业开发者的 IDE 中提供部分可视化辅助工具，如支付宝小程序 IDE

• 前后端一体的 low-code 方案：在端云一体化开发的基础上更进一步，自动生成、部署相应的BFF/SFF代码

像云计算产品将专业的运维工作转移到了云供应商一样，low-code 模式将专业的组件开发工作、甚至 BFF 接口开发工作都转移到了可视化研发工具侧，把专业的前端技术以普惠的方式赋能给了更多的非专业开发者，同时可视化辅助工具与专业 IDE 相结合，也让专业的开发者更加高效

另一方面，前端生产力和生产效率提上来、专业性要求降下去之后，之前受限于开发成本而无法实现的事情都可以开始探索了，比如面向海量细分用户群体的个性化 UI（所谓千人千面）、自媒体时代的个人建站（再小的个体也可以有自己的平台）、高时效性的百变运营（而不只是发条push消息）……

参考资料

• Low-code development platform

• Iceworks: 从 GUI 开发工具到集成研发工作台

• What is low code?

联系我

欢迎关注「前端瓶子君」，回复「交流」加入前端交流群！

欢迎关注「前端瓶子君」，回复「算法」自动加入，从0到1构建完整的数据结构与算法体系！

在这里（算法群），你可以每天学习一道大厂算法编程题（阿里、腾讯、百度、字节等等）或 leetcode，瓶子君都会在第二天解答哟！

另外，每周还有手写源码题，瓶子君也会解答哟！

》》面试官也在看的算法资料《《