Le novità di Ionic Framework 5 per lo sviluppo di Mobile App e PWA

Le novità di Ionic 5

iOS13, Shadow DOM, Angular Ivy, Ionic Animations, Ionicons e Colors

Network

Approfondimenti

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.

Cosa Facciamo

Casi di Successo

Una grande Media Agency utilizza la nostra soluzione di sviluppo Progressive Web Application (PWA) per migliorare gli strumenti commerciali e di marketing dei propri clienti.

Inizia ora il tuo progetto