设备面板中的乐观更新

设备面板是什么？

设备面板是展示在用户手机 App 上的控制界面。面板上会展示产品功能交互 UI。可以通过设备面板来控制设备，例如调整灯光亮度，设置灯光颜色等。

在涂鸦，我们使用小程序开发设备面板。 developer.tuya.com/cn/miniapp

当用户在 App 上产生交互操作，比如点击开关按钮时，会发送请求到云端，再由云端下发到智能设备上，智能设备执行指令后，再将执行结果同步回云端，最后才响应到用户App上的设备面板上。

这样一个来回需要时间，那如果时间过长，就会造成卡顿的错觉，比如用户点击了开关，等1s后，开关组件的状态才发生变化，造成体验下降。

当然，我们可以通过添加 loading态来缓解，但是由于设备面板的特殊场景，几乎所有的交互都是需要和设备交互的，那满屏的菊花也是不太好看的 🤣。

什么是乐观更新？

乐观更新也叫积极响应UI（Optimistic UI），是一种前端界面快速响应用户交互的概念。

简单来说，就是不等到服务器返回结果，我们直接更新界面状态。

这样做的好处就显而易见了：对用户操作来说，界面操作更加快捷，更加流畅。

用乐观更新提升控制体验

使用 dp-kit

dp-kit 是智能设备模型（SDM）的一个功能。在面板小程序中，SDM作为一个react 的工具库，对设备的状态控制，命令下发以及结果监听做了统一的封装，能更加快捷的进行设备控制。比如：

javascript 复制代码

import React from 'react';
import { Button, View } from '@ray-js/ray';
import { useActions, useProps } from '@ray-js/panel-sdk';

export default function () {
  const power = useProps(props => props.power);
  const actions = useActions(); 

  return (
    <Button
      onClick={() => {
        actions.power.toggle()
      }}
    >
        {`开关状态${power}`}
    </Button>
  );
}

该代码的作用是点击按钮下发指令，然后等待结果返回后在更新状态 power

如果想要立即更新UI可以添加 immediate , 当执行后，我们的 power 将会立即更新。

javascript 复制代码

actions.power.toggle({ immediate: true });

更多具体用法参考：

智能设备模型(SDM)

dp-kit

为什么设备面板适合乐观更新呢？

大量的设备控制交互

设备面板的主要功能就是控制设备，所以合理的使用乐观更新，能大大提升体验。

成功率高

设备控制指令的下发虽然数据类型不同，但是链路是相对可控的，再加上作为涂鸦云的核心链路，在成功率上可以得到保障。

细粒度控制

交互的数据就是 DP (涂鸦定义的设备状态数据格式)，我们统一通过 action 来下发数据，可以通过 immediate 来细粒度的控制每次操作是否启用乐观更新。也可以全局启用。

什么场景下建议使用乐观更新呢？

1.低功耗设备控制：对于低功耗设备，设备的操作通常会先暂存于云端，然后在设备上线之后主动拉取并更新本地状态。对于这种设备，我们在改变设备状态的界面操作时，可以采用乐观更新先预测更新会成功，直接在 UI 上显示预期的状态。

2.实时控制功能：以控制照明设备为例，这类设备通常具备实时控制功能，例如手势滑动调节灯光明暗。在这种操作中，我们需要在毫秒级的时间内快速反馈用户操作结果，乐观更新在这里就显得尤为合适。通过乐观更新，我们可以立刻在 UI 上显示预期的设备状态，尤其是在控制频率极快的情况下，这样的实时反馈能极大地提升用户体验。

有待提升

当然乐观更新，并不适用所有场景。虽然当前指令下发的成功率非常高，但是并不知100%。在于某些需要明确得到结果的场景，我们要谨慎使用乐观更新。我们也在考虑如何能更好捕获异常情况。

总的来说，选择使用还是不使用乐观更新，取决于你对特定功能的成功率的判断，以及需要响应的操作速度。使用乐观更新可以显著提升用户的操作体验，但是同时也需要处理那些预期外的失败情况。

其他体验优化

developer.tuya.com/cn/miniapp/...

面板小程序创新大赛

现在，涂鸦举办的面板小程序创新大赛正在进行中，欢迎参与 🤩

=> 面板小程序挑战赛 <=