partage de code angularJS à travers l'application hybride Ionic et le site Web mobile régulier

Ok, donc dans notre «laboratoire d'innovation», il y a actuellement une pression pour utiliser Ionic, un cadre d'application hybride construit au-dessus de Cordova pour l'accès natif et angularJS pour le «code Web».

Il existe également des projets qui sont du Web purement mobile, utilisant par exemple Angular + bootstrap pour une conception réactive.

Le fait est que certains projets à venir devront avoir à la fois un site Web mobile et des applications natives (hybride ionique). La plupart des fonctionnalités et des écrans seront les mêmes, partageant le back-end et la plupart de l'interface utilisateur, mais il y aura toujours une différence.

Donc ma question est; Comment structurer un projet afin qu'il puisse être à la fois un projet ionique et un site Web angulaire normal avec 2 approches de déploiement différentes. La plupart du code est réutilisé, mais certaines vues pour le site Web mobile et certaines vues pour l'application hybride (en utilisant plus de composants et de conventions natifs), peut-être aussi des différences de routage.

Est-ce même une bonne idée?

Et dans le code partagé, existe-t-il un moyen simple de savoir dans quel cas vous êtes? certaines IF, certaines directives inactives en dehors de leur contexte, etc.

J'ai l'impression qu'il y a une sorte de lien manquant que je ne connais peut-être pas.

Merci d'avance.

Vous pouvez créer un noyau partagé qui contient des composants atomiques ( https://docs.angularjs.org/guide/component ) / Services.

Application Web, application Android, application iOS, application de supervision ... tous utiliseront les fonctionnalités fournies par le noyau, de manière adaptative.

Imaginez si vous souhaitez déployer une application Android. L'utilisation de https://material.io est logique, ainsi que certaines fonctionnalités Android. L'application iOS aura un design différent ( https://developer.apple.com/ios/human-interface-guidelines/overview/themes/ ) etc ...

Construisez une implémentation solide, utilisez des composants atomiques et adaptez-les!

Pour les applications mobiles utilisant Ionic et les applications Web utilisant AngularJS ou Angular, il est très courant que certaines de ces applications aient des fonctionnalités partagées ainsi que la connexion au serveur et l'obtention de données, mais cela ne signifie pas que vous n'aurez pas de copie de ce code dans vos nouveaux projets.

Mon point est que si vous savez qu'il n'y aurait que des différences de couche d'interface utilisateur et que le projet nécessite une application Web et une application mobile et que vous pouvez avoir 3 niveaux où l'interface utilisateur pour l'application Web peut être angulaire et l'application mobile peut être ionique. Les avantages que vous tirez de l'utilisation de fonctions natives telles que Cordova PhoneGap ou Ionic sont peut-être bien plus que de tout garder dans un seul type.

Je tiens simplement à préciser qu'il n'est pas difficile de basculer entre ces interfaces utilisateur au cas où votre client souhaite convertir une application Web en application mobile native.

Je commencerais par les questions suivantes

1. Ce projet nécessite-t-il une interface utilisateur distincte pour les mobiles?
2. Ce projet a-t-il besoin de fonctions mobiles natives?
3. Ce projet nécessite-t-il des fonctions d'interface utilisateur et de sauvegarde distinctes pour les mobiles?

Si votre réponse est oui pour les 3, créez deux projets. Si votre réponse est oui pour 1 et 2, créez un backend angulaire et une application web avec une application ionique ou phonegap. Si votre réponse est oui à 1 seulement, je recommanderais d'utiliser angulaire pour les deux.

Si, à un moment donné, vous souhaitez utiliser des vues angulaires en ionique (recherchez des éléments ioniques), vous aurez le même code pour le frontal, l'application mobile et l'application Web. À la fin, vous pourrez gérer les éléments suivants de manière indépendante:

1. Migrations de bases de données
2. Fonctionnalité côté serveur avec API se connectant à 1 pour les données
3. Application Web frontale utilisant des vues angulaires consommant 2
4. Si l'application mobile est nécessaire, elle utilise Ionic / phonegap pour résoudre les dépendances de l'appareil mais utilise Angular pour créer des vues et consommer 2.

J'espère que cela aide et ouvre un peu de discussion.