Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon
1 like1,277 views
Egy mobil alkalmazás fejlesztésekor nagy kihívás a különböző platformokra való fejlesztés. Gondoljunk csak arra, hogy az iOS, Android, Blacberry, Windows Phone készülékekre más-más nyelven és környezetben kell fejleszteni. Ez azt jelenti, hogy ahány platform, annyi különböző alkalmazás. Ha cross platform HTML5 JavaScript alapú alkalmazást fejlesztünk elvileg csak egy kódot kell karbantartani, de persze ez sem ennyire egyszerű. Az előadáson bemutatásra kerülnek a különböző mobil cross platform megoldások (HTML5, JavaScript alapokon) és a különböző platformokon létező HTML5 CSS különbségek.
Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon
- 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
- 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
- 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
- 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)