分类

Posted in

【第 3293 期】介绍 VGG 模型以及设计-代码工作流_AI阅读总结 — 包阅AI

by baoyueai

包阅导读总结

1. 关键词：VGG、Design-as-Code、工作流、前端、图形应用

2. 总结：文本主要介绍了 VGG 模型及其强调的 Design-as-Code 工作流，指出当前 Web 技术中写 HTML 的痛苦，分析了 VGG 的优势及面临的挑战，同时列举了相关开源引擎和参考资料。

3. 主要内容：

– 介绍 VGG 模型是强调 Design-as-Code 工作流的新兴框架，旨在统一设计与编码，高效开发交互式图形应用

– 详细介绍 VGG 框架及其核心的 Design-as-Code 工作流程，分析当前 Web 技术及其他框架的问题

– 指出 HTML 和 CSS 用于构建交互式应用的不足，写 HTML 痛苦的原因

– 阐述 VGG 的优势，如消除 HTML 和 CSS 减少冗余、提高效率，也提到其面临的工程挑战

– 给出 VGG runtime 开源引擎及相关参考资料

思维导图：

文章地址：https://mp.weixin.qq.com/s/-rAATHOa0DesFZ9Nf_rnUQ

文章来源：mp.weixin.qq.com

作者：Harry

发布时间：2024/6/23 0:02

语言：中文

总字数：2142字

预计阅读时间：9分钟

评分：83分

标签：VGG,设计即代码,交互式图形,Web 开发,框架

以下为原文内容

本内容来源于用户推荐转载，旨在分享知识与观点，如有侵权请联系删除 联系邮箱 media@ilingban.com

前言

VGG 是一个强调 Design-as-Code 工作流的新兴框架，旨在统一设计与编码的世界，提供一种更高效的开发交互式图形应用的方法。今日前端早读课文章推荐 VeryGoodGraphics 的创始人兼首席执行官 @Harry 分享的这篇《介绍 VGG 模型及设计 – 代码工作流》。

总结从这开始～～

核心概念：

VGG 是一个强调 Design-as-Code 工作流的新兴框架，旨在统一设计与编码的世界，提供一种更高效的开发交互式图形应用的方法。

【第3027期】Semi D2C 设计稿转代码的演进之路

文章详细介绍了 VGG（VeryGoodGraphics）框架及其核心的 Design-as-Code 工作流程。VGG 是一个用于构建交互式图形应用的开发工具包和框架，它强调将设计直接作为代码来实现，从而旨在消除设计与开发之间的鸿沟。作者首先分析了当前的 Web 技术，指出 HTML 和 CSS 虽然是构建交互式应用的主流技术，但它们的设计初衷并非用于应用开发，而是用于制作可链接的文档。随着 HTML5、CSS3 和现代 JavaScript 的出现，Web 应用的开发得到了推动，但是编写 HTML 仍然是痛点，因为它繁琐且不够直观。

文章探讨了非 Web 框架，包括平台特定框架（如 MFC、Cocoa、GTK）和跨平台框架（如 Qt、Flutter）。尽管这些框架在桌面应用开发中有着广泛的应用，但它们往往提供的开发体验不如编写 HTML。Flutter 作为一个突破性的跨平台框架，支持桌面、移动和 Web 应用的开发，但它引入了新的编程语言和额外的虚拟机负担，这可能导致与现有生态系统的兼容性问题。

【第3214期】数据视图化表达：问卷搭建引擎设计原理

进一步提出了 Design-to-Code 的概念，即使用编译器技术将高保真的设计原型直接转换为 HTML+CSS 代码。然而，这种方法并不完美，因为生成的代码可能与项目的现有编码风格不兼容，集成困难，且可能无法精确地还原设计原型的视觉效果。

作者最后介绍了 VGG 的 Design-as-Code 工作流程，它旨在通过直接在设计文件上编写业务逻辑来消除冗余的开发工作，使得设计和开发实际上是同一件事情。VGG 定义了新一代的矢量图形规范（VGG Specs）以及其官方实现（VGG Runtime），这两个基石使得 Design-as-Code 工作流成为可能。

【第2836期】JSONQL 低代码数据模型引擎的设计与实现

VGG 的优势：

观点

  • HTML 和 CSS 不适合作为构建交互式应用的主流技术：虽然它们是当前构建 Web 应用的主流，但它们的初衷是用于制作文档，而不是应用。

  • 非 Web 框架的局限性：平台特定框架和跨平台框架虽然在桌面应用开发中表现良好，但它们的开发体验往往不如编写 HTML，且它们主要针对的是传统的桌面应用，而非 Web 应用。

  • Flutter 的优势与局限: Flutter 作为一个跨平台框架，支持桌面、移动和 Web 应用的开发，它具有声明式和响应式的特性，但它引入了新的语言和额外的 VM 负担，可能会导致与现有生态系统的兼容性问题。

  • Design-to-Code 的不足：尽管 Design-to-Code 尝试通过自动生成代码来简化开发流程，但生成的代码可能与项目风格不符，难以集成，且可能无法准确还原设计原型的效果。

  • Design-as-Code 的优势: VGG 提出的 Design-as-Code 工作流程消除了 HTML 和 CSS，将设计直接作为代码来实现，从而减少了开发工作的冗余，提高了开发效率。

  • VGG 作为新兴框架的挑战: VGG 需要克服编译器实现、编程接口抽象和图形渲染等方面的工程挑战，以实现其 Design-as-Code 的工作流程。

Web 技术中为什么写 HTML 很痛苦？

Web 技术中写 HTML 被认为很痛苦，主要是因为以下几个原因：

  • HTML 的初衷不是用于应用开发: HTML 最初是为了制作链接文档而设计的，而不是用来构建复杂的应用界面。因此，使用 HTML 来实现复杂的交互式应用界面往往不够直观。

  • HTML 和 CSS 的分离：在构建应用时，开发者需要同时处理 HTML 和 CSS，这意味着需要在两种不同的语言和文件之间来回切换，这种分离增加了开发的复杂性。

  • 样式调整和兼容性问题：调整 CSS 以确保应用在不同浏览器和设备上的一致性和兼容性是一个复杂且耗时的过程。

  • 细节繁琐：实现高保真的设计原型通常需要大量的细节调整，这些工作繁琐且容易出错。

  • 设计与代码的不一致：设计师和开发者之间的沟通成本高，设计更迭时需要对应的代码进行相应的调整，这个过程往往需要反复的讨论和迭代。

  • 前端生态系统的复杂性：随着前端生态系统的不断发展，出现了大量的工具和框架，这些工具和框架虽然提供了更多的功能和灵活性，但同时也增加了学习和使用的复杂性。

  • 前端开发的低端化：由于前端开发的门槛相对较低，市场上出现了大量的前端开发者，这导致了前端开发工作的低端化，使得一些高级前端开发者的技能和价值被低估。

总之，HTML 和 CSS 的局限性、开发和维护的复杂性以及前端生态系统的复杂性共同导致了写 HTML 的痛苦。

VGG runtime 开源引擎:https://github.com/verygoodgraphics/vgg_runtime

关于本文更多详细内容可看：
作者：@Harry
译文：https://mp.weixin.qq.com/s/OrZX1HQpgfRvM8UXw3pugQ
原文：https://blog.verygoodgraphics.com/posts/intro-vgg/

这期前端早读课
对你有帮助，帮”赞“一下，
期待下一期，帮”在看” 一下 。