Pouvons-nous partager le code entre les applications Web réactives et réactives et que la production réagisse-native?
Nous avons une version stable d'un widget développé avec reactjs. Nous aimerions développer la version mobile de la même chose. Est-il préférable de développer avec react native et de partager le code entre les 2 applications ou est-il préférable de développer le widget de manière native?.
Gardez à l'esprit que nous avons une expertise dans les deux domaines (Rea et Android Dev), mais que nous ne voulons pas investir trop de temps dans le développement de l'ensemble de l'application à nouveau.
Existe-t-il des outils/ressources disponibles pour faire cela plus rapidement si nous choisissons de réagir en natif?
Ressources disponibles en ligne:
http://jkaufman.io/react-web-native-codesharing/
https://arielelkin.github.io/articles/why-im-not-a-react-native-developer.html
À votre santé!!!
Instagram, Tesla, AirBnB, Discord, Bloomberg ont tous des applications de production écrites en React Native. Je vous laisse décider si, à votre avis, la production est prête.
Bien que React Native vous permette une réutilisation significative du code entre iOS et Android (nous sommes en train de créer une application pour client qui, hormis les bibliothèques externes, réutilise plus de 99% du code entre iOS et Android), elle n'est pas conçue pour partager du code avec les applications Web React .
La philosophie de Facebook avec React Native, au lieu de write une fois, exécuter n'importe où est plutôt apprendre une fois, écrire n'importe où.
Vous pouvez certainement utiliser vos conceptions et votre architecture, mais vous auriez besoin de réécrire la plupart du code. Cependant, il pourrait être plus efficace que de développer deux applications Java et Obj-C/Swift distinctes.
Vous pouvez consulter ReactXP ( https://Microsoft.github.io/reactxp/ ), qui utilise reactjs et réagit en natif pour créer des applications multiplates-formes.
Il peut être partagé entre une application mobile et une application Web. Vous devrez certainement réécrire vos composants pour une application mobile. Mais vous pouvez toujours réutiliser la logique métier.
Si vous avez utilisé React dans votre application Web, le travail devient encore plus facile. L'un des principaux dangers de React natif est Gestion des états . Maintenant, la complexité dépend de votre application. Il est généralement conseillé d’utiliser Redux avec React Native.
La vraie question qui se pose est de savoir combien de code vous pourrez partager. J'espère que cela a aidé.
De nos jours, il existe un outil appelé react-native-web qui vous permet de partager du code entre le Web et le mobile.
En savoir plus: https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
A ce jour, la philosophie reste la même chose que d'apprendre une fois écris partout. Comme indiqué très correctement dans d’autres publications, les deux réagissent et réagissent-nativement étant basé sur JavaScript, avec une approche de conception architecturale, vous pouvez partager votre logique d’entreprise.
D'autre part, en raison de la nature des matériels, il est tout à fait normal de disposer de différentes couches de présentation pour le Web (principalement sur les navigateurs de votre ordinateur de bureau/portable) et mobile (en natif).
La question demande un outil pouvant accélérer le processus de développement. A cette fin, ce dépôt github nommé react-spa-jwt-authentication-boilerplate (*) peut être utilisé à titre d'exemple. Il partage la "logique métier" entre les versions Web et native via un dossier nommé common-logic en conservant des copies exactes des fichiers *.js. D'autre part, la couche de navigation et de présentation diffère. Il implémente un exemple de processus d'authentification, qui peut également servir de base à de nouveaux projets.
(*) Disclimer: Je suis le responsable de la mise en pension. Nous devions mettre en œuvre le référentiel pour le même besoin de réduction du temps de développement entre les applications mobiles et Web.
Plutôt que de trop gonfler cette réponse, j’ai écrit un guide assez détaillé à ce sujet sur https://dev.to/kylessg/a-sensible-approach-to-cross-platform-development-with-react-and -react-native-57pk .
Pour résumer, vous pouvez obtenir de grandes quantités de partage de codes entre React et React Native, mais n'allez pas trop loin sur ce que vous partagez. Cela risquerait de rendre votre code plus difficile à maintenir là où vous essayez de simplifier à l'excès les différences valides entre le Web et le mobile.
Pour moi, cela va dans le sens de:
Partagé:
- Logique métier
- Communication avec API
- Remplissez les fonctions partagées possibles dans une API (par exemple, communication avec analyse, stockage local, détection de réseau, etc.)
- Stocke, réduit les actions de l'application
- COH
Web/Mobile spécifique:
- Composants de présentation
- Navigation/routage
- Modes
Deux options populaires de partage de code sur le Web, iOS, Android et Windows sont
- React Native Web - https://github.com/necolas/react-native-web
- ReactXP - https://github.com/Microsoft/reactxp
Vous trouverez ci-dessous un excellent extrait de https://Microsoft.github.io/reactxp/docs/faq.html soulignant la différence.
En quoi ReactXP diffère-t-il de React Native pour le Web?
React Native for Web est une bibliothèque à source ouverte développée par les ingénieurs de Twitter. Nous avons commencé à implémenter ReactXP avant que React Native for Web ne soit disponible.
Les objectifs qui sous-tendent ces deux efforts sont similaires, mais les approches diffèrent. ReactXP est une couche superposée à React Native et React, tandis que React Native for Web est une implémentation parallèle de React Native - un frère de React Native pour iOS et Android.
ReactXP expose généralement uniquement les accessoires, les attributs de style et les API disponibles sur toutes les plateformes. Si vous écrivez dans l’abstraction de ReactXP, vous pouvez être sûr qu’elle fonctionnera de la même manière sur toutes les plates-formes prises en charge. La même chose peut être obtenue avec React Native pour Web/iOS/Android, mais vous devez faire plus attention aux composants, accessoires et API que vous utilisez.
Vous pouvez certainement partager le stockage et la couche réseau, mais aussi la base de code Web et mobile.
Bien qu'en pratique, vous ne puissiez partager qu'une partie de la couche de stockage, car vous souhaiterez peut-être extraire les données différemment dans le cas d'une application mobile et d'une application Web.