Cross Platform mobil app fejlesztésHTML5 JavaScript alapokonKromesch Sándor
2/32Cross platform vs native
Sebesség                                                                            3/32native                            ...
Fejlesztési idő                   4/32native            webview                            ......
Karbantartás                                                        5/32native                                 webview●   ...
User interface             6/32native           webview
7/32Cross platform fejlesztés
Lehetőségek                           8/32●   Unity 3   - JavaScript, c#, Boo●   IwGames   - c++●   MoSync    - c/c++, HTM...
Hogy működik HTML5 alapokon?                                       9/32                       public class JsIf{          ...
HTML5 alapú rendszerek                             10/32●   PhoneGap (Adobe)             - HMTL5, JavaScript●   RhoMobile ...
11/32PhoneGap
Történet                                                 12/32 ●   2008. 08. - Kezdet csak iOS ●   2008. 10. - Android + B...
Architektúra                                           13/32            UI Layer (HTML + CSS + JS)                     BL ...
API-k                                                                     14/32 ●   Gyorsulás mérő (Accelerometer)      ● ...
15/32Eszközök a fejlesztéshez
jQuery, jQuery mobile                                      16/32Előnyök●   Desktop világban elterjedt●   Sok plugin●   Gyo...
Sebesség                                                                     17/32jQuery                                  ...
Alkalmazás layout                  18/32Backbone.js●   Model - Kulcs - Érték alapon●   View●   Router●   Collections●   RE...
Több felbontás kezelése                                                      19/32less.jsDinamikus tulajdonságokkal bővíti...
20/32Debug-olás
Console log                  21/32JavaScript kódbanconsole.log("This is log");Logcat
jsconsole                                                                       22/32jsconsole.comHTML kódban<div id="test...
Weinre - Web Inspector Remote                                                                23/32Böngészőbe: http://debug...
Ripple - HTML5 mobile emulator   24/32
25/32Tapasztalatok
Alkalmazás layout                                                26/32Fixed elemek balra rendezettek legyenekHosszú listák...
Rögzített fejlés és lábléc                                    27/32Android 2.3+, iOS 5+   Android 2.3+, iOS 4+   Android 2...
Design                                           28/32Vezérlő méretekAnimált gif-ekKülönböző css propertyk renderelési seb...
Css trükkök                                       29/32    -webkit-tap-highlight-color: rgba(0,0,0,0);    outline: none;  ...
Events                                             30/32 Eszközfüggetlen események:●   touchstart - mouseDown●   touchmove...
Összefoglalás                                                       31/32Native                              HTML5●   Erős...
Köszönöm afigyelmet!Kromesch Sándorsandor.kromesch@erise.hu
Upcoming SlideShare
Loading in...5
×

Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon

1,145

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,145
On Slideshare
0
From Embeds
0
Number of Embeds
0
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

×