Die 9 häufigsten Fehler, die Ionic-Entwickler machen

Einführung

Ionic gibt es jetzt seit zwei Jahren. Es ist eine großartige Sammlung von Tools für die Entwicklung von Hybridanwendungen auf der Basis von AngularJS. Ionic ist derzeit sehr beliebt, mit mehr als einer Million erstellten Anwendungen und einer wachsenden Community von Tausenden von Entwicklern.

Seit der ersten Veröffentlichung von Ionic ist viel Zeit vergangen, und Webtechnologien und Best Practices haben sich in vielerlei Hinsicht weiterentwickelt. Daher ist es schwierig zu bestimmen, welchen Weg man einschlagen soll, wenn man ein neues Projekt startet. Unter diesen Bedingungen können Entwickler Fehler machen, die sich möglicherweise auf die Qualität ihrer Anwendungen oder die Produktivität ihres Teams auswirken.

Wenn Sie die folgenden häufigen Fehler lesen, haben Sie die Schlüssel zur Vermeidung grundlegender Probleme und zur Erstellung performanter und skalierbarer Anwendungen mit Ionic.

Häufiger Fehler Nr. 1: Vergessen, natives Scrollen zu aktivieren

Natives Scrollen ermöglicht es Ionic, Scrolling-Ereignisse auf unterstützten Webansichten zu hören. Es ermöglicht Pull to Refresh , List Reordering und Infinite Scroll ohne JavaScript-Scrolling, das zu einer Zeit erstellt wurde, als Browser keine geeigneten Scroll-Ereignisse hatten.

Natives Scrollen ist auf Android seit Ionic 1.2 (Dezember 2015) standardmäßig aktiviert. Es ist eine enorme Verbesserung der Leistung und des Benutzererlebnisses, da es aufgrund asynchroner Ereignisse einen reibungslosen Bildlauf gewährleistet.

Leider ist das native Scrollen aufgrund des Fehlens geeigneter Ereignisse auf iOS für diese Plattform noch nicht aktiviert.

Wenn Sie eine Version vor 1.2 verwenden, können Sie Native Scrolling für Android mit $ionicConfigProvider :

 // Enable Native Scrolling on Android $ionicConfigProvider.platform.android.scrolling.jsScrolling(false);

Sie können Native Scrolling auch auf jeder Seite aktivieren oder deaktivieren, indem Sie die overflow-scroll Direktive für jeden ion-content :

 <!-- Disable Native Scrolling on this page only --> <ion-content overflow-scroll=”false”>

Bitte beachten Sie, dass Sammlungswiederholungen, mit denen Ihre Anwendung riesige Listen von Elementen anzeigen kann, leider nicht durch natives Scrollen abgedeckt werden können.

Häufiger Fehler Nr. 2: Ionic CLI nicht zum Installieren von Plattformen und Plugins verwenden

Ionic CLI erweitert die Cordova CLI um Funktionen. Die Persistenz von Plattformen und Plugins ist eine großartige Funktion, die Ionic CLI hinzufügt.

Das Problem mit Cordova CLI ist, dass die von Ihnen installierten Plattformen und Plugins nur auf Ihrem Computer installiert sind. Wenn Sie in einem Team arbeiten, möchten Sie zur Vermeidung von Fehlern dieselbe Umgebung, Plattformen und Plugins gemeinsam nutzen. Mit Cordova CLI ist es schwieriger, das Projekt zwischen Entwicklermaschinen synchron zu halten. Ja, Sie könnten die Plattformen und Plug-in-Ordner festschreiben, aber es wird nicht empfohlen.

Wenn Sie Ionic CLI verwenden, um die Plattformen ionic platform add ios und plugins ionic plugin add camera zu installieren, wird die Datei package.json entsprechend bearbeitet.

Plattformen und Plugins werden in den Eigenschaften cordovaPlatforms und cordovaPlugins gespeichert:

 "cordovaPlugins": [ "[email protected]", "[email protected]", "[email protected]" ], "cordovaPlatforms": [ "android", "ios" ]

Für andere Entwickler ist es jetzt einfach, einen neuen Code zu synchronisieren, indem sie bei Bedarf einfach die ionic state restore ausführen (Hinzufügen, Löschen oder Versionsaktualisierung).

Häufiger Fehler Nr. 3: Thinking Performance kommt aus der Box

Ionic basiert auf AngularJS, und die Leistung des Geräts wird oft in Frage gestellt. Ich möchte Sie in diesem Punkt beruhigen: Mit ein wenig AngularJS-Hintergrund können Sie mit Ionic Weltklasse-Anwendungen erstellen.

Das perfekte Beispiel ist die Sworkit-App, die mit Ionic erstellt wurde, eine über 9 Millionen Nutzerbasis, über 7 Millionen Downloads und durchschnittlich 4,5 Sterne bei Google Play hat.

Wenn Sie das Beste aus AngularJS herausholen möchten, sollten Sie die folgenden Dinge lernen, bevor Sie mit Ihrem Projekt beginnen.

$uhr

Beobachter sind es gewohnt, auf Scope-Änderungen in AngularJS zu hören. Grundsätzlich gibt es vier Arten von $watch : $watch (normal) , $watch (deep) , $watchCollection und $watchGroup .

Jeder einzelne von ihnen ist anders, und die Wahl des richtigen kann einen großen Unterschied in Bezug auf die Leistung ausmachen.

$watch (normal)

Bei Verwendung der normalen $watch werden nur vorhandene Objekteigenschaften oder Array-Elemente überprüft. Oberflächliche Änderungen, wie das Hinzufügen einer Object-Eigenschaft oder das Pushen eines neuen Elements in ein Array, werden nicht berücksichtigt.

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$watch (tief)

Die tiefe $watch kümmert sich um flache und tiefe Änderungen, wie Eigenschaften von verschachtelten Objekten. Mit dieser $watch verpassen Sie garantiert keine Modifikation. Die Verwendung von deep $watch hat jedoch Auswirkungen auf die Leistung. Ich würde raten, es mit Vorsicht zu verwenden.

 $scope.$watch('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } }, true);

$watchCollection

$watchCollection kann zwischen der normalen $watch und der tiefen $watch betrachtet werden. Es funktioniert auch beim Vergleichen von Objektreferenzen, aber mit dem Vorteil, dass Sie die Eigenschaften Ihres Objekts auch oberflächlich überwachen können, indem Sie eine Objekt-Eigenschaft hinzufügen oder ein neues Element in ein Array verschieben.

 $scope.$watchCollection('watchExpression', function(newVal, oldVal){ if(newVal){ // watchExpression has changed. } });

$watchGroup

$watchGroup wurde in AngularJS 1.3 eingeführt und ermöglicht das gleichzeitige Ansehen mehrerer Ausdrücke.

Während $watchGroup Ihre Anwendungsleistung im Vergleich zum normalen $watch möglicherweise nicht verbessert, hat es den Vorteil, dass es synthetischer ist, wenn mehrere Bereichsausdrücke überwacht werden.

 $scope.$watchGroup([ 'watchExpression', 'watchExpression2', 'watchExpression3' ], function(newVals, oldVals) { if (newVals[0]) { // watchExpression has changed. } if (newVals[1]) { // watchExpression2 has changed. } if (newVals[2]) { // watchExpression3 has changed. } });

Verfolgen nach

Das track by wird verwendet, um nutzlose DOM-Manipulationen bei der Verwendung von ng-repeat zu vermeiden. Wenn der Digest-Zyklus feststellt, dass sich mindestens ein Element Ihrer Sammlung geändert hat, ng-repeat alle Elemente erneut. Die DOM-Manipulation hat immer Auswirkungen auf die Anwendungsleistung, also je weniger Sie haben, desto besser.

Um das erneute Rendern der gesamten Sammlung zu vermeiden und nur die Elemente zu aktualisieren, die aktualisiert werden müssen, verwenden Sie track by mit einem eindeutigen Bezeichner.

 <!-- if items have a unique id --> <div ng-repeat="item in items track by item.id"></div> <!-- if not, you can use the $index that ng-repeat adds to every of its items --> <div ng-repeat="user in users track by $index"></div>

Vermeiden Sie einfach die Verwendung track by bei collection-repeat .

Einmalige Bindung

Die einmalige Bindung oder :: wurde in Angular 1.3 eingeführt und hat einen echten Einfluss auf die Leistung Ihrer Anwendung.

Grundsätzlich wird die Verwendung einer einmaligen Bindung :: für einen Ausdruck ihn aus der $watchers Liste entfernen, wenn er gefüllt ist. Dies bedeutet, dass der Ausdruck nicht aktualisiert werden kann, selbst wenn sich die Daten ändern.

 <p>{{::user.firstName}}</p>

Unser Rat ist, alle Ansichten Ihrer Anwendung durchzugehen und darüber nachzudenken, was aktualisiert werden könnte und was nicht, und die einmalige Bindung :: entsprechend zu verwenden. Es wird eine große Erleichterung für den Verdauungszyklus sein.

Bitte beachten Sie, dass die einmalige Bindung leider nicht in einer collection-repeat verwendet werden kann, da sich die auf dem Bildschirm angezeigte Artikelliste beim Scrollen ändert.

Wenn Sie mehr über Tipps und Tricks zur Leistung von AngularJS und Ionic erfahren möchten, empfehle ich Ihnen, den Spickzettel zur Leistung von Ultimate AngularJS und Ionic zu lesen.

Häufiger Fehler Nr. 4: Verwechslungen mit der View Cache Logik

Einzelseitenanwendungen speichern Seiten standardmäßig nicht. Sie haben es wahrscheinlich schon bei AngularJS-Anwendungen erlebt, bei denen das Scrollen oder die Benutzereingaben nicht gespeichert werden, wenn Sie zwischen den Seiten hin und her navigieren.

Bei Ionic werden standardmäßig zehn Seiten zwischengespeichert, und dies kann global oder pro Plattform geändert werden.

 // Globally $ionicConfigProvider.views.maxCache(5); // Per platforms $ionicConfigProvider.platform.android.views.maxCache(5); $ionicConfigProvider.platform.ios.views.maxCache(5);

Dies ist eine großartige Funktion, aber manchmal ist es für Anfänger schwierig zu verstehen, wie man mit zwischengespeicherten Seiten umgeht.

Das Problem ist, dass, wenn der Benutzer zu einer zwischengespeicherten Seite zurückkehrt, der Controller nicht erneut instanziiert wird, was sich von AngularJS-Anwendungen unterscheidet, und alles so ist, als ob Sie diese Seite nie verlassen hätten.

Wie sollten Sie unter diesen Bedingungen die Daten auf der Seite aktualisieren?

Einführung von Controller-Lebenszyklusereignissen

Im Vergleich zu AngularJS bietet Ionic viele Lebenszyklusereignisse:

 $scope.$on('$ionicView.loaded', function(){}); $scope.$on('$ionicView.unloaded', function(){}); $scope.$on('$ionicView.enter', function(){}); $scope.$on('$ionicView.leave', function(){}); $scope.$on('$ionicView.beforeEnter', function(){}); $scope.$on('$ionicView.beforeLeave', function(){}); $scope.$on('$ionicView.afterEnter', function(){}); $scope.$on('$ionicView.afterLeave', function(){});

Diese Ereignisse sind erforderlich, wenn Sie die Kontrolle über den View-Cache haben möchten.

Das Ereignis $ionicView.loaded wird beispielsweise ausgelöst, wenn eine Ansicht zum ersten Mal geladen wird. Dieses Ereignis wird nicht mehr ausgelöst, während diese Ansicht zwischengespeichert ist, auch wenn der Benutzer darauf zurückkommt. Dies ist im Allgemeinen das Ereignis, das Sie verwenden würden, um Variablen auf die gleiche Weise zu initiieren, wie Sie es mit dem $viewContentLoaded Ereignis in AngularJS tun würden.

Wenn Sie jedes Mal Daten abrufen möchten, wenn Sie eine Ansicht betreten, ob zwischengespeichert oder nicht, können Sie das Ereignis $ionicView.enter verwenden.

Indem Sie das richtige Ereignis zur richtigen Zeit verwenden, können Sie die Benutzerfreundlichkeit der Anwendung verbessern.

In Bezug auf die Leistung wirkt sich die Verwendung der Cache-Ansicht nur auf die Größe des DOM aus. Wenn eine Seite zwischengespeichert wird, werden alle ihre Beobachter getrennt und die Seite besteht daher nur aus einigen weiteren DOM-Elementen, die auf Ihrer Seite liegen und darauf warten, erneut verwendet zu werden.

Die Größe des DOM ist wichtig, um eine großartige Benutzererfahrung zu haben, aber das Zwischenspeichern von bis zu zehn Seiten scheint gut zu funktionieren (natürlich abhängig davon, was Sie in Ihre Seiten laden).

Häufiger Fehler Nr. 5: Crosswalk für Android nicht kennen

Jede Android-Version führt eine andere WebView aus (einen Browser, der Ihre Anwendung ausführt). Die Leistung ist je nach Gerät unterschiedlich und kann auf den alten Android-Geräten wirklich schlecht sein. Um auf jedem Android-Gerät die gleiche Erfahrung mit Fließfähigkeit und Reaktionsfähigkeit zu erhalten, können Sie Crosswalk installieren. Es bettet im Grunde den neuesten Chromium-Browser in Ihre Anwendung ein und fügt etwa 20 MB pro APK hinzu, sowohl ARM als auch X86.

Crosswalk kann einfach mit Ionic CLI oder Cordova CLI installiert werden:

 ionic plugin add cordova-plugin-crosswalk-webview

Häufiger Fehler Nr. 6: Der Versuch, Cordova-Plug-ins im Browser auszuführen

Die Mehrheit der Entwickler, die Ionic verwenden, möchte, dass ihre App auf iOS und Android läuft. Nach dem Hinzufügen der Plattformen ionic platform add ios android und einiger Plugins ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts , ist ein Anfängerfehler zu glauben, man könne sie im Browser testen. Nun, das könnten Sie, aber erst, nachdem Sie die richtige Browserplattform installiert haben. Beachten Sie, dass es nicht mit allen Plugins funktioniert.

Die Plugins von Cordova sollen über JavaScript mit der nativen Geräte-API interagieren. Das Kontakt-Plugin oder das Geräteorientierungs-Plugin funktionieren daher nur auf einem Gerät.

Sie können Ihren Code jedoch problemlos auf einem Gerät testen und über Ihren Computer remote debuggen.

Remote-Debug auf Android

Schließen Sie Ihr Gerät an und stellen Sie sicher, dass es von Ihrem Computer korrekt erkannt wird, indem Sie adb devices (Android SDK ist erforderlich).

Erstellen Sie Ihre App und installieren Sie sie auf Ihrem Gerät, indem Sie ionic run android . Nachdem Ihre App auf dem Gerät gestartet wurde, öffnen Sie die Konsole über die Chrome-Entwicklungstools (auf Ihrem Computer) chrome://inspect/#devices und überprüfen Sie Ihr Gerät.

Remote-Debugging unter iOS

Schließen Sie Ihr Gerät an und vergewissern Sie sich, dass es von Ihrem Computer richtig erkannt wird. Erstellen Sie Ihre App und installieren Sie sie auf Ihrem Gerät, indem Sie ionic run ios --device .

Öffnen Sie nach dem Start Ihrer App auf dem Gerät die Safari-Entwicklungstools (auf Ihrem Computer), indem Sie auf Develop > Your iPhone > Your app klicken:

Führen Sie Cordova-Plugins im Browser aus

Das Ausführen von Cordova-Plugins im Browser ist eine erweiterte Funktion, die Sie kennen sollten. Seit Ionic 1.2 wird der Browser offiziell unterstützt und eröffnet damit die Ära der plattformübergreifenden Anwendungen weit über iOS- und Android-Plattformen hinaus.

Mit der Cordova Browser-Plattform, Electron und nur Web-Technologien (JavaScript, HTML und CSS) können wir jetzt Ionic-Anwendungen für den Browser und den Desktop (Windows, Linux und OSX) erstellen.

Ein Starterkit ist auf Github verfügbar.

Cordova-Browserplattform

Mit der Browser-Plattform können Sie Cordova-Anwendungen für den Browser erstellen. Das bedeutet, dass Sie die Plugins von Cordova auch im Browser verwenden können.

Es kann genauso installiert werden, wie Sie iOS- oder Android-Plattformen installieren:

 cordova platform add browser

Ihre Anwendung muss vor der Verwendung genau wie bei iOS oder Android kompiliert werden:

 cordova run browser

Dieser Befehl kompiliert Ihre App und öffnet Ihren Standardbrowser.

Plattformübergreifende Plugins

Viele Plugins wie Network, Camera und Facebook unterstützen gleichzeitig iOS, Android und die Browser-Plattform – alle mit derselben API.

Zur Veranschaulichung, dass es mit der ngCordova-API eine Möglichkeit gibt, auf jeder Plattform (iOS, Android, Browser und Desktop) festzustellen, ob Ihr Gerät online oder offline ist:

 // listen for Online event $rootScope.$on('$cordovaNetwork:online', (event, connectionType) => { this.isOnline = true; }); // listen for Offline event $rootScope.$on('$cordovaNetwork:offline', (event, connectionType) => { this.isOnline = false; });

Vor diesem Hintergrund können Sie sich jetzt vorstellen, Produkte zu erstellen, die überall mit einer einzigen Codebasis ausgeführt werden können.

Häufiger Fehler Nr. 7: Nach der Starter-Kit-Architektur für groß angelegte Anwendungen

Bei Verwendung des Befehls ionic start myapp wird ein Starterprojekt mit der folgenden Ordnerstruktur erstellt:

 www/ js/ app.js controllers/ aaa.js bbb.js ccc.js services/ xxx.js yyy.js zzz.js templates/ aaa.html bbb.html ccc.html

Dies wird als Folder-by-Type-Struktur bezeichnet, bei der JavaScript-, CSS- und HTML-Dateien nach Typen gruppiert werden. Obwohl es für Anfänger einfach erscheinen mag, gerät diese Art von Architektur ziemlich schnell außer Kontrolle. Es skaliert einfach nicht.

Hier sind einige Gründe, die Ordner-nach-Typ-Struktur nicht zu verwenden:

• Die Anzahl der Dateien in Ihren Ordnern kann enorm werden
• Es kann schwierig sein, alle Dateien zu finden, die Sie für eine bestimmte Funktion ändern müssen
• Die Arbeit an einem Feature führt zu vielen offenen Ordnern
• Skaliert nicht gut, je mehr die App wächst, desto schwieriger wird es, daran zu arbeiten

Ich empfehle eher die Verwendung einer Folders-by-Feature-Struktur, in der JavaScript-, CSS- und HTML-Dateien nach Feature oder AngularJS-Modul gruppiert sind:

 myNewFeature/ index.js (AngularJS module) config.js service.js controller.js index.html style.scss

Gründe für die Verwendung der Ordner-nach-Feature-Struktur:

• Die Anzahl der Dateien in Ihren Ordnern ist auf wenige beschränkt
• Es ist einfach, alle Dateien zu finden, die Sie für eine bestimmte Funktion ändern müssen – sie befinden sich im selben Ordner
• Sie können selbstständig an einem Feature arbeiten
• Zu wissen, was das Modul darstellt, ist einfach - der Ordnername reicht aus
• Es ist einfach, eine neue Funktion zu erstellen, kopieren Sie einfach eine vorhandene Funktion und fügen Sie sie ein
• Skaliert gut, Sie können beliebig viele neue Funktionen hinzufügen, ohne Ihrem Team die Arbeit zu erschweren

Bitte beachten Sie, dass diese Architektur der Folders-by-Component-Struktur nahe kommt, die jetzt der Standard in Angular2/Ionic2-Anwendungen ist.

Häufiger Fehler Nr. 8: Binden von Ereignissen an onscroll und Vergessen requestAnimationFrame

Diese einzige Falle ist normalerweise ein Anfängerfehler, aber sie kann wahrscheinlich die schlimmsten Auswirkungen auf die Leistung haben. Bedenken Sie:

 <ion-content on-scroll="getScrollPosition()"> // … </ion-content>

 $scope.getScrollPosition = function () { // heavy processing, like manipulating DOM // or anything that triggers a $digest() // will be called every ~80ms, // and will impact UX }

Obwohl Ionic für diese Aktionen eine Drosselung bereitstellt, kann es immer noch sehr langsam sein. Grundsätzlich sollte alles, was eine Digest-Schleife auslöst, verzögert und nicht zusammen mit starkem Malen ausgelöst werden, was auch der Effekt des Scrollens ist.

Viele der Ziele, die Entwickler durch die Bindung an Scroll-Ereignisse und insbesondere Animationen zu erreichen versuchten, können auch mit einer anderen Methode erreicht werden. Siehe requestAnimationFrame .

 var myElement = document.getElementById('content'); var elemOffsetFromParent = myElement.offsetTop; function onCapturedFrame() { if (window.scrollY >= elemOffsetFromParent) { customTweenFunction(myElement, options); } window.requestAnimationFrame(onCapturedFrame); } onCapturedFrame();

Der obige Code ist ein sehr einfaches Beispiel, bei dem überprüft wird, ob der Benutzer über den oberen Rand des Elements hinaus gescrollt hat. Denken Sie daran, herstellerspezifische Alternativen für die browserübergreifende Kompatibilität hinzuzufügen, wenn Sie beabsichtigen, das Beispiel zu verwenden. Es läuft grundsätzlich mit einer optimalen Geschwindigkeit, je nach Browser, mit 60 FPS oder mit der Aktualisierungsrate des Bildschirms. Aber es ist optimiert, und leistungsstarke Animationsframeworks verwenden diese einfache Methode.

Sie können sich auch element.getBoundingClientRect() , das Informationen über die Größe und Position eines HTML-Knotens bereitstellt.

Häufiger Fehler Nr. 9: Manuelles Prototyping ionischer Anwendungen

Ionic hat ein bestimmtes Design, fast eine visuelle Sprache. Gerade bei Prototypen und Early-Stage-Produkten lassen sich durch die Nutzung der verfügbaren Komponenten und Styles viel Zeit und Kosten sparen. Sie sind eigentlich eher minimal und haben eine gute Ästhetik.

Die Präsentation von Wireframes und Mockups mit grundlegenden Funktionen ist zu einem Industriestandard geworden. Ein Bild zu sehen und eine tatsächliche App mit dynamischen Komponenten auf einem mobilen Gerät zu sehen, sind zwei sehr unterschiedliche Tassen Tee. Viele Designer und auch UX-Entwickler verwenden Tools wie Axure oder Balsamiq, die eine schnelle Erstellung von Wireframes mit minimaler Funktionalität ermöglichen.

Jetzt haben die Macher von Ionic ein ähnliches Tool veröffentlicht, das exklusiv für Ionic-Entwickler entwickelt wurde. Es heißt Ionischer Schöpfer. Es verfügt über eine Drag-and-Drop-Weboberfläche und unterstützt nahezu alles, was Core Ionic bietet. Das Tolle daran ist, dass es erlaubt, den Prototyp in mehrere Formate mit standardmäßig funktionierendem Ionic-Code zu exportieren und sogar die Anwendung zu erstellen und zu teilen. Das Tool ist proprietär, aber viele der Optionen können kostenlos verwendet werden.

Fazit

Ionic hat die Branche der Hybridanwendungen auf eine Weise revolutioniert, die sich niemand hätte vorstellen können. Im Laufe der Zeit haben sich die Best Practices und Tools jedoch nicht weiterentwickelt. Infolgedessen stieg die Anzahl potenzieller Fehler, die Entwickler machen können.

Erfahrene Ionic-Entwickler haben eine klare Möglichkeit, Weltklasse-Anwendungen gleichzeitig auf mehreren Plattformen bereitzustellen. Der Weg besteht darin, die verfügbaren Tools zu nutzen, die Leistung als oberste Priorität zu betrachten und die Best Practices zu befolgen.

Dieser Beitrag wäre nicht möglich gewesen ohne die Kreativität der großartigen Ionic-Community, Michal Mikolajczyk, Mike Hartington (Ionic Core-Team) und Katie Ginder-Vogel (Marketing & Communications Manager, Ionic). Vielen Dank ihnen allen.