Expérience développeur
Maintenant que j'ai abordé les mini-applications en tant que telles, je souhaite me concentrer sur l'expérience développeur pour les différentes plates-formes de super-applications. Le développement de mini-applications sur toutes les plates-formes s'effectue dans des IDE fournis sans frais par les plates-formes de super-applications. Bien qu'il en existe d'autres, je souhaite me concentrer sur les quatre plus populaires, et sur une cinquième pour la comparaison avec Quick App.
IDE pour mini-applications
Comme pour les super-applications, la majorité des IDE ne sont disponibles qu'en chinois. Vous devez vous assurer d'installer la version chinoise et non une version anglaise (ou étrangère) 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, à vos propres risques, contourner ce problème, comme indiqué dans l'aide Apple.
- Outils de développement WeChat
- Outils de développement Alipay
- Outils de développement Baidu
- Outils de développement ByteDance
- Outils de développement Quick App
Projets de démarrage pour mini-applications
Pour commencer rapidement à développer des 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 "Nouveau projet" des différents IDE.
- Démonstration WeChat
- Démonstration Alipay
- Démonstration Baidu
- Démonstration ByteDance
- Démonstration Quick App
Flux de développement
Après avoir lancé l'IDE et chargé ou créé une mini-application (de démonstration), la première étape consiste toujours à se connecter. En général, il vous suffit de scanner un code QR avec la super-application (où vous êtes déjà connecté) généré par l'IDE. Il est très rare que vous deviez 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 voir, 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, il existe un débogueur basé sur l'interface des Outils pour les développeurs Chrome avec quelques modifications, dont nous parlerons plus tard (voir Débogueur). Les IDE en tant que tels sont
implémentés en tant qu'applications NW.js ou Electron.
Les simulateurs des IDE sont réalisés sous forme de
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
les composants internes de l'IDE, vous pouvez souvent les inspecter simplement avec les Outils pour les développeurs Chrome à l'aide du raccourci clavier
Control+Alt+I (ou
Command+Option+I sur Mac).
<webview> Electron.
Test et débogage sur simulateur et sur appareil réel
Le simulateur est comparable à ce que vous connaissez peut-être du mode Appareil des Outils pour les développeurs Chrome appareil. 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, une pression sur la mémoire, un événement de lecture de code-barres, un arrêt inattendu 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 classiques, 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, le fait de scanner 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)
qui contient des liens avec des schémas d'URI spéciaux, comme, par exemple, snssdk1128://, pour prévisualiser la mini
application sur les différentes super-applications ByteDance comme Douyin ou Toutiao
(voici un exemple).
D'autres fournisseurs de super-applications ne passent pas par une page intermédiaire, mais ouvrent directement l'aperçu.
Une fonctionnalité encore plus intéressante est le débogage à distance de l'aperçu dans le cloud. Après avoir simplement scanné un code QR spécial généré par l'IDE, la mini-application s'ouvre sur l'appareil physique, avec une fenêtre Outils pour les développeurs Chrome exécutée sur l'ordinateur pour le débogage à distance.
Debugger
Débogage d'éléments
L'expérience de débogage des mini-applications est très familière pour tous ceux qui ont déjà utilisé Chrome DevTools. Cependant, il existe quelques différences importantes qui adaptent le workflow aux mini-applications. Au lieu du panneau " Elements" des Outils pour les développeurs Chrome, les IDE pour mini-applications disposent d'un panneau personnalisé adapté à leur dialecte HTML particulier. Par exemple, dans le cas de WeChat, le panneau est appelé Wxml, qui signifie WeiXin Markup Language. Dans les outils de développement Baidu, il s'appelle Swan Element. Les outils de développement ByteDance l'appellent it Bxml. Alipay le nomme AXML, et Quick App fait référence au panneau simplement en tant que UX. Je vais aborder ces langages de balisage plus tard.
<image> avec les outils de développement WeChat.
Éléments personnalisés sous le capot
L'inspection de la WebView sur un appareil réel via about://inspect/#devices
révèle que les outils de développement WeChat ont délibérément caché la vérité. Là où les outils de développement WeChat affichaient un
<image>, l'élément réel 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 aborderons
ces composants plus tard.
<image> avec les outils de développement WeChat révèle qu'il s'agit en fait d'un élément personnalisé <wx-image>.
Débogage CSS
Une autre différence est la nouvelle unité de longueur rpx pour les pixels responsifs dans les différents dialectes CSS
(nous aborderons cette unité plus tard). Les outils de développement WeChat utilisent des unités de longueur CSS indépendantes de l'appareil pour rendre le développement pour différentes tailles d'appareils plus intuitif.
200rpx 0) d'une vue avec les outils de développement WeChat.
Audit des performances
Les performances sont au premier plan pour les mini-applications. Il n'est donc pas surprenant que les outils de développement WeChat et d'autres outils de développement disposent d'un outil d'audit intégré inspiré de Lighthouse. Les domaines d'intérêt des audits sont les suivants : Total, Performances, Expérience et Bonnes pratiques. La vue de l'IDE peut être personnalisée. Dans la capture d'écran ci-dessous, j'ai temporairement masqué l'éditeur de code pour disposer de 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 d'API fait directement partie des outils de développement WeChat. Grâce à une interface facile à utiliser, le développeur peut configurer des points de terminaison d'API et les réponses simulées souhaitées.
Remerciements
Cet article a été examiné par Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, et Keith Gu.