Outils de développement pour mini-applications

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Thomas Steiner

Expérience pour les développeurs

Maintenant que j'ai abordé les mini-applications en tant que telles, je souhaite me concentrer sur l'expérience pour les développeurs sur les différentes plates-formes de super-applications. Le développement de mini-applications sur toutes les plates-formes se fait dans des IDE fournis sans frais par les plates-formes de super-applications. Il en existe d'autres, mais je souhaite me concentrer sur les quatre plus populaires, et sur une cinquième pour les applications rapides à des fins de comparaison.

IDE pour les mini-applications

Comme les super-applications, la plupart des IDE ne sont disponibles qu'en chinois. Vous devez vous assurer d'installer la version chinoise et non une version en anglais (ou à l'étranger) parfois disponible, car elle risque de ne pas être à jour. Si vous êtes développeur macOS, sachez que tous les IDE ne sont pas signés, ce qui signifie que macOS refuse d'exécuter l'installateur. Vous pouvez, à vos propres risques, contourner cette restriction, comme indiqué dans l'aide Apple.

• Outils pour les développeurs WeChat
• Outils pour les développeurs Alipay
• Outils pour les développeurs Baidu
• Outils pour les développeurs ByteDance
• Quick App DevTools

Projets de démarrage pour mini-applications

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, et qui sont parfois également intégrées aux assistants "New Project" (Nouveau projet) des différents IDE.

• Démo WeChat
• Démonstration Alipay
• Démonstration 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émo), la première étape consiste toujours à vous connecter. En général, 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 devrez rarement saisir un mot de passe. Une fois connecté, l'IDE connaît votre identité et vous permet de commencer à programmer, déboguer, tester et envoyer votre application pour examen. Vous trouverez ci-dessous des captures d'écran des cinq IDE mentionnés dans le paragraphe ci-dessus.

Comme vous pouvez le constater, les composants fondamentaux de tous les IDE sont très similaires. Vous disposez toujours d'un éditeur de code basé sur l'éditeur Monaco, le même projet qui alimente également VS Code. Dans tous les IDE, un débogueur basé sur le frontend des outils pour les développeurs Chrome est fourni avec quelques modifications. Nous y reviendrons plus tard (voir Débogueur). Les IDE en soi sont implémentés en tant qu'applications NW.js ou Electron. Les simulateurs des IDE sont réalisés en tant que balise <webview> NW.js ou balise <webview> Electron, qui sont à leur tour basées sur une balise <webview> Chromium. Si vous êtes intéressé par l'intérieur de l'IDE, vous pouvez souvent simplement l'inspecter avec les outils de développement Chrome à l'aide du raccourci clavier Ctrl+Alt+I (ou Cmd+Option+I sur Mac).

Test et débogage sur un simulateur et un appareil réel

Le simulateur est comparable à ce que vous connaissez peut-être du 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 réseau, une pression de mémoire, un événement de lecture de code-barres, une interruption inattendue et un 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 vous suffit de scanner un code QR pour tester une mini-application en cours de développement. Par exemple, dans ByteDance DevTools, le scan d'un code QR généré dynamiquement par l'IDE avec un appareil réel permet d'accéder à une version hébergée dans le cloud de la mini-application, qui peut ensuite être testée immédiatement sur l'appareil. Pour ByteDance, l'URL derrière le code QR (exemple) redirige vers une page hébergée (exemple) contenant des liens avec des schémas URI spéciaux, tels que snssdk1128://, pour prévisualiser la mini-application sur les différentes super-applications ByteDance telles que Douyin ou Toutiao (exemple). D'autres fournisseurs de super-applications n'utilisent pas de page intermédiaire, mais ouvrent directement l'aperçu.

Une fonctionnalité encore plus intéressante est le débogage à distance en preview dans le cloud. Il suffit de scanner un code QR spécial généré par l'IDE pour que la mini-application s'ouvre sur l'appareil physique, avec une fenêtre DevTools Chrome exécutée sur l'ordinateur pour le débogage à distance.

Debugger

Débogage des éléments

L'expérience de débogage des mini-applications est très familière à tous ceux qui ont déjà travaillé avec Chrome DevTools. Cependant, il existe des différences importantes qui font que le workflow est adapté aux mini-applications. Au lieu du panneau "Éléments" des outils pour les développeurs Chrome, les IDE de mini-applications disposent d'un panneau personnalisé adapté à leur dialecte HTML particulier. Par exemple, dans le cas de WeChat, le panneau s'appelle Wxml, qui signifie WeiXin Markup Language. Dans Baidu DevTools, il s'appelle Swan Element (Élément Swan). Les outils de développement ByteDance l'appellent Bxml. Alipay l'appelle AXML, et Quick App fait simplement référence au panneau sous le nom UX. Je reviendrai sur ces langages de balisage plus tard.

Détails techniques des éléments personnalisés

L'inspection de la WebView sur un appareil réel via about://inspect/#devices révèle que les outils de développement WeChat cachaient délibérément la vérité. Là où WeChat DevTools affichait un <image>, ce que je regarde est un élément personnalisé appelé <wx-image> avec un <div> comme seul enfant. Il est intéressant de noter que cet élément personnalisé n'utilise pas Shadow DOM. Nous reviendrons sur 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 du CSS (nous reviendrons sur cette unité plus tard). WeChat DevTools utilise des unités de longueur CSS indépendantes des appareils pour rendre le développement pour différentes tailles d'appareils plus intuitif.

Audit des performances

Les performances sont au premier plan pour les mini-applications. Il n'est donc pas surprenant que WeChat DevTools et d'autres outils de développement intègrent un outil d'audit inspiré de Lighthouse. Les audits portent sur les domaines suivants : "Total", "Performances", "Expérience" et "Bonnes pratiques". L'affichage de l'IDE peut être personnalisé. Dans la capture d'écran ci-dessous, j'ai temporairement masqué l'éditeur de code pour avoir plus d'espace à l'écran pour l'outil d'audit.

Simulation d'API

Au lieu d'obliger le développeur à configurer un service distinct, la simulation des réponses de l'API fait directement partie de WeChat DevTools. Via 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é relu par Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent et Keith Gu.