Découverte du client customisé d'Expo

Créé il y a un peu plus de 5 ans, Expo est un ensemble d'outils permettant de simplifier grandement le développement d'applications mobiles à l'aide de React-Native. Parmi ceux-ci, on retrouve l'application Expo Go qui embarque le SDK et permet de lancer les applications, ainsi qu'un CLI permettant de créer et lancer les applications. Expo n'a cessé de gagner en popularité auprès des développeurs React-Native au fil des années. Toutefois à ses débuts, l'outil n'était pas beaucoup utilisé dans un contexte d'applications à mettre en production.

En effet, quelques défauts faisaient d'Expo plus une plateforme pour concevoir des MVP: binaire très lourd par rapport au contenu réel de l'app (entre 15 et 20 Mo) et surtout l'impossibilité d'installer des modules natifs. Malgré cela, l'expérience de développement était et est toujours très agréable. Contrairement à une application créée via le CLI de React-Native, il est possible de tester son application sans avoir besoin de tout l'outillage nécessaire à la compilation. Ainsi il est possible de tester l'application sur iOS sans forcément posséder un Mac. Derrière, la compilation des binaires se déroule directement sur les serveurs d'Expo. Il y a aussi la possibilité d'envoyer des mises à jours de l'application sans avoir besoin de republier l'application via les stores à la manière de Code Push.

Aujourd'hui, Expo s'est grandement amélioré et est de plus en plus devenu un outil que l'on peut utiliser pour créer une application prête à déployer en production. La quantité d'API prises en charge par le SDK a été grandement améliorée, rendant parfois certaines librairies plus stables que d'autres maintenues par la communauté. Ainsi l'impossibilité d'installer des modules natifs est devenue moins impactante. On y retrouve aussi la possibilité de lancer les applications sur un navigateur web grâce à react-native-web. Pour autant la taille des binaires générés reste assez élevée.

Pour palier au souci d'installation de modules natifs, l'équipe d'Expo a récemment mit en place la possibilité de créer son propre client embarquant le SDK de base ainsi que d'autres modules natifs pouvant s'y brancher. Nous allons aujourd'hui voir comment créer notre client Expo customisé contenant une API très demandée, le Bluetooth, fonctionnant via react-native-ble-plx

Installation

La méthode expliquée ci-dessous implique que vous ayez un environnement de compilation prêt à l'emploi, c'est-à-dire Android Studio et XCode (si vous êtes sous Mac) d'installés.

expo init <app-name>
yarn add expo-dev-client

Ajoutons maintenant le plugin pour le Bluetooth :

expo add react-native-ble-plx @config-plugins/react-native-ble-plx

Vous pourrez trouver la liste des plugins maintenus par Expo ici.

Notre librairie ainsi que son plugin sont installés. Il est maintenant temps de générer un client :

expo run:<ios|android> -d

L'option -d est optionnelle, elle nous permet de sélectionner un appareil sur lequel installer l'application.

Par défaut la commande va installer l'application puis lancer le bundler. Il est possible de passer l'option --no-bundler pour l'empêcher de démarrer. D'autres options sont disponibles, il suffit de lancer la commande expo run:<ios|android> -h pour en obtenir la liste.

Vous avez maintenant un client Expo customisé avec la librairie react-native-ble-plx d'installée. La commande devra être exécutée à nouveau à chaque installation de nouveau module natif.

Si vous ne souhaitez que démarrer le bundler, il suffit de lancer la commande suivante :

expo start --dev-client

Un QR Code s'affiche, il suffit simplement de le scanner avec son appareil photo. Le client customisé devrait s'ouvrir s'il est installé et l'application devrait se lancer par la suite.

Déploiement

Pour créer un binaire déployable, il sera nécessaire de passer par le même processus que pour une application créée avec le CLI de React-Native (voir la documentation pour Android et pour iOS).

Néanmoins il est toujours possible de bénéficier du système de mise à jour OTA fourni par défaut dans le SDK d'Expo, par conséquent la commande expo publish fonctionnera sans soucis.

Si vous ne souhaitez pas ou ne pouvez pas utiliser la méthode ci-dessus, par exemple parce que vous n'êtes pas sous Mac, il est possible de passer par le nouveau service d'Expo EAS, mais attention car celui-ci est payant. Il fournira entre autres le service Turtle destiné aux clients customisés.

Créer son propre plugin

Si vous souhaitez rendre un module natif compatible avec Expo mais que vous ne trouvez pas de plugin open-source, il est tout à fait possible de créer votre propre plugin. La documentation est très bien fournie à ce sujet et explique comment réaliser cela pas à pas.

En conclusion

Expo est devenu en quelques années un outil incontournable pour le développement d'applications React-Native de part l'outillage très complet qu'il fourni. L'équipe a su très simplement résoudre l'un des plus gros défauts de l'outil à l'heure actuelle de manière très simple, bien que nécessitant de l'outillage selon la plateforme souhaitée. Nous ne pouvons qu'espérer que par la suite, EAS offrira un free tier permettant au moins de créer des clients customisés via le cloud.