La experiencia del desarrollador
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.
- Herramientas para desarrolladores de WeChat
- Herramientas para desarrolladores de Alipay
- Herramientas para desarrolladores de Baidu
- Herramientas para desarrolladores de ByteDance
- Herramientas para desarrolladores de apps rápidas
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.
- Demostración de WeChat
- Demostración de Alipay
- Demostración de Baidu
- Demostración de ByteDance
- Demostración rápida de la app
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.
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).
<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.
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.
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.
<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.
<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.
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.
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.
Agradecimientos
Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu revisaron este artículo.