Copertina "Ionic Framework 3"

Ionic Framework 3: scopriamo le novità e come aggiornare i progetti.

E' stato rilasciata la terza versione di Ionic, il popolare framework per lo sviluppo di applicazioni mobile multipiattaforma. Vediamo le novità e come fare l'aggiornamento dalla versione 2.

Nemmeno il tempo di parlarvi di Ionic 2 che il team dietro al Framework annuncia il rilascio della versione 3.

Tutto il tempo dedicato per aggiornarsi alla seconda versione è quindi inutile?
Assolutamente no! Gli sviluppatori di Ionic hanno precisato che non si tratta di un major update ma semplicemente hanno cambiato il sistema di versioning passando a SemVers esattamente come fatto da Angular JS che è passato alla versione 4 (si, hai letto bene, siamo già al numero 4). Ionic si allinea quindi ad AngluarJS e alla versione 2.2 di Typescript.

Il rilascio di Ionic Framework 3 è stato accompagnato dal rilascio di Ionic Native 3 interfaccia qualche giorno prima mentre per quanto riguarda invece la CLI la versione 3 è attualmente in beta. Quando andremo ad avviare un nuovo progetto l’opzione -v2 vi restituirà adesso la versione 3 in quanto con quel comando avrete momentaneamente sempre l’ultima versione del framework.
Una volta che la nuova versione della CLI viene rilasciata non sarà necessario passare alcun parametro, vi verrà proposto sempre l’ultima versione a meno di altre esigenze e parametri.

Le Novità

Angular 4.0

In questa nuova versione Ionic 3 adotta la quarta versione del Framework di Google, adottando lo stesso sistema di versioning, ulteriore dimostrazione di un lavoro che vuole essere il più possibile parallelo.

Compatibilità con TypeScript 2.2

Aggiornato Angular non si poteva non aggiornare TypeScript, il superset di JavaScript che in quest’ultima versione aggiunge il supporto ai @mixin e offre vari miglioramenti in termini di performance.

Entrambe le novità comportano ottimizzazioni all’avvio e apk più leggeri.

Lady Loading e PageDecorator

L’avvio di tutto il blocco delle pagine rappresente un grosso peso nelle tempistiche di avvio. Con il supporto al Lazy Loading possiamo far caricare ogni singolo componente solo ed esclusivamente quando ci serve e viene attivato, comportando una riduzione nei tempi di caricamento.

PageDecorator è invece la novità all’interno delle singole Pages strettamente collegato al Lazy Loading e al DeepLinking.

Queste sono le principali novità, per una lista completa vai al changelog.

Da Ionic 2 a 3

Non c’è nessun cambiamento che mette a rischio la compatibilità del vostro programma scritto per Ionic 2, infatti le modifiche da apportare sono minime, ovviamente prima di iniziare fai un backup del progetto.

Immagine che mostra la cartella "node_modules"
La cartella “node_modules” da eliminare prima di aggiornare il progetto.

Tralasciamo le modifiche per il Lazy Loading (che vedremo in un nuovo articolo) e iniziamo eliminando la cartella node-modules ed aggiornando il nostro package.json nella sezione delle dipendenze come segue:


"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@ionic-native/core": "3.4.2",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"typescript": "~2.2.1"
}

Dopo aver fatto questo apriamo il terminale e andiamo all’interno della cartella del nostro progetto:

npm install
Così, installeremo tutti nuovi moduli di node per essere utilizzati con la nuova versione.

Apriamo infine il file app/app.module.ts per aggiungere:
import { BrowserModule } from '@angular/platform-browser';

Agggiungendo poi negli imports:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],

Verifichiamo che il progetto si sia aggiornato con:

ionic info

Bene, siamo pronti per provare la compilazione della nostra applicazione.

ionic serve

Se tutto è andato per il verso giusto, siamo in un progetto Ionic 3.

Qualche problema, domanda o curiosità?

Hai qualche problema o semplicemente qualche curiosità da chiedermi?
Non aspettare, lascia un commento o contattami sui social!

Seguimi sui social! Come? Puoi seguire la pagina su Facebook, Google Plus, Twitter e su Linkedin.