© saicle/Shutterstock.com
PHP Magazin
Einführung in das Erstellen von Hybrid-Apps mit Ionic

Comeback der Hybriden

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.

Philipp Rieber


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 [1] 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 [2] oder Sencha Touch [3], 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 K...

PHP Magazin
Einführung in das Erstellen von Hybrid-Apps mit Ionic

Comeback der Hybriden

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.

Philipp Rieber


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 [1] 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 [2] oder Sencha Touch [3], 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 K...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang