Herramientas para desarrolladores de miniapp

Ahora que abordamos las miniapps per se, quiero enfocarme en la experiencia de los desarrolladores para las diversas plataformas de superapps. El desarrollo de miniapps en todas las plataformas se realiza en IDE que las plataformas de superapps proporcionan de forma gratuita. Si bien hay más, me gustaría enfocarme en las cuatro más populares y en una quinta app de Quick App para compararla.

IDE de miniapps

Al igual que las superapps, la mayoría de los IDE solo están disponibles en chino. De hecho, debes asegurarte de instalar la versión china y no una que a veces esté disponible en inglés (o en el extranjero), ya que es posible que no esté actualizada. Si eres desarrollador de macOS, ten en cuenta que no todos los IDE están firmados, lo que significa que macOS no ejecutará el instalador. Puedes, bajo tu propio riesgo, omitir esto como se describe en el Centro de ayuda de Apple.

Miniproyectos para principiantes de la app

Para comenzar rápidamente con el desarrollo de miniapps, todos los proveedores de superapps ofrecen apps de demostración que se pueden descargar y probar de inmediato y que, a veces, también están integradas en los asistentes de "Nuevo proyecto" de los distintos IDE.

Flujo de desarrollo

Después de iniciar el IDE y cargar o crear una miniapp (demostración), el primer paso siempre es acceder. Por lo general, solo necesitas escanear un código QR con la superapp (en la que ya accediste) que genera el IDE. Es muy raro que se deba ingresar una contraseña. Una vez que accedas, el IDE conocerá tu identidad y te permitirá comenzar a programar, depurar, probar y enviar tu app para su revisión. A continuación, puedes ver capturas de pantalla de los cinco IDE mencionados en el párrafo anterior.

Ventana de la aplicación Herramientas para desarrolladores de WeChat que muestra el simulador, el editor de código y el depurador.
Herramientas para desarrolladores de WeChat con simulador, editor de código y depurador.
Ventana de la aplicación de Herramientas para desarrolladores de Alipay que muestra el editor de código, el simulador y el depurador.
Herramientas para desarrolladores de Alipay con editor de código, simulador y depurador.
Ventana de la aplicación de Herramientas para desarrolladores de Baidu que muestra el simulador, el editor de código y el depurador.
Herramientas para desarrolladores de Baidu con simulador, editor de código y depurador.
Ventana de la aplicación ByteDance de Herramientas para desarrolladores que muestra el simulador, el editor de código y el depurador.
Herramientas para desarrolladores de ByteDance con simulador, editor de código y depurador.
Ventana de la aplicación Quick App Herramientas para desarrolladores que muestra el editor de código, el simulador y el depurador.
Herramientas para desarrolladores de apps rápidas con editor de código, simulador y depurador.

Como puedes ver, los componentes fundamentales de todos los IDE son muy similares. Siempre tienes un editor de código basado en Monaco Editor, el mismo proyecto que también usa VS Code. En todos los IDE, hay un depurador basado en el frontend de las Herramientas para desarrolladores de Chrome con algunas modificaciones y otras sobre ellas más adelante (consulta Debugger). Los IDE per se se implementan como apps NW.js o Electron. Los simuladores de los IDE se realizan como una etiqueta NW.js <webview> o La etiqueta Electron <webview>, que a su vez se basan en una etiqueta <webview> de Chromium. Si te interesan los aspectos internos del IDE, a menudo puedes inspeccionarlos con las Herramientas para desarrolladores de Chrome con la combinación de teclas Control + Alt + I (o Comando + Opción + I en Mac).

Las Herramientas para desarrolladores de Chrome que se usan para inspeccionar las Herramientas para desarrolladores de Baidu que muestran la etiqueta WebView del simulador en el panel Elementos de Herramientas para desarrolladores de Chrome
Inspeccionar las Herramientas para desarrolladores de Baidu con las Herramientas para desarrolladores de Chrome revela que el simulador se materializa como una etiqueta Electron <webview>.

Prueba y depuración de simuladores y dispositivos reales

El simulador es comparable con lo que puedes saber del modo de dispositivo de las Herramientas para desarrolladores de Chrome. Puedes simular diferentes dispositivos iOS y Android, cambiar la escala y la orientación del dispositivo, y también simular varios estados de red, presión de memoria, un evento de lectura de códigos de barras, terminaciones inesperadas y modo oscuro.

Si bien el simulador integrado es suficiente para tener una idea aproximada de cómo se comporta la app, las pruebas en el dispositivo, como con las apps web normales, son irreemplazables. Para probar una miniapp en desarrollo, solo debes escanear el código QR. Por ejemplo, en las Herramientas para desarrolladores de ByteDance, escanear un código QR que genera el IDE de forma dinámica con un dispositivo real conduce a una versión alojada en la nube de la miniapp que luego se puede probar de inmediato en el dispositivo. La forma en que funciona para ByteDance es que la URL detrás del código QR (ejemplo) redirecciona a una página alojada (ejemplo), que contiene vínculos con esquemas de URI especiales, como snssdk1128://, para obtener una vista previa de la miniapp en las diversas superapps de ByteDance, como Douyin o Toutiao (aquí hay un ejemplo). Otros proveedores de superapps no pasan por una página intermedia, sino que abren la vista previa directamente.

Las Herramientas para desarrolladores de ByteDance muestran un código QR que el usuario puede escanear con la app de Douyin para ver la miniapp actual en su dispositivo.
Herramientas para desarrolladores de ByteDance que muestra un código QR que el usuario puede escanear con la app de Douyin para realizar pruebas inmediatas en el dispositivo
Página de destino intermedia para obtener una vista previa de una miniapp de ByteDance en varias de las superapps de la empresa, abierta en un navegador de computadora normal para aplicar ingeniería inversa al proceso
Página de destino intermedia de ByteDance para obtener una vista previa de una miniapp (se abre en un navegador para computadoras para mostrar el flujo).

Una función aún más atractiva es la depuración remota de vista previa basada en la nube. Después de escanear un código QR especial generado por un IDE, se abrirá la miniapp en el dispositivo físico y se abrirá una ventana de Chrome DevTools en la computadora para realizar una depuración remota.

Un teléfono celular que ejecuta una miniapp con partes de la IU destacadas por el depurador ByteDance Herramientas para desarrolladores que se ejecuta en una laptop que la inspecciona.
Depurar de forma remota y remota una miniapp en un dispositivo real con las Herramientas para desarrolladores de ByteDance.

Debugger

Depuración de elementos

La experiencia de depuración de apps en miniatura es muy familiar para cualquier persona que haya trabajado con las Herramientas para desarrolladores de Chrome. Sin embargo, existen algunas diferencias importantes que hacen que el flujo de trabajo se adapte a las miniapps. En lugar del panel Elementos de las Herramientas para desarrolladores de Chrome, los IDE de miniapps tienen un panel personalizado que se adapta a su dialecto HTML en particular. Por ejemplo, en el caso de WeChat, el panel se llama Wxml, que significa lenguaje de marcación de WeiXin. En las Herramientas para desarrolladores de Baidu, se llama Elemento del cisne. Las Herramientas para desarrolladores de ByteDance lo llaman Bxml. Alipay lo llama AXML, y la app rápida hace referencia al panel simplemente como UX. Analizaré estos lenguajes de marcación más adelante.

Cómo inspeccionar una imagen con el panel &quot;Wxml&quot; de Herramientas para desarrolladores de WeChat Muestra que la etiqueta en uso es una etiqueta “image”.
Inspecciona un elemento <image> con las herramientas para desarrolladores de WeChat.

Funcionamiento interno de los elementos personalizados

Cuando inspeccionas WebView en un dispositivo real a través de about://inspect/#devices, verás que las Herramientas para desarrolladores de WeChat ocultó la verdad de manera deliberada. Mientras las Herramientas para desarrolladores de WeChat mostraron un <image>, lo que estoy viendo es un elemento personalizado llamado <wx-image> con una <div> como su único elemento secundario. Es interesante destacar que este elemento personalizado no usa Shadow DOM. Obtén más información sobre estos componentes más adelante.

Inspección de una miniapp de WeChat que se ejecuta en un dispositivo real con las Herramientas para desarrolladores de Chrome. Cuando Herramientas para desarrolladores de WeChat informó que estoy mirando una etiqueta de “imagen”, las Herramientas para desarrolladores de Chrome revelan que en realidad estoy lidiando con un elemento personalizado “wx-image”.
Cuando se inspecciona un elemento <image> con las herramientas para desarrolladores de WeChat, se revela que, en realidad, es un elemento personalizado <wx-image>.

Depuración de CSS

Otra diferencia es la nueva unidad de longitud rpx para píxeles responsivos en los distintos dialectos de CSS (más información sobre esta unidad más adelante). Las Herramientas para desarrolladores de WeChat usan unidades de longitud de CSS independientes del dispositivo a fin de que el desarrollo para diferentes tamaños de dispositivos sea más intuitivo.

Inspección de una vista con un padding inferior y superior especificado de `200rpx` en Herramientas para desarrolladores de WeChat.
Inspecciona el padding especificado en píxeles responsivos (200rpx 0) de una vista con las Herramientas para desarrolladores de WeChat.

Auditoría de rendimiento

El rendimiento es fundamental para las miniapps, por lo que no es de extrañar que las Herramientas para desarrolladores de WeChat y algunas otras Herramientas para desarrolladores tengan una herramienta de auditoría integrada inspirada en Lighthouse. Las auditorías se enfocan en total, rendimiento, experiencia y prácticas recomendadas. Se puede personalizar la vista del IDE. En la siguiente captura de pantalla, oculté de forma temporal el editor de código para tener más espacio en pantalla para la herramienta de auditoría.

Ejecutar una auditoría de rendimiento con la herramienta de auditoría integrada Las puntuaciones muestran el total, el rendimiento, la experiencia y las prácticas recomendadas, cada 100 sobre 100 puntos cada uno.
La herramienta de auditoría integrada en las herramientas para desarrolladores de WeChat que muestra el total, el rendimiento, la experiencia y las prácticas recomendadas.

Simulación de API

En lugar de requerir que el desarrollador configure un servicio independiente, la simulación de respuestas de la API forma parte directamente de las Herramientas para desarrolladores de WeChat. A través de una interfaz fácil de usar, el desarrollador puede configurar extremos de API y las respuestas ficticias deseadas.

Configuración de una respuesta ficticia para un extremo de API en Herramientas para desarrolladores de WeChat.
Función integrada de simulación de respuestas de la API de Herramientas para desarrolladores de WeChat.

Agradecimientos

Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu revisaron este artículo.