AI 会对未来的开发格局产生哪些影响？基于我近半年来对 AI 市场的观察，来谈谈自己的思考，以及潜在的机会和可能性。

Dora AI

写这部分内容真的很荣幸，在 2023 年 3 月份的时候，我恰巧和他们的创始人有过深度交流，了解到他们在做一件非常酷的事情。

🔗

• 官网：https://www.dora.run
  

• Dora AI

• 网站：https://www.dora.run/ai
  

• ProductHunt：https://www.producthunt.com/posts/dora-ai-alpha
  

Dora 是什么？

功能

Dora 是构建可交互式 3D 和高级动画网站的一站式解决方案。

• 支持在 Web 编辑器中直接导入 3D 模型并创建交互式 3D 动画。

• 利用编辑器中的关键帧功能，可以轻松创建复杂的动画（例如：滚动动画）。

• 自研 Dora Constraint Layout
  排版引擎，在构建复杂响应式网站时一致性更好，简单快捷。

架构

• 原子化：基于原子乐高建筑的理念，从水平和垂直的角度设计底层架构，从零开始，构建能力矩阵，最终使之涵盖约 99% （这个数字来自于官方文档）的传统前端技术场景。

• 技术栈：基于 Flutter 引擎，确保了统一的跨平台方法。使用一站式无代码项目（从设计稿到网站部署），创建桌面、移动、嵌入式和其他应用都十分流畅。与使用前端技术的网站框架相比，在迁移到多设备应用时会面临许多挑战（一致性）。

📌 Flutter 引擎

Flutter 的核心是 Flutter 引擎，它主要由 C++ 编写，并支持支持所有 Flutter 应用程序所需的基本功能。引擎负责在需要绘制新帧时对组合场景进行光栅化。它提供了 Flutter 核心 API 的底层实现，包括图形（通过 Skia）、文本布局、文件和网络 I/O、辅助功能支持、插件架构以及 Dart 运行时和编译工具链。

Skia^[1]：是一个开源 2D 图形库，它提供适用于各种硬件和软件平台的通用 API。它作为 Google Chrome 和 ChromeOS、Android、Flutter 和许多其他产品的图形引擎。

原子化

Dora 的原子化能力是一个非常有趣的东西，它实现了大量的基础组建以及对排版规则的约束，配合滚动帧插入就可以构建出各种复杂的 3D 动效的网站。

布局约束

Dora Constraint Layout 为设计师提供了的强大布局机制。可以通过简单的拖放快速构建复杂的响应式布局。比 Flexbox 和 Grid Layout 更灵活，更易于使用。主要包括建立以下约束：

• 父子节点约束

• 兄弟节点约束

• 填充或包裹容器

• 变更尺寸

• ...

复杂动画

利用动画帧的原理就可以实现复杂动画的拆解。简单来说就是随便选取某一帧动画来看，它都会包含物体或元素在当前时间的所有空间信息。对应到技术实现来说：

1. 通过纵向滚动条（scroll-y）来建立动画的时间轴，当滚动页面时，时间就会流逝。

2. 通过插入帧来确定元素的空间信息（位置和状态）。

3. 把每一个插入帧用平滑的动效进行衔接。

📌 Animation frame

动画帧是指在动画中的每一帧或每一幅图像。在计算机图形和动画领域，动画是通过连续显示一系列不同的帧或图像来创建视觉效果的过程。每一帧都代表着一个瞬间的图像，通过快速连续地播放这些帧，可以呈现出平滑的动画效果。在编程中，可以使用计时器或动画库来控制动画帧的更新和显示。

Dora AI

有了原子化（元素 + 布局约束 + 帧）的能力，也为 AI 生成式网站提供了基石，所以 Dora 在这个时间点（AI 大爆发）推出的 Dora AI 真的很妙。AI 在这里所充当的角色（AI 能够成为什么取决于它所学习的数据）更像是一个需求方，设计师，程序员...。以前开发一个网站的流程是这样的：

1. 市场调研，收集需求

2. 开发前置工作

• 产品整理需求

• 设计师出设计稿

• 拉上多方（产品，设计，开发），开产品功能需求会

3. 产品文档和设计稿给到开发，然后开始写代码

4. 开发完成后，开始测试，然后部署上线

可以看到这个链路很特别长，尤其是在大厂，这个流程会更复杂。所以一站式解决方案不单单是缩短链路，节约成本那么简单。它可以从设计稿，直接出网站（程序员，甚至是设计师都将变得可有可无）。

思考

Dora AI 的思路很巧妙，但是在我看来，它也存在一定的局限性（它目前更多的是静态展示型界面，不会涉及到复杂的业务逻辑交互）。所以顺着 All in AI
这个思路，我们继续往前走一步。那就是服务托管式 AI。Serverless 是大家比较熟知的一个架构模式，虽然它内部是将 API 功能打包成云函数供外部调用，但开发这些云函数还是需要成本的。如果可以设计一套新的架构模式，它可以使用 AI 自动对需求进行分析，生成代码后（可运行的云函数），自动部署，生成可访问的 API 链接。

这样就形成一个产品的最终闭环。所以我设想的 AI 生产力是这样的：

1. 人类（可能是非程序员，非设计，非产品角色）描述需求痛点

2. AI 对自然语言描述的需求进行解析

3. AI 生成代码，主要分为两部分：

• 静态页面（包含设计稿，交互动画）

• 动态业务逻辑（难点：如何与静态页面产生联动）

4. 一键部署服务，生成可访问链接

📌 Serverless

Serverless^[2] 是一种云计算架构模式，它使开发人员能够编写和部署应用程序代码，而无需管理底层的服务器基础设施。在传统的服务器架构中，开发人员需要自行设置和维护服务器来运行应用程序。而在 Serverless 架构中，云服务提供商负责管理服务器资源，并根据需要自动扩展和缩减容量。

在 Serverless 架构中，开发人员将应用程序代码打包成函数（Function），并使用特定的服务提供商的函数计算服务（如 AWS Lambda、Azure Functions 或 Google Cloud Functions）来执行这些函数。每当触发条件满足时，函数会被自动调用执行，并根据实际使用情况进行计费。这种按需付费的方式可以提供更好的弹性和成本效益。

References