• Passa alla navigazione primaria
  • Passa al contenuto principale
  • Passa alla barra laterale primaria
  • Passa al piè di pagina
Glue Labs

Glue Labs

Trasformiamo le tue idee in prodotti digitali di successo!

  • HOME
  • SOLUZIONI
  • NEWS
  • PRODOTTI
  • CONTATTI
  • CASE STUDY

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.

Continua la lettura

  1. Le novità di Angular 14

Categoria: Articoli Tags: corso ionic, ionic 5, ionic framework, progressive web app, PWA

Barra laterale primaria

Cosa facciamo

  • Content Strategy
  • E-Commerce
  • Formazione avanzata Web, Mobile & Cloud
  • IoT – Sviluppo e Integrazione
  • Micro Live Learning(MLL) Web, Mobile & Cloud
  • Project Management Prince2
  • PushAPE
  • Sicurezza ICT
  • Software Aziendali
  • Sviluppo Mobile App
  • Sviluppo, Supporto, Assistenza Tecnica e Hosting Google Cloud
  • System Integration
  • Web Application
  • Web Design

Contatti

Scrivici dal form di contatto

Tel +39 06 56549766
Fax +39 06 21122581
Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove siamo

Roma: Piazza Don Sturzo 15
Milano: Via Lazzaretto 19
Torino: Via San Domenico 28
Altamura: Via Maggio 1648 24

"*" indica i campi obbligatori

Nome*
Questo sito è protetto da reCAPTCHA e si applicano le Normative sulla Privacy e i Termini di Servizio di Google.
Inviando i tuoi dati accetti le condizioni sulla Privacy. Li useremo per rispondere alle tue domande e richieste.
Consenso*
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Siamo parte di

La nostra Agenzia di Marketing

Footer

Partnership



Rimaniamo in contatto

Iscriviti alla nostra newsletter

Nome
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Soluzioni

  • Integrazione di Spreaker API con WordPress e Web Application
  • Revisione, validazione, attestazione e Relazione Tecnica su Ricerca & Sviluppo e Innovazione Tecnologica
  • Migrazione da ASP.NET Web Forms e Visual Basic ad Angular Web Application
  • Corso Angular 15
  • Supporto ed Integrazione di SPID e CIE con OpenID Connect
  • Consulenza e Assessment pre-formazione
  • Integrazione con le API di OpenAI e ChatGPT
  • Corso Firebase
  • Corso Cucumber per Javascript
  • Supporto ed Assistenza nell’implementazione ed utilizzo dei Kit di Designers Italia

Articoli

  • Le 4 metriche principali delle Performance del DevOps
  • Come trasformare una Web Application in una Mobile App: Capacitor di Ionic
  • Moodle per essere compliant con gli obblighi formativi in ambito sicurezza sul lavoro
  • Perchè adottare il modello One Concern(o Application) One Container
  • Perchè utilizzare la WebAR
  • Le 3 ragioni per implementare un chatbot nella tua azienda
  • I 5 fattori che impattano sulla reliability delle applicazioni
  • Le 10 innovazioni che modificheranno i servizi IT nel 2023
  • DevSusOps: sviluppare per la sostenibilità del software e delle architetture IT
  • Cos’è la Communications Platform as a Service(CPaaS) e perchè utilizzarla

Le nostre sedi

  • Roma, Piazza Don Sturzo 15
  • Milano, Via Lazzaretto 19
  • Torino, Via San Domenico 28
  • Altamura, Via Maggio 1648 24

Contatti

  • Tel. +39 06 87811067
  • Fax +39 06 99335373
  • glue-labs@legalmail.it
  • info@glue-labs.com
  • Facebook
  • LinkedIn
  • Twitter

Scarica app da App StoreScarica app da Play Store


Glue Labs © 2011–2023 | Copyright | Privacy Policy | Company Info | Cookie Policy | Gestione Cookies

Gestisci Consenso Cookie
Usiamo cookie per ottimizzare il nostro sito web ed i nostri servizi.
Funzionale Sempre attivo
La conservazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire la fruizione di uno specifico servizio esplicitamente richiesto dall'abbonato o dall'utente, o al solo fine di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente a fini statistici anonimi. Senza un mandato di comparizione, il rispetto volontario da parte del tuo provider di servizi Internet o registrazioni aggiuntive da parte di terzi, le informazioni archiviate o recuperate solo per questo scopo non possono essere generalmente utilizzate per identificarti. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
L'archiviazione tecnica o l'accesso è necessario per creare profili utente per inviare pubblicità o per tracciare l'utente su un sito Web o su più siti Web per scopi di marketing simili.
Gestisci opzioni Gestisci servizi Gestisci fornitori Per saperne di più su questi scopi
Gestisci preferenze
{title} {title} {title}