PWA vs React Native : un aperçu détaillé

À l'instar de PWA et Flutter, PWA et React Native font actuellement partie des approches les plus populaires pour développer des applications multiplateformes. Et lors de recherches sur ce sujet, il est compréhensible de se sentir confus en essayant de décider de la bonne voie de développement pour votre entreprise. Dans cet article, nous entrerons dans les détails de chaque approche de développement, à partir de ce qu'elles sont, de leurs cas d'utilisation et des détails sur la façon dont chaque approche de développement peut être bénéfique pour votre entreprise.

Les brefs détails

Voici les résumés rapides de chaque approche de développement, ainsi que les cas d'utilisation auxquels.

Application Web progressive (PWA)

Définitions

Progressive Web App (PWA) est une solution prometteuse pour le développement d'applications Web . À la base, les PWA s'appuient sur les service workers et les manifestes d'applications Web pour fournir des expériences de type application, qui incluent des fonctionnalités auparavant exclusives aux applications telles que les notifications push, la disponibilité hors ligne, l'installabilité, etc.

Cas d'utilisation et exemples

En raison de leur nature basée sur le Web, les PWA conviennent mieux aux sites Web dont la principale préoccupation est de fournir des expériences plus attrayantes et indépendantes de la connectivité, ou simplement aux sites Web qui souhaitent toucher un public plus large.

À l'heure actuelle, les PWA sont largement adoptées dans l'industrie du commerce électronique, où des fonctionnalités telles que les notifications push et la disponibilité hors ligne sont nécessaires pour améliorer les taux de conversion des achats et créer une clientèle plus fidèle.

 Lecture recommandée : 12 meilleurs exemples d'applications Web progressives (PWA) en 2021

Réagir natif

Définitions

React Native est un framework pour développer de véritables applications natives multiplateformes basées sur JavaScript. Les applications créées avec React Native peuvent interagir avec les API natives via le paradigme de l'interface utilisateur déclarative de React et JavaScript, ce qui signifie qu'une seule base de code React peut être utilisée pour maintenir deux plates-formes (iOS et Android), le tout sans compromettre l'expérience des utilisateurs.

Cas d'utilisation et exemples

Il est difficile de définir un cas d'utilisation spécifique pour React Native, car il est utilisé pour créer divers types d'applications telles que des applications de médias sociaux populaires (par exemple, Facebook, Instagram, Pinterest, etc.) ou des applications de communication numérique (par exemple, Skype, Discord , Tencent QQ, etc.). Pour une liste des applications créées avec React Native, consultez la vitrine des applications React Native.

Entrer dans les détails

Dans la partie suivante, nous aborderons les spécificités de chaque approche de développement, ainsi que des informations sur la manière dont chaque approche de développement peut s'intégrer au plan de votre entreprise.

Langue

Les PWA s'appuient sur les technologies Web pour offrir des expériences de type application. Ainsi, les langages Web tels que HTML, CSS et JavaScript sont toujours les langages de base qui composent une PWA, tandis que les applications React Native utilisent React.js (une bibliothèque JavaScript) comme langage de base.

C'est pourquoi, lorsque vous explorez le code d'une application React Native, vous devriez voir qu'elle partage certaines similitudes avec les langages Web, la seule différence majeure étant que les applications React Native utilisent des composants natifs au lieu de composants Web pour créer l'interface utilisateur.

Interface utilisateur

Étant donné que les PWA sont basées sur les technologies Web et s'exécutent sur le moteur du navigateur , l'interface utilisateur d'une PWA typique peut ne pas sembler aussi native aux yeux entraînés. Cependant, pour les utilisateurs typiques, les différences entre l'interface utilisateur de type application de PWA et la véritable interface utilisateur d'application native sont tout au plus minimes.

Une application React Native, au contraire, est capable de fournir de véritables expériences natives , grâce à son utilisation de composants natifs, et ceux-ci incluent des composants spécifiques à la plate-forme tels que <DatePickerIOS> et <ProgressViewIOS> pour iOS, ou <ViewPagerAndroid> et <ToastAndroid> Pour Android.

Performance

La performance est un sujet délicat, car il est difficile d'en arriver à la vérité. Cependant, depuis les deux approches de développement utilisent fortement JavaScript, vous pouvez vous attendre à ce que les performances soient assez similaires à toutes les extrémités, avec un léger avantage appartenant à React Native, car il est plus étroitement intégré au système utilisé et n'a pas à communiquer via un navigateur.

Cependant, le fait que les PWA vivent dans l'environnement du navigateur ne signifie pas vraiment qu'il fonctionne comme votre site Web moyen. Grâce à la méthode de mise en cache avancée utilisée dans les PWA, il n'y a plus de problèmes occasionnels lors du chargement entre les pages, comme sur les sites Web/applications Web moyens ; et couplé au fait que les PWA sont essentiellement des applications d'une seule page améliorées, la performance perçue des PWA est aussi proche que possible d'une véritable expérience d'application native.

Temoorst, la marque basée au Koweït dans l'industrie des produits jetables, en est un exemple. Avec SimiCart comme fournisseur de solutions de choix, la marque a opté à la fois pour une application native et une PWA pour les meilleurs retours sur investissement possibles, et l'aspect performance de la PWA est toujours quelque chose auquel la marque ne s'attendait pas. Lors d'un test à l'aveugle, vous aurez du mal à trouver des différences de performances et visuelles entre leur PWA et leur application React Native.

Pour tester la différence de performances entre une application React Native et une PWA, nous vous encourageons à essayer les applications Temoorst. Les applications elles-mêmes sont des témoignages de ce à quoi pourrait ressembler une application React Native bien optimisée ou une PWA lorsqu'elle est poussée au maximum.

• Application React Native : Google Play Store | App Store d'Apple
• PWA : https://temoorst.com/

Sécurité

En raison du niveau d'intégration plus élevé avec l'appareil utilisé, une application React Native est naturellement plus sécurisée et moins sujette aux vulnérabilités. Pour ajouter plus de couches de sécurité dans une application React Native, il existe différentes approches à utiliser pendant le processus de développement, telles que :

• Épinglage SSL : pour sécuriser les connexions entre l'application et le serveur
• Trousseau/informations sensibles : fournit un stockage local sécurisé ainsi qu'une authentification biométrique/faciale
• Jscrambler : empêche la falsification du code en ajoutant une couche d'autodéfense

Comme les PWA vivent dans l'environnement du navigateur et exploitent le navigateur pour la plupart de ses capacités, la plupart du travail de sécurité est effectué par le navigateur lui-même. Comparé à un site Web normal, un PWA est plus sécurisé car le composant principal de PWA - service worker - ne fonctionne que sur HTTPS, ce qui signifie que la communication entre le côté client et le côté serveur est toujours cryptée.

Les service workers s'exécutent uniquement sur HTTPS. Étant donné que les techniciens de service peuvent intercepter les requêtes réseau et modifier les réponses, les attaques « man-in-the-middle » peuvent être très graves.

Introduction à Service Worker

Découvrabilité

C'est là que les PWA brillent. Non seulement les PWA sont disponibles sur le Web et exposées aux moteurs de recherche, mais elles peuvent également être publiées dans les magasins d'applications. Google, Microsoft et même Samsung ont tous rejoint le mouvement pour pousser à une plus grande adoption des PWA en adoptant des PWA reconditionnés dans leurs magasins d'applications. Le Microsoft Store, par exemple, va même plus loin et prévoit de repeupler automatiquement son App Store avec des PWA de qualité indexées par ses propres robots Bing :

Le Microsoft Store, alimenté par le robot d'exploration Bing, indexera automatiquement l'application Web progressive de qualité sélectionnée

Accueillir les applications Web progressives sur Microsoft Edge et Windows 10

À l'heure actuelle, l'App Store d'Apple est le seul marché d'applications populaire restant que PWA ne semble pas atteindre. En effet, Apple a clairement indiqué dans ses directives d'examen que pour être approuvée, l'application doit être "au-delà d'un site Web reconditionné" - et il s'agit d'une tout autre discussion en soi, sur la façon dont Apple décourage activement le développement de le Web de peur de nuire à leurs résultats.
Par rapport aux PWA, la découvrabilité des applications construites avec React Native n'est pas aussi impressionnante, mais la nature multiplateforme du framework signifie qu'avec une seule base de code, vous pouvez toujours rendre votre application détectable sur Google Play Store et Apple App Store. Et étant donné que les utilisateurs d'iOS sont majoritaires dans certains pays (y compris les États-Unis) - et que les PWA ne peuvent pas être publiés sur l'App Store d'Apple - cela devrait être une raison suffisante pour opter pour le développement d'applications React Native afin de servir où la majorité de vos utilisateurs sont..

Accessibilité matérielle

Parce que les applications React Native sont de véritables applications natives, elles bénéficient d'un accès beaucoup plus large aux API natives. Et cela signifie que même un accès de bas niveau au matériel de l'appareil (par exemple, l'accès à NFC (Near Field Communication), à la liste de contacts, etc.) et l'accès systémique (par exemple, l'accès aux paramètres système, aux journaux, etc.) sont possibles et peuvent être exploités pour améliorer l'expérience utilisateur.
Et puisque PWA s'appuie sur les API Web pour son accessibilité matérielle, une PWA est naturellement plus restreinte dans la façon dont elle peut utiliser les ressources du système. Dans le meilleur des cas, c'est-à-dire si le navigateur utilisé prend en charge toutes les dernières API d'accès matériel, une PWA peut avoir accès à diverses fonctionnalités matérielles auparavant exclusives aux applications natives telles que la géolocalisation, l'accès à la caméra et au microphone, la réalité augmentée (avec WebXR API de l'appareil).

 Lecture recommandée : Progressive Web App (PWA) et accès au matériel

Coûts de développement

En termes de coûts de développement, les projets React Native ont tendance à être coûteux en raison du niveau élevé de complexité impliqué. Par exemple, il est courant qu'un projet React Native de base coûte plus de 15 000 $ , alors qu'un projet PWA de base ne devrait coûter qu'environ 1 000 $ à 10 000 $. Cependant, par rapport à d'autres frameworks d'applications natives, React Native reste une solution rentable grâce à son architecture indépendante de la plate-forme. Avec une seule base de code React Native, vous pouvez publier votre application sur Google Play Store et Apple App Store, ce qui réduit considérablement les coûts de développement totaux sans nuire à l'expérience utilisateur.

Et bien que généralement moins cher que les projets React Native, le coût de développement d'un projet PWA peut varier considérablement en fonction de la voie de développement que vous choisissez. Par exemple, si vous décidez d'opter pour l'architecture sans tête (qui est une solution plus flexible et évolutive par rapport à l'architecture traditionnelle), vous pouvez vous attendre à ce que les coûts de développement de votre PWA augmentent considérablement en raison du niveau d'expertise technique plus élevé requis dans le processus. .

Conclusion

Parce qu'il s'agit de deux voies de développement pour des besoins très spécifiques, choisir entre React Native et PWA peut être une décision difficile. Une PWA est légère, avec des processus de mise à jour et d'installation sans effort, et les caractéristiques et fonctionnalités fournies par PWA devraient être plus que suffisantes pour l'utilisateur moyen de l'application. Cependant, en raison des restrictions actuelles qu'Apple impose à ses App Stores, il peut être judicieux d'investir dans une bonne application React Native si la majorité de vos utilisateurs mobiles sont sur iPhone.

Pour les marchands Magento qui cherchent à créer des applications multiplateformes React Native ou des PWA sans tête, chez SimiCart, nous proposons des solutions rentables pour vous aider à acquérir un avantage concurrentiel sur vos concurrents.