Ionic 6: cosa cambia
Qualche settimana fa è uscito un nuovo articolo in cui il team che lavora dietro a Ionic ha rilasciato alcuni importanti aggiornamenti sul framework nato nel 2013, portando questa tecnologia alla versione 6.
Cosa cambia in questa nuova versione? Come effettuare l’upgrade? Diamo subito un’occhiata da vicino a Ionic 6!
Premessa
Se hai già un’app in Ionic 5, nessun problema: puoi continuare ad usare la tua app senza problemi e puoi anche aggiornarla all’ultima versione senza alcuna paura. Funzionerà alla grande!
Le novità riguardano soprattutto degli oggetti nuovi che si adeguano alle linee guida in materia di design e si integrano ancora di più con i framework attualmente supportati.
Nuovi componenti
Ottimo lavoro con l’introduzione dell’accordion: questo nuovo oggetto permette l’organizzazione del contenuto di una pagina in un modo semplice, soprattutto per chi viene dal mondo Bootstrap (secondo il Material Design, questi sono gli Expansion Panel).
Questi funzionano grazie al componente ion-accordion, il quale ha una serie di animazioni che ne consentono le differenti transizioni in apertura e chiusura:
Esempio di accordion con Ionic 6 - toggled
Esempio di accordion con Ionic 6 - open
<ion-header [translucent]="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Homepage</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-accordion-group>
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Contenuto</ion-label>
<ion-icon slot="start" name="balloon-outline"></ion-icon>
</ion-item>
<ion-list slot="content">
<ion-item class="ion-padding">
<ion-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie tellus lacus, quis facilisis neque sodales ac. Nullam volutpat risus nec feugiat fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget libero luctus, interdum orci non, aliquam dolor. Morbi tincidunt facilisis ultrices. Phasellus hendrerit interdum ligula et hendrerit. Donec dictum eros eget aliquam imperdiet. Aliquam fringilla eros elit, sit amet dictum felis ultrices vehicula. Nulla auctor lorem nec aliquam finibus. Nulla dapibus sit amet velit ornare volutpat. Quisque volutpat ac risus in gravida. Ut vestibulum nisl purus, in porta est vulputate sed. Curabitur vehicula urna neque, nec vulputate nunc venenatis in. </ion-text>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-content>
Molto utile anche è l’aggiunta del componente breacrumbs, che soprattutto per le PWA in modalità desktop rendono la navigazione agli utenti contestualizzata: non c’è pericolo che si perdano nel sito, basta lasciare qualche briciola come fece Pollicino!
Esempio di breadcrumbs con Ionic 6
<ion-content class="ion-padding">
<ion-breadcrumbs>
<ion-breadcrumb href="#">
Home
</ion-breadcrumb>
<ion-breadcrumb href="#">
Dettaglio
</ion-breadcrumb>
</ion-breadcrumbs>
<ion-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie tellus lacus, quis facilisis neque sodales ac. Nullam volutpat risus nec feugiat fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eget libero luctus, interdum orci non, aliquam dolor. Morbi tincidunt facilisis ultrices. Phasellus hendrerit interdum ligula et hendrerit. Donec dictum eros eget aliquam imperdiet. Aliquam fringilla eros elit, sit amet dictum felis ultrices vehicula. Nulla auctor lorem nec aliquam finibus. Nulla dapibus sit amet velit ornare volutpat. Quisque volutpat ac risus in gravida. Ut vestibulum nisl purus, in porta est vulputate sed. Curabitur vehicula urna neque, nec vulputate nunc venenatis in. </ion-text>
</ion-content>
Design
Alcune delle modifiche al design della modalità iOS includono un nuovo stile per l’aggiornamento tramite refresher, una nuova barra degli strumenti e anche l’inclusione della modalità a tema scuro per i modali.
Invece, per quanto riguarda il mondo Android, hanno rinnovato lo stile di molti componenti per aderire ancora di più al Material Design, come ad esempio sfruttando le proprietà filled e_outline_ per alcuni oggetti, tra cui ion-input e ion-select.
Le novità non finiscono qui: il team sta tenendo d’occhio molto attentamente le linee guida dettate da Google ed è pronto ad adeguare il framework per seguire Material You, il nuovo concept in termini di Design annunciato a ottobre dello scorso anno.
Il team di Ionic sta tenendo d’occhio Material You e attende che vengano rilasciate ulteriori indicazioni da Google.
Routing con Vue
Per colo che lavorano con Vue, finalmente c’è un nuovo modo di navigare in Ionic usando l’Injectable useIonRouter. Questa nuova funzionalità consente agli sviluppatori di utilizzare il Router Vue mantenendo il controllo sulle transizioni di pagina.
import { useIonRouter } from '@ionic/vue';
...
const router = useIonRouter();
router.navigate(
`/my-page`,
'forward',
'replace'
);
Come fare l’upgrade
Angular
Il pre-requisito fondamentale è avere una versione di Angular superiore alla 12. Se non l’hai ancora fatto o sei indietro con le versioni, dai un’occhiata a questo tool per aggiornarla!
Invece, se hai aggiornato Angular, per fare l’upgrade anche di Ionic alla versione 6, esegui questo comando:
npm install @ionic/angular@6
Se invece usi anche il server Angular per testare la tua applicazione in locale, esegui questo:
npm install @ionic/angular@6 @ionic/angular-server@6
Se tutte queste versioni ti spaventano, non ti preoccupare: qui trovi tutti i dettagli sulle versioni compatibili tra Angular, Ionic e Node.js!
React
Per usare Ionic 6, è necessario avere una versione di React 17+. Fatto questo controllo, puoi fare l’upgrade con il seguente comando:
npm install @ionic/react@6 @ionic/react-router@6
Vue
Ionic 6 supporta Vue 3.0.6+ e la versione 5 della command-line di Vue; prima di fare l’aggiornamento alla versione 6 di Ionic, verifica che le versioni siano corrette e aggiorna i plugin con il seguente comando:
vue upgrade --next
Per fare l’upgrade all’ultima versione di Ionic 6, vai con il comando seguente:
npm install @ionic/vue@6 @ionic/vue-router@6
Aggiornare il codice
E se avessi un’applicazione in una versione vecchia di Ionic?
Il consiglio è di migrare l’applicazione prima di tutto alla versione 5, che è quella più vicina in termini di design e sviluppo all’ultima disponibile.
Per rendere invece il codice adeguato alla versione 6, trovi tutte le indicazioni sui componenti aggiornati in questo link.
Questo vale soprattutto se usi un componente tra cui:
- Text area
- Popover
- Modal
- Datetime
- Input
- Select
Stay tuned: nelle prossime settimane, usciranno degli esempi sull’utilizzo dei plugin di Ionic aggiornati alla versione 6!
