Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon Kromesch Sándor
2/32
CROSS PLATFORM VS NATIVE
Sebesség
3/32
native
webview
String text="1234567890"; long start = System.currentTimeMillis(); for (int i = 1; i<100000; i++) { text.indexOf("0"); } long end = System.currentTimeMillis();
var text = "1234567890"; var start = new Date().getTime(); for ( var i = 0; i < 100000; i++) { text.indexOf("0"); } var end = new Date().getTime();
Átlag 2.3.6: ~ 30 ms Átlag 4.1: ~ 25 ms
Átlag 2.3.6: ~ 75 ms Átlag 4.1: ~ 42 ms
Átlagos mérési idő 100 mérésenként, android-on mérve
Fejlesztési idő native
4/32
webview
...
...
Karbantartás native • •
platformonkénti kódbázis bug lista platformonként (bug szegmentáció)
• •
minden feature-t plarformonként
releasek platformonként (release szegmentáció)
5/32
webview • • • •
egy kódbázis egy hibalista egy feautre lista egy release minden platformra
User interface native
6/32
webview
7/32
CROSS PLATFORM FEJLESZTÉS
Lehetőségek
8/32
• Unity 3
- JavaScript, c#, Boo
• IwGames
- c++
• MoSync
- c/c++, HTML5
• Kivy
- python
• stb...
Hogy működik HTML5 alapokon?
9/32
Native Android
public class JsIf{ Context mContext; JsIf(Context c){ mContext = c; } public void showToast(String toast){ Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } }
Összekötés a Webview JS motorral
WebView webView = (WebView) findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); final JsIf myJsIf = new JsIf(this); webView.addJavascriptInterface(myJsIf, "AndroidFunction"); webView.loadUrl( "file:///android_asset/www/index.html");
HTML
HTML5 alapú rendszerek • PhoneGap (Adobe)
- HMTL5, JavaScript
• RhoMobile Suite (Motorola)
- HTML5, Ruby
• Appcelerator
- HMTL5, JavaScript
• MoSync
- HTML5, JavaScript
• Trigger.io
- HTML5, JavaScript
10/32
11/32
PHONEGAP
Történet • • • • • • • • •
2008. 08. - Kezdet csak iOS 2008. 10. - Android + BlackBerry támogatás 2009. 02. - Első stabil változat (0.6.0) 2009. 08. - Windows Mobile támogatás 2009. 09. - Nokia (S60) támogatás 2009. 10. - AppStore elfogadja a 0.8.0+ verziókat 2011. 07. - 1.0.0 2011. 10. - Adobe megvásárolja -> Apache Cordova 2012. 07. - 2.0.0
• ~ 2013. 07. - 3.0.0
12/32
Architektúra
13/32
UI Layer (HTML + CSS + JS)
BL Layer (JS)
PhoneGap Native impl
Native impl
Native impl
Native impl
Native impl
API-k • • • • • • •
Gyorsulás mérő (Accelerometer) Kamera (Camera)
Audio, Video (Capture) Iránytű (Compass) Hálózati kapcsolatok (Connection)
Névjegyek (Contacts) Eszköz információk (Device)
http://phonegap.com/about/feature
14/32
• • • • • •
Események (Events)
File (File) Helymeghatározás (Geolocation) Média (Media) Értesítések (Notification) Tároló (Storage)
15/32
ESZKÖZÖK A FEJLESZTÉSHEZ
jQuery, jQuery mobile Előnyök • Desktop világban elterjedt • Sok plugin • Gyorsan lehet működő alkalmazást fejleszteni
Hátrányok • Sebesség • 1.1-ben page transition-nél flickering probléma volt • Felesleges design elemek vannak benne
