Le novità di Ionic 5
iOS13, Shadow DOM, Angular Ivy, Ionic Animations, Ionicons e Colors
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
- Consulenza ITIL
- Consulenza ITSM - IT Service Management
- Content Strategy
- E-Commerce
- Formazione avanzata Web, Mobile & Cloud
- IoT - Sviluppo e Integrazione
- Portfolio
- Privacy
- Project Management Prince2
- Sicurezza ICT
- Software Aziendali
- Sviluppo Mobile App
- Sviluppo, Supporto, Assistenza Tecnica e Hosting Google Cloud
- System Integration
- Web Application
- Web Design
Casi di Successo
Uno dei leader mondiali di gestione di impianti industriali usa le nostre soluzioni System Integration e Web Application per dashboard, widget e automazione.
CONTATTI
Tel +39 06 56549766
Fax +39 06 21122581
Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it
Dove Siamo
Roma: Piazza Don Sturzo 15
Padova: Via Savonarola 217
Milano: Via Lazzaretto 19
Torino: P.zza XVIII Dicembre 5
Seguici