本文将进一步介绍低代码开发平台，并深入探讨它们在实际应用中可能遇到的问题。同时，我们将探讨 Design as Code（设计即代码）的概念，以及它为何能够作为一种更优的解决方案。
line-height: 1.5em;text-align: center;">低代码开发平台
低代码开发平台的崛起
低代码开发方法通过引入图形界面、拖放组件、模型驱动逻辑和自动化代码生成等创新技术，显著降低了对传统编程技能的依赖，同时缩短了学习曲线。低代码开发平台（Low-Code Development Platforms, LCDPs）的概念虽然在 2014 年由 Forrester 研究公司系统定义和推广，但低代码开发的理念早在此之前就已经存在。自那时起，许多低代码开发平台便迅速崭露头角，成为企业数字化转型的强大推动力。
图片来源于：https://pinver.medium.com/decoding-the-no-code-low-code-startup-universe-and-its-players-4b5e0221d58b
自 2017 年以来，低代码开发的热情已经在全球范围内蔓延。企业纷纷采用低代码平台，希望在竞争激烈的市场中快速推出创新的产品和服务，同时降低开发成本，提高运营效率。低代码开发平台受到欢迎的原因来自于两方面：一方面，为专业开发者提供一个加速开发过程的工具，允许他们在需要时进行编码；另一方面，为非技术背景的用户提供一个可视化的开发环境，使他们也能参与到应用的构建中。
关于“low-code”的谷歌搜索趋势（2014/01-2024/06）
低代码开发平台的特点与优势
低代码开发平台以其全栈可视化编程环境和模型驱动设计理念，彻底改变了传统软件开发的模式。这些平台通过提供直观的拖放组件和丰富的预构建模块，使得即使是非专业开发者也能轻松构建应用程序，极大降低了技术门槛并加速了开发流程。具体而言，低代码开发平台具有以下几个显著优势：
用户友好的可视化界面：低代码平台提供了图形化的开发界面，通过拖放组件和预构建模块，使用户能够直观地构建和调整应用程序的各个部分。这不仅使开发过程更为便捷，也大大降低了非专业开发者的学习曲线。
丰富的预构建模块：低代码平台通常配备大量预构建的模块和模板，涵盖各种常见的业务逻辑和功能需求。这些模块可以直接集成到应用中，极大地减少了开发时间和人力成本。
自动化的全生命周期管理：从设计、开发、测试到部署和运维，低代码平台提供了全生命周期管理工具。这些工具不仅使得开发过程更加顺畅，还确保了应用的稳定性和可维护性。
低代码开发平台的局限性
定制化限制：低代码平台通常提供预定义的组件和模板，这可能限制了应用的定制化和创新性。对于那些需要深层次交互和高度定制化的软件，如娱乐和社交应用，低代码开发可能还不足以满足其复杂的开发需求。
性能问题：由于低代码平台生成的代码往往不是最优的，可能导致性能问题。对于需要高性能的应用，这可能成为一个严重的瓶颈。
扩展性受限：低代码平台在遇到需要高度定制化的需求时，往往会受到限制。虽然可以通过集成自定义代码来扩展功能，但这增加了复杂性，也降低了低代码的优势。
依赖平台：使用低代码平台构建的应用往往对平台有很强的依赖性。一旦选择了某个平台，迁移到其他平台的成本非常高，导致企业在长期使用中可能面临不可控的风险。
-
“不可能三角”：低代码开发平台很难在易用性、功能性和可维护性这三个方面都达到最优，通常需要在它们之间做出权衡。这种权衡意味着在某些情况下，为了获得易用性或功能性，可能会牺牲应用的可扩展性或性能。这就像是古老的“鱼与熊掌不可兼得”的困境。
低代码开发平台的“不可能三角”。示例图使用 tldraw 制作
设计即代码(Design as Code)
Design as Code（简称DAC），是一种由 VeryGoodGraphics（VGG）提出的创新理念，倡导将设计过程与代码开发紧密结合，形成一种高效的工作流。DAC 的核心目标是通过革新数字交互界面的开发流程，为开发者和设计师创造一个更加协同和高效的工作环境。这一理念不仅简化了开发流程，而且通过减少编码工作量，使得开发者能够快速实现高质量的前端界面。这种方法的优势在于：
精确还原：DAC 能够确保设计在转化为用户界面时的精确性和完整性，避免设计意图在开发过程中可能出现的偏差和信息丢失。
高度定制化：由于 DAC 侧重于从设计到代码的直接映射，它支持高度定制化的解决方案，适合那些需要独特设计和复杂交互的应用开发。
持续迭代：DAC 支持快速迭代，设计变更可以迅速反映在代码中，加速产品从概念到市场的进程。
技术协同：DAC 鼓励开发者和设计师之间的紧密合作，共同参与产品的开发周期，从而实现更加协调一致的最终产品。
Design-as-Code优势
总的来说，DAC在定制化、性能优化、扩展性和减少平台依赖方面具有明显优势，尤其适合那些追求创新、高性能和长期技术自主性的项目。
DAC 的工作流程
接下来，我们将通过一系列步骤，展示如何利用现有的组件系统和 VGG 的技术实现这一过程：
a、设计阶段
在设计阶段，设计师可以采用多种流行的设计工具进行创作，如 Figma、Sketch 或 Adobe Illustrator。或者也可以利用现有的组件系统来搭建用户界面。
使用 Material 3 design system 在 Figma 内搭建的轮播图组件
b、开发阶段
设计搭建完成后，接下来的任务是将这些设计转换成可交互的前端页面。VGG 提供的服务能够在这一过程中发挥关键作用：
一键转译：使用 VGG 的服务，设计师可以将设计与原型一键转译为符合 VGG 规范的文件。这一步骤简化了从设计到代码的过程，减少了手动编码的需求。
抽象级别的提升：VGG 规范的文件在表示形式和抽象级别上与传统Web代码不同，为开发者提供了更高级别的抽象，使得开发更加高效。
业务逻辑与交互开发：获取 VGG 设计文件后，开发者可以在其基础上添加业务逻辑、交互和动画等，使用 VGG 运行。
使用 VGG 还原的可交互的轮播图组件
c、部署阶段
完成开发后，应用程序需要被部署到生产环境：
集成与部署：应用程序可以作为部分嵌入到现有应用或网页中，也可以作为一个完整的解决方案供最终用户使用。VGG 技术支持灵活的集成方式，满足不同的业务场景需求。
跨平台兼容性：由于 VGG 生成的代码具有跨平台兼容性，因此应用程序可以无缝部署到 Web、移动设备或其他平台上。
持续迭代与维护：部署后，应用程序的维护和迭代变得更加容易。VGG 的设计文件和代码的清晰结构，支持快速响应市场变化和用户反馈。
运行在 Apple visionOS 的 VGG 轮播图组件
通过上述步骤，可以看出 DAC 提供了一种从设计到用户界面的高效转换流程。它不仅简化了开发过程，还提高了产品的质量和开发效率。
什么是 VGG
VGG 是一套基于 JSON 的下一代矢量图形标准。
👏扫码添加小助手进交流群，欢迎社区小伙伴参与共建
展望
设计与代码的融合是数字产品发展的必然趋势。Design to Code 和 Design as Code 各有其优势和适用场景。在实际项目中，团队可以根据项目需求选择合适的理念和工具，以实现高效的设计与开发流程。Design as Code 通过无代码还原设计稿和交互原型直接可用的理念，为设计师和开发者提供了强大的工具和平台，推动了数字产品开发迭代的创新。
展望未来，VGG 倡导的设计稿无代码还原和交互原型直接可用，将进一步降低设计与开发的沟通成本，提高工作效率，促进设计与开发的深度融合。随着 VGG 开源社区的不断壮大，我们期待更多创新的动态视觉效果和高效的开发流程在实际项目中的应用。
关于 VGG
特性一：无代码完美还原设计稿
VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节，可直接将设计稿作为用户界面，省去前端与客户端开发者使用代码去复原设计稿的开发工作，降低他们与设计师之间的沟通摩擦成本。
特性二：原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式，支持在任意一种已有的 APP 基础上进行增量式开发，主持主流平台与框架。
特性三：脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块，在提供快速业务逻辑开发能力的同时支持高性能计算。
特性四：高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容（Figma/Sketch/Adobe Illustrator），并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具，打通从应用 UI 设计到应用研发的完整流程。
-
GitHub：https://github.com/verygoodgraphics -
官网：https://verygoodgraphics.com/ -
博客：https://blog.verygoodgraphics.com/
