Agon Solutions. The native web mobile Architekturen mit HTML5 und PhoneGap. Ihre Prozesse in besten Händen.

Transkript

1 The native web mobile Architekturen mit HTML5 und PhoneGap Juri Urbainczyk Agon meets Technology 26. Februar 2013 Agon Solutions Ihre Prozesse in besten Händen. 1

2 Worum geht s? Mobile und mehr Warum HTML5? Wie den phone gap überwinden? 2

3 On the rise 3

4 Alternativen mobiler Architekturen Native App Mobile Webapplikation Mobile RIA Hybrid RIA Daten Devices Daten Devices Daten Devices Daten Devices Install Client der Anwendung Webclient Browser HTML5 JavaScript RIA Webclient Browser Runtime HTML5 JavaScript RIA Webclient Install Services Request/Reply Services Services Server der Anwendung Server der Anwendung Server der Anwendung Server der Anwendung Daten Daten Daten Daten 4

5 Die Frage nach mobile greift zu kurz! Devices Tablets Smartphones Desktops Laptops Netbooks Navigation Systems Game Console Kiosk Eine gemeinsame Basis wird benötigt! Operating Systems ios Linux Windows Chrome MacOS Android BlackBerry Safari v5.1 + Chrome v15 + IE v9 + Firefoxv8 + Opera v Web Browsers 5

6 Not talking about Games High-performance Real-time applications Business Applications 6

7 Die gemeinsame Basis 7

8 Was ist HTML5? 8

9 Html5 Beispiele 9

10 Was ist HTML5? Offline-Webanwendungen 10

11 html5test.com 11

12 Architektur Web Standard Browser Seite Web RIA Browser RIA Webclient View Controller HTML5 Framework Warum RIA?» Bandbreite» Skalierung» Performance Request Response Initialer Download Services» Layout & Design» Programmiermodell View Service Layer» Entkopplung Model Controller Model» Testbarkeit Server Server» Offline Warum HTML5? Datenbank Datenbank» Keine Plugins» Cross-Plattform *RIA = Rich Internet Application 12

13 The phone gap Daten Devices? Browser RIA Webclient View HTML5 Framework Controller Install? Initialer Download? *RIA = Rich Internet Application 13

14 PhoneGap = Apache Cordova 14

15 PhoneGap: How it works Tablet / Smartphone Devices PhoneGap Browser PhoneGap API HTML / CSS / JS Services PhoneGap Build Server-Anwendung Server-Rechner 15

16 PhoneGap Build 16

17 PhoneGap Feature Support 17

18 PhoneGap Source Code Example 18

19 HTML5 und RIA: Folgen für die Architektur» Gleiche Anwendungen/Funktionen für verschiedenste Endgeräte» RIA bringt stärkere Client/Server Entkopplung service-orientierte Architekturen» Mächtigkeit der Technologien nimmt zu» Die Komplexität nimmt zu keine weitere unnötige Komplexität Blueprints( Standardarchitektur ) notwendig Qualitätsmanagement für Architekturen 19

20 HTML5 und RIA: Organisatorische Folgen» Leichtgewichtigkeit ermöglichen Nicht durch Überbau zerstören Durch leichtgewichtige Prozesse managen Agilität zulassen» Benutzerführung: Kombination Grafik, Audio, Video + klassische GUI Neue Möglichkeiten nutzen Kreativität gefragt! 20

21 Fazit Eine Architektur Sonderlösungen nur im Sonderfall Die Basis: Hybride Webanwendungen Mit HTML5 Wichtig: SOA + Blueprints 21

22 22

23 Vielen Dank für Ihre Aufmerksamkeit. Juri Urbainczyk Project Manager, Bereichsleiter A:gon Solutions GmbH Frankfurter Straße Eschborn 23

24 Anhang 24

25 Mobile: spezifische Herausforderungen» Neue Bedienkonzepte» Besondere Nutzersituation» Fragmentierung des Markts (Plattformen, Formfaktoren, Betriebssysteme, Browser )» Offline Fähigkeit» Kleineres Display (aber hohe Auflösung!)» Landscape vs. Portrait» Technologie nicht 1:1 übertragbar (z.b. Dalvik VM)» Z.T. andere Frameworks» Höherer Komplexität bei Test und Debugging» Höhere Anforderungen an Grafik und Cool-Faktor 25

26 Was ist HTML5?» Semantische Elemente» Canvas» Video/Audio» Geolocation-API» HTML5 Storage» Offline-Webanwendungen» Verbesserungen für Formulare» Webworkers» Websockets» Weitergehende Standardisierung 26

27 PhoneGap live Beispiel 27