Teil 1: Einführung in Ionic

Ionic: Einführung in das Erstellen von Hybrid-Apps
Kommentare

Zu Beginn des Mobile-Zeitalters waren Hybrid-Apps die große Verheißung: eine Codebasis bedient alle Plattformen und jeder Webentwickler ist automatisch zum App-Entwickler qualifiziert. Die Ernüchterung folgte rasch: Hybride fühlten sich nicht nativ genug an, die Performance überzeugte nicht, Entwicklertools fehlten. Dank jüngster Weiterentwicklungen der Mobile-Technologien setzt ein Framework nun jedoch zur echten Revolution an: Ionic. Im ersten Teil der Artikelserie stelle ich Ihnen das Konzept einer Hybrid-App und die Besonderheiten von Ionic vor.

Das Konzept einer Hybrid-App ist bestechend. Als nach außen hin gewöhnliche App kann sie über die bekannten Stores distribuiert werden und erscheint als Icon auf dem Homescreen. Sie hat vollen Zugriff auf die Programmierschnittstellen und Sensoren des Geräts, also Kamera, Adressbuch, Vibration etc. Intern ist sie jedoch nur ein schlanker Container für eine so genannte WebView-Komponente, die als eine Art Fullscreen-Browser ohne Adressleiste eine gewöhnliche Website aus HTML, CSS und JavaScript ausführt. Cross-Plattform-Tools wie Apache Cordova erlauben mithilfe von JavaScript-APIs den Zugriff auf native Gerätefunktionen und übernehmen das Packaging in die nativen Container-Apps verschiedener Plattformen. Eine solche App ist folglich eine Mischung aus nativ und Web – eben ein „Hybrid“.

Hybrid-Apps der ersten Generation

Die Freiheiten zur Gestaltung und Programmierung erweisen sich jedoch nachteilig, da die User Experience auf mobilen Geräten etablierten Standards folgt, etwa beim Zurück-Button, dem Handling von Listenelementen oder der Funktionsweise von Formularelementen. Eine Missachtung der Standards verärgert nicht nur User, sie kann auch zur Ablehnung bei der Einreichung in den Stores führen. Abhilfe schaffen Mobile-Application-Frameworks wie jQuery Mobile oder Sencha Touch, die gewohnte Mobile-Komponenten mit Webtechnologien nachbilden. Diese erste Generation an Frameworks ist sehr JavaScript- bzw. jQuery-lastig; viele DOM-Manipulationen – etwa bei Animationen – gehen zu Lasten der Performance. Darüber hinaus gibt es wenige Vorgaben für die Architektur bzw. Struktur einer App, z. B. bei der Verzeichnisstruktur, dem Templating oder der Serverkommunikation. Daher ist jede App sehr individuell aufgebaut. Auch subtilere Details wie die korrekte Positionierung der Tastatur in Bezug auf Eingabefelder oder plattformspezifische Besonderheiten finden wenig Berücksichtigung.

Der attraktive hybride Ansatz überzeugte auch große Player wie Facebook und LinkedIn. 2012 folgte jedoch die Ernüchterung, als Mark Zuckerberg den Schwenk auf eine native App mit den Worten „The biggest mistake we’ve made as a company is betting on HTML5 over native“ ankündigte. LinkedIn folgte wenig später, bemängelt aber vielmehr das fehlende Tooling als die sonst bekannten Schwächen beim hybriden Ansatz. Gemeint sind fehlende bzw. ausgereifte Tools, die im nativen Umfeld selbstverständlich sind: Entwickler-, Debugging- und Performancetools.

Zusammengefasst galt daher bis vor Kurzem meist: Die Nachteile von Hybrid-Apps überwiegen in der Praxis die Vorteile.

Explosion des Toolings

In jüngster Vergangenheit kam es jedoch zu einer inflationären Verbesserung des Toolings für die Entwicklung mobiler Websites. Seit iOS 6 steht der volle Safari-Web-Inspektor zur Verfügung, und der Wechsel von der UIWebView- zur WKWebView-Komponente brachte in iOS 8 einen enormen Performanceschub. Vergleichbare Verbesserungen brachte Android 4.4 („KitKat“) mit dem Wechsel vom Android-Stock-Browser – von manchen auch als IE6 der Gegenwart bezeichnet – zu Chromium, ab Android 5.0 („Lollipop“) sogar mit Autoupdates.

Auf den beiden wichtigsten Plattformen stehen heute folglich neben sehr guter Performance und HTML5-Unterstützung auch umfangreiche Möglichkeiten für Inspection, Debugging und Logging zur Verfügung.

Ionic

Mit Ionic ist ein MIT-lizensiertes Open-Source-Frontend-Framework zur Entwicklung von hybriden HTML5-Mobile-Apps entstanden, das die neuesten Entwicklungen der mobilen Plattformen und Standards aufgreift. Ionic integriert etablierte Technologien, stellt ein großes Ecosystem an weiteren Services bereit und verknüpft alles mittels „Glue“-Code und über ein mächtiges Kommandozeilentool (CLI). Im Kern stellt Ionic ein Sass-/CSS-Framework (ähnlich Bootstrap/Foundation) zur Nachbildung von UI-Komponenten im nativen Look and Feel einer App dar.

Die AngularJS-basierte Architektur einer Ionic-App bringt große Vorteile: Sie ist verbreiteter Standard und ermöglicht die Entwicklung komplexer, skalierbarer Applikationen nach bewährten Mustern. Hardwarebeschleunigte CSS-Transitions und minimale DOM-Manipulationen („Zero jQuery“) sorgen für überzeugende Performance. Der Zugriff auf native APIs und die Kompilierung in native Apps erfolgt z. B. mit Cordova. Eigene Sass Styles, der Task Runner gulp und der Package-Manger Bower werden von Ionic direkt unterstützt bzw. selbst genutzt. Zahlreiche Zusatzprojekte und angebundene Services helfen bei der Entwicklung, zum Beispiel:

Für einige der (kostenfreien) Services müssen Sie zunächst einen Ionic-Account anlegen. Die Steuerung der App-Entwicklung sowie die Einbindung wichtiger Servicefunktionen erfolgt über das Ionic-CLI ionic. Einige nützliche Funktionen des CLI sind zum Beispiel:

  • App-Skeletons aus verschiedenen Vorlagen erzeugen
  • Built-in-Webserver mit Live-Reload und Split-View verschiedener Plattformen
  • App-Builds für verschiedene Plattformen erstellen und auf Simulatoren/Geräten installieren, auch mit Live-Reload und Logausgabe auf die Konsole möglich
  • Cordova-Plug-ins, Ions, Bower-Komponenten und Add-ons verwalten
  • Icons für App und Splash-Screen für alle Plattformen aus einer Image-Vorlage erzeugen
  • Cloud-Builds anstoßen
  • Apps für Ionic View bereitstellen und mit anderen teilen
  • einheitliche Browser-Engine in eine App einbetten

Da die Bezeichnung „Framework“ angesichts der Möglichkeiten zu kurz greift, wird Ionic gerne auch als Frontend-SDK („Software Development Kit“) bezeichnet.

Voraussetzung für die Installation von Ionic ist Node.js. Mit dem npm-Package-Manager werden Ionic und Cordova systemweit installiert:

$ sudo npm install -g cordova ionic

Nach erfolgreicher Installation lässt sich das CLI ionic aufrufen und zeigt alle verfügbaren Unterbefehle an. Mit der Option –help werden zusätzlich Hilfestellungen angezeigt: ionic — help.

Im zweiten Teil der Artikelserie – Ionic: So erstellt man Hybrid-Apps – zeige ich, wie man eine Hybrid-App entwickelt – anhand der Beispiel-App Vibrations.

Überblick zur Ionic-Artikelserie:

Teil 1: Einführung in das Erstellen von Hybrid-Apps
Teil 2: So erstellt man Hybrid-Apps
Teil 3: Spezifikationen und Testen von Hybrid-Apps

 

Auf der MobileTech Conference 2015 in Berlin gibt es vom 31. August bis 3. September jede Menge interessanter Sessions – auch zum Thema Cross-Plattform-Entwicklung mit Ionic:

 

 

PHP Magazin

Entwickler MagazinDieser Artikel ist im PHP Magazin erschienen. Das PHP Magazin deckt ein breites Spektrum an Themen ab, die für die erfolgreiche Webentwicklung unerlässlich sind.

Natürlich können Sie das PHP Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Aufmacherbild: Flaches Design Vektor-Illustration via Shutterstock / Urheberrecht: PureSolution

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -