Das Dokument erläutert die Entwicklung von Cross-Plattform-Apps, die auf iOS und Android funktionieren und native Funktionen imitieren. Es werden verschiedene Entwicklungstools und -ansätze vorgestellt, einschließlich Titanium und PhoneGap, sowie der Vergleich von Web-, Hybrid- und nativen Apps hinsichtlich ihrer Vor- und Nachteile. Herausforderungen in der Hybrid-App-Entwicklung werden thematisiert, ebenso wie die Bedeutung von Benutzererfahrung und Performance.

1. / web / technology / partner /
dmr solutions gmbh
Siemensstr. 8A, 61352 Bad Homburg, Tel.: 06172 4988554
www.dmr-solutions.com - info@dmr-solutions.com
Cross-Plattform-Apps
Native Apps für iOS und Android
mit einer Programmierung

2. / web / technology / partner /
Cross-Plattform?
Was meinen wir mit „cross-plattform“:
1) Läuft auf iOS und Android
 Läuft grundsätzlich auf iOS und Android
 Sieht überall gleich aus (Webseiten Look & Feel)
2) Verhält sich wie eine App
 Sieht wie eine native App aus (native Look & Feel)
 Native Bedien-Elemente und Bedien-Funktionen
3) Im Store
 Liegt in den offiziellen Stores zur Installation (Google Play und Apple iTunes)
 Offiziell geprüft und als App akzeptiert (UX, Sicherheit, …)
2

3. / web / technology / partner /
Beispiel: Native Buttons
Nativ entwickelt:
 iOS, programmiert in Objective-C
 Android, programmiert in Java
 2-4 Apps mit gleichen Funktionen (Phones + Tablets) und
 2 Programmiersprachen, 2 Projekte, 2 Teams
 2 x Wartung / Weiterentwicklung
3

4. / web / technology / partner /
Native Buttons cross-plattform
Cross-plattform entwickelt mit Titanium:
 „Write Once, Run Anywhere“ - Ansatz
 z.B. Titanium, programmiert in JavaScript
var myButton = Ti.UI.createButton({
title:'Click Me!'
})
4

5. / web / technology / partner /
Beispiel: Native-Like Look & Feel
Cross-plattform entwickelt mit Kendo UI Mobile:
 Mobile Webseiten in JavaScript und HTML5 (als ob nativ)
 z.B. Kendo UI Mobile Framework
 „native themes“, z.B. Tab-Bar:
iOS unten,
Android oben
5

6. / web / technology / partner /
Cross Platform Tools
Cross Platform App Development Tool Benchmarking 2013:
 research2guidance, Berlin, www.research2guidance.com
 Untersuchung von fast 100 Tools
 meist verwendet:
6

7. / web / technology / partner /
Cross Platform Tool Landscape
Cross platform app development tool categories:
 Web App Toolkits: Kendo UI, JQuery Mobile, Sencha Touch, …
 App Factories: AppMachine, AppMakr, … (für Nicht-Entwickler)
 Cross Platform IDEs: Titanium, PhoneGap, Adobe Air, …
 …
7

8. / web / technology / partner /
Web Apps
Mobile Webseiten:
 HTML/CSS/JavaScript, z.B. responsive web design = läuft im Browser
 sehr viele Web-Entwickler verfügbar
 Aussehen wird durch HTML/CSS/JavaScript bestimmt (Webseiten Look & Feel),
Mobile-Frameworks, z.B. jQuery Mobile, neu: Ionic, CocoonJS , The-M-Project,
 Nicht in den Stores Famo.us, SAP/OpenUI5, Intel XDK
Web-Apps:
 HTML/CSS/JavaScript + Web App Toolkit / UI-Framework = läuft im Browser
 viele Web-Entwickler verfügbar, mobil-Erfahrungen hilfreich
 Natives Aussehen durch eigenes HTML/CSS/JavaScript bzw. UI-Frameworks:
Native Look & Feel z.B.: Sencha Touch, Kendo UI, Dojo Toolkit, ChocolateChip-UI
 Nicht in den Stores
8

9. / web / technology / partner /
Hybrid Apps
Hybrid-Apps mit PhoneGap:
 Web App + Adobe PhoneGap (Apache Cordova) = native App,
Webseiten als native App gekapselt (Wrapper)
 viele Web-Entwickler verfügbar, mobil-Erfahrungen nötig
 viele geräte-spezifische Funktionen verfügbar:
iOS, Android, Blackberry, Windows, Palm WebOS, Bada, Symbian.
 App im Store möglich: aber Apple will dort nur "richtige" Apps (native Look & Feel)
(s.u. "PhoneGap advice on dealing with Apple application rejections“)
 http://phonegap.com/blog/build/getting-started-with-phonegap-and-phonegap-build/
9

10. / web / technology / partner /
Herausforderungen für Hybrid-Apps
Herausforderungen:
 Browser-Unterschiede
 mobil-UX-Erfahrungen
 Performance
 Tools
How can you improve an app,
if you can’t measure it?
(profiling)
How can you fix a bug,
if you can’t replicate it?
(debugging)
 http://www.developereconomics.com/html5-performance-fine-missing-tools/
10

11. / web / technology / partner /
Native Cross Platform Apps
Native Apps mit Titanium:
 JavaScript + Titanium = native App (native JavaScript interpreters)
 viele JavaScript-Entwickler verfügbar,
allerdings mobil- und Titanium-spezifische Erfahrungen nötig!
 viele geräte-spezifische Funktionen verfügbar:
iOS, Android, Blackberry, (Windows demnächst),
z.B. „echte“/native Bedien-Elemente (buttons, tab bars, alert messages etc.)
 als „richtige“ App im Store
 http://www.appcelerator.com/titanium/
 http://www.appcelerator.com/blog/2012/05/comparing-titanium-and-phonegap/
11

12. / web / technology / partner /
Beispiel: iOS7-Update mit Titanium
Titanium Entwicklungsumgebung:
 Programmierung in JavaScript für iOS, Android, …
 Aufruf der Gerätefunktionen über Titanium SDK
 Ausführung der Gerätefunktionen nativ
 iOS7-Update mit Titanium:
Anpassung des Titanium SDK durch Appcelerator,
nur minimale Anpassung der Apps nötig!
 iOS7-Update in Objective-C:
eigene Anpassung der iOS-App,
umfangreiche Änderungen nötig!
12
iOS-Update

13. / web / technology / partner /
Appcelerator Titanium
Titanium Entwicklungsumgebung 3.x:
 cross-plattform: iOS, Android, Blackberry, demnächst Windows
 mit MVC-Framework (Alloy)
 mit Entwicklungsumgebung (Studio)
 eine Programmierung in JavaScript,
nicht multithreadingfähig
 ca. 70-80% gemeinsamer Kode
 kostenlos
 > 5.000 APIs, gut dokumentiert
 Einarbeitung nötig!
 http://www.appcelerator.com/
13

14. / web / technology / partner /
Titanium Verbreitung
Titanium weltweit: Stand 1/2014
 65.397 mobile Apps
 auf 195.419.479 Geräten
 545.658 Entwickler
(Downloads?)
April 2013
14

15. / web / technology / partner /
Appcelerator Plattform
Zusätzlich:
 Appcelerator Cloud Services
 Marktplatz für fertige Module
 Connectors (PayPal, DropBox,
Google Calendar, Facebook, Twitter, …)
 Kostenpflichtig: Appcelerator Platform
für Unternehmen
Echtzeit-Analyse
Test-Umgebung
Enterprise Connectors
(SAP, Oracle, Salesforce,
Microsoft SharePoint and Dynamics)
…
15

16. / web / technology / partner /
Cross Platform Vergleich
Web-App Hybrid-App native App native Apps
(PhoneGap) (Titanium) (Objective-C + Java)
 im Store: - (+) + +
 Performance,
Animation: - +/- + ++
 Touch, Sensor,
Geo-Location: + + ++ ++
 Kalender,
Adressbuch: - + + +
 Kamera: +/- + + ++
 auch offline: +/- + ++ ++
 hardware-nah: - + + ++
 App-Größe: 0 - - +
 Kosten: ++ + + -
16

17. / web / technology / partner /
Cross Platform Empfehlung
Web-App Hybrid-App native App native Apps
(PhoneGap) (Titanium) (Objective-C + Java)
 Aufruf ohne Installation, automatische Updates,
ohne Store : mobile Web-Seiten oder Web-App
 im Store: PhoneGap oder Titanium
 native look & feel: Titanium
 Performance: Titanium oder Objective-C + Java
 hardware-nah: Objective-C + Java
 Kosten: PhoneGap oder Titanium
 spezifische Anforderungen: zu prüfen!
 übliche Anforderungen: Titanium
17
„Was kostet eine App?“
„So viel wie ein Auto.“
„Welches Auto?“
„Genau!“

18. / web / technology / partner /
Quellen:
 http://www.appcelerator.com/enterprise/
 http://de.slideshare.net/ralcocer/multi-platform-development-using-titanium-alloy
 http://research2guidance.com/cross-platform-tool-benchmarking-2013/
 http://www.adobe.com/devnet/phonegap/articles/apple-application-rejections-and-
phonegap-advice.html
 IBM Whitepaper April 2012: Native, web or hybrid mobile-app development
Kontakt:
Siemensstr. 8A, 61352 Bad Homburg, Tel.: 06172 / 4988554
http://www.dmr-solutions.com
mailto:info@dmr-solutions.com
Wir sitzen in der Nähe von Frankfurt und sind spezialisiert auf:
Webanwendungen: SW-Entwicklung für Internet, Intranet, Extranet und
mobile Lösungen: Mobile Webseiten und Cross-Plattform-Apps.
Referenzen unter http://www.dmr-solutions.com/category/referenzen/
Danke für Ihre Aufmerksamkeit
18