Was sind die neuen Funktionen, die in Ionic 4 angekündigt wurden?

Ionic gilt als eines der besten Frameworks auf dem Markt, das hybride mobile Apps entwickelt. Es ist ein Open-Source-SDK, das auch als Bibliothek von UI-Komponenten bezeichnet wird. Zum Erstellen hybrider mobiler Apps werden diese UI-Komponenten ebenfalls verwendet. Diese mit JavaScript, CSS und HTML entwickelten UI-Komponenten können erneut zum Entwickeln von Blöcken für eine App verwendet werden.

Das ionische Gerüst enthält normalerweise drei wichtige Komponenten:

1. Eine Sass-basierte UI-Struktur, die speziell für mobile UIs optimiert wurde.
2. Eine Angular-Plattform, die bei der schnellen skalierbaren App-Erstellung hilfreich ist.
3. Ein Compiler (Cordova oder PhoneGap) oder Wrapper, der zum Entwickeln nativer Apps mit CSS, JavaScript und HTML verwendet wird.

Insgesamt enthält dieses kompetente Framework viele außergewöhnlich funktionale CSS-Elemente.

Einführung in das Ionic 4 Framework

Nach zwei Jahren intensiven Studiums und harter Arbeit wurde Ionic 4 letzten Monat (Januar 2019) eingeführt. Obwohl es sich um ähnliche Versionen wie Ionic 3 handelt, wurde Ionic 4 mit geringfügig mehr Verbesserungen in Bezug auf Erstellungszeit, Funktionalität, Dokumentation, Kompatibilität mit mehreren Frameworks und starken Themenkapazitäten eingeführt.

Die Migration von Version 1 auf Version 3 war nicht sehr einfach. Mit der Einführung der neu aktualisierten Version 4 wurde das Ionic-Team jedoch stark aktualisiert, da es das Übergangstool zur Erleichterung der Arbeit angeboten hat.

Das Hauptziel besteht darin, Ionic als starke Plattform für die Entwicklung mobiler progressiver Webanwendungen zu schaffen, die Zugriff auf native Gerätefunktionen erhalten. Ionic 4 hat einige außergewöhnliche Tools, Technologien und Konzepte wie das Ionic PWA Toolkit, Ionic Native 5, Capacitor und Stencil entwickelt. Mit Ionic 4 können Sie alle ionischen Elemente mit Angular, Vue, React usw. verwenden.

Mit der großartigen Einführung von Ionic 4 wird diese Plattform derzeit als eine Reihe von Webkomponenten unter Verwendung von Shadow DOM-APIs und benutzerdefinierten Elementen vertrieben, die in jedem modernen Web- und mobilen Browser verfügbar sind. Dadurch kann derzeit jeder Website-Entwickler mithilfe der benutzerdefinierten HTML-Tags von Ionic in seiner Anwendung auf die Komponenten von Ionic in seinen progressiven Webanwendungen, Desktop- und Mobilanwendungen zugreifen.

Da Ionic derzeit eher auf Standard-Web-APIs als auf APIs von Drittanbietern abzielt, können Entwickler sich auf die Stabilität der Komponenten-APIs von Ionic verlassen, die noch viele Jahre bestehen bleiben, anstatt Opfer einer Kombination aus Framework und Front-End zu werden.

Ionic ist nicht mehr nur das Handy für Angular. Derzeit ist es ein brandneues, webbasiertes, modernes Designsystem und eine App-Struktur für alle Entwickler, unabhängig von den Frameworks und Tools, für die sie sich entscheiden.

Brandneue Funktionen in Ionic 4 eingeführt

Wie bereits erwähnt, hat Ionic 4 einige außergewöhnliche Funktionen wie Stencil und internes Code-Refactoring entwickelt. Sie können dieses Framework mit anderen Frameworks als Angular verwenden. Dieses Framework ist so erstaunlich aufgebaut, dass die Entwickler keine zusätzlichen Anstrengungen unternehmen müssen, um ihre Apps neu zu erstellen oder zurückzuverfolgen.

Ionic 4 bietet auch einige Webkomponenten, z. B. eine Reihe von Webplattform-APIs, mit denen neue gekapselte, wiederverwendbare, angepasste HTML-Tags für die Verwendung in Webanwendungen und Webseiten erstellt werden können.

Entwickler finden einige benutzerdefinierte Widget-Elemente, die nach Webkomponenten-Standards entwickelt wurden und in allen modernen Browsern funktionieren. Diese benutzerdefinierten Widget-Komponenten werden mit jedem Framework oder jeder JavaScript-Bibliothek verwendet, die mit HTML funktionieren können.

Werfen wir einen Blick auf einige brandneue Funktionen, die in Ionic 4 eingeführt wurden:

Schablone

Dies ist ein brandneuer Webkomponenten-Compiler, der standardkonforme Webkomponenten erstellt. Es kann mit jedem Framework arbeiten und jede zusätzliche API verwenden, z. B. Virtual DOM, asynchrones Rendering, TypeScript und JSX.

Webkomponenten

Mit dem Start von Webkomponenten in Version 4 von Ionic hat dieses Framework die Funktionalität kaum weiter verbessert, da diese Komponenten zusätzlich für Browser funktionieren, ohne dass Code wiederholt geschrieben werden muss. Dies ist erforderlich, um leistungsstarke progressive Webanwendungen zu entwickeln.

Diese Webkomponenten enthalten Shadow DOM, das DOM und CSS behebt, benutzerdefinierte Elemente, die HTML modernisieren, und HTML-Importe, dh das Beschreiben und Wiederverwenden von HTML-Dokumenten in anderen HTML-Dokumenten.

Kondensator

Dies ist eine Codeausführungsschicht, die auch als plattformübergreifende API bezeichnet wird. Sie kann problemlos native SDKs aus Webcode aufrufen und benutzerdefinierte native Plug-Ins schreiben, die eine Anwendung möglicherweise benötigt.

Darüber hinaus bietet diese API erstklassige Unterstützung für progressive Web-Apps zum Schreiben der Anwendung und verteilt sie an das mobile Web und den App Store.

HTML-Vorlagen

Diese werden zum Bestätigen von Markup-Fragmenten verwendet, die beim Laden der Seite nicht verwendet werden können, aber nur zur Laufzeit dargestellt werden.

1,5 mal schneller

Ionic 4 bietet eine vollständige Überarbeitung des Materialdesigns, wobei jede Komponente eine Webkomponente ist, die gründlich auf eine bessere Benutzeroberfläche, Anpassbarkeit der Designs und Leistungssteigerung überprüft wurde.

ionic 4 Leistungsvergleich

Bisher wurden mehr als 100 ionische Webkomponenten gefunden. Das Entwicklungsteam von Ionic wollte die neuesten Standards für Android und iOS erfüllen. Aus diesem Grund wurde diese vollständige Überarbeitung in Materialdesign und iOS integriert.

Diese Komponenten sind für die Verbesserung der Lade- und Renderleistung optimiert. Derzeit ist jede Komponente eine Webkomponente, die mit Stencil entwickelt wurde, dem neuesten Webkomponenten-Compilerprojekt, das mit dem Lighthouse-Benchmark-Tool von Google 100 von 100 Punkten erzielt.

PWA aktiviert

Trendiest Ionic 4 ist eine der besten UI-Plattformen für die Entwicklung leistungsstarker Progressive Web Apps. Das Ionic-Team erstellte mithilfe von Stencil eine Webkomponenten-Pipeline zum Erstellen von Ionic-Komponenten, um sicherzustellen, dass diese faul geladen, mit zahlreichen Funktionen ausgestattet und in intelligenten Sammlungen angeboten wurden, die Komponenten zum Laden und Bereitstellen asynchroner Komponenten enthalten.

Entwickelt für eine bessere Anpassung

Derzeit verwendet Ionic 4 benutzerdefinierte CSS-Eigenschaften, um die „Public Theming API“ zu enthüllen und Entwicklern ein Framework für Änderungen anzubieten. Jetzt kann es auf dokumentierte, veröffentlichte und benutzerdefinierte CSS-Eigenschaften abzielen.

Neue Komponenten in Ionic 4 eingeführt

Abgesehen von den oben genannten Funktionen gibt es einige neue Komponenten, die speziell in Ionic 4 eingeführt wurden. Sie sind:

  • CSS-Variablen
  • Ionicons 4.0
  • Tappable Items
  • Farbänderungen (alle Standardfarben wurden transformiert)
  • Ionenskelett-Text
  • Ionenauswahl-Popover
  • Ionenshow-wann
  • Ionensuchleiste
  • Ionen-Neuordnung
  • Ionenroute
  • Ionenwelligkeitseffekt
  • Ionenpflücker
  • Ionenhintergrund

Der ultimative Leitfaden für die Migration zu Ionic 4

Wenn Sie noch eine ältere Version der Ionic-App verwenden, kann es sein, dass Sie beim Upgrade auf die neueste Version Probleme haben. Es ist noch nicht spät, auf Ionic 4 umzusteigen. Schauen wir uns die Anleitung für den Übergang zu Ionic 4 von den älteren Versionen an:

So migrieren Sie von Ionic 1 zu Ionic 4

Dieser Übergang beschreibt die Verlagerung von AngularJS zu Angular 7+. Es gibt viele strukturelle Unterschiede zwischen diesen beiden Versionen. Daher müssen einige App-Codes erneut geschrieben werden. Der genaue Arbeitsaufwand hängt von der Größe und Komplexität der App ab. Der Vorteil ist, dass sich die Ionic UI-Komponenten von Ionic 1 nicht wesentlich geändert haben.

Um den Übergang zu starten, überprüfen Sie zuerst den Zeitrahmen. Es wird empfohlen, das Ionic 1 mit Funktionen einzufrieren und den Code ordnungsgemäß zu verwenden: Reduzieren Sie alle technischen Probleme, beheben Sie Fehler und beheben Sie die Reihenfolge, wenn Sie dies für richtig halten.

Überprüfen Sie als Nächstes, welche Funktionen verschoben und welche ignoriert werden sollen. Entwickeln Sie abschließend eine neue Ionic 4-App und füllen Sie die Funktionen. Wenn das Team von der Stabilität der App überzeugt ist, können Sie Version 1 schließen.

So migrieren Sie von Ionic 3 zu Ionic 4

Der Übergang von Version 3 erfordert nicht mehr Aufwand als Version 1. Sie müssen jedoch mehr Zeit aufwenden, um diese Migration erfolgreich abzuschließen. Überprüfen Sie zunächst die Angulars Startanleitung um eine Vorstellung von den Änderungen von Angular 2+ zu Angular 7+ zu bekommen.

Erstellen Sie dann eine neue Ionic 4-Zuweisung und kopieren Sie sie über verschiedene Teile des Angular-Codes wie Komponenten, Pipes, Anbieter und Dienste. Sie müssen jeweils an einer einzelnen Funktion von oben nach unten arbeiten.

2 Teile, die die maximalen Transformationen erhalten haben, sind verzögertes Laden und Navigation. Anstatt zu benutzen NavController von ionic können Sie in den offiziellen Angular-Router integrieren. Wenn Sie die offiziellen Tools aller Frameworks verwenden, können Sie ein zuverlässigeres und stabileres Routing-Erlebnis erzielen.

Mit der Transformation der Navigation hat sich auch die Struktur des Lazy Loading in Ionic 4 verändert LoadChildren Strategie des Angular Routers.

Auf diese Weise können Sie von älteren Versionen auf die neueste Version 4 von Ionic migrieren. Probier das aus vollständige Migrationshandbücher und starten Sie die Migration auf die neueste Version, wenn Sie noch die ältere verwenden.

Schließung

Wie bereits erwähnt, hat Ionic 4 einige großartige Änderungen in seinem Framework vorgenommen, die die Entwickler mehr daran interessiert machen. Dieses Framework befindet sich noch in der Beta-Version und in den kommenden Tagen werden weitere Verbesserungen und Funktionen erwartet.

Hoffentlich wird Ionic 4 die Entwicklung der Ionic-App auf eine andere Ebene heben und die plattformübergreifende App erweitern, die auf dem Desktop als PWAs, Web und mobile Plattformen ausgeführt werden kann.

Similar Posts

Leave a Reply