Cele mai frecvente 9 greșeli pe care le fac dezvoltatorii Ionic

Introducere

Ionic există de doi ani. Este un set excelent de instrumente pentru dezvoltarea aplicațiilor hibride bazate pe AngularJS. Ionic este extrem de popular în acest moment, cu peste un milion de aplicații construite și o comunitate în creștere de mii de dezvoltatori.

De la prima lansare a lui Ionic, timpul a trecut, iar tehnologiile web și cele mai bune practici au evoluat în multe feluri. Prin urmare, este greu de determinat ce cale să urmezi atunci când pornești un nou proiect. În aceste condiții, dezvoltatorii pot face greșeli care pot afecta calitatea aplicațiilor lor sau productivitatea echipei lor.

Citind următoarele greșeli comune, veți avea cheile pentru a evita problemele fundamentale și pentru a crea aplicații performante și scalabile cu Ionic.

Greșeala comună nr. 1: a uitat să activați derularea nativă

Native Scrolling îi permite lui Ionic să asculte evenimentele de defilare pe vizualizările web acceptate. Face posibilă tragerea pentru reîmprospătare , reordonarea listelor și derularea infinită fără derularea JavaScript, care a fost creată într-o perioadă în care browserele nu aveau evenimente de defilare adecvate.

Native Scrolling este activată implicit pe Android începând cu Ionic 1.2 (decembrie 2015). Este o îmbunătățire uriașă a performanței și a experienței utilizatorului, deoarece asigură o derulare lină din cauza evenimentelor asincrone.

Din păcate, din cauza lipsei de evenimente adecvate pe iOS, defilarea nativă nu este încă activată pentru platforma respectivă.

Dacă utilizați o versiune anterioară versiunii 1.2, puteți activa Native Scrolling pentru Android folosind $ionicConfigProvider :

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

De asemenea, puteți activa sau dezactiva Native Scrolling pe orice pagină utilizând directiva overflow-scroll pentru orice ion-content :

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

Vă rugăm să rețineți că, din păcate, repetarea colecției, care permite aplicației dvs. să arate liste uriașe de articole, nu poate fi acoperită de derularea nativă.

Greșeala comună #2: Nu folosiți CLI-ul Ionic pentru a instala platforme și pluginuri

Ionic CLI adaugă caracteristici la Cordova CLI. Persistența platformelor și a pluginurilor este o caracteristică excelentă pe care o adaugă Ionic CLI.

Problema cu Cordova CLI este că platformele și pluginurile pe care le instalați sunt instalate numai pe computer. Când lucrați într-o echipă, pentru a evita erori, doriți să partajați același mediu, platforme și pluginuri. Cu Cordova CLI, este mai greu să mențineți proiectul sincronizat între mașinile dezvoltatorilor. Da, ați putea să comite folderele platforme și pluginuri, dar nu este recomandat.

Când utilizați Ionic CLI pentru a instala platforme ionic platform add ios și pluginuri ionic plugin add camera , fișierul package.json este editat corespunzător.

Platformele și pluginurile sunt stocate în proprietățile cordovaPlatforms și cordovaPlugins :

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

Acum este ușor pentru alți dezvoltatori să se sincronizeze atunci când extrag un cod nou, pur și simplu rulând ionic state restore atunci când este necesar (adăugare, ștergere sau actualizare a versiunii).

Greșeala comună #3: Performanța de gândire iese din cutie

Ionic se bazează pe AngularJS, iar performanța dispozitivului este adesea pusă la îndoială. Aș dori să vă liniștesc cu privire la acest punct: cu puțin fundal AngularJS, puteți crea aplicații de talie mondială cu Ionic.

Exemplul perfect este aplicația Sworkit care este construită cu Ionic, are o bază de utilizatori de peste 9 milioane, descărcări de peste 7 milioane și o medie de 4,5 stele pe Google Play.

Dacă doriți să obțineți cele mai bune rezultate din AngularJS, iată câteva lucruri pe care ar trebui să le învățați înainte de a vă începe proiectul.

$watch

Observatorii sunt obișnuiți să asculte modificările domeniului în AngularJS. Există, practic, patru tipuri de $watch : $watch (normal) , $watch (deep) , $watchCollection și $watchGroup .

Fiecare dintre ele este diferit, iar alegerea celui potrivit poate face o diferență uriașă în ceea ce privește performanța.

$watch (normal)

Utilizarea $watch -ului normal va verifica numai proprietățile obiect existente sau elementele Array. Modificările superficiale, cum ar fi adăugarea unei proprietăți Object sau împingerea unui element nou într-un Array, nu vor fi luate în considerare.

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

$watch (profund)

Deep $watch are grijă de modificările superficiale și de modificările profunde, cum ar fi proprietățile obiectului imbricat. Cu acest $watch sunteți sigur că nu veți rata nicio modificare. Cu toate acestea, utilizarea deep $watch are implicații de performanță. Aș sfătui să-l folosești cu prudență.

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

$watchColection

$watchCollection poate fi considerată între $watch-ul normal și $watch $watch -ul profund. Funcționează și comparând referințe la obiecte, dar cu avantajul de a urmări superficial proprietățile obiectului dvs. prin adăugarea unei proprietăți Object sau împingerea unui element nou într-un Array.

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

$watchGroup

Introdus în AngularJS 1.3, $watchGroup permite vizionarea mai multor expresii simultan.

În timp ce $watchGroup ar putea să nu îmbunătățească performanța aplicației dvs. în comparație cu $watch obișnuit, are avantajul de a fi mai sintetic atunci când vizionați mai multe expresii de domeniu.

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

Urmăriți de

track by este folosit pentru a evita manipularea inutilă a DOM atunci când utilizați ng-repeat . Într-adevăr, dacă ciclul de digest constată că cel puțin un element al colecției tale s-a schimbat, ng-repeat va reda toate elementele. Manipularea DOM are întotdeauna efecte asupra performanței aplicației, așa că cu cât aveți mai puține, cu atât mai bine.

Pentru a evita redarea din nou a colecției complete și pentru a actualiza doar elementele care trebuie actualizate, utilizați track by cu un identificator unic.

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

Evitați doar să utilizați track by on collection-repeat .

Legare unică

Legarea unică sau :: a fost introdusă în Angular 1.3 și are un impact real asupra performanței aplicației dvs.

Practic, utilizarea legăturii unice :: pe o expresie o va elimina din lista $watchers când este populată. Înseamnă că expresia nu se va putea actualiza chiar dacă datele se modifică.

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

Sfatul nostru este să parcurgeți toate punctele de vedere ale aplicației dvs. și să vă gândiți la ce ar putea sau nu să fie actualizat și să utilizați legarea unică :: în consecință. Va fi o ușurare uriașă pentru ciclul de digestie.

Vă rugăm să rețineți că, din păcate, legarea unică nu poate fi utilizată într-o collection-repeat , deoarece lista articolelor afișate pe ecran se modifică pe defilare.

Dacă doriți să aflați mai multe despre sfaturi și trucuri de performanță AngularJS și Ionic, vă recomand să citiți fișa de performanță Ultimate AngularJS și Ionic.

Greșeala obișnuită #4: Confuzii cu logica View Cache

Aplicațiile cu o singură pagină nu memorează în cache paginile în mod implicit. Probabil ați experimentat-o ​​folosind aplicațiile AngularJS, unde derularea sau intrările utilizatorului nu sunt salvate atunci când navigați înainte și înapoi între pagini.

Cu Ionic, zece pagini sunt memorate în cache în mod implicit, iar acest lucru poate fi schimbat la nivel global sau pe platformă.

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

Aceasta este o caracteristică grozavă, dar uneori este greu pentru începători să înțeleagă cum să se ocupe de paginile stocate în cache.

Problema este că atunci când utilizatorul revine la o pagină stocată în cache, controlerul nu este reinstanțat din nou, ceea ce este diferit de aplicațiile AngularJS și totul este ca și cum nu ai părăsit pagina respectivă.

În aceste condiții, cum ar trebui să actualizați datele de pe pagină?

Vă prezentăm evenimentele ciclului de viață al controlerului

În comparație cu AngularJS, Ionic oferă multe evenimente ciclului de viață:

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

Aceste evenimente sunt necesare dacă doriți să aveți control asupra memoriei cache de vizualizare.

Evenimentul $ionicView.loaded , de exemplu, este declanșat prima dată când este încărcată o vizualizare. Acest eveniment nu va mai fi declanșat cât timp această vizualizare este stocată în cache, chiar dacă utilizatorul revine la el. Acesta este, în general, evenimentul pe care l-ați folosi pentru a iniția variabile în același mod în care faceți cu evenimentul $viewContentLoaded în AngularJS.

Dacă doriți să preluați date de fiecare dată când introduceți o vizualizare, în cache sau nu, puteți utiliza evenimentul $ionicView.enter .

Folosind evenimentul potrivit la momentul potrivit, puteți îmbunătăți gradul de utilizare al aplicației.

În ceea ce privește performanța, utilizarea vizualizării cache afectează doar dimensiunea DOM. Când o pagină este stocată în cache, toți cei care urmăresc ei sunt deconectați și, prin urmare, pagina este doar câteva elemente DOM aflate pe pagina dvs. care așteaptă să fie utilizate din nou.

Mărimea DOM-ului contează pentru a avea o experiență excelentă de utilizator, dar păstrarea în cache a până la zece pagini pare să funcționeze bine (desigur, în funcție de ceea ce încărcați în paginile dvs.).

Greșeala comună #5: Nu știu despre Crosswalk pentru Android

Fiecare versiune de Android rulează un WebView diferit (un browser care rulează aplicația dvs.). Performanța este diferită în funcție de dispozitiv și poate fi foarte proastă pe vechile dispozitive Android. Pentru a obține aceeași experiență cu fluiditate și capacitate de răspuns pe fiecare dispozitiv Android, puteți instala Crosswalk. Practic, încorporează cel mai recent browser Chromium în aplicația dvs. și adaugă aproximativ 20 Mb per APK, atât ARM, cât și X86.

Crosswalk poate fi instalat simplu folosind Ionic CLI sau Cordova CLI:

 ionic plugin add cordova-plugin-crosswalk-webview

Greșeala comună #6: Încercarea de a rula pluginuri Cordova în browser

Majoritatea dezvoltatorilor care folosesc Ionic vor dori ca aplicația lor să ruleze pe iOS și Android. După ce ați adăugat platformele ionic platform add ios android și unele pluginuri ionic plugin add cordova-plugin-device-orientation cordova-plugin-contacts , o greșeală neobișnuită este să credeți că le puteți testa în browser. Ei bine, ați putea, dar numai după ce instalați platforma de browser adecvată. Rețineți că nu funcționează cu toate pluginurile.

Pluginurile Cordova sunt menite să interacționeze cu API-ul nativ al dispozitivului prin JavaScript. Prin urmare, pluginul de contact sau pluginul de orientare a dispozitivului va funcționa numai pe un dispozitiv.

Cu toate acestea, puteți testa cu ușurință codul pe un dispozitiv și îl puteți depana de la distanță prin computer.

Depanare la distanță pe Android

Conectați-vă dispozitivul și asigurați-vă că acesta este detectat corect de computer prin rularea adb devices (este necesar Android SDK).

Construiește-ți aplicația și instalează-o pe dispozitiv rulând ionic run android . Odată ce aplicația dvs. este lansată pe dispozitiv, deschideți consola prin instrumentele de dezvoltare Chrome (pe computer) chrome://inspect/#devices și inspectați-vă dispozitivul.

Depanare la distanță pe iOS

Conectați-vă dispozitivul și asigurați-vă că acesta este detectat corect de computer. Creați-vă aplicația și instalați-o pe dispozitiv rulând ionic run ios --device .

Odată ce aplicația dvs. este lansată pe dispozitiv, deschideți instrumentele de dezvoltare Safari (pe computer) făcând clic pe Develop > Your iPhone > Your app .:

Rulați pluginurile Cordova în browser

Rularea pluginurilor Cordova în browser este o caracteristică avansată despre care ar trebui să știți. Începând cu Ionic 1.2, browserul este acceptat oficial, așa că deschide era aplicațiilor multiplatforme mult dincolo de platformele iOS și Android.

Cu platforma Cordova Browser, Electron și numai tehnologiile Web (JavaScript, HTML și CSS) putem acum construi aplicații Ionic pentru browser și desktop (Windows, Linux și OSX).

Un kit de pornire este disponibil pe Github.

Platforma de browser Cordova

Cu platforma Browser, puteți crea aplicații Cordova pentru browser. Înseamnă că poți folosi și pluginurile Cordova în browser.

Poate fi instalat în același mod în care instalați platformele iOS sau Android:

 cordova platform add browser

Aplicația dvs. trebuie să fie compilată înainte de utilizare exact ca în cazul iOS sau Android:

 cordova run browser

Această comandă va compila aplicația și va deschide browserul implicit.

Pluginuri multiplatforme

O mulțime de plugin-uri precum Network, Camera și Facebook acceptă iOS, Android și platforma Browser în același timp - toate cu același API.

Pentru a ilustra faptul că există o modalitate de a ști dacă dispozitivul tău este online sau offline pe fiecare platformă (iOS, Android, Browser și Desktop) folosind ngCordova API:

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

Având în vedere acest lucru, vă puteți imagina acum crearea de produse care pot rula oriunde cu o singură bază de cod.

Greșeala comună #7: Urmărirea arhitecturii kitului de pornire pentru aplicații la scară largă

Când utilizați comanda ionic start myapp , este creat un proiect de pornire cu următoarea structură de foldere:

 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

Aceasta se numește o structură Folder-by-Type, în care fișierele JavaScript, CSS și HTML sunt grupate pe tipuri. Deoarece ar putea părea ușor pentru începători, acest tip de arhitectură scapă destul de repede de sub control. Pur și simplu nu se scalează.

Iată câteva motive pentru a nu utiliza structura Folder-by-Type:

• Numărul de fișiere din folderele dvs. poate deveni mare
• Găsirea tuturor fișierelor pe care trebuie să le modificați pentru o anumită caracteristică poate fi dificilă
• Lucrul la o funcție va duce la multe foldere deschise
• Nu se scalează bine, cu cât aplicația crește, cu atât este mai dificil să lucrezi la ea

Recomand mai degrabă să utilizați o structură Folders-by-Feature, în care fișierele JavaScript, CSS și HTML sunt grupate după caracteristică sau modul AngularJS:

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

Motive pentru a utiliza structura Folders-by-Feature:

• Numărul de fișiere din folderele dvs. este limitat la puține
• Găsirea tuturor fișierelor pe care trebuie să le modificați pentru o anumită caracteristică este ușoară - acestea se află în același folder
• Puteți lucra independent la o funcție
• A ști ce reprezintă modulul este ușor - numele folderului este suficient
• Ușor de creat o funcție nouă, pur și simplu copiați/lipiți una existentă
• Se scalează bine, puteți adăuga oricâte funcții noi doriți, fără a îngreuna munca la care echipa dvs

Vă rugăm să rețineți că această arhitectură este aproape de structura Folders-by-Component, care este acum implicită în aplicațiile Angular2/Ionic2.

Greșeala comună #8: legarea evenimentelor la onscroll și uitarea requestAnimationFrame

Această singură capcană este de obicei o greșeală a începătorului, dar poate avea cel mai rău impact asupra performanței. Gandeste-te la asta:

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

Chiar dacă Ionic oferă throttling pentru aceste acțiuni, poate fi totuși foarte lent. Practic, orice declanșează o buclă de digest ar trebui să fie amânat și nu declanșat împreună cu pictura grea, care este și efectul derulării.

Multe dintre obiectivele pe care dezvoltatorii au încercat să le atingă prin legarea evenimentelor de defilare, și în special animațiile, pot fi atinse folosind o metodă diferită. Iată requestAnimationFrame .

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

Codul de mai sus este un exemplu foarte simplu, verificând dacă utilizatorul a derulat peste partea de sus a elementului. Nu uitați să adăugați alternative specifice furnizorului pentru compatibilitatea între browsere dacă intenționați să utilizați exemplul. Practic va rula la o viteză optimă, în funcție de browser, la 60 FPS sau la rata de reîmprospătare a ecranului. Dar este optimizat, iar cadrele de animație de înaltă performanță utilizează această metodă simplă.

De asemenea, poate doriți să căutați element.getBoundingClientRect() , care oferă informații despre dimensiunea și poziția unui nod HTML.

Greșeala comună #9: prototiparea manuală a aplicațiilor ionice

Ionic are un design specific, aproape un limbaj vizual. În special cu prototipuri și produse în stadiu incipient, se pot economisi mult timp și cheltuieli prin utilizarea componentelor și stilurilor disponibile. Sunt de fapt destul de minimale și au o estetică bună.

Prezentarea wireframes-urilor și a machetelor cu funcționalitate de bază a devenit un standard în industrie. A vedea o imagine și a vedea o aplicație reală cu componente dinamice pe un dispozitiv mobil sunt două căni de ceai foarte diferite. Mulți designeri, dar și dezvoltatori UX, folosesc instrumente precum Axure sau Balsamiq, care permit realizarea rapidă a wireframe-urilor cu funcționalitate minimă.

Acum, creatorii lui Ionic au lansat un instrument similar creat exclusiv pentru dezvoltatorii Ionic. Se numește Creator Ionic. Are o interfață web drag and drop și acceptă aproape tot ceea ce oferă core Ionic. Ceea ce este grozav la el este că permite să exporti prototipul în mai multe formate, cu cod Ionic standard de lucru, și chiar să construiești aplicația și să o partajezi. Instrumentul este proprietar, dar multe dintre opțiuni sunt gratuite.

Concluzie

Ionic a revoluționat industria aplicațiilor hibride într-un mod pe care nimeni nu și-ar fi putut imagina. Cu toate acestea, de-a lungul timpului, cele mai bune practici și instrumente au lipsit de evoluție. În consecință, numărul de potențiale greșeli pe care dezvoltatorii le pot face a crescut.

Dezvoltatorii experți Ionic au o modalitate clară de a livra aplicații de clasă mondială pe mai multe platforme simultan. Calea este să folosiți instrumentele disponibile, să păstrați performanța ca prioritate de top și să urmați cele mai bune practici.

Această postare nu ar fi fost posibilă fără creativitatea uimitoarei comunități Ionic, Michal Mikolajczyk, Mike Hartington (echipa Ionic Core) și Katie Ginder-Vogel (Manager de marketing și comunicare, Ionic). Vă mulțumesc mult tuturor.