#Guide

This access guide is designed for users with React Native Panel development experience who want to quickly understand the corresponding functions of Panel MiniApp.

You don't need to read all of this content before starting Panel MiniApp development, you can refer to it as needed during actual development.

If you are a beginner, we recommend directly reading Quick Start - Panel MiniApp.

#Quick Start

#1. Setting Up the Environment

Differences:

• Additional installation of Tuya MiniApp IDE is required, but no need to install CLI tools.

Advantages:

• Built-in packaging, debugging, and publishing features.

Precautions:

• None.

#2. Experience the Panel

Differences:

• None.

Advantages:

• In addition to the Scaffold and Functional Component Experience Demo, a series of Functional Module Example Projects are also provided.

Precautions:

• None.

#3. Create a Product

Differences:

• None.

Advantages:

• None.

Precautions:

• None.

#4. Initialize the Project

Differences:

• Panel MiniApp need to create a project from Tuya MiniApp IDE and associate it with the corresponding product and its Panel MiniApp for subsequent device debugging and publishing.

Advantages:

• Some project templates come with Codelab Tutorials.

Precautions:

• Some outdated RN templates are deprecated in Panel MiniApp. If needed, you can seek help and support through the Community Forum.

#5. Development and Debugging

Differences:

• Panel MiniApp can be debugged directly using the SmartLife App or OEM App.
• Panel MiniApp can be developed and debugged on the PC via Tuya MiniApp IDE.

Advantages:

• Built-in Panel Development Tools and AI plugins.
• No need to install additional debugging apps; use the SmartLife App or OEM App directly.

Precautions:

• Make sure to test on both iOS and Android real devices before final release as PC environment limitations may not guarantee 100% consistent behavior.

#6. Packaging and Upload

Differences:

• Panel MiniApp only need to upload one resource package.
• Panel MiniApp require Tuya official review before publishing.
• Panel MiniApp need to maintain multi-region server domains, multi-region static resources, cloud project information, etc.

Advantages:

• Supports multi-version management and grayscale strategy.
• Supports testing different device functions by dynamically inputting device IDs through experience QR codes.
• Supports compatibility with different app baseline versions through Kit Capability.

Precautions:

• None.

#API

Differences:

• MiniApp have atomized and extended APIs, resulting in an increased number of APIs.

Advantages:

• Richer and more flexible API capabilities, supporting more foundational capabilities or business scenarios that were previously unsupported, such as multi-device control, multimedia, object model, etc.

Precautions:

• Due to the large number of RN APIs, we provide an API Migration Guide for easy reference.

#Scaffold

Differences:

• Adjusted and designed based on the Panel MiniApp solution and the new panel SDK.

Advantages:

• Some project templates come with Codelab Tutorials.

Precautions:

• Some outdated RN templates are deprecated in Panel MiniApp. If needed, you can seek help and support through the Community Forum.

#Internationalization and Multi-language

Differences:

• The multi-language API of Panel MiniApp is identical to that of RN, only the package name is different. Refer to Multilingual for usage.

Advantages:

• Supports platformized management of multi-language for Panel MiniApp, better handling scenarios where multiple products are associated with the same panel and require simultaneous multi-language effectiveness.

Precautions:

• The multi-language logic of Panel MiniApp is identical to that of RN. However, due to the complexity of business logic, it is recommended to read Multilingual - FAQs in advance.

#Basic Components

Differences:

• Provides Basic Components corresponding to RN's official basic components.
• Provides SmartUI Component Library corresponding to Tuya's official component library.

Advantages:

• Based on WebView as the rendering engine, naturally supports CSS, offering greater flexibility in styling, community ecosystem, and component development efficiency.
• The SmartUI component library provides real-time editing and preview capabilities on the platform through Codesandbox.

Precautions:

• RN's performance is inherently superior to MiniApp due to the use of native components and restricted coding practices. To bridge this gap, we provide technical solutions such as SJS, RJS, eventChannel, native components, and hybrid development.

#Notable New Features

Compared to RN panel development, Panel MiniApp have the following notable new features:

#Panel Development Tools

Before:

Could only debug through the Device Debugging feature on the developer platform.

Now:

1. In addition to the device debugging feature on the developer platform, you can directly debug devices in the Panel Tools.

2. Also supports debugging of Complex Protocol function points.

#Smart Device Model

Before:

The panel SDK only provided basic device API wrappers, usually requiring redux or other state management libraries to manage device states.

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useDispatch } from 'react-redux';
import { useSelector } from '@models';

export default function Home() {
  const dispatch = useDispatch();
  const power = useSelector(state => state.dpState.power);

  const handleTogglePower = () => {
    dispatch(actions.common.updateDp({ power: !power }));
  };

  return (
    <View style={{ flex: 1 }}>
      <Text>power: {power}</Text>
      <TouchableOpacity onPress={handleTogglePower}>
        <Text>toggle power</Text>
      </TouchableOpacity>
    </View>
  );
}

Now:

1. The panel SDK provides two hooks, useProps and useActions, which can be directly used to get device states and control devices.

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

export default function Home() {
  const power = useProps((props) => props.power);
  const actions = useActions();
  return (
    <View style={{ flex: 1 }}>
      <View>power: {power}</View>
      <View onClick={actions.power.toggle}>toggle power</View>
    </View>
  );
}

2. By using the Smart Device Schema File (i.e., TYSdk.devInfo.schema in the original RN SDK) with TS type inference, a more elegant device development experience can be obtained.

3. The panel SDK has built-in function point interceptors (i.e., dp-kit), which support parsing & re-parsing complex type DP function points, throttling, debouncing, filtering, and other functions.

#Supports Multiple Devices and Richer Capabilities

Before:

1. Only supported single device control:

TYSdk.device.putDeviceData({ switch_1: true });

2. Only supported the following limited capabilities:

• Native methods
• Mobile methods
• Device methods
• ...

Now:

1. All APIs and events support controlling or responding to specified devices:

// Device control
publishDps({
  // Control a specified device in the home by specifying the deviceId
  deviceId: 'vdevoxxxxx',
  dps: { switch_1: true },
  success: res => {
    console.log(res);
  },
  fail: error => {
    console.log(error);
  },
});

// Device listening
onDpDataChange((res)=>{
  console.log(res);
  // Listen to a specified device in the home by judging the specified deviceId
  // {
  //   deviceId: "vdevo169477319679442",
  //   dps: {
  //     1: true
  //   },
  //   gwId: ''
  // }
})

2. Supports richer basic or device capabilities, see API

#Platform Extended Capabilities (Experience QR Code, Data Statistics, Performance Quality)

Before:

1. If Product A is currently associated with Panel A and you want to switch to the newly developed Panel B, you can only switch Product A directly to Panel B, which has certain risks.

Now:

1. If Product A is currently associated with Panel A and you want to switch to the newly developed Panel B, you only need to generate an experience QR code for the specified device ID, without associating Product A. You can associate Product A after testing is complete.

2. The MiniApp platform provides built-in data statistics, performance quality, and other capabilities, which can be viewed and analyzed on the developer platform.

#Advanced Technical Points Worth Noting

Compared to RN panel development, Panel MiniApp have the following advanced technical points worth noting:

#SJS

• Application Scenarios: Used for scenarios with frequent user interactions, similar to setNativeProps in RN.
• Reference Documentation: Respond to Events with SJS and SJS Reference
• Reference Examples: tuya-miniapp-demo/sjs

#RJS

• Application Scenarios: Used to handle high-frequency drawing requirements, improving the animation rendering performance of views, such as Canvas chart rendering, WebGL graphic rendering, etc.
• Reference Documentation: Render Script
• Reference Examples: tuya-miniapp-demo/rayRjsPlugin

#Hybrid Development

• Application Scenarios: Directly reference components developed with native MiniApp syntax or third-party components from the WeChat MiniApp ecosystem in the Ray framework to improve performance or development efficiency.
• Reference Documentation: Hybrid Development
• Reference Examples: tuya-miniapp-demo/rayUseAx