La experiencia del desarrollador
Ahora que ya expliqué qué son las mini apps per se, quiero enfocarme en la experiencia del desarrollador en las distintas plataformas de super apps. El desarrollo de mini apps en todas las plataformas se realiza en IDEs que proporcionan de forma gratuita las plataformas de superapps. Si bien hay más, quiero enfocarme en los cuatro más populares y un quinto para la app rápida a modo de comparación.
IDEs 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 en chino y no una versión en inglés (o extranjera) que a veces está disponible, ya que podría no estar actualizada. Si eres desarrollador de macOS, ten en cuenta que no todos los IDE están firmados, lo que significa que macOS se niega a ejecutar el instalador. Bajo tu propia responsabilidad, puedes omitir este paso como se describe en la 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 Quick App
Proyectos iniciales de mini apps
Para comenzar rápidamente con el desarrollo de mini apps, todos los proveedores de superapps ofrecen apps de demostración que se pueden descargar y probar de inmediato, y que, a veces, también se integran 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 de Quick App
Flujo de desarrollo
Después de iniciar el IDE y cargar o crear una mini app (de 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. Muy rara vez tendrás que 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 ejecuta VS Code. En todos los IDE, hay un depurador basado en el frontend de las Herramientas para desarrolladores de Chrome con algunas modificaciones, de las que hablaremos más adelante (consulta Depurador). Los IDE per se se implementan como apps de NW.js o Electron, y los simuladores en los IDE se implementan como una etiqueta <webview> de NW.js o una etiqueta <webview> de Electron, que a su vez se basan en una etiqueta <webview> de Chromium. Si te interesan los detalles 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> de Electron.
Pruebas y depuración en simuladores y dispositivos reales
El simulador es comparable con lo que podrías conocer del modo de dispositivo de las Herramientas para desarrolladores de Chrome. Puedes simular diferentes dispositivos Android y iOS, 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ódigo de barras, una finalización inesperada y el modo oscuro.
Si bien el simulador integrado es suficiente para tener una idea aproximada de cómo se comporta la app, las pruebas integradas en el dispositivo, como con las apps web normales, son irremplazables. Probar una mini app en desarrollo es tan fácil como escanear un código QR. Por ejemplo, en ByteDance DevTools, escanear un código QR generado de forma dinámica por el IDE con un dispositivo real lleva a una versión alojada en la nube de la miniapp que se puede probar de inmediato en el dispositivo. En el caso de ByteDance, 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 mini app en las diversas superapps de ByteDance, como Douyin o Toutiao (aquí tienes un ejemplo).
Otros proveedores de súper apps 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 el IDE de Likewise, la miniapp se abre en el dispositivo físico, con una ventana de Herramientas para desarrolladores de Chrome ejecutándose en la computadora para la depuración remota.
Debugger
Depuración de elementos
La experiencia de depuración de la mini app 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 mini apps. En lugar del panel Elements de las Herramientas para desarrolladores de Chrome, los IDE de mini apps tienen un panel personalizado que se adapta a su dialecto particular de HTML. Por ejemplo, en el caso de WeChat, el panel se llama Wxml, que significa WeiXin Markup Language. En las Herramientas para desarrolladores de Baidu, se llama Swan Element. Las Herramientas para desarrolladores de ByteDance lo llaman Bxml. Alipay lo denomina AXML, y la app rápida hace referencia al panel simplemente como UX. Analizaré estos lenguajes de marcado más adelante.
<image> con las Herramientas para desarrolladores de WeChat.
Funcionamiento interno de los elementos personalizados
La inspección de WebView en un dispositivo real a través de about://inspect/#devices revela que las herramientas para desarrolladores de WeChat ocultaban deliberadamente la verdad. Donde WeChat DevTools mostró un <image>, lo que realmente estoy viendo es un elemento personalizado llamado <wx-image> con un <div> como su único elemento secundario. Es interesante observar que este elemento personalizado no usa Shadow DOM. Hablaremos más 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). WeChat DevTools usa unidades de longitud CSS independientes del dispositivo para 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 mini apps, por lo que no sorprende que WeChat DevTools y otras herramientas para desarrolladores tengan una herramienta de auditoría integrada inspirada en Lighthouse. Las áreas de enfoque de las auditorías son Total, Rendimiento, Experiencia y Prácticas recomendadas. Se puede personalizar la vista del IDE. En la siguiente captura de pantalla, oculté temporalmente el editor de código para tener más espacio en la 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 API forma parte directamente de WeChat DevTools. A través de una interfaz fácil de usar, el desarrollador puede configurar los extremos de la API y las respuestas simuladas deseadas.
Agradecimientos
Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu revisaron este artículo.