Construire un SDK pour les navigateurs web : 3 choses que nous avons apprises
Les SDK intégrés aux navigateurs sont un excellent moyen de porter votre projet sur le web et de simplifier la manière dont les développeurs d’applications accèdent à vos services.
En fait, un certain nombre de grandes entreprises ont créé une bibliothèque autour de leurs API de cette manière.
Amazon, par exemple, permet aux développeurs d’intégrer des services AWS dans leurs applications web à l’aide d’un code JavaScript exécuté dans un navigateur. Facebook, Stripe et Twilio font de même.
Chez Microblink, la plupart de nos produits fonctionnent désormais dans les navigateurs. Nous voulions que les développeurs puissent créer des expériences simples mais puissantes directement sur le front-end de leurs applications web, et nous voulions que nos utilisateurs finaux puissent profiter de ces expériences sans avoir à quitter leur onglet.
Le plus gros problème auquel nous avons été confrontés pour atteindre cet objectif était le suivant : tous nos produits nécessitent un traitement d’image intense sur l’appareil, ce que les navigateurs ne pouvaient pas gérer… jusqu’à récemment.
Conseil n° 1 : WebAssembly est la voie à suivre si votre code est gourmand en ressources informatiques.
Autrefois, les navigateurs ne pouvaient que rendre des pages. Aujourd’hui, ils vous permettent de coder, de monter des vidéos et de jouer à des jeux.
Ce gain de performance est dû en grande partie à l’adoption généralisée de WebAssembly, une nouvelle norme web qui fonctionne parallèlement à JavaScript pour compiler le code de bas niveau afin que les navigateurs puissent l’exécuter plus rapidement. (1)
Grâce à son format binaire compact, WebAssembly est idéal lorsque vous devez 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 avec une bonne dose d’intelligence artificielle sous le capot.
Comme vous pouvez le constater, WebAssembly est rapide. La logique complexe utilisée pour détecter, reconnaître et lire les cartes de crédit à partir du flux vidéo d’un utilisateur fonctionne sans problème, malgré la faible résolution de la caméra d’un ordinateur portable.
Pour nos utilisateurs finaux, cela signifie qu’il suffit de scanner les données pour s’inscrire ou payer en ligne, l’ensemble de l’expérience n’étant qu’à un lien.
Outre l’amélioration des performances, la compilation de votre code en WebAssembly nous apporte :
- Sécurité accrue : WebAssembly s’exécute dans un environnement sûr, en bac à sable, et il est beaucoup plus difficile de faire de l’ingénierie inverse que JavaScript en raison de son format bytecode.
- Accessibilité et interopérabilité : WebAssembly est récemment devenu la norme officielle du World Wide Web Consortium (W3C) (tout comme HTML et CSS).
- Portabilité : WebAssembly peut également fonctionner en dehors du navigateur, sur un grand nombre de systèmes d’exploitation et d’architectures de jeux d’instructions.
Le code source de nos SDK est écrit en C++ mais vous pouvez compiler WebAssembly à partir de Rust, Go, AssemblyScript, et de nombreux autres langages. d’autres langagesaussi.
Voici un aperçu général de ce processus. Vous remarquerez que nous avons choisi Chrome pour illustrer notre propos, car il s’agit du navigateur préféré d’environ deux tiers des internautes dans le monde. (2)
Nous devons néanmoins penser au tiers restant. Cela signifie qu’il faut développer en gardant à l’esprit la compatibilité entre les navigateurs.
Conseil n° 2 : traitez les problèmes de compatibilité des navigateurs en améliorant progressivement votre SDK
L’utilisation de nouvelles API de navigateur ou de technologies telles que WebAssembly entraînera souvent l’échec de certaines de vos fonctionnalités dans certains navigateurs, soit parce qu’elles sont bloquées par quelque chose, soit parce qu’elles ne sont pas du tout prises en charge.
Par exemple, l’appel à l’API WebRTC pour traiter une vidéo en temps réel dans Chrome ne fonctionnera pas sur un iPhone fonctionnant sous iOS 14.2 ou une version antérieure, car le WebView d’Apple ne le prend pas en charge.
Supposons que vous mettiez au point un kit de développement logiciel (SDK) de vidéoconférence pour le web. Vous êtes confronté à un problème : les utilisateurs d’iPhone qui n’ont pas mis à jour leur logiciel depuis quelques mois ne pourront pas participer à une réunion autrement qu’avec Safari.
Nous avons rencontré le même problème avec la prise en charge de WebRTC et certains de nos utilisateurs peuvent ne pas avoir de webcam au départ. Nous avons résolu ce problème de la même manière que pour toute impasse : en prenant du recul et en redéfinissant les priorités.
L’amélioration progressive en pratique
Dans le domaine du développement web, l’amélioration progressive signifie que vous fournissez d’abord les fonctionnalités essentielles à tout le monde, tandis que les fonctionnalités plus avancées ne sont disponibles que pour les utilisateurs des navigateurs les plus modernes.
Nous savons que notre fonction principale n’est pas la numérisation elle-même, mais plutôt l’extraction de données qui s’ensuit. Nous devons obtenir une image du document, mais un utilisateur peut simplement en télécharger une depuis la galerie au lieu de lancer la webcam.
Cette fonctionnalité de base est utilisée par tous nos utilisateurs. Après avoir couvert l’essentiel, nous vérifions si nous pouvons accéder à l’appareil photo pour numériser le document.
Il est utile de planifier le parcours de l’utilisateur dès le départ et de déterminer ce qui se passe lorsqu’une fonctionnalité ne se charge pas. Voici comment nous avons conçu notre flux avant de construire le SDK :
Détecter si un navigateur prend en charge une fonctionnalité
Avant d’établir un niveau de base de l’expérience utilisateur, nous devons savoir quelles sont les fonctionnalités qui pourront ou non être exécutées par les différents navigateurs.
Pour ce faire, vous pouvez soit mettre en œuvre vos propres tests, soit utiliser une bibliothèque existante telle que wasm-feature-detect de Google. Nous l’utilisons pour charger un bundle WebAssembly approprié à nos utilisateurs au moment de l’exécution, du plus compatible au plus performant. Voici un exemple permettant de 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 inter-navigateurs pour chacune de vos fonctionnalités, élaborez une logique de contournement pour pallier l’absence de prise en charge et, avant même de vous en rendre compte, vous améliorerez progressivement votre kit de développement logiciel.
Conseil n° 3 : évitez les tâches ennuyeuses grâce à la métaprogrammation
Si vous envisagez de créer plusieurs SDK (ou même des applications web) qui partagent des fonctionnalités similaires, vous pouvez envisager la métaprogrammation.
La métaprogrammation est une technique dans laquelle un programme informatique traite d’autres programmes comme ses données. Elle vous permet d’automatiser des tâches longues et souvent fastidieuses en écrivant des programmes qui écrivent eux-mêmes des programmes.
Par exemple, nos SDK pour navigateurs ont une architecture similaire mais résolvent des problèmes totalement différents. La métaprogrammation nous aide à transformer les fichiers JavaScript existants et même à en générer de nouveaux pour chaque SDK :
- Générer du code boilerplate à partir d’un seul métaréférentiel
- Ajouter une nouvelle fonctionnalité une seule fois et la faire fonctionner partout
- Corrigez un bogue en un seul endroit et modifiez le comportement indésirable dans tous les SDK.
- Changez les clés de licence en masse, modifiez les chemins d’accès aux fichiers WebAssembly, etc.
Nous utilisons deux techniques de métaprogrammation différentes, en fonction de l’ampleur des changements à effectuer : la métaprogrammation de modèles (TMP) et la manipulation de l’arbre syntaxique abstrait (AST).
La métaprogrammation par modèle est 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 est utile pour modifier des fichiers de code source existants tout en respectant leur style et leur structure de code.
Nous examinerons de plus près la manière dont vous pouvez mettre en œuvre ces deux techniques dans un prochain article de blog.
Les navigateurs, l’endroit où il faut être
À mesure que les navigateurs continuent d’évoluer, nous verrons certainement une augmentation des SDK qui permettront des expériences plus simples et plus personnalisées sur le web.
Nous espérons que les résultats que nous avons présentés ci-dessus vous aideront à construire le vôtre, en gardant à l’esprit les performances, l’accessibilité et l’ingénierie intelligente.
Vous aimez travailler sur d’incroyables SKD in-browser ? Venez travailler avec nous
