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

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

CROSS PLATFORM VS NATIVE 2/32

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ő 4/32 native webview......

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

User interface 6/32 native webview

CROSS PLATFORM FEJLESZTÉS 7/32

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

Hogy működik HTML5 alapokon? 9/32 Native Android Összekötés a Webview JS motorral public class JsIf{ Context mcontext; JsIf(Context c){ mcontext = c; } public void showtoast(string toast){ Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } } 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 <button onclick="androidfunction.showtoast('toast message');">toast</button>

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

PHONEGAP 11/32

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

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 14/32 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) Események (Events) File (File) Helymeghatározás (Geolocation) Média (Media) Értesítések (Notification) Tároló (Storage) http://phonegap.com/about/feature

ESZKÖZÖK A FEJLESZTÉSHEZ 15/32

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

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

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

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

DEBUG-OLÁS 20/32

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

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

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>

Ripple - HTML5 mobile emulator 24/32

TAPASZTALATOK 25/32

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="#"> <span class="icon"></span> <span class="boldtext">text</span> </a> </li> <li> <a href="#" class="icon boldtext">text</a> </li>

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+

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

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

Events 30/32 Eszközfüggetlen események: touchstart - mousedown touchmove - mousemove touchend - mouseup touchcancel Javascript library függő események (Zepto.js) Tap o singletap, doubletap longtap swipe o swipeleft, swiperight, swipeup, swipedown

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

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