Cross-Platform Mobile Apps

Transkript

1 Cross-Platform Mobile Apps 05. Juni 2013

2 Martin Wittemann Master of Science (2009) Arbeitet bei 1&1 Internet AG Head of Frameworks & Tooling Tech Lead von qooxdoo

3 Plattformen Java ME 12 % Rest 7 % Android 26 % ios 55 % Mobile-Phone + Tablet, Stand: , Quelle:

4 Plattformen Java ME 12 % Rest 7 % ios & Andoid 81 % Mobile-Phone + Tablet, Stand: , Quelle:

5 Plattformen

6 Plattformen Objective-C Java

7 Plattformen Webtechnologien

8 Plattformen Webtechnologien

9 Webtechnologien HTML JAVASCRIPT CSS

10 Mobile Apps Device API / App Stores Cross-Platform

11 Mobile Apps Device API / App Stores Native Apps Cross-Platform

12 Mobile Apps Device API / App Stores Native Apps Mobile Website Cross-Platform

13 Mobile Apps Device API / App Stores Native Apps Hybrid Apps Mobile Website Cross-Platform

14 Mobile Apps Device API / App Stores Native Apps Hybrid Apps Mobile Website Cross-Platform

15 Native Entwicklung SDK Code Test Build SDK Code Test Build

16 Webtechnologien Build SDK Code Test Build

17 Webtechnologien SDK Code Test Build Build Build Build Build...

18 Herausforderungen Programmierung der Oberfläche

19 Programmierung der Oberfläche Normal: Pressed:

20 Programmierung der Oberfläche <!DOCTYPE html> <html> <head> <style type="text/css" media="screen">.button { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: 1px solid #B4B4B4; background-color: white; color: #666; cursor: pointer; font-weight: 700; text-align: center; padding: 2px 20px; margin-top: 4px; height: 30px; width: auto; line-height: 30px; font-size: 15px; font-family: Helvetica; } Normal: Pressed:.button:active { background-image:-webkit-gradient(linear,center top,center bottom,from( #4583fd),to(#194ae4)); background-image:-webkit-linear-gradient(top, #4583fd, #194ae4); background-image:-moz-linear-gradient(top, #4583fd, #194ae4); background-image:linear-gradient(to bottom, #4583fd, #194ae4); color:#fff } </style> </head> <body> <div class="button">button</div> </body> </html>

21 Herausforderungen Programmierung der Oberfläche Cross-Browser Unterschiede

22 Cross-Browser Unterschiede

23 Cross-Browser Unterschiede! Unterschiedliche Versionen können zu unterschiedlichen Bugs / Feature-Sets führen [1] Quelle:

24 Cross-Browser Unterschiede! Unterschiedliche Versionen können zu unterschiedlichen Bugs / Feature-Sets führen Beispiel 3D Transforms Unterstützt von ios und ab Android 3.0 [1] Feature Checks zur Laufzeit --> zukunftssicher [1] Quelle:

25 Cross-Browser Unterschiede! Unterschiedliche Versionen können zu unterschiedlichen Bugs / Feature-Sets führen Beispiel 3D Transforms Unterstützt von ios und ab Android 3.0 [1] Feature Checks zur Laufzeit --> zukunftssicher [1] Quelle:

26 Herausforderungen Programmierung der Oberfläche Cross-Browser Unterschiede Probleme mit dem Scrolling

27 Scrolling-Probleme fix beweglich fix

28 Scrolling-Probleme fix beweglich fix

29 Scrolling-Probleme fix beweglich fix position: fixed bzw. overflow: scroll

30 Scrolling-Probleme fix beweglich fix position: fixed bzw. overflow: scroll! Natives scrolling ab ios 5.0 und Android 3.0 [1] [1] Quelle:

31 Herausforderungen Programmierung der Oberfläche Cross-Browser Unterschiede Probleme mit dem Scrolling Beschränkter Zugriff auf die Hardware Keine Distribution über die AppStores

32 PhoneGap

33 PhoneGap Verpacken

34 PhoneGap Verpacken Installieren

35 Herausforderungen Programmierung der Oberfläche Cross-Browser Unterschiede Probleme mit dem Scrolling Beschränkter Zugriff auf die Hardware Keine Distribution über die AppStores

36 Frameworks qooxdoo

37 Frameworks qooxdoo Cross-Browser Kompatibilität Umfangreiche Widget-Sets Vorgefertigte Themes Scrolling via iscroll Eigene Scrolling-Lösung - Natives Scrolling LGPL / EPL - GPL / Commercial MIT

38 qooxdoo Mobile Beispiel JavaScript var page = new qx.ui.mobile.page.navigationpage(); page.settitle("hello World"); page.addlistener("initialize", function() { var button = new qx.ui.mobile.form.button("button"); button.addlistener("tap", function() { alert("hello World"); }); page.getcontent().add(button); });

39 Sencha-Touch Beispiel JavaScript Ext.define('Button.view.Main', { extend: 'Ext.Container', xtype: 'main', requires: ['Ext.TitleBar' ], config: { items: [{ title: 'Welcome', items: [{ docked: 'top', xtype: 'titlebar', title: 'Hello World' }, { title : 'Button', items : { xtype : 'button', text : 'Button', margin: 10, handler: function () { alert("hello World"); } } }] } ] } });

40 jquery-mobile Beispiel HTML <div data-role="header" data-position="fixed"> <h1>hello World</h1> </div> <a id="button" href="#" data-role="button" style="margin: 10px;"> Button </a> JavaScript $("#button").on("tap", function() { alert("hello World"); });

41 Widgets

42 Vordefinierte Themes ios Android Custom

43 Entwicklung Objekt-Orientierung Data-Binding Entwicklungsumgebung Tooling

44 Objekt-Orientierung qooxdoo qx.class.define("bicycle", { extend : Vehicle, members : { speed : 0, speedup : function(increment) { this.speed += increment; } } }); class Bicycle extends Vehicle { } int speed = 0; void speedup(int increment) { speed += increment; }

45 Objekt-Orientierung

46 Data-Binding Model View

47 Data-Binding Model binding View

48 Data-Binding Model binding View

49 Data-Binding Webservice Store Model binding

50 Data-Binding Webservice load Store Model binding

51 Data-Binding Webservice load Store create Model binding

52 Data-Binding JSON-P Service Mobile-List clb([{!! 'date': ' ',!! 'time': '11:00:00',!! 'hometeam': 'Ladenburg',!! 'awayteam': 'Bretten',!! 'homescore': '26',!! 'awayscore': '19'! },{!! 'date': ' ',!! 'time': '15:00:00',!! 'hometeam': 'Bretten',!! 'awayteam': 'Villingendorf',!! 'homescore': '19',!! 'awayscore': '8'! },{!! 'date': ' ',!! 'time': '15:00:00',!! 'hometeam': 'Bretten',!! 'awayteam': 'Freiburg',!! 'homescore': '24', Data-Binding

53 Data-Binding JSON-P Service clb([{!! 'date': ' ',!! 'time': '11:00:00',!! 'hometeam': 'Ladenburg',!! 'awayteam': 'Bretten',!! 'homescore': '26',!! 'awayscore': '19'! },{!! 'date': ' ',!! 'time': '15:00:00',!! 'hometeam': 'Bretten',!! 'awayteam': 'Villingendorf',!! 'homescore': '19',!! 'awayscore': '8'! },{!! 'date': ' ',!! 'time': '15:00:00',!! 'hometeam': 'Bretten',!! 'awayteam': 'Freiburg',!! 'homescore': '24', Data-Binding var store = new qx.data.store.jsonp(url); // View var page = new qx.ui.mobile.page.navigationpage(); page.addlistener("initialize", function() { var list = new qx.ui.mobile.list.list({ configureitem : function(item, data, row) { } }); Mobile-List item.settitle( data.gethometeam() + " vs. " + data.getawayteam() ); store.bind("model", list, "model"); page.getcontent().add(list); });

57 Development JS

58 Development JS run

59 Development JS run error

60 Development JS run debugger

61 Dev Tools Settings

62 Tooling

63 Tooling create JS

64 Tooling create JS var x = 123; function a() { return true;

65 Tooling LOG Warning: x is g Warning: unused Warning:... lint create JS var x = 123; function a() { return true;

66 Tooling LOG Warning: x is g Warning: unused Warning:... lint create JS var x = 123; function a() { return true; test Test

67 Tooling LOG Warning: x is g Warning: unused Warning:... lint api API create JS var x = 123; function a() { return true; test Test

68 Tooling LOG Warning: x is g Warning: unused Warning:... lint api API create JS var x = 123; function a() { return true; test Test build JS var x=123;func tion a(){retur n true;}

69 Tooling LOG Warning: x is g Warning: unused Warning:... lint api API create JS var x = 123; function a() { return true; test Test build JS var x=123;func tion a(){retur n true;} PhoneGap App

70 Fazit Webtechnologien und Frameworks... sind geeignet um mobile Apps zu schreiben ermöglichen Multi-Platform-Lösungen reduzieren Entwicklungsaufwände machen Spaß!

71