Outils de développement pour mini-applications

Thomas Steiner

Expérience pour les développeurs

Maintenant que j'ai abordé les mini-applications en soi, je souhaite me concentrer sur l'expérience de développement pour les différentes plates-formes de super-applications. Sur toutes les plates-formes, le développement de mini-applications s'effectue dans des IDE fournis sans frais par les plates-formes de super-applications. Bien qu'il y en ait plus, je vais me concentrer sur les quatre les plus populaires et un cinquième pour l'appli rapide à des fins de comparaison.

IDE de mini-applications

Comme les super applications, la majorité des IDE ne sont disponibles qu'en chinois. Vous devez installer la version chinoise, et non une version anglaise (ou internationale) parfois disponible, car elle peut ne pas être à jour. Si vous êtes un développeur macOS, sachez que tous les IDE ne sont pas signés, ce qui signifie que macOS refuse d'exécuter le programme d'installation. Vous pouvez contourner ce problème à vos propres risques, comme indiqué dans l'aide d'Apple.

• Outils pour les développeurs WeChat
• Outils pour les développeurs Alipay
• Outils pour les développeurs Baidu
• ByteDance DevTools
• Outils de développement d'applications rapides

Projets de démarrage de la mini-application

Pour vous lancer rapidement dans le développement de mini-applications, tous les fournisseurs de super-applications proposent des applications de démonstration qui peuvent être téléchargées et testées immédiatement. Elles sont parfois également intégrées aux assistants "Nouveau projet" des différents IDE.

• Démo WeChat
• Démonstration d'Alipay
• Démo Baidu
• Démo ByteDance
• Démonstration rapide de l'application

Flux de développement

Après avoir lancé l'IDE et chargé ou créé une mini-application (démonstration), la première étape consiste toujours à se connecter. En règle générale, il vous suffit de scanner un code QR généré par l'IDE avec la super-application (à laquelle vous êtes déjà connecté). Vous êtes rarement obligé de saisir un mot de passe. Une fois que vous êtes connecté, l'IDE connaît votre identité et vous permet de commencer à programmer, déboguer, tester et envoyer votre application pour examen. Vous pouvez voir ci-dessous des captures d'écran des cinq IDE mentionnés dans le paragraphe ci-dessus.

Comme vous pouvez le voir, les composants fondamentaux de tous les IDE sont très similaires. Vous avez toujours un éditeur de code basé sur l'éditeur Monaco, le même projet qui alimente également VS Code. Dans tous les IDE, il existe un débogueur basé sur l'interface des outils pour les développeurs Chrome avec quelques modifications. Nous y reviendrons plus tard (voir Debugger). Les IDE en soi sont implémentés en tant qu'applications NW.js ou Electron. Les simulateurs sont créés sous la forme d'une balise <webview> NW.js ou d'une balise Electron <webview>, qui sont elles-mêmes basées sur une balise Chromium <webview>. Si vous êtes intéressé par les composants internes de l'IDE, vous pouvez souvent simplement les inspecter avec les outils pour les développeurs Chrome à l'aide du raccourci clavier Ctrl+Alt+I (ou Cmd+Option+I sur Mac).

Simulateur et test et débogage sur des appareils réels

Le simulateur est comparable à ce que vous pourriez savoir grâce au mode appareil des outils pour les développeurs Chrome. Vous pouvez simuler différents appareils Android et iOS, modifier l'échelle et l'orientation de l'appareil, mais aussi simuler différents états du réseau, la pression de la mémoire, un événement de lecture de code-barres, une interruption inattendue et le mode sombre.

Bien que le simulateur intégré suffise à avoir une idée approximative du comportement de l'application, les tests sur l'appareil, comme pour les applications Web standards, sont irremplaçables. Il suffit de scanner un code QR pour tester une mini-application en cours de développement. Par exemple, dans les outils de développement ByteDance, analyser un code QR généré dynamiquement par l'IDE avec un appareil réel génère une version de la mini-application hébergée dans le cloud qui peut ensuite être testée immédiatement sur l'appareil. Pour ByteDance, cela se produit lorsque l'URL derrière le code QR (exemple) redirige vers une page hébergée (exemple), qui contient des liens avec des schémas d'URI spéciaux tels que snssdk1128://, pour prévisualiser la mini-application sur les différentes super-applications ByteDance comme Douyin ou Toutiao (en voici un exemple). Les autres fournisseurs de super-applications ne passent pas par une page intermédiaire, mais ouvrent directement l'aperçu.

Autre fonctionnalité encore plus séduisante : le débogage à distance de la version preview dans le cloud. Après avoir scanné un code QR spécial généré par l'IDE, la mini-application s'ouvre sur l'appareil physique et une fenêtre Chrome DevTools s'exécute sur l'ordinateur pour le débogage à distance.

Debugger

Débogage des éléments

Tous ceux qui ont déjà travaillé avec les outils pour les développeurs Chrome connaissent très bien l'expérience de débogage des mini-applications. Cependant, il existe des différences importantes qui font que le workflow est adapté aux mini-applications. Au lieu du panneau des éléments des outils pour les développeurs Chrome, les IDE de mini-applications disposent d'un panneau personnalisé adapté à leur dialecte HTML spécifique. Par exemple, dans le cas de WeChat, le panneau s'appelle Wxml, qui signifie WeiXin Markup Language. Dans les outils de développement Baidu, il s'appelle élément cygne. ByteDance DevTools l'appelle Bxml. Alipay le nomme AXML, et l'application rapide fait simplement référence au panneau UX. Nous aborderons ces langages de balisage plus tard.

Éléments personnalisés en arrière-plan

L'inspection de la WebView sur un appareil réel via about://inspect/#devices révèle que les outils pour les développeurs WeChat cachaient délibérément la vérité. Les outils pour les développeurs WeChat affichent une <image>. Je regarde en fait un élément personnalisé appelé <wx-image> avec <div> comme seul enfant. Il est intéressant de noter que cet élément personnalisé n'utilise pas Shadow DOM. Nous aborderons ces composants plus tard.

Débogage CSS

Une autre différence est la nouvelle unité de longueur rpx pour le pixel responsif dans les différents dialectes de CSS (plus d'informations sur ce module plus tard). Les outils de développement WeChat utilisent des unités de longueur CSS indépendantes de l'appareil afin de rendre le développement pour différentes tailles d'appareils plus intuitif.

Audit des performances

Les performances sont au cœur des mini-applications. Il n'est donc pas surprenant que les outils pour les développeurs WeChat et d'autres outils de développement disposent d'un outil d'audit intégré inspiré de Lighthouse. Les audits se concentrent sur le total, les performances, l'expérience et les bonnes pratiques. L'affichage de l'IDE peut être personnalisé. Dans la capture d'écran ci-dessous, j'ai masqué temporairement l'éditeur de code afin de disposer de plus d'espace à l'écran pour l'outil d'audit.

Simulation d'API

Plutôt que de demander au développeur de configurer un service distinct, la simulation des réponses de l'API fait directement partie des outils pour les développeurs WeChat. Grâce à une interface facile à utiliser, le développeur peut configurer les points de terminaison de l'API et les réponses fictives souhaitées.

Remerciements

Cet article a été lu par Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent et Keith Gu.