Ionic 2 vs. Ionic 1: câștiguri de performanță, instrumente noi și un mare pas înainte

Proiectul Ionic câștigă rapid în popularitate. Cu peste 27.000 de stele pe GitHub, acesta a ajuns să devină unul dintre cele mai populare 50 de proiecte open source din întreaga lume.

Și din moment ce versiunea stabilă a lui Ionic 2 a fost anunțată recent, este momentul perfect pentru ingineri să analizeze și să înțeleagă diferențele dintre Ionic 2 și Ionic 1.

La un nivel înalt, Ionic 2 este o rescrie completă a proiectului Ionic 1 cu Angular >= 2.x. Din experiența mea de peste 2 ani în utilizarea Ionic 1, iată ce va însemna acest lucru în termeni practici.

Performanță îmbunătățită de detectare a schimbărilor

Ionic 1 se bazează pe Angular 1.x, iar Ionic 2 se bazează pe Angular >= 2.x. Creșterea performanței pe care o obțineți doar folosind Angular >= 2.x este semnificativă.

Cu Angular 1.x, pentru a obține aplicații performante a fost nevoie de o mulțime de cunoștințe profunde ale cadrului (cum ar fi $watch , Legarea unică și așa mai departe). Cu Angular >= 2.,x aplicațiile sunt destul de performante din cutie.

Noua versiune de Angular a renunțat la celebrul și condamnat ciclu de digest (urmărirea și testarea fiecărei variabile a aplicației la fiecare modificare). În schimb, Angular >= 2.x se bazează pe Zone.js pentru a urmări modificările aplicației (atât sincrone, cât și asincrone).

Detecția schimbărilor în Angular >= 2.x merită explorată pentru a înțelege cum funcționează lucrurile sub capotă. În Angular >= 2.x, detectarea modificărilor se efectuează întotdeauna de sus în jos. Utilizarea strategiei corecte de detectare a modificărilor ( OnPush sau Default ) în propriile componente este de o importanță capitală dacă doriți să controlați performanța aplicației dvs.

Toate componentele Ionic 2 folosesc strategia OnPush , ceea ce înseamnă că detectarea modificărilor nu se realizează tot timpul, ci, în schimb, doar atunci când intrările se modifică. Această strategie evită, de asemenea, redarea inutilă a subarborilor componentelor. Practic este deja optimizat pentru tine.

Dacă doriți să aflați mai multe despre cum să obțineți o aplicație performantă Ionic1, vă sugerez să citiți această fișă de performanță Ultimate AngularJS și Ionic.

Performanță DOM mai rapidă

Manipularea Angular Document Object Model (DOM) a evoluat foarte mult. Dacă doriți o interfață de utilizator (UI) reactivă, manipularea DOM și performanța JavaScript sunt importante.

De exemplu, crearea a 1.000 de rânduri într-un tabel durează 126 de milisecunde cu JavaScript vanilla, cu 110% mai mult (264 ms) cu Angular. 1.x și doar cu 40% mai mult (177ms) cu Angular >= 2. După cum puteți vedea, performanța lui Angular >= 2.x este mai bună decât Angular 1.x și este similară cu performanța React.

Ionic 2, din nou, beneficiază de acest upgrade de performanță și o face „gratuit”.

Noul API pentru animații web

Ionic 1 și Ionic 2 se bazează în continuare pe animații CSS pentru tranziții și animații interne, dar întrucât Ionic 2 se bazează pe Angular >= 2.x, dezvoltatorii au acces la noul API Web Animations (W3C) prin intermediul sistemului de animație Angular.

API-ul Web Animations este un API JavaScript care oferă dezvoltatorilor acces la motorul de animație al browserului. Nu este încă acceptat în toate browserele, dar cu un polyfill îl puteți folosi chiar acum și vă puteți bucura de una dintre cele mai performante și promițătoare moduri de a anima Web-ul.

Sursă

API-ul de animație Angular >= 2.x vă permite să descrieți cu ușurință animații complexe (intrarea și ieșirea din diferite stări sau animații de grup) și vă oferă acces la ciclul de viață al animațiilor prin apeluri inverse.

 @Component({ template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `, animations: [ trigger('flyInOut', [ state('in', style({ opacity: 1, transform: 'translateX(0)' })), transition('void => *', [ style({ opacity: 0, transform: 'translateX(-100%)' }), animate('0.2s ease-in') ]), transition('* => void', [ animate('0.2s 10 ease-out', style({ opacity: 0, transform: 'translateX(100%)' })) ]) ]) ] })

Defilare nativă încorporată

Derularea nativă îi permite lui Ionic 2 să asculte evenimentele de defilare pe WebView-uri acceptate. Face
Pull to Refresh , List Reordering sau Infinite Scroll posibil fără a emula aceste evenimente (defilare JavaScript).

Până acum, defilarea JavaScript era necesară, dar WebView-urile Chromium (Android) și WKWebView (iOS) au evoluat și acum acceptă derularea nativă. Este activat numai implicit pe Android cu Ionic 1 (din decembrie 2015) și activat pe toate platformele cu Ionic 2.

Suportul nativ de defilare aduce performanțe mai bune și îmbunătățește experiența utilizatorului, ajutând la asigurarea unei derulări fluide datorită evenimentelor asincrone.

API-ul de componente îmbunătățit

Ionic 2 vă oferă acces la toate componentele care l-au făcut celebru pe Ionic 1, dar acum sunt îmbunătățite și se bazează pe Angular >= 2.x. Iată lista celor mai comune componente:

• Buton
• Card
• Pictogramă
• Listă
• Meniul
• Modal
• Bara de instrumente

API-ul componentelor s-a schimbat puțin între Ionic 1 și Ionic 2. De exemplu, componentele ion-spinner Ionic 1 folosesc atributul icon pentru tipul de spinner:

 <ion-spinner icon="bubbles"></ion-spinner>

În timp ce Ionic 2 folosește atributul name :

 <ion-spinner name="bubbles"></ion-spinner>

După cum puteți vedea, dacă sunteți familiarizat cu API-ul pentru componente Ionic 1, vă veți simți confortabil folosind și componentele Ionic 2. Va trebui doar să fii conștient de aceste diferențe.

Cu o listă impresionantă de componente, tot ce puteți face cu Ionic 1 este realizabil cu Ionic 2 și chiar mai mult.

Prezentarea lucrătorilor web

Lucrătorii web permit aplicației dvs. să ruleze scripturi în fire JavaScript de fundal. Lucrătorii pot efectua sarcini obositoare și solicitări HTTP în afara contextului aplicației dvs. (adică, fără a interfera cu interfața cu utilizatorul). Astăzi, lucrătorii web sunt acceptați de toate browserele majore.

În mod tradițional, toate cadrele erau construite deasupra window și obiectele document și se bazau pe acestea. Cu toate acestea, la muncitori niciunul nu este disponibil. Cu noua arhitectură Angular >=2 care a decuplat renderer , rularea aplicației în Web Workers (sau orice altă platformă de altfel) este ușoară.

Ionic 2 începe să experimenteze cu utilizarea Web Workers cu noua componentă ion-img . Deocamdată, ion-img poate fi folosit doar într-o listă VirtualScroll. Delegă apelul HTTP de imagine către lucrătorii web și, de asemenea, acceptă încărcare leneșă (adică, regăsește și redă doar imagini în fereastra de vizualizare). Aplicația dvs. web se concentrează acum doar pe interfața de utilizare și îi permite lucrătorilor să facă restul.

Iată un exemplu de utilizare:

 <ion-img width="80" height="80" [src]="imageSrc"></ion-img>

Rețineți că acesta este doar începutul și că ne așteptăm să vedem mai multe utilizări sau lucrători web în viitorul apropiat.

Avantajele TypeScript

Dacă ați folosit Ionic 2, știți deja că folosește TypeScript. TypeScript este un superset de JavaScript ES2015 care se compilează în JavaScript simplu. Cu TypeScript, aveți acces la toate caracteristicile sale unice (cum ar fi interfețele, mixurile și așa mai departe) și caracteristicile ES2015 (cum ar fi funcțiile de săgeți, generatorul, șirurile de mai multe linii și așa mai departe).

Să ne uităm la un exemplu de componentă Angular >= 2.x care afișează numele unui președinte al Statelor Unite:

 import { Component } from '@angular/core'; export interface IPresident { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{president.name}}</h2> ` }) export class AppComponent { title:string = 'President of the United States'; president: IPresident = { id: 44, name: 'Barack Obama' }; }

Folosim o interfață ( IPresident ) care descrie forma obiectului President. Este interesant să ai interfețe care descriu ceea ce manipulezi, mai ales dacă există mai mulți dezvoltatori pe un proiect. Dacă faci o greșeală și, de exemplu, folosești un boolean pentru numele președintelui, IDE-ul tău îți va spune că ceva nu este în regulă chiar înainte să se întâmple compilarea.

În aproape orice IDE pe care îl utilizați (Visual Studio Code, Atom, WebStorm sau altele asemenea), veți găsi pluginuri pentru a activa completarea automată, verificarea tipului și un linter.

TypeScript este un real avantaj pentru Ionic 2, deoarece vă face codul mai ușor de înțeles, vă ajută să evitați greșelile de tip și vă ajută să fiți mai productiv (prin funcții precum completarea automată, importul automat al modulelor, definițiile tooltip la hover și CTRL + Click pentru mergeți la definiții).

Tot nou CLI v2

Ionic CLI v2 adaugă o modalitate de a genera pagini, componente, conducte și directive direct prin linia de comandă.

De exemplu, dacă doriți să creați o pagină nouă numită MyPage , iată comanda pe care o puteți rula:

 $ ionic generate page MyPage √ Create src/pages/my-page/my-page.html √ Create src/pages/my-page/my-page.ts √ Create src/pages/my-page/my-page.scss

Comanda va respecta convențiile și va crea trei fișiere pentru dvs.:

Un fișier HTML pentru șablonul dvs. Un fișier SASS pentru stilul dvs. de componentă. Un fișier TypeScript pentru logica componentei dvs.

Iată cum arată fișierul my-page.ts generat:

 import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; @Component({ selector: 'page-my-page', templateUrl: 'my-page.html' }) export class MyPagePage { constructor(public navCtrl: NavController, public navParams: NavParams) {} ionViewDidLoad() { console.log('ionViewDidLoad MyPagePage'); } }

Aplicarea convențiilor prin utilizarea CLI este excelentă atunci când lucrați într-o echipă. Angular 2.x și Ionic 2 fac o treabă grozavă de a ajuta la promovarea unei mai bune înțelegeri a ceea ce ar trebui să fie o arhitectură de aplicație Angular. Desigur, sunteți liber să vă abateți de la convenții, dacă doriți.

Ambalare îmbunătățită

Ionic 1 se bazează pe ecosistemul Gulp pentru a combina aplicații, în timp ce Ionic 2 vă permite să selectați instrumentele preferate. Ionic 2 oferă propria sa colecție de instrumente ca proiect separat: ionic-app-scripts.

ionic-app-scripts se bazează pe ideea că dezvoltatorii nu ar trebui să-și facă griji cu privire la configurarea ambalajului. Singura dependență legată de ambalare pe care proiectul dumneavoastră o va avea cu Ionic 2 este @ionic/app-scripts . În mod implicit, folosește Webpack, dar puteți folosi și Rollup.

Cu Ionic 2 și CLI v2, assets , precum și fișierele TypeScript, locuiesc în același folder src . www este acum generat în timpul fiecărei versiuni și, prin urmare, ar trebui eliminat din urmărirea controlului versiunilor.

Introducerea Instrumentului de raportare a erorilor

Noul CLI a introdus și un instrument excelent de raportare a erorilor. Pentru a-l obține, trebuie să instalați versiunea Ionic >= 2.1:

 $ npm install -g ionic $ ionic -v # should return at least 2.1.12

Acum, de fiecare dată când aveți erori, va apărea un modal cu informații semnificative despre acesta. De exemplu:

A fi notificat despre erorile de rulare cât mai curând posibil în timpul dezvoltării este incredibil de valoros, iar Ionic 2 a făcut o treabă grozavă în acest sens.

Beneficiile compilației înainte de timp (AoT)

Ahead of Time Compilation (AoT) este o mică revoluție în ecosistemul Angular. Introdus cu Angular 2.x, AoT permite ca șabloanele să fie pre-compilate într-un pas de construire, în loc să fie compilate din mers de browser.

Deși aceasta poate să nu pară o mare diferență, de fapt este. Cu AoT, nu trebuie să livrăm compilatorul de șabloane împreună cu aplicația. Acest lucru are două avantaje. În primul rând, pachetul va fi mai mic, ceea ce are un impact direct asupra rețelei și, prin urmare, face aplicația dvs. mai rapidă de descărcat. În al doilea rând, aplicația se va porni mai rapid, deoarece compilarea șablonului din mers nu mai este necesară.

Ionic 2 profită din plin de Angular 2.x AoT pentru a optimiza gratuit dimensiunea și timpul de încărcare a aplicației dvs.

Ionic 2 este un pas uriaș înainte

În general, Ionic 2 este un pas uriaș înainte pentru industria mobilă hibridă. Deși setul de componente Ionic 2 este similar cu componentele Ionic 1, Ionic 2 oferă o mulțime de instrumente și îmbunătățiri ale performanței.

Într-adevăr, cu instrumente precum TypeScript, ionic-app-scripts și Ionic CLI, dezvoltatorii Ionic 2 pot fi mai productivi, pot produce cod mai ușor de întreținut și sunt alertați cu privire la erorile de rulare imediat ce acestea apar.

Ionic 2 oferă, de asemenea, o creștere gratuită a performanței față de Ionic 1, în special prin eliminarea sau reducerea blocajelor sale (legate de detectarea modificărilor, animații, timpul de încărcare și așa mai departe).

Cu Ionic 2, aplicațiile tale se vor simți mai native ca niciodată. Scoate-l pentru o învârtire. Vei fi bucuros că ai făcut-o.