Cela vaut-il encore la peine d'apprendre React Native en 2021 ?

Cela fait environ six ans que React Native a été open-sourcé. Quelle est sa situation aujourd'hui ? 

J'ai échangé avec Tomasz Malysz, notre Senior Frontend Software Engineer, à propos des débuts de React Native et de son évolution depuis lors, des avantages qu'il conserve encore et de son attractivité en termes de carrière. 

Si vous connaissez JavaScript, avez de l'expérience en développement web et souhaitez créer des applications mobiles à la pointe de la technologie sans vous limiter à un seul environnement natif, alors… poursuivez votre lecture pour découvrir si React Native est une voie qui vaut encore la peine d'être suivie. 

Commençons par le début. 

Qu'est-ce que React Native ? Comment tout a commencé ? 

React Native est un framework créé par Facebook, qui permet de développer simultanément des applications mobiles natives pour Android et iOS.  

It provides a number of components for creating a user interface, which translate into native controls corresponding to a given platform. For example, when we want to display a line of text, we will use the `Text` component in React Native. Then, the framework will ensure that the Android application uses the native` TextView` control, while the iOS one uses`UITextView` control. 

Now, let’s take a short trip back in time. The beginning of the React Native framework dates back to 2012 – 2015 when Facebook creators wanted to release its mobile app version. At first, they tried to do it using web software development technologies. However, they turned out to be insufficient, considering the growing popularity of mobile applications and the importance of user experience. Providing a good UX for Facebook in the mobile version became one of their main goals. 

Le tournant a été la découverte d'un moyen de créer des contrôles iOS natifs à l'aide de JavaScript. Un Hackathon a alors été organisé. Il a permis de développer cette idée et de faire évoluer le prototype React Native. 

Puis, en 2015, Facebook a publié la première version de React Native et a révélé qu'Ads Manager était la première application entièrement écrite en React Native. D'autres applications ont rapidement suivi. 

Exemples d'applications utilisant React Native 

Instagram est un autre géant connu pour utiliser React Native dans un certain périmètre (par exemple, la vue des notifications est écrite en React Native). 

Skype a également utilisé ce framework, du moins jusqu'en 2020, lorsque Microsoft a décidé de remplacer l'application React Native par Electron (pour les utilisateurs de Windows 10). 

Quelques autres exemples d'applications qui ont utilisé ou utilisent actuellement React Native sont Airbnb, Wix, Walmart, Uber Eats, Tesla, Discord, Gyroscope, pour ne citer que quelques outils populaires et bien connus. 

Pourquoi les plus grandes entreprises mondiales se tournent-elles vers React Native ? 

Cela évite le double travail 

In the case of native technologies, companies need two teams of developers specialising in each technology: one for iOS apps, and the other one for Android. In React Native, thanks to a single code base, you can build one app for two different platforms simultaneously, with one shot, using one language. The logic layer is written in JavaScript and the views are defined using React Native. React determines which control will be used for each platform: iOS or Android.  

En fin de compte, nous devons encore composer avec deux plateformes différentes. Il se peut que certaines exigences spécifiques doivent être traitées séparément, en tenant compte des différences. 

Additionally, not every functionality of a mobile device is available on the framework level. It may be necessary to write a native module, which the React Native application will then use. It means that the teams specialising in native technology may also be needed on an ad hoc basis. 

Cela raccourcit le temps de développement 

Le développement et le déploiement d'applications React Native sont assez courts. Grâce à unfast refresh feature, with each save, a local version is refreshed in just a few seconds. If you change a control in the code, once you save the change it will be instantly visible in the simulator. In the case of native apps, a full app recompilation must be processed to see your change, and thus the deployment takes longer. 

Dans le cas des applications natives, une recompilation complète de l'application doit être effectuée pour visualiser une modification apportée. Le déploiement prend donc plus de temps. Il existe toutefois des outils utiles tels que « Preview » pour SwiftUI dans xCode, qui offrent une option similaire pourfast refresh. 

Les équipes orientées plateforme deviennent des équipes orientées produit 

En utilisant React Native, les entreprises peuvent se concentrer sur le produit lui-même et disposer d'une seule équipe de développeurs travaillant dessus, au lieu de deux équipes distinctes pour chaque plateforme. 

Place à la technique. Jetons un coup d'œil sous le capot du framework React Native et voyons comment il fonctionne réellement. 

Comment fonctionne React Native ? Quelles mises à jour ont été introduites récemment ? 

De manière générale, le fonctionnement de React Native repose sur 3 parties : le thread principal (natif), le thread JavaScript et l'outil utilisé pour la communication entre eux, appelé Bridge.

The JavaScript part is responsible for the business logic, functionality and defining what the user interface should look like. However, it is the native part and the main thread that are responsible for displaying the appropriate controls and direct handling of any actions performed by the user. 

When a user performs an action, such as pressing a button, it is registered by the main, native thread. Then, the information about this action goes through the bridge to the JavaScript virtual machine, where the code you wrote that is assigned to this action, is called. A new state of the application is computed and passed back through the bridge to the main thread. 

Vous pouvez également imaginer le processus comme une conversation : le module natif exécute l'application et demande à JS « que voulez-vous faire ? ». Ensuite, JS répond avec un message spécifique « je veux afficher telle ou telle vue ».  

The important thing is that there are two call threads, not one, so they never interfere or get in each other’s ways. However, since it’s an asynchronous process, sometimes when there’s a lot of operations going on, the bridge becomes quite busy. This may sometimes result in a lower performance or imperfect UX, causing problems with formatting, for example when a user enters their credit card number.  

Facebook engineers continuously work on improving the efficiency of React Native, which then translates to a better User Experience of the apps built using this framework. The plan is to change the way of communication between the JS thread and the native one so that it is synchronous and more efficient.  

Entre-temps, avec la sortie de la version 0.64 de React Native, il est désormais possible d'utiliser un autre moteur JavaScript – Hermes. En conséquence, les applications s'exécutent plus rapidement et occupent moins de mémoire. De telles améliorations prouvent que React Native évolue encore et est maintenu en très bon état par ses créateurs, malgré ses six années d'existence. 

Donc, si vous vous demandiez s'il vaut encore la peine d'apprendre React Native en 2021, c'est l'une des raisons pour lesquelles il s'agit toujours d'un bon choix de carrière. Cependant, il existe encore d'autres avantages. 

Pourquoi il vaut encore la peine d'apprendre React Native en 2021 

If you already have web development experience, then learning React Native will give you even bigger opportunities with very minimal effort. You already have a bunch of skills that are useful when learning React Native: the knowledge of React and its related tools, declarative UI or a component approach to building apps. That’s a really solid knowledge base for a start. 

Being a React Native Developer opens the door to interesting, cutting-edge projects that often use innovative technologies, such as Augmented Reality. An example of such a project may be an app that allows users to see how the furniture they consider buying will look like in their apartment, or to check how a house they had designed will fit in the building plot they want to buy. Sounds pretty cool to me. 

Comme de plus en plus d'entreprises choisissent de développer des applications mobiles en React Native en raison d'un délai de développement et de déploiement plus rapide, les opportunités d'emploi pour les développeurs React Native sont nombreuses et cette voie vaut assurément la peine d'être suivie. 

Comment Flutter se compare-t-il à cet égard ? 

Flutter, just like React Native, is an open-source framework that allows creating native mobile apps for both Android and iOS simultaneously, using one codebase. It was released in 2017 by Google. Since then it has gained a lot of popularity and is considered React Native’s main competitor due to its high performance.  

While React Native and Flutter share some common ground, they also differ in some key aspects. One of them is especially important from a learner’s perspective: the language. Flutter uses Dart, a programming language developed by Google. The knowledge of Dart is much less common among developers than JavaScript used in React Native. That’s why React Native is considered by many an easier framework to learn because if you know JavaScript, you have the basics already covered.  

Que faut-il apprendre pour devenir développeur React Native ? 

As already mentioned React Native is based on web development technologies, so if you come from a front-end environment, have solid web development knowledge and your toolset includes HTML, CSS, JS, you already have a good foundation to become a React Native Developer. If not, then getting familiar with web development first will make learning React Native much easier.  

If you already have this knowledge and skills base, you can get on with making yourself familiar with React Native documentation and the deployment process. You’ll also need to familiarise yourself with some crucial aspects of the day-to-day work as a mobile developer, which differ from the “web” world: navigation, managing the approvals for the particular parts of the system, as well as using libraries working with mobile’s functionalities, such as a camera.  

Ensuite, tout consiste à s'exercer sur des projets réels et à simplement s'améliorer de plus en plus. 

Dois-je apprendre React avant d'apprendre React Native ? 

Créer des applications mobiles natives avec React Native est, à certains égards, très similaire au développement d'applications web avec React. Si vous n'avez pas encore beaucoup de connaissances techniques et d'expérience en développement web, il vaut la peine de vous familiariser d'abord avec React. 

La connaissance des technologies natives aide-t-elle à apprendre React Native ? 

Definitely. The experience in creating applications using native technologies can for example help in application distribution or working with mobile devices in general. However, creating both the user interface and business code in JavaScript may require a slight change of mindset. 

Quelles sont les meilleures ressources pour débuter avec React Native ? 

Il existe de nombreuses ressources en ligne pour apprendre React Native. Commencez par lire le documentation officielle, pour bien maîtriser les bases et pouvoir faire vos premiers pas dans le développement React Native. 

Une fois que vous maîtrisez les bases de ce framework, essayez-vous à des projets réels. Mettez vos propres idées en pratique. Vous pouvez créer une application basée sur une API ouverte. Apprenez en résolvant des problèmes spécifiques que vous rencontrez lors du codage. 

Vous pouvez toujours compter sur la communauté ouverte et serviable de React Native, qui soutient grandement le partage de connaissances. Vous trouverez de nombreux articles riches en informations sur Medium et de nombreuses vidéos tutorielles sur YouTube.