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

Átírás

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

2 CROSS PLATFORM VS NATIVE 2/32

3 Sebesség 3/32 native webview String text=" "; long start = System.currentTimeMillis(); for (int i = 1; i<100000; i++) { text.indexof("0"); } long end = System.currentTimeMillis(); var text = " "; var start = new Date().getTime(); for ( var i = 0; i < ; 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

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

5 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ó)

6 User interface 6/32 native webview

7 CROSS PLATFORM FEJLESZTÉS 7/32

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

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

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

11 PHONEGAP 11/32

12 Történet 12/ Kezdet csak ios Android + BlackBerry támogatás Első stabil változat (0.6.0) Windows Mobile támogatás Nokia (S60) támogatás AppStore elfogadja a verziókat Adobe megvásárolja -> Apache Cordova ~

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

14 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)

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

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 Méret: 32 K IE6+, FF10+, Safari 5+, Opera, Chrome Zepto Méret: 8,3 K ios 4+, Android 2.2+, webos , 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 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 DEBUG-OLÁS 20/32

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: Kódba: <script src="

24 Ripple - HTML5 mobile emulator 24/32

25 TAPASZTALATOK 25/32

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="#"> <span class="icon"></span> <span class="boldtext">text</span> </a> </li> <li> <a href="#" class="icon boldtext">text</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 o singletap, doubletap longtap swipe o swipeleft, swiperight, swipeup, swipedown

31 Ö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ő

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