Développement d'un SDK pour les navigateurs Web : 3 enseignements tirés de notre expérience
Les SDK intégrés au navigateur constituent un excellent moyen de déployer votre projet sur le Web et de faciliter l'accès de vos services aux développeurs d'applications.
En effet, plusieurs grandes entreprises ont constitué de cette manière une bibliothèque autour de leurs API.
Amazon, par exemple, permet aux développeurs d'intégrer des services AWS dans leurs applications web à l'aide de code JavaScript s'exécutant dans un navigateur. Facebook, Stripe et Twilio proposent tous des solutions similaires.
Chez Microblink, la plupart de nos produits fonctionnent désormais dans les navigateurs. Nous souhaitions que les développeurs puissent créer des expériences simples mais performantes directement au niveau du front-end de leurs applications web, et que nos utilisateurs finaux puissent profiter de ces expériences sans jamais avoir à quitter leur onglet.
Le principal problème auquel nous avons été confrontés pour atteindre cet objectif était le suivant : tous nos produits nécessitent un traitement d'image intensif sur l'appareil, ce que les navigateurs n'étaient pas en mesure de gérer… jusqu'à récemment.
Conseil n° 1 : WebAssembly est la solution idéale si votre code nécessite une puissance de calcul importante
Autrefois, les navigateurs ne servaient qu'à afficher des pages. Aujourd'hui, ils permettent de coder, de monter des vidéos et de jouer à des jeux directement dans leur interface.
Cette amélioration des performances est en grande partie due à l'adoption généralisée de WebAssembly, une nouvelle norme web qui fonctionne en parallèle de JavaScript pour compiler du code de bas niveau, ce qui permet aux navigateurs de l'exécuter plus rapidement. (1)
Grâce à son format binaire compact, WebAssembly est la solution idéale lorsque vous avez besoin de créer des expériences de type natif sur le Web. Dans notre cas, il s'agit d'une extraction de données en temps réel s'appuyant sur une importante composante d'intelligence artificielle.
Comme vous pouvez le constater, WebAssembly est rapide. La logique complexe utilisée pour détecter, reconnaître et lire les cartes bancaires à partir du flux vidéo d'un utilisateur fonctionne à la perfection, malgré la faible résolution de la caméra d'un ordinateur portable.
Pour nos utilisateurs finaux, cela rend la création d'un compte ou le paiement en ligne aussi simple que de scanner des données : il suffit d'un simple clic pour accéder à l'ensemble du processus.
Outre l'amélioration des performances, la compilation de votre code en WebAssembly nous apporte :
- Sécurité renforcée : WebAssembly s'exécute dans un environnement sécurisé et isolé (sandbox), et son format de bytecode rend la rétro-ingénierie bien plus difficile que pour JavaScript.
- Accessibilité et interopérabilité : WebAssembly est récemment devenu la norme officielle du World Wide Web Consortium (W3C), au même titre que le HTML et le CSS.
- Portabilité : WebAssembly peut également s'exécuter en dehors du navigateur, sur divers systèmes d'exploitation et architectures de jeu d'instructions.
Le code source de nos SDK est écrit en C++, mais vous pouvez également compiler du WebAssembly à partir de Rust, Go, AssemblyScript et de nombreux autres langages.
Voici un aperçu général du déroulement du processus. Vous remarquerez que nous avons choisi Chrome pour illustrer notre propos, car c'est le navigateur préféré d'environ deux tiers des internautes dans le monde. (2)
Il n'en reste pas moins qu'il faut tenir compte du tiers restant. Et cela implique de développer en veillant à la compatibilité entre les différents navigateurs.
Astuce n° 2 : résolvez les problèmes de compatibilité entre navigateurs en améliorant progressivement votre SDK
L'utilisation de nouvelles API de navigateur ou de technologies telles que WebAssembly entraîne souvent le dysfonctionnement de certaines de vos fonctionnalités dans certains navigateurs, soit parce qu'elles sont bloquées par un élément quelconque, soit parce qu'elles ne sont tout simplement pas prises en charge.
Par exemple, l'appel de l'API WebRTC pour traiter une vidéo en temps réel dans Chrome ne fonctionnera sur aucun iPhone équipé d'iOS 14.2 ou d'une version antérieure, car le WebView d'Apple ne prend pas en charge cette fonctionnalité.
Imaginons que vous développiez un SDK de visioconférence pour le Web. Vous vous retrouvez alors face à un problème : les utilisateurs d’iPhone qui n’ont pas mis à jour leur logiciel depuis plusieurs mois ne pourront participer à une réunion qu’avec Safari.
Nous avons été confrontés au même problème avec la prise en charge de WebRTC, et certains de nos utilisateurs ne disposent peut-être tout simplement pas de webcam. Pour contourner ce problème, nous avons procédé comme on le fait face à toute impasse : en prenant du recul et en redéfinissant nos priorités.
L'amélioration progressive en pratique
En développement web, l'amélioration progressive consiste à proposer en priorité les fonctionnalités essentielles à tous les utilisateurs, tandis que les fonctionnalités plus avancées ne sont accessibles qu'aux utilisateurs des navigateurs les plus récents.
Nous savons que notre fonctionnalité principale n'est pas la numérisation en elle-même, mais bien l'extraction des données qui s'ensuit. Nous avons besoin d'une image du document, mais l'utilisateur peut simplement en télécharger une depuis sa galerie au lieu d'activer sa webcam.
Cette fonctionnalité de base est accessible à tous nos utilisateurs. Une fois les éléments essentiels passés en revue, nous vérifions si nous pouvons accéder à la caméra pour numériser le document.
Il est utile de définir dès le départ le parcours utilisateur et de déterminer ce qui se passe si une fonctionnalité ne parvient pas à se charger. Voici comment nous avons conçu notre flux avant de développer le SDK :
Vérifier si un navigateur prend en charge une fonctionnalité
Avant de définir un niveau de base en matière d'expérience utilisateur, nous devons savoir quelles fonctionnalités fonctionneront ou non sur l'ensemble des navigateurs.
Pour ce faire, vous pouvez soit mettre en place vos propres tests, soit utiliser une bibliothèque existante telle que « wasm-feature-detect » de Google. Nous l’utilisons pour charger un bundle WebAssembly adapté à nos utilisateurs lors de l’exécution, en commençant par le plus compatible pour finir par le plus performant. Voici un exemple illustrant comment vérifier si SIMD, l’une des fonctionnalités de WebAssembly, est prise en charge.
<script type="module">
import { simd } from "https://unpkg.com/wasm-feature-detect?module";
simd().then(simdSupported => {
if (simdSupported) {
/* SIMD is supported */
} else {
/* SIMD isn't supported */
}
});
</script>Effectuez un test de compatibilité entre navigateurs pour chacune de vos fonctionnalités, mettez en place des solutions de contournement en cas d'incompatibilité, et avant même de vous en rendre compte, vous améliorerez progressivement votre SDK.
Astuce n° 3 : Évitez les tâches fastidieuses grâce à la métaprogrammation
Si vous envisagez de développer plusieurs SDK (voire des applications web) partageant des fonctionnalités similaires, vous pourriez vous intéresser à la métaprogrammation.
La métaprogrammation est une technique dans laquelle un programme informatique traite d'autres programmes comme s'il s'agissait de ses données. Elle permet d'automatiser des tâches chronophages et souvent fastidieuses en écrivant des programmes qui, à leur tour, écrivent d'autres programmes.
À titre d'exemple, nos SDK intégrés au navigateur présentent une architecture similaire, mais répondent à des besoins totalement différents. La métaprogrammation nous permet de transformer les fichiers JavaScript existants, voire d'en générer de nouveaux pour chaque SDK, afin de :
- Générer du code standard à partir d'un seul méta-référentiel
- Ajoutez une nouvelle fonctionnalité une seule fois et elle fonctionnera partout
- Corriger un bug à un seul endroit et modifier le comportement indésirable dans tous les SDK
- Modifier les clés de licence en masse, modifier les chemins d'accès aux fichiers WebAssembly, etc.
Nous utilisons deux techniques de métaprogrammation différentes, en fonction de l'ampleur des modifications à apporter : la métaprogrammation par modèles (TMP) et la manipulation de l'arbre de syntaxe abstraite (AST).
La métaprogrammation par modèles s'avère très utile lorsque vous devez générer plusieurs fichiers JavaScript à partir d'un seul fichier générique.
L'utilisation des AST pour manipuler le code permet de modifier des fichiers de code source existants tout en respectant leur style et leur structure.
Nous verrons plus en détail comment mettre en œuvre ces deux techniques dans un prochain article de blog.
Les navigateurs : l'endroit incontournable
À mesure que les navigateurs continuent d'évoluer, nous allons inévitablement assister à une multiplication des SDK qui permettront d'offrir des expériences plus simples et plus personnalisées sur le Web.
Nous espérons que les conclusions que nous avons exposées ci-dessus vous aideront à créer le vôtre, en tenant compte des performances, de l'accessibilité et d'une conception ingénieuse.
Vous aimez développer des SDK incroyables directement dans le navigateur ? Venez rejoindre notre équipe !
