Wissen

KNOW-HOW FÜR FORTSCHRITT

Ionic ist ein Open Source Frontend-Framework zur Erstellung mobiler Web-Apps auf der Basis von HTML5, Javascript und CSS3. Es wird vor allem in Verbindung mit AngularJS genutzt.

Nach der positiven Entwicklung von HTML5 und JavaScript ist es möglich mobile Apps zu entwickeln, die ein natives Feeling haben. Diese werden als Hybrid-Apps bezeichnet und werden neben Technologien wie HTML5, CSS3 und JavaScript auch durch PhoneGap und AngularJS realisiert. Auf diesen baut Ionic auf.

Während in diesem Zusammenhang das Frameworks AngularJS genutzt wird, um die App Struktur zu erstellen, ist Ionic viel mehr auf das Look & Feel und die User Experience (UX) der App fokussiert. Dabei legt es Wert auf Performance, was dazu führt, dass es lediglich auf neuen Geräten schnell läuft. Es unterstützt erst Geräte ab einer Software Version von iOS6 und Android 4.1.

Weiterhin besticht es unterdessen durch übersichtliches Design und die Fokussierung auf einfache Sprachcodes.

 

Struktur

MV* Pattern

Ursprünglich war AngularJS ein MVC Framework, aber hat sich über die Zeit mehr und mehr in die Richtung zu einem MVVM entwickelt, bei dem das $scope Objekt als ViewModel fungiert. Durch einen solch flexiblen Ansatz können Entwickler sowohl die Vorteile eines MVC als auch eines MVVM Pattern nutzen. Somit kann eine gute Trennung von Präsentation und Geschäftslogik erreicht und eine Steigerung von Produktivität und Wartbarkeit erreicht werden.

Class System

Weder AngularJS noch Ionic sind objektorientierte JavaScript-Frameworks, wordurch sie keine Class Systeme nutzen. Dies kann als Vor- oder Nachteil betrachtet werden, je nach dem welche Komplexität vom Frontend benötigt wird

DOM

Angular arbeitet mit jqLite einem Element aus jQuery, das DOM Manipulation ermöglicht. Für erweiterte Funktionalitäten kann jQuery eingebunden werden.

UI (Benutzerschnittstelle) und Theming

Ionic ist ein schlichtes Framework, das dadurch sehr in Sachen UI punkten kann. Es nutzt vorhandene HTML5- und CSS3 Funktionen, um schnelle Ergebnisse zu liefern. Diese Schnelligkeit erreicht es, durch bewusst gewählte Schlichtheit – keine Schatten, noch abgerundete Ecken oder Farbverläufe – sondern simples, reines HTML5 im Flatdesign. Ionic verspricht kein natives App Feeling, aber dafür Funktionalität, Schnelligkeit und Konstistenz, sogar auf Geräten, die als langsam, in Bezug auf HTML5-Darstellung, erachtet werden.

Gestaltbar über SASS, kann der individuelle Look der App durch Ionic Variablen erweitert werden. Zusätzlich gibt es noch eine Open Source Bibliothek mit über 440 Icons.

Widgets

Die Widgets sind benutzerdefinierte HTML-Elemente, die auf den AngularJS Prinzipien und Richtlinien basieren. Zusätzlich bietet Ionic verschiedene Services, um die Konfigurationen und Interaktionen zu ergänzen. Die Widgets bei Ionic sind, im Gegensatz zu anderen Frameworks, einfache Bausteine, die zu komplexen Benutzeroberflächen kombiniert werden können.

Responsive Web Design (RWD)

Ionic nutzt Responsive Web Design Prinzipien, um optimale User Experience zu erhalten. Diese ergeben sich aus Bildschirmgröße und Pixeldichte. Alle App-spezifischen RWD-Szenarien können dabei genutzt werden.

Desktop Unterstützung

Da es für Hybrid-Apps entwickelt wurde, die auf mobilen Endgeräten über den App-Store installiert werden können, ist es für die Erstellung von nicht mobilen Web-App oder Webseiten nicht geeignet. Diejenigen, die Apps sowohl für mobile, als auch für stationäre Geräte entwickeln wollen, sind mit AngularJS trotzdem gut aufgestellt, sollten allerdings ZURB Foundation, Twitter Bootstrap oder eine ähnliche UI-Library nutzen.

Erweiterbarkeit

Viele Erweiterungen kommen entweder von SASS oder AngularJS Direktiven. Die Erweiterbarkeit ist ein entscheidender Teil des Frameworks und daher nicht kompliziert, so dass auch Entwickler, die zum ersten Mal mit Ionic oder Angular arbeiten, keine Probleme haben dürften.

Packaging (native)

Für Ionic-Apps werden externe Tools zum Verpacken genutzt. Diese sind unter anderem PhoneGap, Cordova und Trigger.io, mit denen gerade getestet wird. Klare Präferenz liegt bei PhoneGap und Cordova, für die auch bald Plug-ins vorgesehen sind.

Dritt-Anbieter Plug-ins

Es stehen momentan noch keine Dritt-Anbieter Plug-ins oder Erweiterungen zur Verfügung.

Geräte-APIs

Ionic unterstützt keine Geräte-APIs.

Dokumentation

Es gibt eine vollständige Dokumentation über das Framework. Anhand von Beispielen kann über eine Vorschau gezeigt werden, wie sich zum Beispiel verschiedene Komponenten auf unterschiedlichen mobilen Geräten verhalten.

Da Ionic stark auf AngularJS aufbaut, ist zunächst eine Einführung in AngularJS unabdinglich. Hier kommt ihr zu unserem Tutorial für AngularJS:

AngularJS Tutorial – AngularJS in 1 Tag lernen.

Lizenzen

Ionic hat auf bestimmte Weise Ähnlichkeit mit Sencha Touch, allerdings ist es vollkommen Open Source. Es hat, wie auch AngularJS, eine MIT-Lizenz, wodurch jeder, sowohl privat als auch geschäftlich, es nutzen kann.

Community

Fazit

Da sich Ionic noch ziemlich am Anfang befindet, sind einige Probleme vorhanden, die gelöst werden müssen. Auf neuen Geräten lauft Ionic allerdings, trotz dass es sich erst im Beta Stadium befindet, sehr gut.

Ionic ist ein starkes Framework, dass sich im Gegensatz zu vielen anderen Frameworks, wie jQuery Mobile, auf die Entwicklung von Hybrid-Apps spezialisiert und sich dort auch bereits gut positioniert hat.

Der größten Vorteile an Ionic, ist die Verwendung von AngularJS, welches eines der wichtigsten Frameworks in Sachen Single-Page-Anwendungsentwicklung ist. Durch Googles Open Source Technologie AngularJS, hat es bereits jetzt eine große, immer weiter wachsende Community. Wenn AngularJS sich also so zum Positiven weiterentwickelt, sollte auch Ionic gute Chancen haben, ganz oben mitzumischen.

Download

Release vom 25.07.2014 auf Version 1.0.0-Beta.10 „hafnium-heron“

Download

Update

Das neuste Release 1.0.0-Beta.11 „indium-iguana“, ist am 06.08.2014 online gegangen

Download

 

Weitere Quellen

Ionic Enwicklung

Github

Techcrunch Artikel

Modus Create

Neuwärts

 

Wir freuen uns über eine Bewertung, um ein Feedback zu erhalten:

Durchschnittlich 2.9 Sterne aus 12 Meinungen.