Möglichkeiten, Vorteile und Grenzen der Cross-Plattform-Entwicklung

Transkript

1

2 Möglichkeiten, Vorteile und Grenzen der Cross-Plattform-Entwicklung iks Thementag Mobile Applikationen Es lebe die Vielfalt?! Autor: Jan Laußmann

3 Agenda Warum Cross-Plattform entwickeln? Hybrid Apps in der freien Wildbahn Aufwand für die Entwicklung von Hybrid Apps Die 3 größten Probleme bei der Hybrid App Entwicklung lösen Hybrid Apps und der Apple Store gibt es Probleme? Grenzen der Hybrid App Entwicklung Entscheidung treffen: Native App oder Hybrid App? Seite 3 / 75

5 So wird App Entwicklung oft dargestellt Seite 5 / 75

6 Aber das ist falsch! Seite 6 / 75

7 Die Entwicklung macht den Löwenanteil aus Seite 7 / 75

8 Und bei mehreren Plattformen Seite 8 / 75

9 Probleme der nativen App Entwicklung Die App muss X mal komplett neu programmiert werden X mal Entwicklungskosten X mal Wartungskosten (Bugfixes) Multiple Ansprechpartner Abstimmungsaufwand Einarbeitung z.b. in Backendkommunikation Die Apps unterscheiden sich Qualität Benutzerführung Features Seite 9 / 75

10 Das bietet Cross-Plattform-Entwicklung Seite 10 / 75

11 So soll das Ergebnis sein Nur einmal programmiert Fühlt sich an wie eine native App Schauen wir uns mal an was eine native App ausmacht Seite 11 / 75

12 Native Apps Cross-Plattform: nein Java (Android) Objective-C (ios) Natives Look & Feel: ja Performance: schnell Sichtbarkeit im App Store: ja Platz auf dem Startbildschirm: ja Seite 12 / 75

13 Native Apps Offline Funktionalität: ja Daten lokal speichern: ja Zugriff auf Gerätesensoren: ja Kamera Geolocation Kommunikation mit anderen Anwendungen: ja Adressbuch Kalender Seite 13 / 75

14 Können Web Apps das leisten? Cross-Plattform: ja HTML 5 CSS 3 JavaScript Natives Look & Feel: nein Performance: mittel Sichtbarkeit im App Store: nein Platz auf dem Startbildschirm: ja, aber Seite 14 / 75

15 Web Apps auf dem Startbildschirm Seite 15 / 75

22 Web Apps Offline Funktionalität: ja (HTML5 Application Cache), aber... Daten lokal speichern: ja via HTML5 Browser Datenbank (Indexed DB, Web Storage oder Web SQL) Zugriff auf Gerätesensoren: nein, bis auf Geolocation Kommunikation mit anderen Anwendungen: nein Seite 22 / 75

23 Überblick Native App vs. Web App Native App Web App Cross-Plattform nein ja Natives Look & Feel ja nein Performance schnell mittel App Store ja nein Startbildschirm ja ja, aber Offline ja jein Datenbank ja ja Sensoren ja jein Adressbuch etc. ja nein Seite 23 / 75

24 Hybrid Apps Hybrid Apps vereinen das Beste aus beiden Welten: Cross-Plattform Alle Smartphone Features nutzen Seite 24 / 75

25 Hybrid Apps Hybrid Apps bestehen aus: Web App Cross-Plattform Nativen Container (Verpackung) für Web App Alle Smartphone Features nutzen Seite 25 / 75

26 Nativer Container Den nativen Container kann man sich als Spezial-Browser vorstellen Keine URL Leiste oder ähnliches Sondern nur der Teil des Browsers, der die Web App anzeigt Seite 26 / 75

27 Überblick: Native App vs. Hybrid App vs. Web App Native App Hybrid App Web App Cross-Plattform nein ja ja Natives Look & Feel ja nein nein Performance schnell mittel mittel App Store ja ja nein Startbildschirm ja ja ja, aber Offline ja ja jein Datenbank ja ja ja Sensoren ja ja jein Adressbuch etc. ja ja nein Seite 27 / 75

28 Nativer Container: PhoneGap Adobe Open Source Gut dokumentiert Große Community Android, ios, Windows Phone, Blackberry Seite 28 / 75

29 PhoneGap API Brücke (API) zwischen Web App und nativen Funktionen APIs für die viele Smartphone Features wird direkt mitgeliefert Adressbuch Barcode Scanner Beschleunigungssensor U.v.m. Kann mit eigenen APIs beliebig erweitert werden Seite 29 / 75

30 Alternativen zu PhoneGap Nr. 1 Appcelerator / Titanium Wird in JavaScript programmiert Danach zu nativer App kompiliert Seite 30 / 75

31 Alternativen zu PhoneGap Nr. 2 Mono Touch / Mono for Android Wird in C# programmiert Bietet eine Laufzeit Umgebung für C# Code auf Android und ios View ist nicht Cross-Plattform, muss für jede Plattform extra programmiert werden Seite 31 / 75

32 Bekanntheitsgrad: Hybrid App Frameworks Quelle: Google Trends Seite 32 / 75

33 PhoneGap Contributors Adobe IBM Microsoft Blackberry HP/Palm Salesforce Seite 33 / 75

35 Wikipedia (PhoneGap) Seite 35 / 75

36 Wikipedia Mit PhoneGap entwickelt Millionen Installationen (Android) Android ios BlackBerry Seite 36 / 75

37 HealthTap Seite 37 / 75

38 HealthTap Mit PhoneGap entwickelt 1 5 Millionen Installationen (Android) Android ios Seite 38 / 75

39 Untappd Seite 39 / 75

40 Untappd Mit PhoneGap entwickelt Installationen (Android) Android ios BackBerry Windows Phone 8 Seite 40 / 75

41 Seite 41 / 75

43 Wo bietet Cross-Plattform-Entwicklung Vorteile? Hier kann man sparen App Entwicklung Wartung / Bugfixes Neue Features / Updates Immer dort wo programmiert wird Das ist von der Entwicklungsmethode unabhängig Planung Tests Rollout Immer dort wo nicht programmiert wird Seite 43 / 75

44 Höherer Aufwand als Nativ bei: Interface Gestaltung Android und ios nehmen hier dem Entwickler viel Arbeit ab Mobile CSS Frameworks stecken noch in den Kinderschuhen Deshalb ist es aufwändiger gute User Interfaces mit HTML/ CSS zu gestalten als mit Android oder ios Performance Tuning Bei nativer Entwicklung vernachlässigbar Bei Cross-Plattform-Entwicklung dringend notwendig! Seite 44 / 75

45 Grobe Schätzung - Daumenregel X = Aufwand 1 Native App Läuft auf 1ner Plattform X * 1.5 = Aufwand Hybrid App Läuft auf allen Plattformen Seite 45 / 75

46 Beispiel 1 für Daumenregel (Aufwand Entwicklung) Native App für Android und ios 1 * Aufwand X für Android 1 * Aufwand X für ios Gesamtaufwand = 2X Dieselbe App als Hybrid App 1 * 1.5-facher Aufwand Läuft auf Android und ios Gesamtaufwand: 1.5X Sparpotenzial: 25% Oder andersherum: nativ ist 33% teurer Seite 46 / 75

47 Beispiel 2 für Daumenregel (Aufwand Entwicklung) Native App für Android, ios und Blackberry 1 * Aufwand X für Android 1 * Aufwand X für ios 1 * Aufwand X für Blackberry App Gesamtaufwand = 3X Dieselbe App als Hybrid App 1 * 1.5-facher Aufwand Läuft auf Android, ios und als Blackberry App Gesamtaufwand: 1.5X Sparpotenzial: 50% Oder andersherum: nativ ist 100% teurer Seite 47 / 75

48 Benötigte Entwickler-Skills Für die Web App JavaScript HTML CSS Für den nativen Container Cross-Plattform Frameworks (z.b. PhoneGap) Java (Android) Objective-C (ios) Seite 48 / 75

49 Code Metriken Beispiel Servicepoint App Cross-Plattform Code: ~95% Nativer Code: ~5% Seite 49 / 75

50 Entwicklungs-Plattformen für Hybrid Apps ios Mac mit OS X und Xcode / AppCode Windows Phone PC mit Windows und Visual Studio Android Entwicklung überall möglich Alternative: PhoneGap Cloud Build Seite 50 / 75

52 Problem 1: feststehender Header / Footer Seite 52 / 75

53 Problem 1: feststehender Header / Footer CSS Support für feststehende Elemente ist auf alten Geräten nicht vorhanden Mit JavaScript permanente Elemente neu zu positionieren führt zu flackern der Elemente und trägen Anwendungen Diverse Bugs bei CSS / JavaScript Lösungen Fixierte Elemente scrollen doch mit Fixierte Elemente verschwinden Eingabefelder schieben sich über fixierte Elemente Tabben in Eingabefeldern funktioniert nicht richtig Seite 53 / 75

54 Lösung: native Header / Footer Nativen Header / Footer mit Cross-Plattform App kombinieren Nativer Header / Footer ist fixiert Gesamte Cross-Plattform App scrolled dazwischen Zwar nur 95% Cross-Plattform Aber man bekommt dafür natives Look & Feel geschenkt Sieht wie eine native App aus Das Scrollen fühlt sich nativ an Seite 54 / 75

55 Cross-Plattform App mit nativem Header Seite 55 / 75

56 Native Look & Feel Hybrid App (Android) (ios) Native Apps (Android) (ios) Seite 56 / 75

57 Einschub vor Problem 2: Single Tap Seite 57 / 75

58 Einschub vor Problem 2: Double Tap Seite 58 / 75

59 Problem 2: Klickverzögerung Wenn in einem mobilen Browser getapped wird, wartet der Browser ca. 400ms ob ein zweiter Tap folgt (Double Tap) Wenn ein zweiter Tap folgt zoomed der Browser auf diese Stelle Wenn kein zweiter Tap folgt feuert der Browser ein Click Event Die App fühlt sich ungewohnt träge an Seite 59 / 75

60 Lösung: Den ersten Tap direkt als Click interpretieren Auch Hybrid Apps sollen sich.. nicht wie mobile Websites anfühlen (was sie technisch sind), sondern wie native Apps Also: Direkt der erste Tap muss als Klick interpretiert werden Ohne Wartezeit Das gibt PhoneGap nicht direkt her Doch es gibt passende JavaScript Libraries z.b. fastclick von der Financial Times Seite 60 / 75

61 Problem 3: Animationen Bei der klassischen Webentwicklung werden Animationen mit JavaScript realisiert Smartphones sind aber leistungsschwächer als Desktop PCs Animationen sehen ruckelig aus Seite 61 / 75

62 Problem 3: Animationen weglassen? Animationen sind nicht nur für Spiele wichtig Animationen bei Business Anwendungen: Seitenwechsel Tooltips einblenden Auf Animationen kann man nicht einfach verzichten Seite 62 / 75

63 Lösung: CSS3 CSS3 Animationen sind hardwarebeschleunigt Computer / Smartphones Hauptprozessor (CPU) Grafikkarte (GPU) JavaScript Animationen: allgemeiner Hauptprozessor CSS3 Animationen: spezialisierte Grafikkarte Bringt 2-3 fache Beschleunigung Seite 63 / 75

65 Hybrid Apps und der Apple Store PhoneGap: Apple hat eine technische Überprüfung durchgeführt und PhoneGap Apps verstoßen nicht gegen die AGB des Apple Stores Aber Hybrid Apps wurde schon die Freigabe im Apple Store verweigert! Wie passt das zusammen? Seite 65 / 75

66 Gründe für Ablehnung Verstoß gegen: Human Interface Guidelines: Reconsider Web-Based Designs: Focus your app Design for touch Let people scroll Apple s App Store Review Guidelines Apps that are [ ] simply web sites bundled as Apps [...] may be rejected. Apps that are simply web clippings, content aggregators, or a collection of links, may be rejected. Seite 66 / 75

67 Hybrid Apps und der Apple Store - Fazit Hybrid Apps dürfen in den Apple Store Für Hybrid Apps gelten dieselben Bedingungen wie für native Apps Man darf es sich nicht zu einfach machen Eine App muss Mehrwert bieten Seite 67 / 75

69 Grenzen der Cross-Plattform-Entwicklung Das größte Problem ist die Performance Auf guten Smartphones sind Hybrid Apps kaum von nativen Apps zu unterscheiden Aber auf alten, leistungsschwachen Geräten sind Hybrid Apps relativ langsam In der Regel alle 2 Jahre ein neues Smartphone Seite 69 / 75

70 Grenzen der Cross-Plattform-Entwicklung Native Look & Feel Beispiel Checkboxen Android ios Für Cross-Plattform muss ein Kompromiss gefunden werden Seite 70 / 75

72 Entscheidung treffen: Native App oder Hybrid App? Hybrid Apps Wirtschaftlich sinnvoll Technisch machbar Wird deshalb in Zukunft im Focus liegen Native Apps Nur eine Plattform Kein Kompromiss bei native Look & Feel möglich Aufwändigere Animationen (Spiele) Seite 72 / 75

73 Weiterführende Literatur PhoneGap ww.phonegap.com Seite 73 / 75

74 Fragen?

75