Top

面板中的乐观更新(体验升级)

小程序开发相关产品技术讨论，包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具（IDE）及其他开发技术相关等话题


Post Reply
User avatar
智能小程序管理员
Posts: 66

在面板使用过程中，用户在 App 上产生交互操作，比如点击开关按钮时，会发送请求到云端，再由云端下发到智能设备上，智能设备执行指令后，再将执行结果同步回云端，最后才响应到用户App上的设备面板上。
这样一个来回需要时间，那如果时间过长，就会造成卡顿的错觉，比如用户点击了开关，等1s后，开关组件的状态才发生变化，造成体验下降。
当然，我们可以通过添加 loading态来缓解，但是由于设备面板的特殊场景，几乎所有的交互都是需要和设备交互的，那满屏的菊花也是不太好看的 🤣。

什么是乐观更新？

乐观更新也叫积极响应UI（Optimistic UI），是一种前端界面快速响应用户交互的概念。
简单来说，就是不等到服务器返回结果，我们直接更新界面状态。
这样做的好处就显而易见了：对用户操作来说，界面操作更加快捷，更加流畅。

用乐观更新提升控制体验

使用 dp-kit

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

Code: Select all

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 将会立即更新。

Code: Select all

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

更多具体用法参考：
https://developer.tuya.com/cn/miniapp/d ... tors/dpkit

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

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

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

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

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

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

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

其他体验优化

https://developer.tuya.com/cn/miniapp/d ... e/optimize

面板小程序创新大赛

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

面板小程序挑战赛

Post Reply