Le duel : React Native contre Cordova
Publié: 2022-03-11En raison de la popularité croissante des smartphones et des applications mobiles, les développeurs Web ont cherché des moyens de créer des applications mobiles à l'aide de JavaScript. Cette popularité a entraîné le développement de nombreux frameworks JavaScript capables d'exécuter des applications de type natif sur des appareils mobiles. Actuellement, Cordova et React Native sont les choix les plus populaires. Cordova prend en charge les plates-formes mobiles iOS, Android et Windows Phone. Avec React Native, en revanche, Android, iOS et UWP sont des cibles pour les développeurs. (UWP signifie Universal Windows Platform, la plate-forme de Microsoft qui permet à la même application de s'exécuter sur Windows Phone 10 Mobile, XBox One et Windows 10.)
De la surface, il semble que React Native et Cordova occupent le même espace. Cependant, comme pour toutes les technologies, il y a des aspects où l'un brille et l'autre est insuffisant. Ainsi, pour obtenir une meilleure image de chaque technologie et pour connaître leurs avantages et leurs inconvénients, nous allons plonger dans les détails de chacune et les comparer dans différentes disciplines.
Différences de philosophie
Il est important de se rappeler que le slogan de React Native, "Apprenez une fois, écrivez n'importe où" diffère du mantra multiplateforme habituel, "Écrivez une fois, courez n'importe où". Cela conduit à deux choses : Premièrement, nous ne pouvons pas simplement prendre notre base de code React existante de notre projet Web et la transformer en une application mobile en quelques clics. Cependant, React et React Native partagent de nombreux concepts clés, un exemple étant leurs systèmes de composants, et par conséquent, React Native se sent instantanément familier. Bien que React partage de nombreuses similitudes avec React Native, il existe quelques différences fondamentales, qui vont de la manière dont les feuilles de style sont gérées au type de composants que nous pouvons utiliser.
Deuxièmement, nous pourrions ne pas être en mesure de partager le code React Native lorsque nous ciblons différentes plates-formes. Cela se produit lorsque nous préférons que les éléments de l'interface utilisateur se comportent de manière native sur leur plate-forme spécifique, offrant ainsi à l'utilisateur une meilleure expérience et une sensation plus native de l'application. Un exemple évident est le menu du côté du tiroir dans les applications Android, ce qui est très rare dans les applications iOS.
Cordova ne partage pas cette philosophie. Il n'est pas rare de commencer à développer une application Web pure, de la regrouper ensuite en tant qu'application Cordova et de réutiliser autant de code que possible pour toutes les plates-formes (mobiles) que nous souhaitons cibler.
Liberté de développement
Sur les appareils mobiles, Cordova exécute une application d'une seule page dans le navigateur Web mobile intégré, appelée WebView, puis l'encapsule en tant qu'application native. Bien qu'il ressemble à une application native de l'extérieur, notre code Web s'exécute à l'intérieur du moteur du navigateur mobile. Pour nous, cela signifie que nous ne sommes pas liés à une bibliothèque ou à un framework spécifique. Si nous utilisons du JavaScript vanille, jQuery, Angular ou autre chose, n'importe laquelle de ces options pourrait être regroupée dans une application mobile avec Cordova. Cordova n'impose rien à notre pile technologique. Tant que nous avons un fichier index.html , nous sommes prêts à partir. Un exemple simple serait l'extrait de code suivant :
<html> <head> <title>My Cordova App</title> </head> <body> <div>Tap me</div> <script> // Select our element var element = document.getElementById('tapme'); // Send an alert once it was tapped/clicked element.addEventListener('click', function() { alert('Hello there!'); }); </script> </body> </html> Cet exemple signifie que nous pouvons utiliser à peu près tout ce que nous désirons, comme utiliser un gestionnaire de paquets comme NPM ou Bower, utiliser un transpiler comme Babel, CoffeeScript ou TypeScript, un bundler comme Webpack ou Rollup, ou autre chose entièrement. Peu importe, tant que le résultat est un fichier index.html qui charge tout le JavaScript et les feuilles de style dont nous avons besoin.
React Native, comme son nom l'indique, s'appuie sur React. Il est important de comprendre que la partie React de React Native est l'une de ses fonctionnalités principales. Si vous n'êtes pas fan de la nature déclarative de React, y compris JSX, sa composition et son flux de données, il y a de fortes chances que vous ne soyez probablement pas satisfait de React Native. Bien que React Native semble instantanément familier aux développeurs de React, à première vue, il y a quelques différences à retenir. Avec React Native, nous n'avons ni HTML ni CSS. Au lieu de cela, cette technologie se concentre sur le côté JavaScript. Comme alternative au CSS, les styles sont écrits en ligne et Flexbox est le modèle de style par défaut.
L'application React Native la plus barebone ressemblerait à cet exemple :
// Import the React module for JSX conversion import { React } from 'react'; // Import React Native's components import { View, Text, AppRegistry, TouchableOpacity, } from 'react-native'; // Create an App component const App = () => { // Define our press handler const onPress = () => alert('Hello there!'); // Compose the components we are going to render return ( <View> <TouchableOpacity onPress={onPress} /> <Text>Tap me!</Text> </TouchableOpacity> </View> ); }; // Registers the `App` component as our main entry point AppRegistry.registerComponent('App', () => App);React Native a son propre packager. Il regroupe tous les fichiers JavaScript dans un fichier géant, qui est ensuite consommé et exécuté par JavaScriptCore, le moteur JavaScript d'Apple. JavaScriptCore est utilisé sur iOS et Android, tandis que ChakraCore alimente les applications React Native UWP. Par défaut, React Native utilise le transpileur JavaScript Babel, ce qui nous permet d'utiliser la syntaxe ECMAScript 2015+ (ECMAScript 6). Bien qu'il ne soit pas nécessaire d'utiliser la syntaxe ECMAScript 2015+, cela est définitivement encouragé, car tous les exemples officiels et les modules tiers l'adoptent. Étant donné que React Native s'occupe du processus d'empaquetage et de transpilation, notre code d'application et nos modules tiers peuvent tirer parti de ces fonctionnalités sans avoir à configurer les outils nous-mêmes.
En résumé, React Native est une approche centrée sur React du développement mobile, tandis que Cordova nous permet de regrouper les technologies Web dans le shell WebView.
Apparence et sensation natives
Une chose qui est importante pour les utilisateurs est d'avoir une apparence native d'une application. Étant donné que les applications Cordova sont généralement de simples applications Web, certaines choses peuvent sembler étranges au début. Les problèmes peuvent aller du manque de retour visuel sur les zones tactiles, au défilement qui ne semble pas aussi fluide que dans les applications natives, en passant par un délai de 300 millisecondes sur les événements tactiles. Bien qu'il existe des solutions à tous ces problèmes, nous devons nous rappeler que nous devrons peut-être déployer des efforts supplémentaires si nous voulons que notre application Cordova se sente aussi proche que possible des applications natives. À Cordova, nous n'avons accès à aucun contrôle natif. Si nous voulons avoir une apparence native, il nous reste deux options : soit recréer les contrôles natifs, tels que les boutons et les éléments d'entrée, avec HTML et CSS, soit implémenter des modules natifs qui accèdent directement à ces contrôles natifs. Nous pourrions le faire par nous-mêmes ou en utilisant une bibliothèque tierce telle que Ionic ou Onsen UI. Notez qu'il est important de les tenir à jour avec les mises à jour du système d'exploitation au fur et à mesure qu'elles arrivent. Parfois, l'apparence d'un système d'exploitation mobile fait peau neuve, comme cela s'est produit lors de l'introduction d'iOS 7. Avoir une application qu'elle n'est pas capable d'adapter éloignera les utilisateurs de l'expérience. Nous pourrions également recourir à l'inclusion de plugins Cordova qui nous connectent au côté natif des choses. L'un des contrôles natifs les plus complets est la bibliothèque Ace de Microsoft.
Avec React Native, en revanche, nous avons accès à des contrôles natifs et à une interaction prête à l'emploi. Des composants tels que Text , TextInput ou Slider correspondent à leurs homologues natifs. Alors que certains composants sont disponibles pour toutes les plateformes, d'autres ne fonctionnent que sur des plateformes spécifiques. Plus nous voulons que notre application ait une apparence native, plus nous devons utiliser des composants qui ne sont disponibles que pour cette plate-forme spécifique et donc plus notre base de code diverge. Les interactions tactiles et les gestes de l'esprit font également partie de React Native.
Comparer les performances
Avec Cordova n'ayant qu'un WebView à sa disposition, nous sommes liés aux limitations du WebView. Par exemple, après sa version 4.0, Android a finalement commencé à utiliser le moteur Chrome (beaucoup plus rapide) comme WebView par défaut. Avec iOS, pendant longtemps, l'application exécutée dans le moteur WebView par défaut était nettement plus lente que la même application dans le navigateur mobile Safari. De plus, étant donné que JavaScript est à thread unique, nous pouvons rencontrer des problèmes s'il y a trop de choses qui se passent dans notre code d'application. Ces limitations entraînent des animations lentes et notre application peut ne pas être aussi réactive que nous le souhaiterions. Bien qu'il puisse y avoir quelques astuces que nous pouvons utiliser ici et là, en fin de compte, nous sommes liés par les limites du navigateur mobile.
React Native utilise plusieurs threads, rendant ainsi les éléments de l'interface utilisateur exécutés dans leur propre thread. Étant donné que les composants React sont liés aux vues natives, JavaScript ne fait pas le gros du travail dans React Native.
Flux de travail du développeur
Cordova propose un utilitaire de ligne de commande pour créer de nouveaux modèles de projet, en démarrant l'application dans le simulateur et en créant l'application pour l'appareil réel en mode production. La plupart du temps, nous développons l'application sur un navigateur de bureau et pouvons ensuite la regrouper en tant qu'application mobile. Avec la liberté offerte par Cordova, nous devons nous attaquer nous-mêmes au workflow de développement. Si nous voulons un rechargement en direct sur l'appareil, nous devons l'implémenter nous-mêmes. Pour déboguer les applications Cordova, nous appliquons les mêmes principes que ceux utilisés pour déboguer un site Web. Dans iOS, par exemple, nous connecterions notre appareil mobile via USB, ouvririons Safari et ses outils de développement.
React Native offre une interface de ligne de commande similaire et propose un workflow de développement familier aux développeurs Web. Nous obtenons un rechargement en direct prêt à l'emploi. Une fois que nous avons modifié un composant React, notre application se recharge avec les modifications que nous avons apportées. L'une des fonctionnalités les plus intéressantes est le remplacement de module à chaud, qui recharge partiellement les modifications apportées au composant, sans altérer l'état de l'application. Nous pourrions même nous connecter à un appareil réel et voir si nos modifications fonctionnent comme prévu sur un appareil réel. Nos applications React Native peuvent être déboguées à distance avec Chrome for Desktop. La gestion des erreurs est évidente dans React Native ; si nous rencontrons une erreur, notre application affiche un fond rouge et la trace de la pile est affichée. Grâce aux sourcesmaps, nous pouvons voir l'emplacement exact de l'erreur. Lorsque nous cliquons dessus, notre éditeur de choix s'ouvre à l'emplacement précis du code.
Extensibilité et accès aux fonctionnalités natives
Du côté JavaScript, nous sommes libres d'utiliser n'importe quelle bibliothèque JavaScript, y compris les packages de NPM. Cependant, comme React Native n'est pas un environnement de navigateur, nous pouvons avoir du mal à utiliser du code qui repose sur DOM. React Native comprend les modules CommonJS et ES2015, de sorte que toutes les bibliothèques utilisant ces formats sont faciles à intégrer.
Cordova et React Native ont tous deux la capacité de créer et d'utiliser des plugins qui se connectent au côté natif des choses. Cordova fournit une API de bas niveau pour créer la nôtre, ce qui nous donne beaucoup de contrôle, mais conduit à l'utilisation de plus de passe-partout natifs et JavaScript.
Si nous devions hypothétiquement écrire un plugin Cordova iOS dans Objective-C, cela pourrait ressembler au prochain extrait de code. Notre plugin enregistrera simplement le paramètre d'entrée.
#import <Cordova/CDVPlugin.h> // Create a class that inherits from CDVPlugin @interface Log : CDVPlugin - (void)log:(CDVInvokedUrlCommand*)command; @end // The actual implementation of the class we just defined @implementation Log - (void)log:(CDVInvokedUrlCommand*)command { CDVPluginResult* pluginResult = nil; // We are getting all parameters and taking the first one NSString* echo = [command.arguments objectAtIndex:0]; // We are checking for the validity of the parameters if (echo != nil && [echo length] > 0) { // We are just printing the parameter using the native log method NSLog(echo); // Let's create a result for the plugin pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo]; } // Let's send a signal back with the plugin's result [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } @endAfin d'utiliser le module, ce morceau de code JavaScript vous aidera :
window.log = function(str, callback) { cordova.exec(callback, function(err) { callback('Nothing to echo.'); }, "Log", "log", [str]); }; Pour utiliser le plugin, il suffit d'appeler la fonction log :
window.log('Hello native!');React Native, en revanche, suit une philosophie différente ; il mappe automatiquement les types JavaScript à ses homologues natifs lors de l'écriture de plugins, ce qui facilite la connexion du code natif avec JavaScript. Examinons un morceau de code nécessaire à la création d'un module natif avec React Native :
#import "RCTBridgeModule.h" @interface Log : NSObject <RCTBridgeModule> @end @implementation Log RCT_EXPORT_MODULE(); // This makes this method available NativeModules.Log.log RCT_EXPORT_METHOD(log:(NSString *)message) { NSLog(message); } @end React Native lie le module pour nous avec les appels RCT_EXPORT_MODULE et RCT_EXPORT_METHOD . Nous pouvons maintenant y accéder avec NativeModules.Log.log comme suit :
import { React } from 'react'; import { View, Text, AppRegistry, NativeModules TouchableOpacity, } from 'react-native'; // Create an App component const App = () => { // Log with our module once we tap the text const onPress = () => NativeModules.Log.log('Hello there'); return ( <View> <TouchableOpacity onPress={onPress} /> <Text>Tap me!</Text> </TouchableOpacity> </View> ); }; // Registers the `App` component as our main entry point AppRegistry.registerComponent('App', () => App);Bien que nous n'ayons examiné de près que la création d'un module dans iOS à l'aide d'Objective-C, les mêmes principes s'appliquent à la création d'un module pour Android à l'aide de Java.
Nous devons lier des plugins natifs dans les fichiers de projet pour chaque plate-forme. Avec iOS, par exemple, cela signifie que nous devons lier la partie native compilée à notre application et ajouter les fichiers d'en-tête correspondants. Cela peut être un long processus, surtout s'il y a beaucoup de modules natifs. Heureusement, cela est considérablement simplifié en utilisant un utilitaire de ligne de commande appelé rnpm qui fait désormais partie de React Native lui-même.
Conclusion : React Native ou Cordova ?
React Native et Cordova ont des objectifs différents et répondent donc à des besoins différents. Par conséquent, il est difficile de dire qu'une technologie est meilleure que l'autre dans toutes les disciplines.
En utilisant Cordova, vous pouvez rapidement transformer votre application monopage existante en une application mobile pour différentes plates-formes, au prix d'interactions qui n'ont pas nécessairement le sentiment natif de leur plate-forme spécifique.
Avec React Native, les applications ont une apparence plus native, mais au prix de la réimplémentation de morceaux de code pour certaines plates-formes cibles. Si vous avez déjà essayé React et que vous êtes intéressé par le développement d'applications mobiles, React Native semble être une extension naturelle.