Mutualisez le développement de votre site web et de votre application mobile avec React Native Web
Il est rare de ne pas avoir entendu parler en 2019 de React, la librairie de conception d’interfaces créée par Facebook qui s’est rapidement imposée dans l’univers du développement front-end. Difficile également de passer à côté de React Native, le pendant mobile de React, permettant la création d’applications cross-platform Android et iOS en javascript.
En combinant ces deux outils, il devient possible de concevoir des applications web et mobiles partageant une bonne partie du code métier et fonctionnel, et de limiter ainsi la duplication de code à la partie interface.
Si cette idée vous a déjà séduit(e), vous serez ravi(e)s de découvrir le défi relevé par React Native Web, principal sujet de cet article. Cette librairie propose en effet un portage de React Native pour vos applications web, en fournissant une implémentation des composants HTML à l’aide d’éléments React Native, poussant ainsi la mise en commun du code jusqu’au développement des interfaces utilisateurs.
Quand utiliser React Native Web
La principale force de React Native Web étant son abstraction sur les composants web et mobile, un cas d’usage évident est la création en parallèle d’une application web et d’une application mobile. De même, il peut être intéressant de considérer son utilisation lors de la (re)création d’un site web associé à une application mobile React Native existante.
Cependant, le choix de cette technologie au lieu de React pour une application uniquement axée web est difficilement justifiable, excepté peut-être si vous êtes un développeur ou une développeuse React Native voulant s’abroger de l’apprentissage de certaines spécificités propres au développement React web.
Setup d’un projet en quelques minutes
Les sources du projet sont disponibles sur github
Le démarrage d’un projet cross-platform avec React Native Web peut se faire en quelques minutes, et commence de la même façon que la création d’un projet React Native mobile, en utilisant par exemple l’utilitaire react-native-cli.
npm i -g react-native-cli
react-native init ProjectNameUne fois le projet mobile initialisé, il faut maintenant y ajouter la composante web :
npm i react-native-webPour fonctionner, react-native-web dépend par ailleurs de l’installation du module react-dom (qui devrait vous être familier si vous avez déjà effectué du développement web avec React) :
npm i react-domEnfin, reste l’installation de notre outil de build pour le web. Nous allons ici utiliser Parcel, par soucis de simplicité.
npm i -D parcel-bundlerToutes nos principales dépendances sont maintenant installées, il ne nous reste que quelques petites modifications à faire pour pouvoir lancer notre projet web.
Tout d’abord, direction package.json , pour définir l’alias react-native-web après nos dependencies ; profitons-en également pour définir un script afin de lancer notre application en mode de développement :
"scripts": {
"web": "parcel index.html"
},“alias”: {
“react-native”: “react-native-web”
},
Voici à quoi devrait maintenant ressembler notre fichier :
Il va maintenant nous falloir créer le coeur de notre application web, le célèbre index.html :
Nous y sommes presque, une dernière modification à faire cependant, il faut encore déclarer à quelle vue nous voulons attacher notre application. Pour cela, il nous suffit d’ajouter ces quelques lignes à notre index.js.
Un petit exemple
C’est terminé ! Il ne nous reste plus qu’à éditer notre code pour voir la magie opérer :
Nous pouvons maintenant examiner notre avancée sur le web et le mobile avec nos différents outils :
react-native run-android
react-native run-ios
npm run web
Les spécificités de développement avec React Native Web
Bien que notre code soit maintenant partagé entre le web et le mobile, il nous sera possible, lors du développement, de rencontrer des cas particuliers demandant une implémentation spécifique à l’une ou l’autre plateforme.
Nous avons d’ailleurs déjà été confrontés à ce besoin lors de l’initialisation du projet :
if (Platform.OS === 'web') {
AppRegistry.runApplication(appName, {
rootTag: document.getElementById('main') }
);
}Ainsi que dans notre composant :
const message = Platform.select({
android: ‘Une application Android conçue avec React Native’,
ios: ‘Une application iOS conçue avec React Native’,
web: ‘Une application Web conçue avec React Native Web’,
});Ici, nous utilisons un outil déjà fréquemment utilisé pour le développement mobile avec React Native : Platform, dont l’utilisation est ici étendue grâce à React Native Web.
Un autre méthode pour l’initialisation aurait pu être de créer deux points d’entrée différents, index.js et index.native.js :
Cette fois encore, ce procédé rappelle le développement avec React Native, où il est habituel d’utiliser des fichiers aux extensions .android.js ou .ios.js . Cette technique se montrera particulièrement pratique lors de la création d’abstraction pour des librairies propres au web ou au mobile, telles que les librairies de navigation par exemple.
Les limitations
Bien que React Native Web permette le développement d’applications web, il faut garder à l’esprit que React Native est une technologie pensée avant tout pour le mobile. Cela peut être vu comme un avantage à l’ère du mobile first, mais impliquera potentiellement plusieurs désagrément à l’usage.
Les API de style de React Native définissent par exemple toutes les vues avec un layout basé sur flexbox, qui, bien qu’étant bien plus agréable à utiliser, peut soulever des soucis de performances pour la réalisation de pages complexes (à nuancer cependant, ce type de soucis de performance ne sera pas constaté sur une grande majorité d’applications).
L’utilisation de libraires propres au développement web pourra également demander un travail d’abstraction supplémentaire comparé à d’autres outils de développement purement orientés web.
En conclusion
React Native Web est une technologie très efficace pour le développement d’applications web et mobile, ou pour le portage web d’une application React Native existante.
Cependant, il ne faut pas, comme souvent, considérer cette librairie comme une solution automatique à l’implémentation d’applications web, ses principaux avantages résidant dans le partage de code, et son utilisation comportant tout de même quelques concessions.
Toutefois, ces limitations, et notamment les limitations de performance, ne devraient pas être particulièrement impactantes dans le cas de développement web et mobile en parallèle, les écrans d’applications mobile ayant en effet tendance à être moins chargés que les pages purement axées web.
Et vous, avez-vous déjà utilisé React Native Web ? Dans quels cas l’utilisez-vous ? Le recommandez-vous ? N’hésitez pas à partager vos expériences dans les commentaires ci-dessous 👨👩👧👦
