I 9 errori più comuni commessi dagli sviluppatori di Ionic

introduzione

Ionic è in circolazione da due anni ormai. È un ottimo set di strumenti per lo sviluppo di applicazioni ibride basate su AngularJS. Ionic è estremamente popolare al momento, con più di un milione di applicazioni create e una comunità in crescita di migliaia di sviluppatori.

Dalla prima versione di Ionic, il tempo è passato e le tecnologie web e le migliori pratiche si sono evolute in molti modi. Pertanto, è difficile determinare quale percorso seguire quando si inizia un nuovo progetto. In queste condizioni, gli sviluppatori possono commettere errori che possono avere un impatto sulla qualità delle loro applicazioni o sulla produttività del loro team.

Leggendo i seguenti Errori comuni, avrai le chiavi per evitare problemi fondamentali e per creare applicazioni performanti e scalabili con Ionic.

Errore comune n. 1: dimenticare di abilitare lo scorrimento nativo

Lo scorrimento nativo consente a Ionic di ascoltare gli eventi di scorrimento sulle visualizzazioni Web supportate. Rende possibile Pull to Refresh , List Reordering e Infinite Scroll senza lo scorrimento JavaScript, che è stato creato in un'epoca in cui i browser non disponevano di eventi di scorrimento adeguati.

Lo scorrimento nativo è abilitato per impostazione predefinita su Android da Ionic 1.2 (dicembre 2015). Si tratta di un enorme miglioramento delle prestazioni e dell'esperienza utente, in quanto garantisce uno scorrimento fluido a causa di eventi asincroni.

Sfortunatamente, a causa della mancanza di eventi adeguati su iOS, lo scorrimento nativo non è ancora abilitato per quella piattaforma.

Se stai utilizzando una versione precedente alla 1.2, puoi abilitare lo scorrimento nativo per Android utilizzando $ionicConfigProvider :

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

Puoi anche abilitare o disabilitare lo scorrimento nativo su qualsiasi pagina utilizzando la direttiva overflow-scroll su qualsiasi ion-content :

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

Tieni presente che sfortunatamente la ripetizione della raccolta, che consente alla tua applicazione di mostrare enormi elenchi di elementi, non può essere coperta dallo scorrimento nativo.

Errore comune n. 2: non utilizzare la CLI ionica per installare piattaforme e plug-in

Ionic CLI aggiunge funzionalità alla Cordova CLI. La persistenza di piattaforme e plugin è un'ottima funzionalità aggiunta da Ionic CLI.

Il problema con Cordova CLI è che le piattaforme e i plugin che installi sono installati solo sul tuo computer. Quando si lavora in un team, per evitare bug si desidera condividere lo stesso ambiente, piattaforme e plug-in. Con Cordova CLI, è più difficile mantenere sincronizzato il progetto tra le macchine degli sviluppatori. Sì, puoi eseguire il commit delle piattaforme e delle cartelle dei plugin, ma non è consigliato.

Quando si utilizza Ionic CLI per installare piattaforme ionic platform add ios e plugin ionic plugin add camera , il file package.json viene modificato in modo appropriato.

Le piattaforme e i plug-in sono archiviati nelle proprietà cordovaPlatforms e cordovaPlugins :

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

Ora è facile per gli altri sviluppatori sincronizzarsi quando estraggono un nuovo codice, semplicemente eseguendo ionic state restore quando necessario (aggiunta, eliminazione o aggiornamento della versione).

Errore comune n. 3: pensare che le prestazioni escano dagli schemi

Ionic si basa su AngularJS e le prestazioni del dispositivo sono spesso messe in discussione. Vorrei rassicurarti su questo punto: con un po' di background in AngularJS, puoi creare applicazioni di livello mondiale con Ionic.

L'esempio perfetto è l'app Sworkit creata con Ionic, ha una base di utenti di oltre 9 milioni, download di oltre 7 milioni e una media di 4,5 stelle su Google Play.

Se vuoi ottenere il meglio da AngularJS, ecco alcune cose che dovresti imparare prima di iniziare il tuo progetto.

$ guarda

Gli osservatori sono abituati ad ascoltare le modifiche all'ambito in AngularJS. Esistono fondamentalmente quattro tipi di $watch : $watch (normal) , $watch (deep) , $watchCollection e $watchGroup .

Ognuno di loro è diverso e scegliere quello giusto può fare un'enorme differenza in termini di prestazioni.

$ orologio (normale)

L'uso del normale $watch verificherà solo le proprietà dell'oggetto o gli elementi dell'array esistenti. Le modifiche superficiali, come l'aggiunta di una proprietà Object o il push di un nuovo elemento in un Array, non verranno prese in considerazione.

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

$guardare (profondo)

Il deep $watch si occupa delle modifiche superficiali e profonde, come le proprietà degli oggetti nidificati. Con questo $watch sei sicuro di non perdere nessuna modifica. Tuttavia, l'utilizzo di deep $watch ha implicazioni sulle prestazioni. Consiglio di usarlo con cautela.

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

$watchCollection

$watchCollection può essere considerato tra il normale $watch e il profondo $watch . Funziona anche confrontando i riferimenti agli oggetti, ma con il vantaggio di controllare anche le proprietà del tuo oggetto aggiungendo una proprietà Object o inserendo un nuovo elemento in un Array.

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

$ gruppo di controllo

Introdotto in AngularJS 1.3, $watchGroup consente di guardare più espressioni contemporaneamente.

Sebbene $watchGroup potrebbe non migliorare le prestazioni dell'applicazione rispetto al normale $watch , ha il vantaggio di essere più sintetico quando si guardano diverse espressioni di ambito.

 $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. } });

Tieni traccia di

La track by viene utilizzata per evitare inutili manipolazioni DOM quando si utilizza ng-repeat . Infatti, se il ciclo digest rileva che almeno un elemento della tua raccolta è cambiato, ng-repeat eseguirà nuovamente il rendering di tutti gli elementi. La manipolazione del DOM ha sempre effetti sulle prestazioni dell'applicazione, quindi meno hai e meglio è.

Per evitare di eseguire nuovamente il rendering della raccolta completa e aggiornare solo gli elementi che devono essere aggiornati, utilizzare track by con un identificatore univoco.

 <!-- 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>

Basta evitare di usare track by su collection-repeat .

Rilegatura una tantum

L'associazione una tantum, o :: , è stata introdotta in Angular 1.3 e ha un impatto reale sulle prestazioni dell'applicazione.

Fondamentalmente, l'uso del binding una tantum :: su un'espressione la rimuoverà dall'elenco $watchers quando viene popolata. Significa che l'espressione non sarà in grado di aggiornarsi anche se i dati cambiano.

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

Il nostro consiglio è di esaminare tutte le visualizzazioni dell'applicazione e pensare a ciò che potrebbe o non potrebbe essere aggiornato e utilizzare l'associazione una tantum :: di conseguenza. Sarà un enorme sollievo per il ciclo di digestione.

Si prega di notare che sfortunatamente la rilegatura una tantum non può essere utilizzata in una collection-repeat , poiché l'elenco degli elementi visualizzati sullo schermo cambia durante la pergamena.

Se desideri saperne di più sui suggerimenti e sui trucchi per le prestazioni di AngularJS e Ionic, ti consiglio di leggere il cheat sheet di Ultimate AngularJS e Ionic.

Errore comune n. 4: avere confusione con la logica della View Cache

Le applicazioni a pagina singola non memorizzano le pagine nella cache per impostazione predefinita. Probabilmente l'hai sperimentato utilizzando le applicazioni AngularJS, in cui lo scorrimento o gli input dell'utente non vengono salvati quando navighi avanti e indietro tra le pagine.

Con Ionic, dieci pagine vengono memorizzate nella cache per impostazione predefinita e questo può essere modificato a livello globale o per piattaforma.

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

Questa è un'ottima funzionalità, ma a volte è difficile per i principianti capire come gestire le pagine memorizzate nella cache.

Il problema è che quando l'utente torna a una pagina memorizzata nella cache, il controller non viene nuovamente istanziato, il che è diverso dalle applicazioni AngularJS e tutto è come se non avessi mai lasciato quella pagina.

In queste condizioni, come aggiornare i dati sulla pagina?

Presentazione degli eventi del ciclo di vita del controller

Rispetto ad AngularJS, Ionic offre molti eventi del ciclo di vita:

 $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(){});

Questi eventi sono necessari se vuoi avere il controllo sulla cache di visualizzazione.

L'evento $ionicView.loaded , ad esempio, viene attivato la prima volta che viene caricata una vista. Questo evento non verrà più attivato mentre questa vista è memorizzata nella cache, anche se l'utente torna su di essa. Questo è generalmente l'evento che useresti per avviare le variabili nello stesso modo in cui lo fai con l'evento $viewContentLoaded in AngularJS.

Se desideri recuperare i dati ogni volta che accedi a una vista, memorizzata nella cache o meno, puoi utilizzare l'evento $ionicView.enter .

Utilizzando l'evento giusto al momento giusto, puoi migliorare l'usabilità dell'applicazione.

Per quanto riguarda le prestazioni, l'utilizzo della visualizzazione della cache influisce solo sulle dimensioni del DOM. Quando una pagina viene memorizzata nella cache, tutti i suoi osservatori vengono disconnessi e la pagina è quindi solo alcuni elementi DOM in più che giacciono sulla tua pagina in attesa di essere riutilizzati.

La dimensione del DOM è importante per avere un'esperienza utente eccezionale, ma la memorizzazione nella cache di un massimo di dieci pagine sembra funzionare correttamente (ovviamente, a seconda di ciò che carichi nelle tue pagine).

Errore comune n. 5: non sapere Crosswalk per Android

Ogni versione di Android esegue un WebView diverso (un browser che esegue la tua applicazione). Le prestazioni sono diverse tra i dispositivi e possono essere davvero pessime sui vecchi dispositivi Android. Per ottenere la stessa esperienza con fluidità e reattività su ogni dispositivo Android, puoi installare Crosswalk. In pratica incorpora l'ultimo browser Chromium nella tua applicazione e aggiunge circa 20 Mb per APK, sia ARM che X86.

Crosswalk può essere installato semplicemente utilizzando Ionic CLI o Cordova CLI:

 ionic plugin add cordova-plugin-crosswalk-webview

Errore comune n. 6: provare a eseguire i plug-in Cordova all'interno del browser

La maggior parte degli sviluppatori che utilizzano Ionic vorrà che la propria app venga eseguita su iOS e Android. Dopo aver aggiunto la piattaforma ionic platform add ios android e alcuni plugin, il plugin ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts , un errore grossolano è pensare di poterli testare nel browser. Bene, potresti, ma solo dopo aver installato la piattaforma browser corretta. Tieni presente che non funziona con tutti i plugin.

I plugin di Cordova hanno lo scopo di interagire con l'API del dispositivo nativo tramite JavaScript. Il plug-in di contatto o il plug-in di orientamento del dispositivo funzioneranno quindi solo su un dispositivo.

Tuttavia, puoi facilmente testare il tuo codice su un dispositivo ed eseguirne il debug in remoto tramite il tuo computer.

Debug remoto su Android

Collega il tuo dispositivo e assicurati che sia rilevato correttamente dal tuo computer eseguendo adb devices (è richiesto Android SDK).

Crea la tua app e installala sul tuo dispositivo eseguendo ionic run android . Una volta avviata l'app sul dispositivo, apri la console tramite gli strumenti di sviluppo di Chrome (sul computer) chrome://inspect/#devices e ispeziona il tuo dispositivo.

Debug remoto su iOS

Collega il tuo dispositivo e assicurati che sia rilevato correttamente dal tuo computer. Crea la tua app e installala sul tuo dispositivo eseguendo ionic run ios --device .

Una volta avviata l'app sul dispositivo, apri gli strumenti di sviluppo di Safari (sul tuo computer) facendo clic su Develop > Your iPhone > Your app :

Esegui i plug-in Cordova all'interno del browser

L'esecuzione dei plug-in Cordova all'interno del browser è una funzionalità avanzata che dovresti conoscere. Da Ionic 1.2, il browser è ufficialmente supportato, quindi apre l'era delle applicazioni multipiattaforma ben oltre le piattaforme iOS e Android.

Con la piattaforma Cordova Browser, Electron e solo le tecnologie Web (JavaScript, HTML e CSS) possiamo ora creare applicazioni Ionic per browser e desktop (Windows, Linux e OSX).

Uno starter kit è disponibile su Github.

Piattaforma browser Cordova

Con la piattaforma Browser, puoi creare applicazioni Cordova per il browser. Significa che puoi usare i plugin di Cordova anche sul browser.

Può essere installato nello stesso modo in cui installi le piattaforme iOS o Android:

 cordova platform add browser

La tua applicazione deve essere compilata prima dell'uso esattamente come con iOS o Android:

 cordova run browser

Questo comando compilerà la tua app e aprirà il tuo browser predefinito.

Plugin multipiattaforma

Molti plugin come Network, Camera e Facebook supportano iOS, Android e la piattaforma Browser contemporaneamente, tutti con la stessa API.

Per illustrare che esiste un modo per sapere se il tuo dispositivo è online o offline su ogni piattaforma (iOS, Android, browser e desktop) utilizzando l'API ngCordova:

 // 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; });

Con questo in mente, ora puoi immaginare di creare prodotti che possono essere eseguiti ovunque con un'unica base di codice.

Errore comune n. 7: seguire l'architettura del kit di base per applicazioni su larga scala

Quando si utilizza il comando ionic start myapp , viene creato un progetto iniziale con la seguente struttura di cartelle:

 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

Questa è chiamata struttura Folder-by-Type, in cui i file JavaScript, CSS e HTML sono raggruppati per tipo. Per quanto possa sembrare facile per i principianti, questo tipo di architettura sfugge di mano abbastanza rapidamente. Semplicemente non scala.

Ecco alcuni motivi per non utilizzare la struttura Folder-by-Type:

• Il numero di file nelle tue cartelle può diventare enorme
• Trovare tutti i file che devi modificare per una funzione specifica può essere complicato
• Lavorare su una funzione porterà a molte cartelle aperte
• Non si adatta bene, più l'app cresce, più è difficile lavorarci

Raccomando piuttosto di utilizzare una struttura Folders-by-Feature, in cui i file JavaScript, CSS e HTML sono raggruppati per funzionalità o modulo AngularJS:

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

Motivi per utilizzare la struttura Cartelle per funzionalità:

• Il numero di file nelle tue cartelle è limitato a pochi
• Trovare tutti i file che devi modificare per una funzione specifica è facile: si trovano nella stessa cartella
• Puoi lavorare in modo indipendente su una funzione
• Sapere cosa rappresenta il modulo è facile: il nome della cartella è sufficiente
• Facile creare una nuova funzionalità, basta copiare/incollare una esistente
• Scala bene, puoi aggiungere tutte le nuove funzionalità che desideri senza rendere difficile il lavoro del tuo team

Si noti che questa architettura è vicina alla struttura Cartelle per componente che ora è l'impostazione predefinita nelle applicazioni Angular2/Ionic2.

Errore comune n. 8: associazione di eventi a onscroll e dimenticanza di requestAnimationFrame

Questa singola trappola è solitamente un errore del principiante, ma potrebbe avere probabilmente l'impatto peggiore sulle prestazioni. Considera questo:

 <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 }

Anche se Ionic fornisce throttling per queste azioni, può comunque essere molto lento. Fondamentalmente, tutto ciò che attiva un ciclo di digest dovrebbe essere differito e non attivato insieme alla pittura pesante, che è anche l'effetto dello scorrimento.

Molti degli obiettivi che gli sviluppatori hanno cercato di raggiungere legandosi agli eventi di scorrimento, e in particolare le animazioni, possono essere raggiunti anche utilizzando un metodo diverso. Ecco requestAnimationFrame .

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

Il codice sopra è un esempio molto semplice, controlla se l'utente è passato oltre la parte superiore dell'elemento. Ricorda di aggiungere alternative specifiche del fornitore per la compatibilità tra browser se intendi utilizzare l'esempio. In pratica funzionerà a una velocità ottimale, a seconda del browser, a 60 FPS o alla frequenza di aggiornamento dello schermo. Ma è ottimizzato e i framework di animazione ad alte prestazioni utilizzano questo metodo semplice.

Potresti anche voler esaminare element.getBoundingClientRect() , che fornisce informazioni sulla dimensione e sulla posizione di un nodo HTML.

Errore comune n. 9: creare prototipi di applicazioni ioniche manualmente

Ionic ha un design specifico, quasi un linguaggio visivo. Soprattutto con i prototipi e i prodotti in fase iniziale, è possibile risparmiare molto tempo e denaro utilizzando i componenti e gli stili disponibili. In realtà sono piuttosto minimali e hanno una buona estetica.

La presentazione di wireframe e modelli con funzionalità di base è diventata uno standard del settore. Per vedere un'immagine e vedere una vera app con componenti dinamici su un dispositivo mobile sono due tazze di tè molto diverse. Molti designer, e anche sviluppatori UX, utilizzano strumenti come Axure o Balsamiq, che consentono di creare rapidamente wireframe con funzionalità minime.

Ora, i creatori di Ionic hanno rilasciato uno strumento simile realizzato esclusivamente per gli sviluppatori di Ionic. Si chiama Creatore ionico. Ha un'interfaccia web drag and drop e supporta quasi tutto ciò che fornisce il core Ionic. La cosa fantastica è che consente di esportare il prototipo in diversi formati, con codice Ionic funzionante standard, e persino di creare l'applicazione e condividerla. Lo strumento è proprietario, ma molte delle opzioni sono gratuite.

Conclusione

Ionic ha rivoluzionato il settore delle applicazioni ibride in un modo che nessuno avrebbe potuto immaginare. Tuttavia, nel tempo le migliori pratiche e gli strumenti sono mancati di evoluzione. Di conseguenza, il numero di potenziali errori che gli sviluppatori possono fare è aumentato.

Gli sviluppatori Expert Ionic hanno un modo chiaro per fornire applicazioni di livello mondiale su più piattaforme contemporaneamente. Il modo è sfruttare gli strumenti disponibili, mantenere le prestazioni come una priorità assoluta e seguire le migliori pratiche.

Questo post non sarebbe stato possibile senza la creatività della straordinaria community di Ionic, Michal Mikolajczyk, Mike Hartington (team Ionic Core) e Katie Ginder-Vogel (Marketing & Communications Manager, Ionic). Grazie mille a tutti.