Adresse
1 rue de Saint-Petersbourg75008 Paris
Mail
contact@bam.techTéléphone
+33 (0)1 53 24 00 83
React Native est un framework développé par Facebook qui permet de créer des apps multiplateforme en JavaScript, de manière accélérée, simple et multiplateforme. En moyenne, ce framework réduit le temps de développement de 30% car les apps iOS et Android partagent la majorité du code. React Native est donc le meilleur moyen pour lancer rapidement une première version viable d'une appli sur l'App Store et Google Play.
Mais au-delà de la première version de l'appli, de nombreuses grandes entreprises ont été séduites par la technologie React Native. Après l'avoir testée, de nombreuses entreprises sont allées jusqu'à recoder des parties entières de leur app en l'utilisant. Dans cet article, nous allons voir des exemples d'entreprises qui ont choisi React Native pour des besoins spécifiques et qui témoignent de l'impact de l'adoption de cette technologie sur leur performance technique et opérationnelle.
En Juin 2018, Instagram atteignait les 1 milliards d'utilisateurs actifs mensuels, dont la moitié sont actifs quotidiennement. En moyenne, un Français ouvre son application Instagram 10 fois par jour et le taux d'engagement sur Instagram est 60 fois supérieur à celui de Facebook : Instagram est devenu une référence dans l'interactivité et l'expérience utilisateur.
Une des raisons de ce succès est la capacité d'Instagram de développer des fonctionnalités en continu et rapidement. Pour cela, Instagram considère que le partage de code entre les applications iOS et Android est un facteur clé permettant d'accélérer le développement de nouvelles fonctionnalités. React Native, qui permet d'utiliser la même base de code pour les deux applications apparaissait donc comme une aubaine pour Instagram qui a décidé de s'y intéresser dès début 2016, soit moins d'un an après que le lancement du framework. Les équipes techniques d'Instagram ont d'abord testé ce framework sur les Push Notifications, puis, le test étant concluant, ils ont décidé de l'étendre à plusieurs autres fonctionnalités.
En utilisant React Native sur d'autres fonctionnalités, les développeurs d'instagram se sont également rendus compte d'un autre avantage de cette technologie comme le look & feel natif. Par exemple, sur la fonctionnalité Post Promote, qui permet aux utilisateurs de gérer la publicité de leur post, les développeurs d'Instagram avait utilisé une WebView. Une WebView permet d'afficher une page web dans une application native. Instagram avait utilisé la WebView car elle permet d'itérer plus facilement que du code natif.
Or, la WebView ne permet pas d'afficher à l'utilisateur une UI similaire à celle des apps natives. En utilisant React Native sur cette fonctionnalité, les équipes de développeurs ont été surprises de voir à quel point les utilisateurs ne pouvaient pas faire la différence avec une application native.
Testé puis mis en place progressivement sur plusieurs fonctionnalités, RN a donc été un franc succès chez Instagram.
"React Native a permis à nos équipes Produit de développer des fonctionnalités sur nos apps plus vite, à la fois sur Android et iOS" Medium
Pour preuve, voici les pourcentages de lignes de code qui sont partagées entre les deux plateformes pour les fonctionnalités sur lesquelles React Native a été choisi :
En 2016, le géant américain de la grande distribution s'est vu confronté à un problème : l'expérience utilisateur sur l'application Walmart n'était pas assez bonne. La cause semblait être une mauvaise pratique dans l'utilisation de WebViews (qui permet d'afficher une page web dans une application native) successives, qui rendait le look & feel de l'app moins qualitatif, d'autant plus si l'utilisateur n'avait pas une bonne connexion internet.
La cause trouvée, Walmart était confronté à deux solutions potentielles : recoder une application pour chaque plateforme ou faire appel à une technologie multi-plateforme. Pour des raisons de productivité, de réutilisabilité du code, mais également de time-to-market, très important pour Walmart, les équipes de développeurs ont choisi de tester React Native.
Voici leur retour d'expérience sur ces 3 points, partagé dans un article Medium :
A l'équipe du WalmartLabs de conclure :
"que vous soyez une startup ou une entreprise du Fortune 500, si vous envisagez un projet mobile, alors envisagez React Native, nous savons que vous ne le regretterez pas".
Bloomberg a également décidé de faire la refonte de sa consumer app avec le framework React Native. Après quelques tests, les ingénieurs de Bloomberg l'ont considéré comme le meilleur outil sur le marché pour créer des apps natives simultanément sur Android et iOS. Ils ont donc reconstruit entièrement leur app en utilisant cette technologie. Cela a pris 5 mois à l'équipe de développeurs de la construire, presque deux fois mois que s'ils n'avaient pas utilisé React Native d'après eux, notamment grâce au fait de pouvoir réutiliser le code entre les deux applications.
L'impact de React Native ne se limite pas seulement au moment de construire l'application. Un autre avantage de la technologie dans ce cas précis est la maintenabilité du code : l'app est moins coûteuse et moins difficile à maintenir et à mettre à jour, dans la mesure où les développeurs disposent d'un code quasi-identique pour la version iOS et la version Android. Par exemple, React Native permet aux équipes de Bloomberg de mettre à jour automatiquement le code, ce qui permet aux utilisateurs d'avoir les dernières mises à jour dès qu'ils ouvrent leur app, et donc d'avoir toujours accès à la meilleure expérience possible.
Cela permet également aux développeurs d'expérimenter et d'itérer. Par exemple, avant le lancement de l'app, les développeurs ont pu procéder très rapidement à de l'A/B testing en mettant des images à droite et à gauche de l'écran et en collectant les données pour connaître les préférences des utilisateurs.
Au chef de ce projet, Gabriel Lew, de conclure : "React Native est le meilleur framework à ce jour. Attendez vous à le retrouver dans nos futures apps Bloomberg".
Lorsque Uber a commencé à développer son service de livraison de repas à domicile, les ingénieurs de la plus grande licorne américaine ont été confronté à plusieurs problèmes. Tout d'abord, il s'agissait de passer d'une marketplace à deux parties (chauffeurs et passagers) à une marketplace à trois parties, le restaurant venant s'ajouter à l'équation entre le chauffeur (cette fois le livreur) et le passager (qui cette fois attend à son domicile). Uber souhaitait donc capitaliser sur son service de chauffeur pour créer son nouveau service de livraison de repas à domicile mais ce n'était pas simple.
La place du restaurant étant totalement nouvelle dans le service d'Uber, il a fallu créer une interface pour les restaurants qui avaient des besoins spécifiques, comme par exemple recevoir une commande, l'accepter et la marquer comme "prête" une fois la commande prête à être livrée. Pour ça, Uber a d'abord commencé par développer une simple page de Dashboard grâce à React/Flux. Mais après plusieurs mois, Uber s'est vite retrouvé limité dans le champ des fonctionnalités possibles pour ce dashboard, ce qui était frustrant à la fois pour les ingénieurs et les restaurateurs. Par exemple, imprimer automatiquement des tickets de caisse physiques n'étaient pas possible sur tous les navigateurs, ce qui était une forte source de frustration pour les restaurants qui ont l'habitude de travailler avec des tickets de caisse physiques. Une refonte complète du dashboard pour restaurants d'Uber Eats a donc été envisagée.
Le choix d'utiliser React Native pour la refonte du dashboard pour restaurants s'est fait assez simplement. Comme la première version du dashboard avait tout d'abord été pensée pour le Web, les ingénieurs d'Uber Eats avaient l'habitude d'utiliser la librairie de composants React mais avaient très peu d'expérience dans les technologies mobiles natives. React Native, qui offre la possibilité de coder des applications mobiles en Javascript, le langage du web, était un très bon compromis : "cela nous a permis d'avoir les ustensiles dont nous avions besoin pour "cuisiner" l'application quasi parfaite que nous souhaitions".
Le résultat a été " très positif", selon les mots d'Uber. La refonte du dashboard pour restaurant grâce à React Native lui vaut d'être aujourd'hui utilisé dans presque tous les restaurants présents sur Uber Eats. Uber Eats pense d'ailleurs continuer à utiliser React Native à l'avenir pour lui permettre d'être armé face à la croissance qui l'attend.
Difficile de ne pas inclure l'application de gestion des publicités Facebook dans cet article. C'est la première application pour laquelle Facebook a utilisé sa technologie React Native. Elle constitue donc la première source d'apprentissage sur cette technologie ainsi qu'un très bon cas d'usage des avantages de React Native. Facebook Ads Manager est une plateforme qui permet à des millions d'utilisateurs qui publient des publicités sur Facebook de pouvoir gérer leurs publications et d'en mesurer l'impact.
L'app Facebook Ads Manager, qui permet à l'utilisateur de gérer ses publicités sur Facebook, partage 85% de son code entre l'app iOS et l'app Android. Cela permet donc aux développeurs de se concentrer sur des fonctionnalités à forte valeur ajoutée et d'optimiser la performance de leur app.
L'équipe React Native de Facebook Ads Manager a développé la plateforme en parallèle de l'app Facebook. Elle a développé les composants et les APIs nécessaires à l'intégration de la plateforme avec l'app. L'avantage de React Native est que ces composants et ces APIs serviront désormais à toutes les équipes qui auront à développer une app chez Facebook dans le futur. Ces composants auraient dû être développés dans tous les cas. Mais s'ils n'avaient pas été développés en utilisant React Native, ils n'auraient pas pu être réutilisés dans le futur pour d'autres applications, ce qui constitue un gain de temps pour Facebook et un asset IT important.
Un autre intérêt de React Native consiste dans le test des fonctionnalités développées. Lors du développement d'une app cross-plateforme comme Facebook Ads Manager, la phase de testing est délicate puisqu'il faut tester sur les deux plateformes. L'avantage que présente React Native est que la phase de testing est raccourcie car un grand nombre de composants ont des comportements similaires sur les deux plateformes.
En conclusion, la même équipe d'ingénieurs Facebook, spécialisée en Javascript, a été capable de développer complètement une application en React Native, sur deux plateformes différentes et avec un look & feel natif. La plupart des ingénieurs, qui n'étaient pas familiers avec React Native avant de démarrer le projet, ont pu développer l'application iOS en seulement cinq mois. Grâce au code sharing, ils ont ensuite pu développer la version Android en seulement 3 mois supplémentaires.
Facebook est donc aujourd'hui l'un des plus grands défenseurs de l'utilisation de cette technologie, et entame la refonte progressive de son application Facebook, ce qui laisse envisager de belles perspectives pour React Native. Et Facebook en profite notamment pour améliorer la fluidité de son app : par exemple, l'utilisation de React Native a permis de diviser le temps de chargement des events par deux !
Le BAM Innovation Lab, pour rester à la pointe des dernières innovations tech et produit !
