React Native, la webview 2.0
Vous les utilisez probablement déjà dans vos applications : les webviews… Sans doute pour afficher des écrans de contenus, souvent pour mutualiser des « pages » avec votre site web, et parfois même pour réaliser une application complète : les webviews.
La webview : un composant passe partout
La webview est un des composants les plus vieux du développement mobile, son principe est simple : il permet d’intégrer un « navigateur internet » dans un écran et permet donc de développer des pages en utilisant des technologies web (HTML/JS/CSS) au sein d’une application native.
Des usages variés
Si l’on exclut les applications « coquille » (applications constituées d’une seule webview pour encapsuler un site complet), il est possible de retrouver des webviews :
- pour afficher des écrans de contenus statiques (comme les conditions générales de vente)
- pour afficher des écrans complexes mutualisés avec le site web et pouvant être mis à jours instantanément sans repasser le processus de publication des stores d’applications (comme les parcours transactionnels de type tunnels d’achat dans les sites e-commerce)
- pour consulter des sites web connexes sans sortir de l’application principale.
Les limites
Bien que très efficaces pour mutualiser les fonctionnalités entre plateformes mobiles ou entre les parcours web et mobiles, les webview et leurs failles de sécurité ne sont hélas pas parfaites.
En effet, elles ont un impact assez fort sur l’expérience utilisateur, et vous l’avez peut-être déjà remarqué en utilisant certaines applications.
Tout d’abord, leur performance est inférieure à celle des écrans natifs, du fait qu’elles exécutent un code interprété (contrairement au natif qui utilise un code compilé). Cela peut se traduire par des « freeze » (blocages) lors de l’affichage initial de la page ou par un scrolling qui « accroche » un peu sous le doigt.
A cela il faut parfois rajouter un temps de chargement réseau supplémentaire, quand le code de la page n’est pas intégré à l’application et doit être récupéré sur un serveur. En fonction de la qualité de la connexion, cela peut prendre plusieurs secondes supplémentaires.
Ensuite, il arrive souvent que les transitions entre les pages natives et les webviews soit très « visibles » dans un parcours : la charte graphique et le comportement du service peuvent être légèrement différents.
D’ailleurs, la navigation est souvent sujette à confusion, puisque une webview possède sa propre navigation (passage d’une page web à l’autre au sein de la même webview), tout comme l’application qui l’encapsule, et très souvent il est difficile de savoir quelle sera l’action du bouton « back » sur une webview (va t-on revenir sur la page précédente de la webview ? Ou va t-on quitter la webview), tout cela dépendra du design de l’application.
React Native : une alternative viable
React Native est un framework de développement cross platform (un même code permet d’adresser iOS et Android) qui utilise le JavaScript pour générer des applications avec un rendu natif.
Très populaire ces derniers temps, il utilise des « bindings » (liaisons) pour permettre d’utiliser les composants graphiques des plateformes natives avec JavaScript.
Aussi efficace qu’une webview ?
Tout comme une webview, React Native présente les avantages suivants :
- Un seul code à écrire pour adresser iOS et Android (mais non mutualisable avec le web contrairement aux pages HTML).
- Possibilité de mixer des écrans React Native avec des écrans natifs au sein d’une même application.
- Mise à jour d’un écran sans re-soumettre une nouvelle version de l’application (possible via la solution CodePush de Microsoft, en prenant soin de respecter les guidelines Apple sur le sujet — section 3.3.2)
Mieux qu’une webview ?
React Native permet également de se débarrasser des limitations des webviews :
- Il produit un rendu natif : les performances des écrans React Native sont donc très proches, voire similaires aux écrans natifs.
- React Native utilisant des composants natifs, il n’y a pas d’effet de couture sur l’expérience utilisateur.
En conclusion
Lors de la dernière décennie, la webview a souvent été le composant numéro un pour mutualiser le développement sur les diverses plateformes et canaux, mais non sans faire grincer les dents des utilisateurs souvent déçus par l’expérience et les performances de cette solution.
React Native peut cependant résoudre ce vieux dilemme en proposant la même souplesse qu’une webview, mais en offrant une expérience très proche du natif.
FAQ
Qu'est-ce que React Native ?
React Native est un framework de développement cross-platform qui permet de créer des applications mobiles natives pour iOS et Android avec du JavaScript. Il utilise des liaisons (bindings) pour générer des interfaces utilisateur natives.
Quels sont les avantages de React Native par rapport aux webviews ?
React Native offre de meilleures performances avec un rendu natif, une expérience utilisateur plus fluide, et la possibilité de mettre à jour le code sans republier l'application. Il permet également de développer pour iOS et Android avec une seule base de code.
Peut-on mixer React Native avec des écrans natifs ?
Oui, il est possible d'intégrer des écrans React Native avec des écrans natifs au sein d'une même application, offrant ainsi une grande flexibilité dans le développement.
Quelles sont les limitations des webviews ?
Les webviews ont des performances inférieures aux écrans natifs, peuvent présenter des temps de chargement plus longs, et créent souvent des incohérences dans la navigation et l'interface utilisateur de l'application.
React Native est-il compatible avec le web ?
Contrairement aux webviews qui permettent de réutiliser du code HTML/CSS/JS, le code React Native n'est pas directement mutualisable avec le web, car il est spécifiquement conçu pour les plateformes mobiles.