Ionic è il framework per le Progressive Web App (PWA) e le Cross Platform Mobile App tra i più usati al mondo e, dopo un anno di lavoro, è stato annunciato l’arrivo della versione 5 (Magnesium).
Tra le novità principali troviamo aggiornamenti nel design di iOS 13, nuove API per custom animations, nuove Ionicons, nuovi design, miglioramenti nelle component e molto altro che scoprirete leggendo l’articolo.
Tutti gli aggiornamenti sono disponibili per le integrazioni con Angular, React e Vue. Eccezionale.
Come effettuare l’upgrade
L’upgrade, dalla versione 4, è semplice perchè gli aggiornamenti coinvolgono soprattutto le API che vengono gestite in maniera separata dalle component e dal framework. E’ possibile visualizzare eventuali problemi nell’aggiornamento nel documento breaking changes document.
Una volta fatto l’update alla versione 4.11.10 ed effettuato il fix di qualsiasi warning è possibile semplicemente lanciare i seguenti comandi:
# for an angular app npm i @ionic/angular@latest --save # for a react app npm i @ionic/react@latest --save npm i @ionic/react-router@latest --save npm i ionicons@latest --save # for a stencil / vanilla JS app npm i @ionic/core@latest --save
iOS Design
Il più grande cambiamento è legato all’aggiornamento dei design delle UI Components ed in particolare di iOS:
- segment: è stata aggiunta la gesture per spostare l’indicatore e riadattato il design per essere coerente con iOS 13. Non c’è bisogno di modificare nulla per usare il nuovo design.
- header: con l’introduzione dei collapsible header e differenti dimensioni dei titoli Ionic ha inserito nuove proprietà per header e titoli, per es. per la gestione di titoli molto grandi, di titoli piccoli.
- swipe per modal windows: è possibile aggiungere la gesture per far chiudere una modal window attraverso uno swipe.
- tipi di overlay nel menu: riadattamento del nuovo menu iOS al posto del più vecchio “reveal” che è possibile comunque mantenere.
- refresher: è stato modificato il refresher per adattarsi al Material Design.
- list header: il design è più largo e grassetto
Ionic Animations
Vengono introdotte le nuove animazioni disponibili in open source all’interno di Ionic 5, le animazioni sono integrabili a prescindere dal framework in uso.
Ionicons
Ne avevamo già parlato, viene aggiornata la libreria Ionicon 5 con un nuovo set di icone disponibile in 3 varianti come outline, fill e sharp.
Ionic Colors
Ionic è stato aggiornato con i nuovi colori che sono subito disponibili per i differenti stili Ionic, mentre se l’applicazione è stata sviluppata con Angular o React è necessario aggiornare manualmente il file theme/variables.scss.
Redesign degli starter
Con tutti i nuovi cambiamenti nel design sono stati aggiornati anche gli stili delle applicazioni starter, in pratica quelle per iniziare subito a sviluppare applicazioni. Tra questi blank, list, menu, tabs.
Personalizzazioni più semplici
Al fine di rendere più semplice la personalizzazione degli stili sono state aggiunte nuove variabili CSS e convertite alcune component verso lo Shadow DOM ed iniziando ad utilizzare le Shadow Parts, tra queste: back button, card, segment, split pane.
Angular Ivy
Ionic 5 introduce il full support per Angular Ivy, il nuovo renderer che permette alle applicazioni di funzionare con solo i tool necessari senza, in pratica, caricare tutto. L’output finale è quindi un’applicazioni piccola nelle dimensioni e dalle grandi performance.
Glue Labs e Ionic
Realizziamo la tua applicazione Ionic con garanzia 12 mesi da qualsiasi bug, ti forniamo supporto, assistenza e consulenza nella realizzazione di Ionic App e eroghiamo formazione avanzata su Ionic. Contattaci subito e senza impegno per un preventivo gratuito.
