Skip to main content

Ionic Framework

Was ist ein Ionic Framework?

Ionic Framework ist ein Web-Framework auf Open-Source-Basis zur Entwicklung mobiler Apps. Es ermöglicht, unterschiedliche Mobilplattformen zu bedienen und hierbei nur eine Codebasis zugrunde zu legen. Ionic basiert auf AngularJS und Apache Cordova. Speziell bei der Entwicklung von Progressive- und Hybrid-Apps auf Basis von HTML5, aber auch CSS und Sass wird das Ionic Framework verwendet. Das Ionic Framework steht unter MIT-Lizenz, womit es für kommerzielle wie auch nicht-kommerzielle Konzepte verwendet werden kann.

Screenshot Ionic Framework

Möglichkeiten und Ziele des Open-Source-Frameworks

Als Frontend-Framework zur Entwicklung mobiler Hybrid- und Progressive-Apps nutzt Ionic in erster Linie HTML5. Die Entwickler konzipierten Ionic aufgrund der Verbesserungen in der HTML5-Welt als eine der ersten nativen und mobilen Apps auf Basis von HTML, CSS (Cascading Style Sheets) und JavaScript.

Ionic Framework hat dabei den Anspruch, sämtliche technischen Grundlagen zur Entwicklung der Apps bereit zu stellen. Dazu gehören zum einen verschiedene Komponenten für das Layout, beispielsweise Formulare, Statusleisten oder Listen. Diese sind auch aus CSS-Frameworks bekannt (beispielsweise Bootstrap). Zum anderen setzt Ionic aber vor allem auf Komponenten auf Basis von JavaScript. Diese ermöglichen und vereinfachen Bau und Konfiguration klassischer Interfaces für mobile Apps.

Das Packaging der entwickelten und fertiggestellten App kann im Anschluss durch ein Tool wie beispielsweise Cordova beziehungsweise Phonegap geschehen. Da Ionic hier keine Anwendungsvorgaben macht, sind Entwickler bei der Wahl des Tools frei. Doch bevorzugen die Entwickler Ionics selbst die Nutzung von Cordova sowie Phonegap. Ebenso existieren eigenständige Plug-ins auf Cordova- beziehungsweise Phonegap-Basis.

Ionic versteht sich nach Angaben seiner Entwickler jedoch nicht als ein Toolset oder Baukasten zur Erstellung mobiler Webseiten. Dieser Ansatz liegt im Interesse der Entwickler, doch handelt es sich dennoch um auch außerhalb anwendbare Web-Standards. Somit kann auch eine in Ionic Framework erstellte App problemlos als Web-Applikation angeboten und auf einem Server hochgeladen werden, ohne dass ein Umweg, beispielsweise über einen Server-Store, erforderlich wäre.

Aufbau des Frameworks

Als Frontend-Framework ist Ionic mit einem eigenständigen Kommandozeilen-Tool ausgestattet. Aufgebaut ist der Frontend-Stack aus einem modularen CSS- bzw. Sass-Framework (Synthetically Awesome Style Sheets). Ganz ähnlich wie Bootstrap bietet dieses Framework eine große Auswahl an vorgefertigten Komponenten. Ebenso bietet es eine Reihe von Basis-Funktionalitäten für Apps. Hierzu gehören beispielsweise Off-Canvas-Menüs. Sass wird über einen Compiler in das bekannte CSS übersetzt. Dieses bietet Entwicklern die Möglichkeit, auf Basis von Variablen, Rechnungen und Techniken innerhalb von Sass ein modulares CSS zu entwickeln.

Animationen werden im Ionic Framework unter minimalen DOM-Zugriffen ausgeführt. Hierbei kommen CSS3-Transitions zum Einsatz. Diese werden durch die Hardware beschleunigt. Auf diese Weise kommt es zu einer spürbaren Verbesserung der Performance. Kompatibel sind aus diesem Grund nur solche Browser, die CSS-Transitions unterstützen.

Über das Kommandozeilen-Tool des Ionic Frameworks wird der Code als App dargestellt. Das Kommandozeilen-Tool hat weiterhin die Möglichkeit, virtuelle Geräte zu starten. Auf diese Weise können erstellte Apps simuliert werden. Gleichermaßen wird so die Verwaltung unterschiedlicher Plattformen (etwa Android, Windows und iOS) erleichtert. Dies geschieht unter Zugriff auf Cordova sowie die Developing-Kits der Hersteller.

Technische Basis des Ionic-Frameworks

Im Hinblick auf die Styles basiert das Ionic Framework auf Sass. Geht es dem Anwender nur darum, einige Angaben zum Style zu einer App hinzuzufügen, so ist Sass nicht erforderlich. Hier genügt die Erstellung einer CSS-Datei, die anschließend zusätzlich eingebunden wird. Geht es hingegen um tief greifende Eingriffe und Anpassungen an dem Framework-Design, so kommen Sass beziehungsweise SCSS ins Spiel.

Auf diese Weise haben Entwickler und User die Gelegenheit, die große Liste von Sass-basierten Variablen des Ionic-Frameworks zu modifizieren beziehungsweise zu überschreiben. Anpassungen können dann vorgenommen werden, ohne dass es erforderlich wäre, eine physische Klasse von CSS zu referenzieren. Diese Anpassungen beziehen sich etwa auf Farben, Einzüge, Abstände und verschiedene Angaben.

Geht es um noch weiter reichende Veränderungen, so finden Anwender eine große Sammlung von Mixins. Diese ermöglicht es, ausgehend von den Ionic-Styles eigene Styles zu generieren. Die umfangreiche Sammlung bietet einige Erleichterungen. Beispielsweise haben Anwender keinen Grund, sich um Vendor-Prefixes zu sorgen. Ebenso findet sich eine Sammlung von Mixins zur Gestaltung von Flexbox-Layouts für den Fall dass das Grid-System, das auf der CSS-Flexbox basiert, nicht ausreichend ist.

Auf der Seite von HTML und JavaScript spielen die Angular-Direktive eine besondere Rolle. Vordefinitionen erleichtern Anwendern hier die Arbeit beim Aufbau eines Interfaces. Zu diesen vordefinierten Objekten gehören Custom Elemente wie etwa oder .

Konzept und Entwicklungsschritte von Ionic Framework

Die erste Version des Ionic-Frameworks datiert zurück bis 2012. Die Alpha-Version von Ionic wurde im November 2013 veröffentlicht. Seitdem wird das Framework von Drifty entwickelt. Deren Gründer Ben Sperry und Max Lynch waren die wichtigsten Entwickler. Startkapital erhielt das Framework in Höhe von einer Million US-Dollar von dem Software-Investor Arthur Ventures.

Die zweite Version des Frameworks wurde im Januar 2017 ins Leben gerufen und bietet eine weitreichende Überarbeitung. Basis ist nun Angular, der Nachfolger von AngularJS. JavaScript wurde abgelöst durch TypeScript.

Im April 2017 wurde die dritte Version von Ionic Framework veröffentlicht. Damit ist das Framework nun auf Angular der vierten Version ausgelegt. Zudem ist es kompatibel mit neueren Versionen von TypeScript.

Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG

Ionic Framework
2.8 (55%) 8 votes