Cordova Frameworks: Ionic vs. Framework7

Heutzutage regieren Webentwickler die Welt. JavaScript wird überall eingesetzt, wo man programmieren kann. Unter diesen Bereichen war die Entwicklung mobiler Apps eine der ersten Möglichkeiten, sich zu verzweigen: Vor etwa zehn Jahren erlaubte PhoneGap die Installation von HTML- und JavaScript-Apps für iOS und Android.

Seitdem hat die Technologie ihre Höhen und Tiefen erlebt: Trotz der einfachen Entwicklung unterschieden sich diese Apps offensichtlich stark von nativen Apps. Vanilla-HTML und browserbasiertes JavaScript waren auf Browser ausgerichtet, und es gab keine Möglichkeit für sie, fehlerfrei auf dieses neue Gebiet umzusteigen.

Die wichtigsten Themen sind bis heute:

• Schwierigkeiten bei der Einhaltung von nativem Design und Animation
• Komplexe Bildschirmübergangseffekte
• Behandlung von Ereignissen berühren
• Leistung auf großen Listen
• Fixierte Elemente positionieren
• Anpassung an unterschiedliche Bildschirmgrößen
• Positionen nativer Steuerelemente (z. B. die iOS-Statusleiste)
• Anpassung an verschiedene mobile Browser

Warum ein Framework für Cordova-Apps verwenden?

Die Cordova-Technologie wird aufgrund von Apps, die die oben genannten Probleme aufweisen, oft unterschätzt. Frameworks zielen darauf ab, sie auszugleichen und HTML-Apps so nah wie möglich an native Apps heranzuführen, sowohl im Design als auch in der Leistung.

Sehen wir uns ein paar Hybrid-App-Beispiele an. Sie werden mit den beiden derzeit erfolgreichsten Frameworks – neben Onsen UI – erstellt, die die Expansion von Webentwicklern in der modernen Welt erleichtern sollen: Framework7 und Ionic.

Über das Ionische Framework

Ionic wurde 2012 von Drifty Co. entwickelt und basiert auf Angular. Seitdem befindet es sich in aktiver Entwicklung, erhielt erhebliche Investitionen und eine starke Entwicklergemeinschaft. Die offizielle Website behauptet, dass Millionen von Apps darauf basierend entwickelt wurden.

Zum Zeitpunkt des Schreibens dieses Artikels ist die neueste Version Ionic 3, die auf Angular 5 basiert. Ionic 4, das auf Flexibilität und Unabhängigkeit von Angular abzielt, befindet sich in der frühen Betaphase.

Abgesehen von der UI-Engine, einer wunderbaren Komponentenbibliothek und einer Schnittstelle für den Zugriff auf native Gerätefunktionen bietet Ionic mehrere zusätzliche Funktionen, Dienste und Dienstprogramme.

Die ionische CLI

Die Befehlszeilenschnittstelle von Ionic wird für die interaktive Projektinitialisierung (dh einen Assistenten), das Generieren von Seiten und Komponenten und das Ausführen eines Entwicklungsservers verwendet, mit dem Sie Apps unterwegs erstellen und live neu laden können. Es bietet auch die Integration mit Ionic-Cloud-Diensten.

Lab und DevApp

Lab ist der äußerst nützliche Minidienst, mit dem Sie die Arbeit der Anwendung auf verschiedenen Plattformen im Browser des Ionic-Entwicklers nachahmen können. DevApp hilft Ihnen, eine App schnell auf einem echten Gerät bereitzustellen.

Packen, Bereitstellen und Überwachen

Ionic wird mit einem Bündel von Webdiensten geliefert, die das Erstellen, Debuggen, Testen und Aktualisieren von Anwendungen für Tester und Benutzer vereinfachen und beschleunigen.

Ionics Pläne ändern sich jedoch oft. Einige zuvor bestehende Dienste – wie Auth, Push, Analytics und View – wurden geschlossen, was zu einem Aufschrei der Abonnenten führte.

Schöpfer

Dies ist der Drag-and-Drop-Grafikeditor von Ionic zur Entwicklung funktionaler Schnittstellen.

Über Framework7

Dieses Framework wurde 2014 vom russischen Studio iDangero entwickelt. Letztendlich hat ein Entwickler an dem Projekt gearbeitet, ohne mehrere kleinere Mitwirkende am GitHub-Repository.

Ursprünglich bestand Framework7 aus dem Satz von UI-Komponenten im Stil des damals kürzlich veröffentlichten iOS 7, von dem es seinen Namen hat. Später wurde ein Android-Design hinzugefügt, und beide Designs wurden für das neueste iOS und Material Design aktualisiert.

Vor kurzem nahm die Entwicklung des Projekts Fahrt auf und es erweiterte sich von einer Reihe von Komponenten zu einem vollwertigen Framework für mobile Anwendungen, das beliebte Technologien und Tools integriert.

Die Unterstützung von Framework7 und Beispiele mit Vue.js gibt es seit v1, und v3 unterstützt auch React. Dies könnte es dem Projekt ermöglichen, ernsthaft mit dem populäreren Ionic zu konkurrieren, das nur Angular und TypeScript anbietet.

Installation und erster Start

Ionisch

Um mit Ionic zu arbeiten, installieren Sie es mit NPM:

 npm install -g ionic

Wählen Sie dann die Vorlage für die zukünftige Anwendung aus. Die offizielle Ionic-Website bietet mehrere Vorlagen, oder Sie können eine leere Vorlage auswählen, um die Anwendung von Grund auf mit ionic start myApp blank .

Wählen wir ein einfaches Design. Führen Sie den folgenden Befehl aus:

 ionic start Todo tabs

Antworten Sie mit „Ja“ , wenn das Installationsprogramm fragt : „Möchten Sie Ihre neue App mit Cordova integrieren, um natives iOS und Android anzusprechen?“ Dadurch wird die Anwendung automatisch in Cordova integriert und für den Einsatz auf mobilen Plattformen vorbereitet.

Im nächsten Schritt bietet der Installer an, uns mit dem Ionic Pro SDK zu verbinden. Antworten Sie vorerst mit „Nein“ , um das Beispiel einfach zu halten.

Installieren Sie das zusätzliche @ionic/lab Paket, um die praktische Debugging-Benutzeroberfläche zu erhalten – In-Browser-Imitationen von iOS-, Android- und Windows-Geräten:

 cd Todo npm i --save-dev @ionic/lab

Jetzt können Sie die Anwendung im Debug-Modus starten. Damit können Sie die Anwendung live im Webbrowser entwickeln und debuggen:

 ionic lab

Als Ergebnis erhalten Sie mehrere nützliche Adressen:

Der Ionic Lab-Debugging-Dienst wird auf Port 8200 gestartet. Die Anwendung selbst läuft auf Port 8100, und der Open fullscreen- Link von Ionic Lab führt dorthin. Das Browserfenster mit dem laufenden Ionic Lab öffnet sich automatisch.

Zusätzlich stellt Ionic die Anwendungsadresse im lokalen Netzwerk bereit. Dies ist äußerst nützlich, da Sie die Anwendung im Browser des Mobilgeräts öffnen können, solange sich das Gerät im lokalen Netzwerk befindet (z. B. über WLAN). Darüber hinaus können Sie die Schaltfläche Zum Startbildschirm hinzufügen verwenden, um die Anwendung im Vollbildmodus erneut zu öffnen. Dies ist der schnellste Weg, um Ihre Anwendung auf dem Gerät zu testen.

Eine andere Möglichkeit ist die Ionic DevApp-Anwendung, die auf einem mobilen Gerät installiert werden kann und den Zugriff auf die Anwendung über das lokale Netzwerk ermöglicht. Es bietet Plugin-Unterstützung (Ionic Native) für den Zugriff auf native Gerätefunktionen und die Anzeige von Protokollen.

Rahmen7

Die Entwicklungstools von F7 sind weniger fortgeschritten als die von Ionic, und die automatische Initialisierungs-CLI ist nicht dokumentiert. Die offizielle Website bietet jedoch mehrere GitHub-Repositories mit Vorlagenprojekten, die Ihnen beim Einstieg in die Entwicklung helfen.

Ähnlich wie die Tabs- Vorlage in Ionic bietet F7 Tabbed Views , aber wir werden eine funktionalere Vorlage verwenden, die Framework7 mit React integriert. Die Unterstützung für React wurde in v3 hinzugefügt. Klonen Sie dazu das Vorlagen-Repository:

 git clone https://github.com/framework7io/framework7-template-react.git Todo

Wechseln Sie in den Projektordner, holen Sie Abhängigkeiten und starten Sie den Prozess:

 cd Todo npm install npm start

Die Ausführungsergebnisse sind ähnlich wie bei Ionic: Sie erhalten einen lokalen Link und einen Link innerhalb Ihres Netzwerks für den sofortigen Zugriff von einem echten Gerät:

Jetzt können Sie http://localhost:3000/ in einem Browser öffnen. Framework7 enthält keine integrierten Geräteemulatoren. Verwenden wir also den Gerätemodus von Chrome DevTools, um ein ähnliches Ergebnis zu erzielen:

Wie Sie sehen können, ähnelt Framework7 Ionic insofern, als es iOS und Material Design als seine beiden Standardthemen hat. Das Thema wird basierend auf der Plattform ausgewählt.

Leider ist Webpack im Gegensatz zu einem ähnlichen Template mit Vue.js-Unterstützung in den offiziellen React-Templates noch nicht implementiert, was uns daran hindert, Hot Module Replacement zu verwenden, um Anwendungen schnell zu aktualisieren, ohne die Seite neu zu laden. Dennoch können Sie die standardmäßige Live-Reload-Funktion verwenden, die die Seite neu lädt, wenn Sie den Quellcode ändern.

Cordova einrichten

Um Anwendungen auf Geräten und Emulatoren mit Cordova zu installieren, müssen Sie Entwicklungstools für iOS und Android sowie Cordova CLI herunterladen und einrichten. Sie können mehr darüber in unserem vorherigen Artikel und auf der offiziellen Cordova-Website in den Abschnitten iOS Platform Guide und Android Platform Guide lesen.

Ionisch

Die Erfahrung zeigt, dass zur erfolgreichen Lösung der meisten Ionic-Probleme ein browserbasiertes Debugging mit gelegentlichen Tests auf realen Geräten ausreicht.

Obwohl Sie die Integration für iOS und Android akzeptieren und Ionic die erforderlichen Einstellungen in der Datei config.xml und den Ressourcen im resources vorbereitet, müssen Sie dennoch beide Plattformen mit Cordova mit der Anwendung verbinden:

 cordova platform add ios cordova platform add android

Jetzt können Sie die Cordova-App in „echten“ Emulatoren starten, auf dem mobilen Gerät installieren und sogar an den App Store und Google Play senden.

Der nächste Befehl installiert die Anwendung auf Ihrem iOS-Gerät, wenn es über USB verbunden ist. Andernfalls wird die App auf dem iOS-Simulator installiert.

 cordova run ios

Höchstwahrscheinlich werden Sie von Xcode Command Line Tools über die Notwendigkeit informiert, Entwicklerzertifikate einzurichten. Sie müssen das Projekt in Xcode öffnen und die erforderlichen Aktionen ausführen. Dies muss nur einmal durchgeführt werden, und danach können Sie die Anwendung mit Cordova CLI ausführen.

Manchmal startet der iOS-Simulator nicht automatisch. Starten Sie es in diesem Fall manuell, beispielsweise über Spotlight.

Der Android-Emulator kann auf ähnliche Weise gestartet werden:

 cordova run android 

Beachten Sie, dass der Befehl cordova run die bereits kompilierte Anwendung startet und installiert, die den ionic serve / ionic lab Server nicht verwendet, sodass Live Reload nicht funktioniert. Um die Anwendung live zu entwickeln und zu debuggen, verwenden Sie den Browser im lokalen Netzwerk oder installieren Sie die Anwendung Ionic DevApp.

Die Erfahrung zeigt, dass zur erfolgreichen Lösung der meisten Ionic-Probleme ein browserbasiertes Debugging mit gelegentlichen Tests auf realen Geräten ausreicht.

Rahmen7

Die zuvor ausgewählte „React“ Framework7-Vorlage bietet keine Einrichtungsautomatisierung für Cordova, sodass Sie Plattformen manuell hinzufügen müssen. Erstellen Sie ein Cordova-Projekt im cordova Unterordner Ihres Projektordners:

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

Die Vorlage basiert auf der Create React App. Um das kompilierte Projekt in einer Cordova-Umgebung auszuführen, müssen Sie die "homepage": "." Einstellung in der Datei ./package.json . Diese Datei befindet sich auf der Stammebene des Projekts:

Kompilieren Sie das Framework7-Projekt und kopieren Sie das Ergebnis in das Cordova-Projekt:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

Jetzt können Sie die Anwendung auf einem Gerät oder einem Emulator starten:

 cd cordova/ cordova run ios 

Du bist fertig! Hoffen wir, dass Framework7 den Entwicklungsstandard von Ionic und die Bequemlichkeit der anfänglichen Einrichtung einholt.

Erstellen von Aufgabenlisten

Ionisch

Beginnen wir endlich mit der Erstellung der Anwendung! Da es sich um eine To-Do-Anwendung handelt, enthält die Hauptseite (Datei src/pages/home/home.html ) die Liste der Aufgaben mit der Möglichkeit, „als abgeschlossen markieren“ und „neu hinzufügen“.

Ionic bietet für Listen die Komponenten <ion-list> und <ion-item> an. Entfernen Sie zuerst die padding -Eigenschaft aus dem <ion-content> -Element, um die Liste bildschirmbreit zu machen. Platzieren Sie den Text in der Liste mit einem <ion-label> -Element und fügen Sie ein <ion-toggle> -Element hinzu, um abgeschlossene Aufgaben zu markieren.

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

Gehen Sie zurück zum Browser-Tab, während der Ionic Lab-Dienst ausgeführt wird. Die Anwendung wurde automatisch aktualisiert:

Toll! Verschieben Sie nun die Aufgabendaten in das JS-Objekt und richten Sie dessen HTML-Präsentation mit Angular ein. Gehen Sie zur Datei src/pages/home/home.ts und erstellen Sie die Tasks-Eigenschaft der HomePage -Klasseninstanz:

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

Jetzt können Sie im HTML-Code auf das tasks -Array verweisen. Verwenden Sie das *ngFor Angular-Konstrukt, um iterativ Listenelemente für jedes Array-Element zu erstellen. Der Code wird kleiner:

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

Jetzt muss nur noch die Schaltfläche zum Erstellen neuer Aufgaben zum Seitenkopf hinzugefügt werden. Verwenden Sie dazu die <ion-navbar> , <ion-buttons> , <button> und <ion-icon> :

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

Beachten Sie die (click)="addTask()" . Wie Sie sich vorstellen können, fügt es der Schaltfläche den Tap-Handler hinzu und ruft die Methode addTask() für unsere Komponente auf. Lassen Sie uns diese Methode implementieren, um das Dialogfenster für den Aufgabennamen zu öffnen, wenn auf die Schaltfläche getippt wird.

Dazu benötigen Sie die Komponente AlertController Ionic. Um diese Komponente zu verwenden, importieren Sie ihren Typ:

 import { AlertController } from 'ionic-angular';

Und geben Sie es in der Liste der Konstruktorparameter für die Seite an:

 constructor(public alertCtrl: AlertController) { }

Jetzt können Sie es in der Methode addTask() . Stellen Sie es nach dem Controller auf. Das Dialogfenster können Sie mit folgenden Aufrufen erzeugen und anzeigen:

 this.alertCtrl .create(/* options */) .present();

Geben Sie den Nachrichtenkopf, die Beschreibung des Felds und zwei Schaltflächen im options an. Die Schaltfläche „OK“ fügt dem tasks -Array eine neue Aufgabe hinzu:

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

Nachdem Sie das Element zum Array this.tasks haben, wird die Komponente reaktiv neu aufgebaut und eine neue Aufgabe in der Liste angezeigt.

Der vollständige Seitencode sieht jetzt so aus:

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

Installieren Sie die Anwendung erneut auf dem Gerät:

 cordova run ios

Das ist es! Nicht so schwer, oder? Lassen Sie uns nun versuchen, dasselbe mit Framework7 zu tun.

Rahmen7

Framework7-Vorlagen werden erstellt, um alle Komponentenfunktionen anzuzeigen, sodass Sie nur die Seite src/components/pages/HomePage.jsx in den Dateien src/components/App.jsx und src/routes.js belassen und deren Inhalt bereinigen müssen und entfernen Sie zusätzliche Codekommentare.

Erstellen Sie nun die Aufgabenliste. Framework7 stellt dafür die Komponenten <List simple-list> und <ListItem> zur Verfügung. Um einen Aufgabenabschlussschalter darin zu platzieren, fügen Sie die Komponente <Toggle slot="after"/> hinzu. Denken Sie daran, all diese Komponenten aus dem framework7-react Modul zu importieren. Nun sieht der Seitencode so aus:

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

Und die Anwendung selbst sieht so aus:

Ziemlich guter Anfang. Versuchen wir erneut, die statischen Daten aus dem HTML-Code zu verschieben. Verwenden Sie dazu eine intelligente Komponente anstelle der zustandslosen, die wir hatten. Importieren Sie die abstrakte Klasse Component aus React:

 import React, { Component } from 'react';

Und schreiben Sie das Aufgabenarray in die state :

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

Die reale Anwendung wird wahrscheinlich einen abstrakteren Datenfluss verwenden – zum Beispiel mit Redux oder MobX –, aber für ein kleines Beispiel bleiben wir beim internen Komponentenzustand.

Jetzt können Sie die JSX-Syntax verwenden, um iterativ Listenelemente für jede Aufgabe im Array zu erstellen:

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

Es bleibt nur noch, die Kopfzeile mit der Schaltfläche hinzuzufügen, um wieder eine neue Aufgabe zu erstellen. Das <Navbar> -Element existiert bereits, also fügen Sie <Link iconOnly> zum <NavRight> -Element hinzu:

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

In React fügen Sie Tap-Handler hinzu, indem Sie die Eigenschaft onClick und den Callback-Zeiger darin setzen. Implementieren Sie den Handler, um den Aufgabennamen-Dialog anzuzeigen.

Jedes Element in Framework7 hat über this.$f7 Eigenschaft Zugriff auf die Anwendungsinstanz. Auf diese Weise können Sie die Methode dialog.prompt() verwenden. Rufen Sie vor dem Schließen des Dialogs die Methode setState() der React-Komponente auf und übergeben Sie ihr die Kopie des vorherigen Arrays mit einem neuen Element. Dadurch wird die Liste reaktiv aktualisiert.

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

Hier ist der vollständige Komponentencode:

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

Überprüfen Sie das Ergebnis:

Alles, was übrig bleibt, ist die Neuerstellung und Bereitstellung auf dem Gerät:

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

Getan!

Der endgültige Code für diese beiden Projekte ist auf GitHub verfügbar:

• ionic-todo-app
• framework7-react-todo-app

Ergebnisse

Jetzt haben Sie das vollständige Tutorial mit jedem Cordova-Framework gesehen. Wie schneidet Framework7 gegen Ionic ab?

Ersteinrichtung

Ionic ist dank seiner CLI viel einfacher zu installieren, während F7 mehr Zeit für die Auswahl und Einrichtung einer Vorlage oder die schrittweise Installation von Grund auf benötigt.

Komponentenvielfalt

Beide Frameworks verfügen über einen vollständigen Satz wunderbar gestalteter Standardkomponenten in zwei Themen: iOS und Material Design. Ionic bietet diese Komponenten auch im Windows-Design und einem riesigen Marktplatz für Benutzerdesigns.

Neben der vollständigen Nachahmung von nativem Design und Animationen wird der Leistungsoptimierung viel Aufmerksamkeit geschenkt, was zu fantastischen Ergebnissen führt: Oft ist es fast unmöglich, Anwendungen auf beiden Frameworks von nativen zu unterscheiden.

Framework7 bietet eine zusätzliche Liste komplexerer und nützlicherer Komponenten, wie Smart Select , Autocomplete , Calendar , Contacts List , Login Screen , Messages und Photo Browser . Auf der anderen Seite bietet Ionic eine riesige Auswahl an von Benutzern erstellten Komponenten.

Ökosystem und Gemeinschaft

Ionic gewinnt bei diesen Parametern offensichtlich dank seiner längeren Lebensdauer, starken finanziellen Unterstützung und aktiven Community. Die ionische Infrastruktur entwickelt sich ständig weiter: Unterstützende Dienste und Cloud-Lösungen weichen neuen und die Zahl der Plugins wächst stetig.

Framework7 ist besser als je zuvor, aber es fehlt schmerzlich an der Unterstützung durch die Community.

Abhängigkeiten von Drittanbietern

Framework7 ist flexibler in Bezug auf Lösungen von Drittanbietern. Seine größte Stärke ist wahrscheinlich die Möglichkeit zu wählen, ob Sie Vue oder React im Projekt verwenden, sowie Webpack oder Browserify. Ionic basiert auf Angular und erfordert Kenntnisse darin (und damit auch TypeScript).

Vor kurzem haben die Ionic-Entwickler jedoch eine neue Ionic 4-Beta angekündigt, die behauptet, vollständig UI-Framework-agnostisch zu sein – keine Angular-Abhängigkeiten mehr, wenn Sie sie nicht wollen.

Cordova Frameworks: Immer noch eine leistungsstarke Möglichkeit, plattformübergreifende mobile Apps zu entwickeln

Ob Cordova verwendet wird, hängt vom jeweiligen Projekt ab. Tatsächlich sind die Geschwindigkeit der hybriden Entwicklung mobiler Apps und die Unterstützung mehrerer Plattformen die Hauptvorteile. Aber es ist immer ein Kompromiss, und manchmal kann es vorkommen, dass Sie mit einigen Fehlern konfrontiert werden, die bei einem nativen Ansatz nicht vorhanden wären. Diese wunderbaren Frameworks und ihre Gemeinschaften leisten großartige Arbeit, um diese Mängel zu verringern und unser Leben einfacher zu machen. Also, warum probierst du sie nicht aus?