AngularJS-Code-Sharing über Hybrid-Ionic-App und reguläre mobile Website

11

Ok, in unserem "Innovationslabor" gibt es derzeit einen Drang, Ionic zu verwenden, ein Hybrid-App-Framework, das auf Cordova für den nativen Zugriff und angleJS für den "Webcode" basiert.

Es gibt auch einige Projekte, bei denen es sich um reines mobiles Web handelt, beispielsweise mit Angular + Bootstrap für responsives Design.

Die Sache ist, dass einige Projekte, die anstehen, sowohl eine mobile Website als auch native Apps (ionic hybrid) benötigen. Die meisten Funktionen und Bildschirme sind identisch, teilen das Back-End und den größten Teil der Benutzeroberfläche, aber es wird immer noch einen Unterschied geben.

Meine Frage ist also: Architektur eines Projekts, sodass es sowohl ein ionisches Projekt als auch eine normale eckige Website mit zwei verschiedenen Bereitstellungsansätzen sein kann. Der größte Teil des Codes wird wiederverwendet, aber einige Ansichten für die mobile Website und einige Ansichten für die Hybrid-App (unter Verwendung nativerer Komponenten und Konventionen), möglicherweise auch einige Routingunterschiede.

Ist das überhaupt eine gute Idee?

Und gibt es im gemeinsam genutzten Code eine einfache Möglichkeit, festzustellen, in welchem ​​Fall Sie sich befinden? einige IF, einige Richtlinien außerhalb ihres Kontexts inaktiv usw.

Es fühlt sich so an, als ob es eine Art fehlendes Glied gibt, von dem ich vielleicht nichts weiß.

Danke im Voraus.

MikaelW
quelle

Antworten:

2

Sie können einen gemeinsam genutzten Kernel erstellen, der einige Atomics- Komponenten ( https://docs.angularjs.org/guide/component ) / Services enthält.

Web-App, Android-App, iOS-App, Überwachungs-App ... alle nutzen die vom Kernel bereitgestellten Funktionen auf adaptive Weise.

Stellen Sie sich vor, Sie möchten eine Android-App bereitstellen. Die Verwendung von https://material.io ist zusammen mit einigen Android-Funktionen sinnvoll. iOS App, wird ein anderes Design haben ( https://developer.apple.com/ios/human-interface-guidelines/overview/themes/ ) etc ...

Erstellen Sie eine solide Implementierung, verwenden Sie Atomics-Komponenten und passen Sie sie an!

Kenny
quelle
0

Bei mobilen Apps mit Ionic und Web-Apps mit AngularJS oder Angular ist es sehr häufig, dass einige dieser Apps über gemeinsame Funktionen verfügen, z. B. eine Verbindung zum Server herstellen und Daten abrufen. Dies bedeutet jedoch nicht, dass Sie keine Kopie dieses Codes haben in Ihren neuen Projekten.

Mein Punkt ist, dass, wenn Sie wissen, dass es nur Unterschiede in der Benutzeroberflächenebene geben würde und das Projekt eine Web-App und eine mobile App erfordert und Sie drei Ebenen haben können, in denen die Benutzeroberfläche für die Web-App eckig und die mobile App ionisch sein kann. Die Vorteile, die Sie durch die Verwendung nativer Funktionen wie Cordova Phonegap oder Ionic erhalten, sind möglicherweise weitaus mehr, als alles in einem Typ zu halten.

Ich möchte nur klarstellen, dass es nicht schwierig ist, zwischen diesen Benutzeroberflächen zu wechseln, falls Ihr Client eine Web-App in eine native mobile App konvertieren lassen möchte.

Ich würde mit folgenden Fragen beginnen

  1. Benötigt dieses Projekt eine separate Benutzeroberfläche für Mobilgeräte?
  2. Benötigt dieses Projekt native mobile Funktionen?
  3. Benötigt dieses Projekt separate UI- und Backedn-Funktionen für Mobilgeräte?

Wenn Sie für alle 3 mit Ja antworten, erstellen Sie zwei Projekte. Wenn Sie für 1 und 2 mit Ja antworten, erstellen Sie ein eckiges Backend und eine Web-App zusammen mit einer Ionen- oder Phonegap-App. Wenn Ihre Antwort nur Ja zu 1 ist, würde ich empfehlen, für beide Winkel zu verwenden.

Wenn Sie irgendwann eckige Ansichten in ionic verwenden möchten (suchen Sie nach ionic-ng-Inhalten), haben Sie denselben Code für Front-End, mobile App und Web-App. Am Ende können Sie Folgendes unabhängig verwalten:

  1. Datenbankmigrationen
  2. Serverseitige Backend-Funktionalität mit API-Verbindung zu 1 für Daten
  3. Front-End-Web-App mit Angular Views verbraucht 2
  4. Wenn eine mobile App benötigt wird, verwendet sie Ionic / Phonegap zum Auflösen von Geräteabhängigkeiten, verwendet jedoch Angular, um Ansichten zu erstellen und 2 zu verwenden.

Hoffe das hilft und eröffne ein bisschen Diskussion.

Farrukh Subhani
quelle