Cross-Platform Mobile Apps - Entwicklertag...Cross-Platform Mobile Apps 05. Juni 2013 Mittwoch, 5....

Cross-PlatformMobile Apps

05. Juni 2013

Mittwoch, 5. Juni 13

• Master of Science (2009)

• Arbeitet bei 1&1 Internet AG

• Head of Frameworks & Tooling

• Tech Lead von qooxdoo

Martin Wittemann


PlattformenRest7 %

Java ME12 %

Android26 %

iOS55 %

Mobile-Phone + Tablet, Stand: 21.05.2013, Quelle: http://netmarketshare.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1&qpct=3


http://netmarketshare.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1&qpct=3


PlattformenRest7 %

Java ME12 %

iOS & Andoid81 %Mobile-Phone + Tablet, Stand: 21.05.2013,

Quelle: http://netmarketshare.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1&qpct=3Mittwoch, 5. Juni 13



Plattformen


Plattformen

Objective-C Java


Plattformen

Webtechnologien


Webtechnologien

HTML CSSJAVASCRIPT


Mobile Apps

Cross-Platform

Dev

ice

API

/ A

pp S

tore

s


Mobile Apps

Cross-Platform

Dev

ice

API

/ A

pp S

tore

s

Native Apps


Mobile Apps

Cross-Platform

Dev

ice

API

/ A

pp S

tore

s

Native Apps

Mobile Website


Mobile Apps

Cross-Platform

Dev

ice

API

/ A

pp S

tore

s

Native Apps

Mobile Website

Hybrid Apps


Native Entwicklung

SDK

SDK

Code

Code

Test

Test

Build

Build


Webtechnologien

SDK Code Test

Build

Build


Webtechnologien

SDK Code Test

Build

Build

Build

Build

Build ...Mittwoch, 5. Juni 13

• Programmierung der Oberfläche

Herausforderungen


Programmierung der Oberfläche

Normal:

Pressed:


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; }

.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>

Normal:

Pressed:


✓Programmierung der Oberfläche

• Cross-Browser Unterschiede

Herausforderungen


Cross-Browser Unterschiede



[1] Quelle: http://caniuse.com/#feat=transforms3d

Unterschiedliche Versionen können zu unterschiedlichen Bugs / Feature-Sets führen!


http://caniuse.com/#feat=transforms3d



[1] Quelle: http://caniuse.com/#feat=transforms3d

[1]• Unterstützt von iOS und ab Android 3.0

• Feature Checks zur Laufzeit --> zukunftssicher

Beispiel 3D Transforms

Unterschiedliche Versionen können zu unterschiedlichen Bugs / Feature-Sets führen!





✓Cross-Browser Unterschiede

• Probleme mit dem Scrolling

Herausforderungen


Scrolling-Probleme

fix

beweglich

fix


Scrolling-Probleme

position: fixed bzw. overflow: scroll

fix

beweglich

fix


Scrolling-Probleme

position: fixed bzw. overflow: scroll

[1] Quelle: http://caniuse.com/#feat=css-fixed

fix

beweglich

fix

Natives scrolling ab iOS 5.0 und Android 3.0 [1]!


http://caniuse.com/#feat=css-fixed

http://caniuse.com/#feat=css-fixed



✓Probleme mit dem Scrolling

• Beschränkter Zugriff auf die Hardware

• Keine Distribution über die AppStores

Herausforderungen


PhoneGap


PhoneGap

Verpacken


PhoneGap

Verpacken Installieren




✓Probleme mit dem Scrolling

✓Beschränkter Zugriff auf die Hardware

✓Keine Distribution über die AppStores

Herausforderungen


Frameworks

qooxdoo


Frameworks

qooxdoo

LGPL / EPL GPL / Commercial MIT✓ - ✓

Cross-Browser Kompatibilität✓Umfangreiche Widget-Sets✓

Vorgefertigte Themes✓Scrolling via iScroll Eigene Scrolling-Lösung Natives Scrolling✓ ✓ -


qooxdoo Mobile Beispiel

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);});

JavaScript


Sencha-Touch Beispiel

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"); } } }] } ] }});

JavaScript


jQuery-mobile Beispiel

<div data-role="header" data-position="fixed"> <h1>Hello World</h1></div><a id="button" href="#" data-role="button" style="margin: 10px;"> Button</a>

HTML

JavaScript

$("#button").on("tap", function() { alert("Hello World");});


Widgets


Vordefinierte Themes

iOS Android Custom


Entwicklung

• Objekt-Orientierung

• Data-Binding

• Entwicklungsumgebung

• Tooling


Objekt-Orientierung

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; }

}

qooxdoo


Objekt-Orientierung


Data-Binding

Model View


Data-Binding

Model Viewbinding


Data-Binding

Model bindingStoreWebservice


Data-Binding

Model bindingStoreWebservice load


Data-Binding

Model bindingStoreWebservice load create


Data-Binding

clb([{! ! 'date': '2013-04-21',! ! 'time': '11:00:00',! ! 'hometeam': 'Ladenburg',! ! 'awayteam': 'Bretten',! ! 'homescore': '26',! ! 'awayscore': '19'! },{! ! 'date': '2013-04-28',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Villingendorf',! ! 'homescore': '19',! ! 'awayscore': '8'! },{! ! 'date': '2013-05-05',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Freiburg',! ! 'homescore': '24',

JSON-P Service Mobile-List

Data-Binding


Data-Binding

clb([{! ! 'date': '2013-04-21',! ! 'time': '11:00:00',! ! 'hometeam': 'Ladenburg',! ! 'awayteam': 'Bretten',! ! 'homescore': '26',! ! 'awayscore': '19'! },{! ! 'date': '2013-04-28',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Villingendorf',! ! 'homescore': '19',! ! 'awayscore': '8'! },{! ! 'date': '2013-05-05',! ! 'time': '15:00:00',! ! 'hometeam': 'Bretten',! ! 'awayteam': 'Freiburg',! ! 'homescore': '24',

JSON-P Service Mobile-ListData-Binding

var store = new qx.data.store.Jsonp(url);

// Viewvar page = new qx.ui.mobile.page.NavigationPage();page.addListener("initialize", function() { var list = new qx.ui.mobile.list.List({ configureItem : function(item, data, row) { item.setTitle( data.getHometeam() + " vs. " + data.getAwayteam() ); } });

store.bind("model", list, "model"); page.getContent().add(list);});


Development

JS


Development

JS run


Development

JS run error


Development

JS run debugger


Dev Tools Settings


Tooling


Tooling

JScreate


Tooling

JScreatevar x = 123;function a() { return true;


Tooling


lint

Warning: x is gWarning: unusedWarning: ...

LOG


Tooling


lint


LOG

test Test


Tooling


lint


LOG

api API

test Test


Tooling


lint


LOG

api API

test Testbuild

JSvar x=123;function a(){return true;}


Tooling


lint


LOG

api API

test Testbuild

JSvar x=123;function a(){return true;}

PhoneGap App


Fazit

✓sind geeignet um mobile Apps zu schreiben

✓ermöglichen Multi-Platform-Lösungen

✓reduzieren Entwicklungsaufwände

✓machen Spaß!

Webtechnologien und Frameworks ...


Danke

@[email protected]

http://qooxdoo.org


https://twitter.com/%23!/wittemann

https://twitter.com/%23!/wittemann

mailto:[email protected]

mailto:[email protected]

http://qooxdoo.org

http://qooxdoo.org

Cross-Platform Mobile Apps - Entwicklertag...Cross-Platform Mobile Apps 05. Juni 2013 Mittwoch, 5....

Documents

Transcript of Cross-Platform Mobile Apps - Entwicklertag...Cross-Platform Mobile Apps 05. Juni 2013 Mittwoch, 5....