Ionic 2 vs. Ionic 1: guadagni in termini di prestazioni, nuovi strumenti e un grande passo avanti

Il progetto Ionic sta rapidamente guadagnando popolarità. Con oltre 27.000 stelle su GitHub, è diventato uno dei 50 progetti open source più popolari al mondo.

E poiché la versione stabile di Ionic 2 è stata recentemente annunciata, è il momento perfetto per gli ingegneri per analizzare e comprendere le differenze tra Ionic 2 e Ionic 1.

Ad alto livello, Ionic 2 è una riscrittura completa del progetto Ionic 1 con Angular >= 2.x. Dai miei oltre 2 anni di esperienza nell'uso di Ionic 1, ecco cosa significherà in termini pratici.

Prestazioni di rilevamento delle modifiche migliorate

Ionic 1 si basa su Angular 1.x e Ionic 2 si basa su Angular >= 2.x. L'aumento delle prestazioni che ottieni semplicemente usando Angular >= 2.x da solo è significativo.

Con Angular 1.x, per ottenere applicazioni performanti è necessaria una conoscenza approfondita del framework (come $watch , One-time binding e così via). Con Angular >= 2.,x le applicazioni sono praticamente performanti immediatamente.

La nuova versione di Angular ha abbandonato il famoso e denigrato ciclo digest (monitorando e testando ogni variabile dell'app ad ogni modifica). Invece, Angular >= 2.x si basa su Zone.js per tenere traccia delle modifiche alle applicazioni (sia sincrone che asincrone).

Vale la pena esplorare il rilevamento delle modifiche in Angular >= 2.x per capire come funzionano le cose sotto il cofano. In Angular >= 2.x, il rilevamento delle modifiche viene sempre eseguito dall'alto verso il basso. L'utilizzo della giusta strategia di rilevamento delle modifiche ( OnPush o Default ) nei propri componenti è di fondamentale importanza se si desidera controllare le prestazioni della propria applicazione.

Tutti i componenti di Ionic 2 utilizzano la strategia OnPush , il che significa che il rilevamento delle modifiche non viene eseguito sempre ma, invece, solo quando cambiano gli ingressi. Questa strategia evita anche il rendering non necessario dei sottoalberi dei componenti. Fondamentalmente è già ottimizzato per te.

Se vuoi saperne di più su come ottenere un'applicazione Ionic1 performante, ti suggerisco di leggere questo cheat sheet di Ultimate AngularJS e Ionic.

Prestazioni DOM più veloci

La manipolazione di Angular Document Object Model (DOM) si è evoluta molto. Se desideri un'interfaccia utente (UI) reattiva, la manipolazione DOM e le prestazioni JavaScript sono importanti.

Ad esempio, la creazione di 1.000 righe in una tabella richiede 126 millisecondi con JavaScript vanilla, il 110% in più (264 ms) con Angular. 1.x e solo il 40% in più (177 ms) con Angular >= 2. Come puoi vedere, le prestazioni di Angular >= 2.x sono migliori di Angular 1.x ed è simile alle prestazioni di React.

Ionic 2, ancora una volta, beneficia di questo aggiornamento delle prestazioni e lo fa "gratuitamente".

La nuova API per le animazioni web

Ionic 1 e Ionic 2 si basano ancora sulle animazioni CSS per le transizioni interne e le animazioni, ma poiché Ionic 2 è basato su Angular >= 2.x, gli sviluppatori hanno accesso alla nuova API Web Animations (W3C) tramite il sistema di animazione Angular.

L'API Web Animations è un'API JavaScript che fornisce agli sviluppatori l'accesso al motore di animazione del browser. Non è ancora supportato in tutti i browser, ma con un polyfill puoi usarlo subito e goderti uno dei modi più performanti e promettenti per animare il Web.

Fonte

L'API di animazione Angular >= 2.x ti consente di descrivere facilmente animazioni complesse (entrare e uscire da stati diversi o animazioni di gruppo) e ti dà accesso al ciclo di vita delle animazioni tramite callback.

 @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%)' })) ]) ]) ] })

Scorrimento nativo integrato

Lo scorrimento nativo consente a Ionic 2 di ascoltare gli eventi di scorrimento sulle visualizzazioni Web supportate. Esso rende
È Pull to Refresh , List Reordering o Infinite Scroll senza emulare tali eventi (scorrimento JavaScript).

Finora era necessario lo scorrimento JavaScript, ma le visualizzazioni Web Chromium (Android) e WKWebView (iOS) si sono evolute e ora supportano lo scorrimento nativo. È abilitato per impostazione predefinita solo su Android con Ionic 1 (da dicembre 2015) e abilitato su tutte le piattaforme con Ionic 2.

Il supporto allo scorrimento nativo offre prestazioni migliori e migliora l'esperienza dell'utente, contribuendo a garantire uno scorrimento fluido grazie agli eventi asincroni.

API dei componenti migliorata

Ionic 2 ti dà accesso a tutti i componenti che hanno reso famoso Ionic 1, ma ora sono migliorati e basati su Angular >= 2.x. Ecco l'elenco dei componenti più comuni:

• Pulsante
• Carta
• Icona
• Elenco
• Menù
• Modale
• Barra degli strumenti

L'API dei componenti è leggermente cambiata tra Ionic 1 e Ionic 2. Ad esempio, i componenti dello ion-spinner ionico Ionic 1 utilizzano l'attributo icon per il tipo di spinner:

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

Mentre Ionic 2 usa l'attributo name :

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

Come puoi vedere, se hai familiarità con l'API del componente Ionic 1, ti sentirai a tuo agio anche usando i componenti Ionic 2. Dovrai solo essere consapevole di queste differenze.

Con un impressionante elenco di componenti, tutto ciò che puoi fare con Ionic 1 è fattibile con Ionic 2 e anche di più.

Introduzione dei Web Worker

I Web Worker consentono alla tua applicazione di eseguire script in thread JavaScript in background. I lavoratori possono eseguire attività noiose e richieste HTTP al di fuori del contesto dell'applicazione (ad esempio, senza interferire con l'interfaccia utente). Oggi i Web Worker sono supportati da tutti i principali browser.

Tradizionalmente, tutti i framework erano costruiti sopra e facevano affidamento sugli oggetti window e document . Tuttavia, nei lavoratori nessuno dei due è disponibile. Con la nuova architettura Angular >=2 che ha disaccoppiato il renderer , l'esecuzione dell'applicazione all'interno di Web Workers (o qualsiasi altra piattaforma per quella materia) è più semplice.

Ionic 2 sta iniziando a sperimentare l'uso di Web Workers con il nuovo componente ion-img . Per ora, ion-img può essere utilizzato solo all'interno di un elenco di VirtualScroll. Delega la chiamata HTTP dell'immagine ai Web Worker e supporta anche il caricamento lento (ad esempio, solo il recupero e il rendering delle immagini sul viewport). La tua applicazione web ora si concentra solo sull'interfaccia utente e lascia che i lavoratori facciano il resto.

Ecco un esempio di come usarlo:

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

Tieni presente che questo è solo l'inizio e che ci aspettiamo di vedere più utilizzo o Web Worker nel prossimo futuro.

Vantaggi di TypeScript

Se stai usando Ionic 2, sai già che sta usando TypeScript. TypeScript è un superset di JavaScript ES2015 che viene compilato in JavaScript semplice. Con TypeScript, hai accesso a tutte le sue caratteristiche uniche (come interfacce, mixin e così via) e alle funzionalità ES2015 (come funzioni freccia, generatore, stringhe multilinea e così via).

Diamo un'occhiata a un esempio di un componente Angular >= 2.x che mostra il nome di un presidente degli Stati Uniti:

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

Utilizziamo un'interfaccia ( IPresident ) che descrive la forma dell'oggetto presidente. È interessante avere interfacce che descrivono ciò che stai manipolando, specialmente se ci sono più sviluppatori su un progetto. Se commetti un errore e, ad esempio, usi un boolean per il nome del presidente, il tuo IDE ti dirà che qualcosa non va anche prima che avvenga la compilazione.

Praticamente in qualsiasi IDE che utilizzi (Visual Studio Code, Atom, WebStorm o simili), troverai plug-in per abilitare il completamento automatico, il controllo del tipo e un linter.

TypeScript è un vero vantaggio per Ionic 2, poiché rende il tuo codice più comprensibile, ti aiuta a evitare errori di digitazione e ti aiuta a essere più produttivo (attraverso funzionalità come il completamento automatico, l'importazione automatica dei moduli, le definizioni dei suggerimenti al passaggio del mouse e CTRL + Click per vai alle definizioni).

Nuova CLI v2

Ionic CLI v2 aggiunge un modo per generare pagine, componenti, pipe e direttive, direttamente tramite la riga di comando.

Ad esempio, se vuoi creare una nuova pagina denominata MyPage , ecco il comando che puoi eseguire:

 $ 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

Il comando seguirà le convenzioni e creerà tre file per te:

Un file HTML per il tuo modello. Un file SASS per lo stile del tuo componente. Un file TypeScript per la logica del componente.

Ecco come appare il file my-page.ts generato:

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

Applicare le convenzioni tramite l'uso della CLI è ottimo quando si lavora in team. Angular 2.x e Ionic 2 stanno facendo un ottimo lavoro aiutando a promuovere una migliore comprensione di cosa dovrebbe essere un'architettura di app Angular. Naturalmente sei libero di discostarti dalle convenzioni, se lo desideri.

Imballaggio migliorato

Ionic 1 si basa sull'ecosistema Gulp per raggruppare le applicazioni, mentre Ionic 2 ti consente di selezionare i tuoi strumenti preferiti. Ionic 2 fornisce la propria raccolta di strumenti come un progetto separato: ionic-app-scripts.

Gli ionic-app-scripts si basano sull'idea che gli sviluppatori non dovrebbero preoccuparsi affatto della configurazione del packaging. L'unica dipendenza correlata al packaging che il tuo progetto avrà con Ionic 2 è @ionic/app-scripts . Per impostazione predefinita, utilizza Webpack ma puoi anche utilizzare Rollup.

Con Ionic 2 e CLI v2, le assets , così come i file TypeScript, risiedono nella stessa cartella src . Il www viene ora generato durante ogni build e pertanto dovrebbe essere rimosso dal monitoraggio del controllo della versione.

Introduzione dello strumento di segnalazione errori

La nuova CLI ha anche introdotto un ottimo strumento di segnalazione degli errori. Per ottenerlo, è necessario installare la versione Ionic >= 2.1:

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

Ora ogni volta che si verificano errori, verrà visualizzata una modale con informazioni significative a riguardo. Per esempio:

Ricevere notifiche sugli errori di runtime il prima possibile durante lo sviluppo è incredibilmente prezioso e Ionic 2 ha fatto un ottimo lavoro in questo senso.

Vantaggi della compilazione anticipata (AoT)

Ahead of Time Compilation (AoT) è una piccola rivoluzione nell'ecosistema Angular. Introdotto con Angular 2.x, AoT consente di precompilare i modelli in una fase di compilazione, invece di essere compilati al volo dal browser.

Anche se questa potrebbe non sembrare una grande differenza, in realtà lo è. Con AoT, non è necessario spedire il compilatore di modelli con l'applicazione. Questo ha due vantaggi. Innanzitutto, il pacchetto sarà più piccolo, il che avrà un impatto diretto sulla rete e quindi renderà più veloce il download dell'applicazione. In secondo luogo, l'app si avvierà più velocemente perché la compilazione di modelli al volo non è più necessaria.

Ionic 2 sfrutta appieno Angular 2.x AoT per ottimizzare gratuitamente le dimensioni e il tempo di caricamento della tua applicazione.

Ionic 2 è un enorme passo avanti

Nel complesso, Ionic 2 è un enorme passo avanti per l'industria mobile ibrida. Sebbene il set di componenti di Ionic 2 sia simile ai componenti di Ionic 1, Ionic 2 offre molti strumenti e miglioramenti delle prestazioni.

Infatti, con strumenti come TypeScript, ionic-app-scripts e Ionic CLI, gli sviluppatori di Ionic 2 possono essere più produttivi, possono produrre codice più gestibile e vengono avvisati degli errori di runtime non appena si verificano.

Ionic 2 fornisce anche un aumento gratuito delle prestazioni rispetto a Ionic 1, in particolare eliminando o riducendo i suoi colli di bottiglia (relativi al rilevamento delle modifiche, alle animazioni, al tempo di caricamento e così via).

Con Ionic 2, le tue applicazioni sembreranno più native che mai. Tiralo fuori per un giro. Sarai felice di averlo fatto.