Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Hybride App-Entwicklung: 7,5 Frameworks, die du kennen solltest

(Grafik: Shutterstock)

Entwickler, die nativen Code pro Endgerät schreiben, lieben natürlich ihren Code. Aber was ist, wenn die App auch auf anderen Plattformen laufen soll? Richtig, die selbe App muss dann nochmal für zwei bis drei Systeme neu geschrieben werden. Das kostet nicht nur Zeit, sondern auch Geld. Hybride Entwicklung kann das ändern.

Hybride App-Entwicklung: Ein Code für alle Geräte

Vorteil der hybriden Entwicklung: Applikationen müssen nur einmal mit einem hybriden Framework entwickelt werden und voilá: ein Code für alle Geräte. Dabei nutzt ihr HTML5, CSS und JavaScript – also Technologien, die ihr schon beherrscht – und könnt damit Apps für verschiedene Plattformen schreiben.

Der Zugriff auf native Hardware (wie zum Beispiel die Kamera) passiert über native JavaScript-APIs, wie sie bei Cordova angeboten werden. Deine App wird dann in native Pakete kompiliert, die auf mobilen Geräten oder in den App Store geladen werden können. Im Folgenden ein kurzer Einblick in die bekanntesten Frameworks.

1. Ionic

Bildschirmfoto 2015-06-19 um 12.04.31
Hybride App-Entwicklung: Ionic ist Spitzenklasse. (Screenshot: Ionic)

Dieses Framework hat sich in den letzten Jahren zum unangefochtenen Framework der Spitzenklasse gemausert. Das Framework wird regelmäßig mit Updates versorgt, sei es um Features der Konkurrenz nachzulegen oder um eigene neue Features präsentieren zu können.

Das Fundament bildet das Angular-Framework und stützt sich zusätzlich (wie die meisten anderen Frameworks) auf Cordova, um nativen Code für iOS-, Android- und Windows-Plattformen zur Verfügung zu stellen.

Der Vorteil bei Ionic ist, dass es einfach zu schreiben (SASS, HTML und JS), skalierbar und leicht zu warten ist. Darüber hinaus werden Tools für Gesten angeboten, um die Entwicklung auf mobilen Geräten noch zu vereinfachen. Ein Tutorial zum Thema „Hybride Entwicklung“ findet ihr hier auf t3n.

2. Intel XDK

Hybride Entwicklung mit Intel: Intel XDK ist einen Blick wert. (Screenshot: Intel)
Hybride Entwicklung mit Intel: Intel XDK ist einen Blick wert. (Screenshot: Intel)

Noch relativ jung ist das Framework von Intel, die Features sind aber schon beachtlich: Tools für Entwicklung und Emulation sowie Testing und Debugging sind vorhanden, dDazu gibt es „Ready-to-use“-App-Templates, die auf dem Open-Source-JavaScript-Framework von Intel basieren. Damit können iOS-, Blackberry-, Windows-, Tizen- oder Android-Apps realisiert werden.

Darüber hinaus werden Bootstrap 3, jQuery mobile und das Topcoat-UI-Framework unterstüzt. Mit Intel XDK können (ergänzend zu den oben genannten) auch Applikationen für Firefox OS, Amazon, Chrome und Facebook entwickelt werden.

3. Onsen UI

Hybride Entwicklung auch für Anfänger: Onsen UI. (Screenshot: Monaca)
Hybride Entwicklung auch für Anfänger: Onsen UI. (Screenshot: Monaca)

Auch Onsen UI ist ein vergleichsweise junges Framework. Das Open-Source-Framework untersteht der Apache-Lizenz und nutzt ebenfalls Angular und das Topcoat-UI-Framework.

Gerade der Einsatz von jQuery-Komponenten macht es auch zu einem idealen Framework für Einsteiger. Ihr könnt auf Angular verzichten und stattdessen auf sehr viele fertige Komponenten setzen. Nativ wird deine App mithilfe von Phonegap und Cordova.

4. Kendo UI

Kendo UI: Hybride Entwicklung mit HTML5 und JavaScript. (Screenshot: Telerik)
Kendo UI: Hybride Entwicklung mit HTML5 und JavaScript. (Screenshot: Telerik)

Dieses auf jQuery basierende Framework geht mit knapp 80 fertigen jQuery-Widgets an den Start. Der größte Vorteil liegt jedoch im Theme-Builder, der neben Material Design auch das Erstellen von völlig eigenen Themes zulässt.

Das Kendo-UI-Framework unterstützt Angular sowie das Bootstrap-UI-Famework. Ähnlich wie Sencha Touch, hat Kendo UI gerade im Enterprise-Segment einen guten Ruf. Neben einer kommerziellen gibt es auch eine kostenlose Version.

5. Sencha Touch

Hybride Entwicklung für Enterprises: Sencha. ( Screenshot Sencha)
Hybride Entwicklung für Enterprises: Sencha. ( Screenshot Sencha)

Wenn es um Enterprise-Entwicklung geht, hat Sencha Touch die Nase vorne – allerdings auch zu einem beachtlichen Preis. Sencha setzt auf ExtJS – eines der bekanntesten JavaScript-Frameworks –, das für hoch performante Einsatzmöglichkeiten bekannt ist.

Wie auch andere Anbieter, liefert Sencha vorgefertigte Widgets und Themes für die iOS-, Windows-, und Blackberry-Systeme. Das besondere am Application-Builder ist definitiv das Drag-&-Drop-Interface.

6. Mobile Angular UI

Bootstrap und AngularJS: Mobile Angular UI. (Screenshot: Mobile Angular)
Bootstrap und AngularJS: Mobile Angular UI. (Screenshot: Mobile Angular)

Wer Bootstrap und Angular mag, wird Mobile Angular UI lieben. Kein Framework ergänzt sich so gut mit Bootstrap 3 wie dieses – ohne die Abhängigkeiten zu den JavaScript-Komponenten von Bootstrap oder jQuery.

Konkret ergänzt das Framework Bootstrap um „Switches“, „Overlays“, „Sidebars“, scrollbare Bereiche und absolut positionierte Navigationsleisten. Um die Performance auch auf mobilen Geräten gewährleisten zu können, setzt Mobile Angular UI auf overthrow.js und fastclick.js.

7. Famous

Für schwere Grafik-Applikationen: Famous. (Screenshot: Famous)
Für schwere Grafik-Applikationen: Famous. (Screenshot: Famous)

Wenn ihr sehr grafikintensive Apps entwickeln wollt, solltet ihr euch famo.us ansehen. Im Gegensatz zu den anderen hybriden Frameworks liegt hier der Fokus auf 2D- und 3D-Renderings, was sie ideal für die Spielentwicklung macht.

7,5. Framework 7

Für iOS-Entwicklung: Framework 7 (Screenshot: Framework 7)
Für iOS-Entwicklung: Framework 7 (Screenshot: Framework 7)

Der Hauptvorteil von Framework 7 ist definitiv der Support von iOS-Apps – nur mit JavaScript, HTML und CSS. Das Framework unterstützt sogar Features wie „Swiping“, und UI-Elementen wie Media-Listen, oder Side-Panels ohne, dass sich Entwickler mit JavaScript beschäftigen müssen.

Der Nachteil: Framework 7 unterstützt keine anderen Plattformen – aber es ist sicher eines der besten Frameworks, wenn es um iOS-Entwicklung geht.

Fazit: Hybride App-Entwicklung

Für kleine Agenturen oder Freelancer ist Ionic wahrscheinlich die erste Wahl, wer auf Enterprise setzt, sollte Sencha und Kendo UI unter die Lupe nehmen.

Grundlegend ist aber zu sagen, dass hybride Entwicklung nicht unbedingt die selbe Performance erreichen kann wie nativer Code, der für eine Plattform entwickelt wurde. Wer also hochperformante Apps entwickeln will, wird nicht um den Einsatz von nativem Code herumkommen. Hybride Frameworks sind aber durchaus eine 80-/20-Lösung die ihr nicht außer Acht lassen solltet.

Darüber hinaus gibt es auch andere Alternativen für die hybride Entwicklung wie zum Beispiel Xamarin. Damit werden Applikationen in C# geschrieben und dann in nativen Code kompiliert. Allerdings ist die Einstiegshürde bei C# ungemein höher als bei CSS/JS/HTML, was die Entwicklung, beziehungsweise den Zugang zur hybriden App-Entwicklung erschwert.

Welches Framework nutzt ihr?

Bitte beachte unsere Community-Richtlinien

19 Reaktionen
Michael Schmid

Wir entwickeln derzeit ein E-Commerce System als hybride App.

https://www.kennzeichenschmiede.de

Technologien:
Angular2
NodeJS

Unsere Conversion Rate beträgt derzeit 20%. Wir denken, das liegt vor allem auch daran, dass man praktisch keine Ladezeiten mehr hat zwischen den Seitenwechseln und diese auch schön animiert sind, was dem Benutzer natürlich Freude macht :-)

Das angenehme an Angular2 ist, dass man die komplette Seite über Cordova einfach als native App übersetzen kann. Mit Ionic2 kann man dann noch mehr Usability für die nativen Geräte rausholen.

Wir denken, dass es (bis auf Ausnahmen wie z.B. Spiele) fast keinen Sinn mehr macht, native Apps zu programmieren, allein schon wegen der Dreifachen Pflege für native Apps und wegen dem Kostenvorteil für den Kunden (3-in-1-Lösung)

Antworten
ppoh71

Ich denke, dass Hybrid Entwicklungen immer ein Kompromiss werden. Ich für meinen Teil setzte da doch eher auf Swift https://developer.apple.com/swift/ . Da Swift mittlerweile auch OpenSource ist, stehen die Chancen gut, dass in Zukunft auch zu Android compiled werden kann, zumal dies prinzipiell auch jetzt schon möglich ist. http://www.infoworld.com/article/2994805/android/apples-swift-takes-first-steps-toward-android-app-development.html

Antworten
YUHIRO.DE

Danke für die tolle Übersicht.

Mit einigen dieser Frameworks haben wir bereits Erfahrungen gemacht. Ich denke das sich in den letzten Jahren einiges geändert hat. Besonders duch Unternehmen wie Adobe, welche in Hybride Technologien Zeit und Geld investieren. Die Zukunft scheint tatsächlich eher in Richtung von den in diesem Beitrag genannten Technologien zu gehen.

Eine wichtige Frage, welche es zu beantworten gibt, wird sein, welches dieser Frameworks auch in der Zukunft bestand haben wird und welches auch zukünftige Anforderungen abdecken kann.

Hier habe ich auch einige meiner Erfahrungen beschrieben: http://www.yuhiro.de/hybrid-app-entwicklung-im-jahr-2016/

Ich denke das die Entwicklung mehr in Richtung Hybrid gehen wird, da es, für jede einzelne Plattform (iOS, Android, WindowsPhone, etc.) zu programmieren, einfach viel zu aufwendig wird. Besonders auch aus dem Hintergrund, dass immer mehr Unternehmen mit dem Gedanken spielen, eigene Plattformen zu entwickeln.

Antworten
Christian L

Bei Appcelerator Titanium hat man ja den Vorteil, dass man mit nativen UI-Elementen unter iOS und Android arbeiten kann und somit die App sich nahtlos in das "CI" des OS eingliedern kann. Mehr oder weniger :D

Soweit ich weiß, ist das aber bei diesen Hybrid-Frameworks eher nicht der Fall, oder? Rein optisch auf den ersten Blick orientieren sich diese ja an iOS 8, was die Grafik und das Layout betrifft.

Antworten
Geograman

Der mit Abstand performanteste wrapper vorallem für Spiele ist cocoonjs von ludei.com bzw. Bald cocoon.io
Damit kommt man sogar mit alten dualcore phones und vergleichsweise anspruchsvoller 2/3D Grafik auf 60fps.

Antworten
Peter Pohlmann

habe selbst bereits einige frameworks, unter anderem phonegap bzw. cordova ausprobiert.
vom ansatz her sicher interessant, allerdings sind frameworks, die auf WebView's oder WebPane setzten, praktisch nicht professionell einsetzbar, da die performance einfach viel zu schlecht ist bis unterirdisch ist.

Da wird auch kein wirklicher nativer Code generiert, vielmehr ein AppWrapper der die Anwendung quasi als mobile Website laufen lässt. So sehen dann die Anwendungen dann auch aus, wie eine mobile Website mit schlechter Performance.

In der Liste fehlt, wie in einem vorherigen Kommentar schon erwähnt, definitiv die 2 wichtigsten Frameworks :

Titanium Appcelerator. Entwickelt wird in Javascript, auch ein MVC framework wird eingesetzt. Alloy. Wichtig ist, dass der Code wirklich in nativen Code übersetzt wird, was sich dann auch bei der Performance bemerkbar macht. Immer noch nicht native Geschwindigkeit aber nah dran.

xamarin - C# Framwork, ebenfalls übersetzt in nativen Code

Antworten
Tim

Ich werfe mal noch Meteor in den Raum.

Antworten
Informatiker

Der Autor schließt wohl von sich auf andere mit dem Satz:

"Allerdings ist die Hürde bei C# ungemein höher als bei CSS/JS/HTML, was die Entwicklung, beziehungsweise den Zugang zur hybriden App-Entwicklung erschwert."

Xamarin bietet einen enormen Funktionsumfang für Cross Platform Development bei überschaubarem Aufwand.

Antworten
Mario Janschitz

Ich habe den Satz nochmal verständlicher gemacht: Ich meinte „Einstiegshürde“, und gehe damit auf das ein, was ich im ersten Absatz geschrieben habe.

Das Wort „Hürde“ hatte in diesem Satz keinen wirklichen Kontext.

Antworten
Marcus

Appcelerator Titanium fehlt aus meiner Sicht definitiv bei der Auflistung

Antworten
iraga

Das ist ja kein Hybrid Framework, bei Appcelerator werden die Javascript, HTML, etc. Files in nativen Zielcode kompiliert.

Antworten
Lars L

Warum ist der Aufwand mit c# größer als mit CSS/JS/Html?

Das Designen mit C# ist deutlich einfacher als mit CSS und die Syntax ist der von JS gar nicht so unähnlich.

Antworten
Moritz B

Was ist mit React Native?

Antworten
Tageule

Wenn man an die Performance denkt fragt man sich warum es soviele HTML/CSS/JS Frameworks gibt.
Die halten lange nicht mit Xmarian mit und selbst dass ist gegenüber einer nativen App immer noch langsamer.

Antworten
krik

Performance steht in vielen Anwendungsfällen nicht im Mittelpunkt

Hybride Apps
- Haben das optimale Entwickler-Tooling (Live-Reload und Remote-Inspector statt Neu-Kompilieren und Debugger starten)
- Sind sehr flexibel, wenn es um viele Zielplatformen geht (Responvie Layouts sind jahrelang Standard im Web)
- Können am schnellsten iterieren (z.B. problemloses Updaten am App Store vorbei updaten für A/B Tests)

Antworten
Tageule

Gut, das mit den A/B Test ist ein Argument.
Aber Performance spielt immer eine Rolle. Jede App die auf meinem älteren Smartphone nicht flüssig läuft fliegt runter. Ich mag halt einfach nicht ewig warten bis die geladen ist.
Und da stelle ich schon einen Unterschied fest.

Frank

Was ist mit PhoneGap?

Antworten
Max

PhoneGap und Cordova sind meines Wissens quasi dasselbe.

Antworten
iraga

Phonegap ist kein Framework im eigentlichen Sinne, sondern bietet die Brücke um auf native Funktionalitäten per Javascript zugreifen zu können. Die hier ausgestellten Frameworks hingegen sind UI-Frameworks zum erstellen der eigentlichen Applikation mit Web-Technologien. Cordova / Phonegap wird dann genutzt um das ganze in einen Nativen Container zu stecken.

p.s. Phonegap und Cordova ist mehr oder weniger dasselbe: Phonegap ergänzt Cordova (welches Open Source ist) um einige weitere Komponente die von Adobe bereitgestellt werden (z.B. Phonegap Build, ermöglicht das Kompilieren in der Cloud)

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst