1. Cross Platform mobil app fejlesztés
HTML5 JavaScript alapokon
Kromesch Sándor

2. 2/32
Cross platform vs native

3. Sebesség 3/32
native webview
String text="1234567890"; var text = "1234567890";
long start = System.currentTimeMillis(); var start = new Date().getTime();
for (int i = 1; i<100000; i++) { for ( var i = 0; i < 100000; i++) {
text.indexOf("0"); text.indexOf("0");
} }
long end = System.currentTimeMillis(); var end = new Date().getTime();
Átlag 2.3.6: ~ 30 ms Átlag 2.3.6: ~ 75 ms
Átlag 4.1: ~ 25 ms Átlag 4.1: ~ 42 ms
Átlagos mérési idő 100 mérésenként, android-on mérve

4. Fejlesztési idő 4/32
native webview
...
...

5. Karbantartás 5/32
native webview
● platformonkénti kódbázis ● egy kódbázis
● bug lista platformonként (bug ● egy hibalista
szegmentáció) ● egy feautre lista
● minden feature-t plarformonként ● egy release minden platformra
● releasek platformonként (release
szegmentáció)

6. User interface 6/32
native webview

7. 7/32
Cross platform fejlesztés

8. Lehetőségek 8/32
● Unity 3 - JavaScript, c#, Boo
● IwGames - c++
● MoSync - c/c++, HTML5
● Kivy - python
● stb...

9. Hogy működik HTML5 alapokon? 9/32
public class JsIf{
Context mContext;
JsIf(Context c){
mContext = c;
}
Native Android public void showToast(String toast){
Toast.makeText(mContext, toast,
Toast.LENGTH_SHORT).show();
}
}
WebView webView = (WebView) findViewById(R.id.
webView);
webView.getSettings().setJavaScriptEnabled
Összekötés a Webview (true);
JS motorral final JsIf myJsIf = new JsIf(this);
webView.addJavascriptInterface(myJsIf,
"AndroidFunction");
webView.loadUrl(
"file:///android_asset/www/index.html");
HTML <button onclick="AndroidFunction.showToast
('Toast message');">Toast</button>

10. HTML5 alapú rendszerek 10/32
● PhoneGap (Adobe) - HMTL5, JavaScript
● RhoMobile Suite (Motorola) - HTML5, Ruby
● Appcelerator - HMTL5, JavaScript
● MoSync - HTML5, JavaScript
● Trigger.io - HTML5, JavaScript

11. 11/32
PhoneGap

12. Történet 12/32
● 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

13. Architektúra 13/32
UI Layer (HTML + CSS + JS)
BL Layer (JS)
PhoneGap
Native Native Native Native Native
impl impl impl impl impl

14. API-k 14/32
● Gyorsulás mérő (Accelerometer) ● Események (Events)
● Kamera (Camera) ● File (File)
● Audio, Video (Capture) ● Helymeghatározás (Geolocation)
● Iránytű (Compass) ● Média (Media)
● Hálózati kapcsolatok (Connection) ● Értesítések (Notification)
● Névjegyek (Contacts) ● Tároló (Storage)
● Eszköz információk (Device)
http://phonegap.com/about/feature

15. 15/32
Eszközök a fejlesztéshez

16. jQuery, jQuery mobile 16/32
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

17. Sebesség 17/32
jQuery Zepto
Méret: 32 K Méret: 8,3 K
IE6+, FF10+, Safari 5+, iOS 4+, Android 2.2+, webOs 1.4.5+,
Opera, Chrome Opera 10+, Safari 5+, Chrome 5+,
FF 4+
Kompatibilitás (kb: ~90%)
function($){
$.extend($.fn,{
foo: function()
{
}
})
})(Zepto)

18. Alkalmazás layout 18/32
Backbone.js
● Model - Kulcs - Érték alapon
● View
● Router
● Collections
● RESTful JSON interface

19. Több felbontás kezelése 19/32
less.js
Dinamikus tulajdonságokkal bővíti a CSS-t
button {
@p: picturepath('get-taxi-button.png');
background: url("@{p}") no-repeat 50% 50%;
}
picturepath: function(file){
var dp = window.devicePixelRatio;
if( dp < 1 ) return new(tree.Anonymous)('../img/drawable-ldpi/'+file.value);
if( dp == 1 ) return new(tree.Anonymous)('../img/drawable-mdpi/'+file.value);
if( dp > 1 ) return new(tree.Anonymous)('../img/drawable-hdpi/'+file.value);
if( dp > 2 ) return new(tree.Anonymous)('../img/drawable-xhdpi/'+file.value);
return new(tree.Anonymous)('../img/drawable-amdpi/'+file.value);
},

20. 20/32
Debug-olás

21. Console log 21/32
JavaScript kódban
console.log("This is log");
Logcat

22. jsconsole 22/32
jsconsole.com
HTML kódban
<div id="test">Test data</div>
<button onclick="console.log(document.getElementById('test'));">Test</button>
jsconsole.com

23. Weinre - Web Inspector Remote 23/32
Böngészőbe: http://debug.phonegap.com/client/#erise-webkonf
Kódba: <script src="http://debug.phonegap.com/target/target-script-min.js#erise-webkonf"></script>

24. Ripple - HTML5 mobile emulator 24/32

25. 25/32
Tapasztalatok

26. Alkalmazás layout 26/32
Fixed elemek balra rendezettek legyenek
Hosszú listák helyett lapozható listák
Felesleges HTML elemek használatának mellőzése:
<li>
<a href="#"> <li>
<span class="icon"></span> <a href="#" class="icon
<span class="boldtext" boldtext">Text</a>
>Text</span> </li>
</a>
</li>

27. Rögzített fejlés és lábléc 27/32
Android 2.3+, iOS 5+ Android 2.3+, iOS 4+ Android 2.3+, iOS 4+

28. Design 28/32
Vezérlő méretek
Animált gif-ek
Különböző css propertyk renderelési sebessége:
● text-shadow: ~9%
● box-shadow: ~14%
● background (gradient): ~300%
Mérések Android 4.1 alatt történtek

29. Css trükkök 29/32
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: none;
-webkit-user-modify: read-write-plaintext-only;
● -webkit-animate
● translateX
● line-height

30. Events 30/32
Eszközfüggetlen események:
● touchstart - mouseDown
● touchmove - mouseMove
● touchend - mouseUp
● touchcancel
Javascript library függő események (Zepto.js)
● Tap
○ singleTap, doubleTap
● longTap
● swipe
○ swipeLeft, swipeRight, swipeUp, swipeDown

31. Összefoglalás 31/32
Native HTML5
● Erősen sebesség függő ● Cél az egységes kinézet minél több
alkalmazás platformon
● Komplex alkalmazások (Office) ● Minél több platformon működő app
● Játékok ● Erősen API orientált app
● Egy, max két platformos appok ● Startup, pilot appok
● Appra fordítható erőforrások ● Szűkösek az appra szánt erőforrások
mennyisége nem szempont ● Szoros a határidő
(Facebook)

32. Köszönöm a
figyelmet!
Kromesch Sándor
sandor.kromesch@erise.hu