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.

‍

Instagram : capter l'attention de ses utilisateurs grâce à React Native

Instagram un taux d'engagement utilisateur référence

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.

‍

C'est en innovant constamment qu'Instagram capte l'attention de ses utilisateurs

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.

‍

C'est React Native qui permet à Instagram d'aller plus vite en partageant un même code pour toutes les plateformes

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 :

• Promotion de post : 99%
• Captcha de sécurité par SMS : 97%
• Modération de commentaires : 85%
• Interface publicitaire génératrice de leads : 87%
• Push Notifications : 92%
  
  

Walmart  : Refondre son application en React Native pour améliorer l'expérience des utilisateurs

En 2016 Walmart choisit React Native pour refondre une application devenue obsolète

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.

‍

Productivité, partage du code, time-to-market : les équipes de walmart deviennent promoteurs de React Native

Voici leur retour d'expérience sur ces 3 points, partagé dans un article Medium :

• Productivité :

• Pas besoin de partage de connaissance au préalable puisque chaque fonctionnalité est développée par une équipe particulière
• L'expérience développeur est "awesome"
• RN est écrit en JavaScript, ce qui permet de partager les ressources de développement au sein de l'organisation, que ce soit en termes de compétence ou de temps

• Code sharing :

• 95% du code est partagé entre version Android et iOS
• Le code Front-End est partagé entre Android et iOS
• Beaucoup de code est réutilisable entre les différents plateformes

• Time-to-Market :

• Très rapide
• Contrôle des dates de déploiement
• Les deux applications peuvent être déployé en même temps

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 : refondre totalement son application iOS et Android en 5 mois

React Native a permis aux équipes de Bloomberg de diviser leur time-to-market par 2?

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.

Et de simplifier la maintenance de ses 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".

Uber Eats : utiliser React Native pour sa compatibilité multi-plateforme : iOS, Android et web !

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", In the words of Uber. The redesign of the restaurant dashboard thanks to React Native means that it is now used in almost all restaurants on Uber Eats. In fact, Uber Eats plans to continue using React Native in the future to enable it to be armed for the growth that awaits it.

‍

Facebook Ads Manager: The first example of a React Native application

It's hard not to include the Facebook ad management application in this article. This is the first application for which Facebook used its React Native technology. It is therefore the first source of learning about this technology as well as a very good use case for the benefits of React Native. Facebook Ads Manager is a platform that allows millions of users who publish ads on Facebook to be able to manage their posts and measure their impact.

The Facebook Ads Manager app, which allows users to manage their ads on Facebook, shares 85% of their code between The iOS app and the Android app. This therefore allows developers to focus on high value-added features and optimize the performance of their app.

The Facebook Ads Manager React Native team developed the platform alongside the Facebook app. She developed the components and APIs needed to integrate the platform with the app. The advantage of React Native is that these components and APIs will now be used by all teams that will have to develop an app at Facebook in the future. These components should have been developed in all cases. But what if they hadn't been developed using React Native, they could not have been reused in the future for other applications, which is a time saver for Facebook and an important IT asset.

Another advantage of React Native is in testing the functionalities developed.. During the development of a cross-platform app like Facebook Ads Manager, the testing phase is delicate since you have to test on both platforms. The advantage of React Native is that the testing phase is shortened because a large number of components have similar behaviors on both platforms.

In conclusion, the same team of Facebook engineers, specialized in Javascript, was able to completely develop a React Native application, on two different platforms and with a native look & feel. Most of the engineers, who were not familiar with React Native before starting the project, were able to develop the iOS app in just five months. Thanks to code sharing, they were then able to develop the Android version in just 3 more months.

Facebook is therefore today one of the biggest defenders of the use of this technology, and is beginning to gradually redesign its Facebook application, This suggests great prospects for React Native. And Facebook is taking advantage of this in particular to improve the fluidity of its app: for example, the use of React Native has made it possible to divide the loading time of events by two!