Königsfrage der modernen App-Entwicklung. Jürgen Fey

Transkript

1 Königsfrage der modernen App-Entwicklung Jürgen Fey

2 Quelle:

3 Agenda Generelle Einführung in das Umfeld und Thema Smartphones Tablet Systeme Embedded Internet of Things In der Folge kombiniert: Lösungsansätze/Problematiken für App-Entwickler Diskussion/Fragen

4 Androidian: Ein virtuelles Team HW/SW Consultants (S60, J2ME, Linux, Android, EMP, UX, App Architectures, IMS, LTE, Web, jquery) Gründer: Jürgen Fey Projekte für Forum Nokia, Microsoft Mobile, Sony NetServices, Ericsson Prototype Division, ST Ericsson, T- Mobile International, Vodafone Global, Telekom, Rosenberger, HBM, Allianz Zuletzt: IMS Multimedia Application Suite (Ericsson), Browser basierte / native Android app suites (ST Ericsson), BONDI (TMO), ipad Projekt Tageszeitung, Browser UI HBM, Android Platform Allianz CTO@ Music Distribution Service Startup (München, NYC) CTO@ Home Automation Stealth (München, Wien)

5 Android-Projekte Native/hybrid Embedded-Projekte Touch UE! Systemberatung (mobile, embedded, home automation) Studien (Theorie, Proof-of-Concept..) Browser-basierte Anwendungen Cordova, JavaScript, GWT Backend Grails, Groovy, Spring

6 1.) Platform-Projekte bleiben eher wie gehabt Linux/C fürs Framework Leicht steigend: Scripting (SL4A) 2.) Native Apps leicht zurückgehend Maintenance wird komplexer/teurer Nicht Plattform-Übergreifend/nicht zeitgemäß 3.) Hybrid Apps stark steigend Javascript Engines werden performanter Komplexe JS-Apps sind machbar! Cordova ist erwachsen Plugins Portabler (nicht generell portabel)

7 Generelle Einführung in das Thema Wir erleben neue und umwälzende Herausforderungen im Software-Umfeld : Einfache Logikmaschinen (Relais, Transistoren) 1970`s: Integrierte Schaltkreise : Mainframes kommen und gehen 80`s, 90`s: Der PC erobert die Welt 2009-: Mobile Endgeräte drängen auf den Markt 2010-: Das mobile Segment wächst in die Breite Tablets Autos TV 2014-: Internet of Things...

8

9

10

11

12

13 Anmerkung: US-Zahlen Quelle: Washington Post

14 Smartphones galten bis 2007/8 als zu teuer für einen Massenmarkt > 400 Euro Die Industrie hat Einsteigergeräte und Featurephones in den Fokus gestellt Kamera MP3 Radio Kein Touch, keine Apps Volle Kontrolle über Gesamtprodukt

15 Industrie (Hersteller, Telcos) hatte alles im Griff. Forecasts perfekt geplant Telcos/Operatoren als feste Abnehmer Telcos geben Gerät verbilligt weiter Datenanbindung theoretisch verfügbar aber kaum genutzt. WAP, HTML, Midlets (J2ME) Symbian Series60/S60 Blackberry

16

17 Dann kam ein Tag im Januar 2007 Apple reinvents the phone with iphone

18

19 iphone-sales

20 2012-: Der Marktanteil der Smartphones wächst weiterhin sehr stark Canalys: Smartphone-Wachstum bis 2016 auf 1.2 Milliarden Smartphones/Jahr 19.5 jährliches Wachstum undenkbare Zahlen noch in 2010 Pads: ca. 27% Wachstum auf 200+ Millionen Geräte/Jahr

21 Nach Apple wirft ein weiterer Quereinsteiger die schöne Ordnung über den Haufen T-Mobile Dream G1 Gmail Maps Google Offen (Quelltext) OHA (Open Handset Alliance)

22 Google Eric Schmidt angesprochen auf den mobilen Anzeigentraffic: "Trust me that revenue is large enough to pay for all of Android's activities and a whole bunch more," Schmidt said.

23 September 2012: 500+ Millionen Android Activations 1.3 Millionen Activations/Tag (ios: ca Activations/Tag)

24 Man darf gespannt sein wie der Markt das neue Tandem aus Microsoft und Nokia aufnimmt

25 Smartphones sind für viele Anwender zum wichtigsten Online-Medium geworden Immer online Datentarife Leistungsfähiger Web-Browser (ABER: immer noch 10x+ langsamer als auf den PC!) Touch UI Der PC ist auf dem Rückzug Umbruch ist relevant für Content-Inhaber!

26 Trend zu multi-core Multiple GPUs Nexus 7 (199 US $) Quad Core Nvidia Tegra 3 Stealth core für low power (stepdown target) 12 GPUs Optimierter Android-Support 8 GB Flash 1280x1024 Display WLAN, BT, GPS, Sensoren...

27 Eine weitere grundlegende Veränderung 2010: Apple ipad 2010: Android pads (Samsung Galaxy Tab) 2011: Apple ipad : Android 3.0 (Honeycomb) 2012: ipad, mini ipad, Nexus7

28 Vorhersage: Tablets etablieren sich als eigenständige Geräteklasse Das ipad bleibt Platzhirsch Android-Tablets erobern signifikante Anteile ist der Display-Range Auflösungen vergleichbar aber durch die Unterschiede in der Display-Grösse nicht einfach austauschbar One Size fits all-strategie wird nicht funktionieren Weder native App noch Web-App

29 Displaygrößen/Auflösungen Gerät Display Auflösung ipad (Retina) *1536 Nexus *800 ipad Mini? *768 Folge: User Interface der Apps muss mit diversen Seitenverhältnissen und Auflösungen zurecht kommen

30 Der Markt bewegt sich ipad: von 81% auf 52% (2011 auf 2012) Pew Research Center Android: Zuwachs auf 48% Kindle Fire: 21% (eigene UI!) Kindle Fire hijacks Android Market Nexus7: Fast, Cheap and Good Projekt in vier Monaten durchgezogen (Jan/Mai 2012) Gute Verkaufszahlen. Prognose: ca. 8 Mio devices/2012

31 Preise für high performance Systeme sinken Smartphone-Stückzahlen helfen Unzählige embedded-entwicklungs-plattformen Beagleboard/Beaglebone Pandaboard Arduino-Welle IOIO

32

33 IOIO 48 I/O Pins 16 Analog Inputs (10 Bit) 9 PWM Outputs 4 UART Channels 3 SPI Channels 3 TWI/I2Channels OTA-fähig (vom Android-Device)

34 Android Accessory Development Kit (ADK) Support ab Android 3.1 Hardware Arduino-basiert Android Open Accessory Protocol

35 Android als universelles OS für Touch UI Aufzüge Auto(mobil) Fernbedienungen Home Appliance Home Automation Uhren

36

37 Fragmentierung Zwei grosse Blöcke Android 2.x (nur leichter Sinkflug) Android 4.x (deutlich ansteigend) Eine chinesische Mauer, die es zu überbrücken gilt: Android 3.x (Synonym für ein sub-optimales Android) Kam zu früh, unfertig Schlechter Produktsupport der Tablet-Anbieter Kein Update auf 4.x

38 Signifikante Unterschiede zwischen Android 2.x und 4.x UI Fragments ActionBar API-Erweiterungen Systemverhalten Menu (neu)aufbau etc.

39 Apple-Anteil sinkt langsam (auf hohem Level) Android wird weiter spürbar wachsen Blackberry verliert weiter Nokia S60 reif fürs Museum MeeGoo: the next big thing that wasn t Windows Mobile8: Dank Nokia-Connection wieder im Rennen, aber Ausgang unklar Smartphone Technologie wird bezahlbar im Embedded-Umfeld! OMAPs (etc.) überall

40 Long Term Evolution Bietet (theor.) bis zu 100/200 Mbit/s auf mobilen Endgeräten Verizon USA: ca 10 Mbit/s LTE rollout im Gange LTE ist das neue 4G (statt WiMax) Vollständig neue Use Cases sind nun gefragt! Hier hat die Industrie noch wenige Ideen! 100 MB download ist keine Hürde!

41 Internet of Things benötigt kostengünstige Kommunikation GPRS/HSUPA/LTE Bluetooth ZigBee 433/868MHz, 2.4 GHz

42

43 Was folgert aus den einzelnen Trends? Die treibende Kraft (nicht nur für Handies) sind die Smartphone-Systeme ios, Android Die gleichen Systeme werden die Tablets beherrschen Ähnliche Systeme finden sich auf künftigen TVs AppleTV/GoogleTV/Samsung SmartTV etc. Die gleichen System erobern vollkommen neue Märkte

44 Daraus folgt EIGENTLICH Jeglicher Lösungsansatz für Apps auf mobilen Endgeräten BEGINNT bei den Smartphones Potentiell größere Verbreitung der Apps Man muss die Systemlandschaften beobachten Aber: Welche Plattform? Welches Target Device? Deviceklassen Spezielle Lösungen für Embedded (power save etc.)

45 Mal eben eine App entwickeln geht nicht Typ Monate von der Idee bis Rollout Komplexe Web Apps sind vergleichbar Aber portabler Jedes Projekt sollte genau durchleuchtet werden bevor man den Startschuss gibt Wo genau liegt der Aufwand?

46 Vorurteil: Browser-basierte Apps sind wenig leistungsfähig Wrapper um simplen HTML-Content App-Verhalten nicht möglich Realität: Firmen fangen mit simplen Wrappern an und erweitern schnell in Richtung komplexer Apps Realität: Entwicklungstools im Bereich Web noch nicht ausgereift

47 Browser App für Meßgerät Desktop und Tablet Komplexe app mit 50+ custom widgets Message Passing (skalierbar) GWT Java-App, kompiliert nach JavaScript Java Toolchain (IntelliJ) Maintainable Customizing einfach Basisplattform für weitere Lösungen DEMO

48 Das UI ( User Interface ) ist die Schnittstelle zwischen der Applikationslogik und dem Anwender Die UI verkauft das Produkt Die UI verkauft die Message Die UI verbindet Anwender mit dem Produkt (oder auch nicht) Das UI steht mit der zugrundeliegenden Applikationslogik in Verbindung

49 In vielen Fällen betrifft das UI Design den Großteil der gesamten Entwicklung einer mobilen Applikation. 60% - 80+% ist ein üblicher Wert Dies wird sich noch verstärken da die UI immer wichtiger wird. Die Entscheidung für die richtige UI- Technologie ist absolut entscheidend für den Erfolg

50 Regelrechte UI-Schlachten finden statt (Adobe Flash vs. Apple, RIM, Microsoft..) Das Binden der UI Entwicklerkapazitäten an eine spezifische Plattform ist strategisch und schwächt die Konkurrenz Der Entwickler/Auftraggeber muss sich entscheiden Welche Plattform? Welche Technologie? Prioritäten Ständiges Anpassen an Roadmaps und neue Marktentwicklungen

51 Neue Geräteklassen steigen in den Ring PCs (eindeutig nicht Technologie-führend) Smartphones (jeder Forecast wird übertroffen) Tablets (Android, ipad, RIM QNX, Windows ) ebook Reader (starke Divergenz zw. USA, Asien und Europa) TV -Geräte (In kurzer Zeit vom Internet-Anschluss zur Widget-Umgebung) Autos (dieser Zweig hat vieles verschlafen, wird aber [hoffentlich] aufholen )

52 Touch Display mit taktiler Rückmeldung

53 Web Apps sind aktuell en vogue Warum? Verbesserte Plattform-Unabhängigkeit Leistungsfähige UI-Technologie Gute Bibliotheken und Frameworks verfügbar Weg aus dem app store lock

54 Web Apps erlauben heute eine Flash-alike UI Widgets Effekte Verlinkung Mashups Social Media Media

55 Alle modernen Smartphones haben einen leistungsfähigen Browser WebKit WebKit erlaubt Zugriff vom App Host (beide Richtungen) IE 10 (Windows Mobile 8)

56

57 Browser Host: Web Browser IE, Mozilla, FF, Chrome, Safari, Opera Browser Objects WebView (WebKit based) Browser based OS Chrome OS Peppermint OS Mobile: WebKit derzeit vorne

58

59 HTTP Einfacher Datenaustausch REST Representational State Transfer RESTful Simple web services JSON JavaScript Object Notation JSONP (JSON mit Padding: JS code vom Server!)

60

61 Es ist möglich alle Optionen zugleich zu nutzen Sehr leistungsfähige Datenquellen und Backend- Lösungen sind verfügbar Komplexe Browser apps sind möglich Desktop ähnliche apps sind möglich Leicht zu installieren Unterstützen multiple Plattformen

62

63 Erste Folgerung Browser-basierte UI und App-Entwicklung ist der grosse Trend Konkurrenz zur nativen App Plattform-Unabhängigkeit ist möglich bzw. wird erleichtert

64

65 HTML war jahrelang unverändert Neue Features in HTML5 Multimedia embedding AUDIO Tag VIDEO Tag Einfache Player-Kontrollmöglichkeiten Lokale Datenbank Location API Viele UI Verbesserungen LEGEND Tag

66 Web Forms 2.0 Besser strukturierte Forms sind nun möglich Verbesserte Eingabevalidierung möglich Canvas Element Erlaubt es, auf dem Canvas frei zu zeichnen

67 Problem: Spezifische Video codecs sind nicht fest vorgegeben! IE: H.264 FF: Ogg Chrome: VP8 H.264-Support eingestellt HTML5 beschleunigt die Evolution Browser Unterschiede nach wie vor Realität Konkurriert zu WRTs Hält immer mehr einzug bei den mobilen Browsern

68

69 Ein Grossteil der Komplexität lässt sich durch JavaScript-Bibliotheken isolieren jquery Klein, schnelle DOM-Manipulationen Browser agnostisch Plugins verfügbar jquery Mobile (sehr ios ähnlich) Sencha UI Twitter Bootstrap/less ENYO GWT

70 Die Welt des UI hat sich mit dem Touch Interface revolutioniert Anwender die einmal ein Touch UI genutzt haben wollen nicht mehr zurück Aber: Zeicheneingabe per Tastatur immer noch schneller Touch UI erfordert einen komplett neuen Satz an Methodologien und Werkzeugen

71 Single touch Einfachster Übergang von alten UI-Konzepten Start mit grösseren Menus, Buttons Das gleiche Baumartige UI Schema ist möglich Multi touch Transition in Richtung komplexere UI Schemata Gesten Nicht lineare app flows

72

73

74 Ein Touch UI spielt mit anderen Regeln Keine Maus Kein on mouseover Grosse Linkflächen Touch areas Gesten Menüs müssen anders Funktionieren oder gänzlich ersetzt werden

75

76 Sind diese Ziele klar definiert (diverse Abteilungen sind involviert!) kann man an die technische Lösung gehen Native App Web App/Hybrid Cross System Ressourcen allokieren Entwickler im mobile-umfeld sind dünn gesäht Rechtzeitig die Ressourcen sichern

77 Fragen: Wer wird die Lösung implementieren? Interne Teams Externer Service Provider Kombination Wann wird wie umgesetzt? Applikations-Roadmap Target Device Roadmap/Plan

78 Native Apps Vorteile Laufen im nativen Systemumfeld Bestmöglicher Zugriff auf System und Ressourcen Laufzeiten optimiert Appstore-fähig Nachteile Spezifische Programmierumgebung/API Spezifische UI Nicht portabel Programmierlogik idr. System- und UI-spezifisch

79 Web Apps (ohne WRT etc.) Vorteile Nutzen Fähigkeiten moderner Browser aus Erscheinungsbild wie das einer App Portabel Nachteile Bedingt Appstore-konform (per Hybrid App) Benötigt mehr Ressourcen Kein vollständiger Zugriff auf System

80 Cross-Plattform Tools Vorteile Unterstützen mehrere Plattformen mit gemeinsamer Umgebung (bis zu einem gewissen Grad) Schneller auf mehreren Plattformen Nachteile Je nach Tool unterschiedliche Plattformen Eigene Programmierumgebung Eingeschränkter Umfang

81 Beispiele: PhoneGap Appcelerator Titanium (JS, Ruby, Python) RhoMobile/Rhodes (Ruby) MoSync Whoop WidgetPad Cross-Tools unterstützen nicht alle Plattformen Cross-Tools unterstützen nicht alle Plattformen gleich

82 Cordova/PhoneGap setzt sich spürbar durch Apache Projekt Adobe hat Nitobi 2011 übernommen Support für 7 Platformen ios Android (nun Fragment Support mit 2.0) Windows Phone 7 Blackberry Bada WebOS Symbian

83

84 Cordova erweitert den nativen Browser um eine Web Runtime (WRT) Viele benötigte Funktionen bereits implementiert Fehlt eine Funktion, kann man diese per Plugin leicht einbauen Aber: Jedes Plugin ist native, muss also per Plattform getrennt implementiert werden Plugin-Repository vorhanden Dokumentation deutlich über Durchschnitt Bücher Usergruppen

85 In der Praxis eignet sich Cordova für übliche Web Apps Media-Support ist (wie bei anderen Frameworks auch) zum Teil eingeschränkt und nur durch native Plugins zu optimieren Der Entwickler muss entscheiden ob HTML5 (evtl. plus jquery) oder die Cordova-Variante die bessere ist Know How: HTML, CSS, JS, Java, Android, WebKit

86 Browser-basierte Komplettframeworks kommen Tizen WebOS Firefox OS WebinOS

87 Multi-Device Approach Linux-basiert + WRT V 2.0 (Alpha) im Sept erschienen

88 WebOS: Zukunft ungewiss.. Open WebOS: Open Source V 1.0 Final: Komponenten LoC

89 Browser OS auf Mozilla-Basis Boot to Gecko The Web is the Platform Interessante UI-Konzepte Erste Geräte werden 2013 erwartet ZTE HW: V788D Unterstützt von internationalen Providern

90 Setzt auf native (headless) OS auf WebinOS auf jedem Device (Auto, Arduino, Smartphone..) Device Discovery Mechanismen (IoT) Backgrounder:

91 The goal of webinos is to provide a multidevice, multi-user, multi-domain, webenabled federated framework. Multi-device means all your devices can easily talk to each other. Multi-user indicates you can contact your friends services too.

92 Hot Tools/Frameworks Node.js Backbone.js Angular.js Knockout.js Spine.js Ember.js Weitere Infos:

93 Übliches Requirement: Anpassen eines statischen HTML-Inhaltes für diverse Endgeräte Backend-Anpassungszyklen zu lange/teuer Lösung: Auf dem Client umbauen

94

95 JavaScript Library CSS Library Customization

96 Target Look&Feel muss genau definiert werden Regeln zur Konvertierung Ursprünglicher Content MUSS sehr gut strukturiert sein Ergebnis verhält sich wie eine native Touch- Anwendung Support für Orientierungsänderungen Gerätespezifische Besonderheiten

97 Wireframes Visual Design und CMS Optionen Usability Regeln und spezifische Features Ergebnis: Branded und distinktives look&feel

98 Facebook kündigt an, wieder mehr auf native zu setzen Gründe Tools zu schlecht Device-Debugging Scrolling Performance Kein direkter Zugriff auf GPU (Black Box) Quelle:

99 Simon Cross: "I think we have to separate HTML5 on the desktop Web from HTML5 on the mobile Web. On the desktop it is like done. It is awesome, and it's the future. On mobile it could be the future, but like any good technology it needs to prove itself

100 Die Kritik ist berechtigt.. Alle Beteiligten arbeiten an Erweiterungen/Verbesserungen BONDI-> W3C Javascript Engines Memory Footprint Nicht blind einem Hype folgen, sondern vor der Entscheidung genau analysieren!

101 Neben der Applikation, dem Use Case spielt vor allem die Realisierung der UI eine große Rolle Grobe Checkliste Use Cases Welche Systemfunktionen sind notwendig? Rolle des Appstore Welche Plattformen? Ressourcen verfügbar?

102 .. Wird wohl ein Traum bleiben.. Aber: Browser-basierte Lösungen schaffen den Spagat derzeit am besten Man muss den Markt beobachten, jeden Tag kann die nächste große Lösung kommen (node.js, Bootstrap etc.) Open Source reicht vollkommen aus.

103 Jürgen Fey