Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon

1,547 views

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,547
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon

  1. 1. Cross Platform mobil app fejlesztésHTML5 JavaScript alapokonKromesch Sándor
  2. 2. 2/32Cross platform vs native
  3. 3. Sebesség 3/32native webviewString 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. 4. Fejlesztési idő 4/32native webview ......
  5. 5. Karbantartás 5/32native 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. 6. User interface 6/32native webview
  7. 7. 7/32Cross platform fejlesztés
  8. 8. Lehetőségek 8/32● Unity 3 - JavaScript, c#, Boo● IwGames - c++● MoSync - c/c++, HTML5● Kivy - python● stb...
  9. 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. 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. 11/32PhoneGap
  12. 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. 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. 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. 15/32Eszközök a fejlesztéshez
  16. 16. jQuery, jQuery mobile 16/32Előnyök● Desktop világban elterjedt● Sok plugin● Gyorsan lehet működő alkalmazást fejleszteniHátrányok● Sebesség● 1.1-ben page transition-nél flickering probléma volt● Felesleges design elemek vannak benne
  17. 17. Sebesség 17/32jQuery ZeptoMéret: 32 K Méret: 8,3 KIE6+, 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. 18. Alkalmazás layout 18/32Backbone.js● Model - Kulcs - Érték alapon● View● Router● Collections● RESTful JSON interface
  19. 19. Több felbontás kezelése 19/32less.jsDinamikus tulajdonságokkal bővíti a CSS-tbutton { @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. 20/32Debug-olás
  21. 21. Console log 21/32JavaScript kódbanconsole.log("This is log");Logcat
  22. 22. jsconsole 22/32jsconsole.comHTML kódban<div id="test">Test data</div><button onclick="console.log(document.getElementById(test));">Test</button>jsconsole.com
  23. 23. Weinre - Web Inspector Remote 23/32Böngészőbe: http://debug.phonegap.com/client/#erise-webkonfKódba: <script src="http://debug.phonegap.com/target/target-script-min.js#erise-webkonf"></script>
  24. 24. Ripple - HTML5 mobile emulator 24/32
  25. 25. 25/32Tapasztalatok
  26. 26. Alkalmazás layout 26/32Fixed elemek balra rendezettek legyenekHosszú listák helyett lapozható listákFelesleges 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. 27. Rögzített fejlés és lábléc 27/32Android 2.3+, iOS 5+ Android 2.3+, iOS 4+ Android 2.3+, iOS 4+
  28. 28. Design 28/32Vezérlő méretekAnimált gif-ekKü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. 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. 30. Events 30/32 Eszközfüggetlen események:● touchstart - mouseDown● touchmove - mouseMove● touchend - mouseUp● touchcancelJavascript library függő események (Zepto.js)● Tap ○ singleTap, doubleTap● longTap● swipe ○ swipeLeft, swipeRight, swipeUp, swipeDown
  31. 31. Összefoglalás 31/32Native 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. 32. Köszönöm afigyelmet!Kromesch Sándorsandor.kromesch@erise.hu

×