טיפים לפיתוח אפליקציות מובייל ווב רן בן אהרון
 
 
דפדפני מובייל
דפדפני מובייל
דפדפני מובייל ציון פיצ ' רים על פי  html5test
יכולות דפדפנים מעניינות <ul><ul><li>local storage, application cache </li></ul></ul><ul><ul><li>html5 syntax </li></ul></u...
יכולות מכשיר <ul><ul><li>אירועי מגע </li></ul></ul><ul><li>element.addEventListener(&quot;touchstart&quot;, func, bubble);...
... לעניינו להבין מגבלות לתת הרגשה של נייטיב
להבין את מגבלות המשאבים <ul><ul><li>כח עיבוד </li></ul></ul><ul><ul><li>רשת </li></ul></ul><ul><ul><li>זכרון </li></ul></ul>
כח עיבוד <ul><li>מעבד חלש מוביל ל : </li></ul><ul><li>שמתבטא ב :  </li></ul><ul><ul><li>איטיות בפרסור קוד </li></ul></ul><...
JS  השוואת מהירות הרצת <ul><li>var  ul  =  document. createElement ( &quot;ul&quot; ) ;   var  i ;   for   ( i  =   0 ;  i...
JS  השוואת מהירות הרצת <ul><li>var  ul  =  $ ( &quot;<ul/>&quot; ) ;    var  i ;    for   ( i = 0 ;  i < 100 ;  i ++ )   {...
JS  השוואת מהירות הרצת <ul><li>var  arr  =  document. querySelectorAll ( &quot;UL LI&quot; ) ;  var  i ,  len  =  arr. len...
JS  השוואת מהירות הרצת <ul><li>var  arr  =  $ ( &quot;UL LI&quot; ) ;  arr. each ( function ()   {     this . className   ...
כח עיבוד <ul><ul><li>אופטימיזציה לקוד יעיל </li></ul></ul><ul><ul><li>שימוש בנייטיב  JS </li></ul></ul><ul><ul><li>ספריות ...
מגבלות רשת <ul><ul><li>4-6  קריאות  HTTP  בו זמנית </li></ul></ul><ul><ul><li>אין חלוקה בין הוסטים </li></ul></ul><ul><ul>...
מגבלות רשת <ul><ul><li>CSS3  במקום תמונות </li></ul></ul><ul><ul><li>הטמעת קבצים  (base64) </li></ul></ul><ul><ul><li>ספרי...
כלי  CSS <ul><li>http://css-tricks.com/examples/ShapesOfCSS/ </li></ul><ul><li>http://www.colorzilla.com/gradient-editor/ ...
זכרון מטמון iOS 4.3 UIWebView Android 2.2 Android 2.3 Blackberry 6 Memory 100MB 4MB 4MB 25MB Persistent 0 4MB 4MB 25MB
הרגשה של נייטיב  
תנועה חלקה בין עמודים <ul><ul><li>הצמדות לאירועי מגע </li></ul></ul><ul><ul><li>תזוזה באמצעות  translate </li></ul></ul>
גלילה פנימית <ul><ul><li>position: fixed </li></ul></ul><ul><ul><li>-webkit-overflow-scrolling:touch  </li></ul></ul><ul><...
התאמה למימדי מסך <ul><ul><li>מימדים בלתי צפויים באנדרויד </li></ul></ul><ul><ul><li>שינוי אוריאנטציה </li></ul></ul>
מסך מלא <ul><ul><li>העלמת סרגל כתובת  (window.scrollTo(0,0 </li></ul></ul><ul><ul><li>או מצב  standalone </li></ul></ul>44...
התאמה ליחס פיקסלים <ul><ul><li>ניתן לגילוי ב -JS window.devicePixelRatio </li></ul></ul><ul><ul><li>וב -CSS  ע &quot; י  m...
 
ביטול התנהגויות <ul><ul><li>ביטול  scaling </li></ul></ul><ul><li><meta name=&quot;viewport&quot; content=&quot;width=devi...
חיווי טעינה <ul><ul><li>לא מומלץ  animated gif </li></ul></ul><ul><ul><li>עדיפות ל -css animation  כמו  spin.js </li></ul>...
סופר אקסטרה בונוס <ul><ul><li>Pull to refresh </li></ul></ul><ul><ul><li>browser history </li></ul></ul><ul><ul><li>deep l...
דיבוג  
סביבת הפיתוח שלנו <ul><ul><li>Ubuntu </li></ul></ul><ul><ul><li>Apache </li></ul></ul><ul><ul><li>Aptana </li></ul></ul><u...
עבודה נוחה מול דפדפן דסקטופ <ul><li>כי אין כמו פיירבאג ... </li></ul><ul><li>הגבילו מימדים בשביל נוחות </li></ul><ul><li>מ...
דיווחי לוג <ul><li>ב -iOS  יש  console.log </li></ul><ul><li>חסכו באורך מחרוזות  -  אין הרבה מקום </li></ul><ul><li>פלטרו ...
הרצה במכשיר <ul><li>גלישה מקומית מהמכשיר באמצעות תוכנת פרוקסי </li></ul><ul><li>ניתן גם דרכו לנטר פעילות רשת </li></ul><ul...
תודה ובהצלחה ! [email_address]   רן בן אהרון
אנחנו מחפשים  FED ים מוכשרים [email_address] [email_address]   רן בן אהרון
Upcoming SlideShare
Loading in …5
×

DoAT - mobile web-app development

1,587 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide
  • קצת על דואט אחרי יצירת עשרות אפליקציות מוביל ווב , אני רוצה לשתף אתכם בלקחים , בשיטות פרקטיות בהם אנחנו נוהגים ההרצאה הזו מיועדת למפתחים מתקדמים יחסית שכבר התנסו בפיתוח למובייל ווב או בהתאמת אתרים לדפדפני מובייל
  • http://www.comscore.com/Press_Events/Press_Releases/2011/8/comScore_Reports_July_2011_U.S._Mobile_Subscriber_Market_Share
  • http://html5test.com/results-mobile.html
  • touchstart, move end gestures - swipe zoom pinch mutiple touchstart
  • on iPhone - there&apos;s a big difference between Mobile Safari and UIWebView within a native app  
  • תלוי במנוע JS ובמהירות עיבוד של המכשיר השוואות jsperf benchmark js Link to tests - vanilla vs jquery vanilla .class.add/toggle/remove document.querySelector Parsing time And some popular js methods http://carlos.bueno.org/2010/02/measuring-javascript-parse-and-load.html Also SPIN.JS cause animated gifs are cpu intensive- prove it phone gap - safari vs uiwebview performance http://www.blaze.io/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/ בנוסף , ישנם הבדלים משמעותיים בין UIWebView standalone safari w
  • תלוי במנוע JS ובמהירות עיבוד של המכשיר השוואות jsperf benchmark js Link to tests - vanilla vs jquery vanilla .class.add/toggle/remove document.querySelector Parsing time And some popular js methods http://carlos.bueno.org/2010/02/measuring-javascript-parse-and-load.html Also SPIN.JS cause animated gifs are cpu intensive- prove it phone gap - safari vs uiwebview performance http://www.blaze.io/mobile/iphone-vs-android-45000-tests-prove-whose-browser-is-faster/ וןכמובן סקריפטים בתחתית השהיית פרסור
  • cache manifest slide - CSS3 , חיצים  צורות אייקונים פינות מעוגלות gradients צלליות mask הטמעה js/css base64
  • cache manifest slide - CSS3 , חיצים  צורות אייקונים פינות מעוגלות gradients צלליות mask הטמעה js/css base64 הצג את lastfm שמירה על קבצים קטנים איחוד מיניפיקציה ספרייטים SVG lazy load ontouch scroll
  • cache manifest slide - CSS3 , חיצים  צורות אייקונים פינות מעוגלות gradients צלליות mask הטמעה js/css base64 הצג את lastfm שמירה על קבצים קטנים איחוד מיניפיקציה ספרייטים SVG lazy load ontouch scroll
  • http://www.blaze.io/mobile/understanding-mobile-cache-sizes/ check in uiwebview and safari separately
  • ודרך אגב - זה הזמן לדבר על doat.com
  • SVN / git photoshop in windows7
  • use touche
  • http://www.favbrowser.com/remote-debugging-with-safari-web-inspector-chrome-developer-tools/
  • DoAT - mobile web-app development

    1. 1. טיפים לפיתוח אפליקציות מובייל ווב רן בן אהרון
    2. 4. דפדפני מובייל
    3. 5. דפדפני מובייל
    4. 6. דפדפני מובייל ציון פיצ ' רים על פי html5test
    5. 7. יכולות דפדפנים מעניינות <ul><ul><li>local storage, application cache </li></ul></ul><ul><ul><li>html5 syntax </li></ul></ul><ul><ul><li>canvas </li></ul></ul><ul><ul><li>css3 </li></ul></ul><ul><ul><li>JSON parser </li></ul></ul><ul><ul><li>websockets </li></ul></ul><ul><ul><li>pushState </li></ul></ul>
    6. 8. יכולות מכשיר <ul><ul><li>אירועי מגע </li></ul></ul><ul><li>element.addEventListener(&quot;touchstart&quot;, func, bubble); </li></ul><ul><ul><li>מיקום </li></ul></ul><ul><li>navigator.geolocation.getCurrentPosition(successFunc, errorFunc); </li></ul><ul><ul><li>מצפן וחיישן תנועה * </li></ul></ul><ul><li>window.addEventListener(&quot;deviceMotion&quot;, func, bubble); </li></ul><ul><ul><li>אוריאנטציה </li></ul></ul><ul><li>window.addEventListener(&quot;orientationchange&quot;, func, bubble); </li></ul><ul><ul><li>האצת חומרה *  </li></ul></ul><ul><li>DIV { transform: rotate(45deg) } </li></ul><ul><li>* iOS בלבד כרגע </li></ul>
    7. 9. ... לעניינו להבין מגבלות לתת הרגשה של נייטיב
    8. 10. להבין את מגבלות המשאבים <ul><ul><li>כח עיבוד </li></ul></ul><ul><ul><li>רשת </li></ul></ul><ul><ul><li>זכרון </li></ul></ul>
    9. 11. כח עיבוד <ul><li>מעבד חלש מוביל ל : </li></ul><ul><li>שמתבטא ב :  </li></ul><ul><ul><li>איטיות בפרסור קוד </li></ul></ul><ul><ul><li>איטיות בהרצת קוד </li></ul></ul><ul><ul><li>איטיות בתצוגה </li></ul></ul><ul><ul><li>עיכוב בטעינת עמוד </li></ul></ul><ul><ul><li>תגובתיות לקויה </li></ul></ul><ul><ul><li>אנימציות מקרטעות </li></ul></ul>
    10. 12. JS השוואת מהירות הרצת <ul><li>var ul = document. createElement ( &quot;ul&quot; ) ;   var i ;   for ( i = 0 ; i < 100 ; i ++ ) {   var li = document. createElement ( &quot;li&quot; ) ;     var text = document. createTextNode ( &quot;feds&quot; ) ;    li. appendChild ( text ) ;    ul. appendChild ( li ) ; } </li></ul>http://jsperf.com/routine-js-functions פלטפורמה נבדקת הרצות / שניה Ubuntu Core i7 Firefox 7   418,078 iPhone 4 iOS5 Safari   82,677 iPhone 3Gs iOS5 Safari   61,531 Galaxy S2 Android 2.3.3   39,201 Galaxy S Android 2.3.3   19,214
    11. 13. JS השוואת מהירות הרצת <ul><li>var ul = $ ( &quot;<ul/>&quot; ) ;   var i ;   for ( i = 0 ; i < 100 ; i ++ ) {     var li = $ ( &quot;<li>feds</li>&quot; ) ;     ul. append ( li ) ;   } </li></ul>http://jsperf.com/routine-js-functions (jquery) פלטפורמה נבדקת הרצות / שניה Ubuntu Core i7 Firefox 7   41,289 iPhone 4 iOS5 Safari   6,902 iPhone 3Gs iOS5 Safari   4,607 Galaxy S2 Android 2.3.3   9,914 Galaxy S Android 2.3.3   4,846
    12. 14. JS השוואת מהירות הרצת <ul><li>var arr = document. querySelectorAll ( &quot;UL LI&quot; ) ; var i , len = arr. length ; for ( i = 0 ; i < len ; i ++ ){   arr [ i ] . className = &quot;bar&quot; ; } </li></ul>http://jsperf.com/traversing פלטפורמה נבדקת הרצות / שניה Ubuntu Core i7 Firefox 7 17,274 iPhone 4 iOS5 Safari   934 iPhone 3Gs iOS5 Safari 605 Galaxy S2 Android 2.3.3 1,763 Galaxy S Android 2.3.3 765
    13. 15. JS השוואת מהירות הרצת <ul><li>var arr = $ ( &quot;UL LI&quot; ) ; arr. each ( function () {   this . className = &quot;bar&quot; ; }) ; </li></ul>http://jsperf.com/traversing (jquery) פלטפורמה נבדקת הרצות / שניה Ubuntu Core i7 Firefox 7   9,053 iPhone 4 iOS5 Safari   546 iPhone 3Gs iOS5 Safari   364 Galaxy S2 Android 2.3.3 1,291 Galaxy S Android 2.3.3 528
    14. 16. כח עיבוד <ul><ul><li>אופטימיזציה לקוד יעיל </li></ul></ul><ul><ul><li>שימוש בנייטיב JS </li></ul></ul><ul><ul><li>ספריות יעודיות ל -webkit כמו zepto / xui </li></ul></ul><ul><ul><li>שימוש אנימציות hardware accelerated </li></ul></ul>
    15. 17. מגבלות רשת <ul><ul><li>4-6 קריאות HTTP בו זמנית </li></ul></ul><ul><ul><li>אין חלוקה בין הוסטים </li></ul></ul><ul><ul><li>לייטנסי גבוה </li></ul></ul><ul><ul><li>קישור אלחוטי לא אמין </li></ul></ul>
    16. 18. מגבלות רשת <ul><ul><li>CSS3 במקום תמונות </li></ul></ul><ul><ul><li>הטמעת קבצים (base64) </li></ul></ul><ul><ul><li>ספריית סקריפטים מצומצמת </li></ul></ul><ul><ul><li>התאמת גדלי תמונות </li></ul></ul><ul><ul><li>שמירה לזכרון המכשיר   appcache, local storage </li></ul></ul><ul><ul><li>lazy loading </li></ul></ul>
    17. 19. כלי CSS <ul><li>http://css-tricks.com/examples/ShapesOfCSS/ </li></ul><ul><li>http://www.colorzilla.com/gradient-editor/ </li></ul>
    18. 20. זכרון מטמון iOS 4.3 UIWebView Android 2.2 Android 2.3 Blackberry 6 Memory 100MB 4MB 4MB 25MB Persistent 0 4MB 4MB 25MB
    19. 21. הרגשה של נייטיב  
    20. 22. תנועה חלקה בין עמודים <ul><ul><li>הצמדות לאירועי מגע </li></ul></ul><ul><ul><li>תזוזה באמצעות translate </li></ul></ul>
    21. 23. גלילה פנימית <ul><ul><li>position: fixed </li></ul></ul><ul><ul><li>-webkit-overflow-scrolling:touch  </li></ul></ul><ul><ul><li>אלטרנטיבה ב -JS </li></ul></ul>
    22. 24. התאמה למימדי מסך <ul><ul><li>מימדים בלתי צפויים באנדרויד </li></ul></ul><ul><ul><li>שינוי אוריאנטציה </li></ul></ul>
    23. 25. מסך מלא <ul><ul><li>העלמת סרגל כתובת (window.scrollTo(0,0 </li></ul></ul><ul><ul><li>או מצב standalone </li></ul></ul>44px 20px 416px
    24. 26. התאמה ליחס פיקסלים <ul><ul><li>ניתן לגילוי ב -JS window.devicePixelRatio </li></ul></ul><ul><ul><li>וב -CSS ע &quot; י media query </li></ul></ul><ul><li>@media all and (-min-device-pixel-ratio: 2){ </li></ul><ul><li>} </li></ul>
    25. 28. ביטול התנהגויות <ul><ul><li>ביטול scaling </li></ul></ul><ul><li><meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;&quot; /> </li></ul><ul><ul><li>ביטול scrolling </li></ul></ul><ul><li><body ontouchmove=&quot;function(e){e.preventDefault()}&quot;> </li></ul><ul><ul><li>ביטול selection </li></ul></ul><ul><li>-webkit-user-select: none; </li></ul><ul><li>-webkit-touch-callout: none; </li></ul>
    26. 29. חיווי טעינה <ul><ul><li>לא מומלץ animated gif </li></ul></ul><ul><ul><li>עדיפות ל -css animation כמו spin.js </li></ul></ul>
    27. 30. סופר אקסטרה בונוס <ul><ul><li>Pull to refresh </li></ul></ul><ul><ul><li>browser history </li></ul></ul><ul><ul><li>deep linking </li></ul></ul>
    28. 31. דיבוג  
    29. 32. סביבת הפיתוח שלנו <ul><ul><li>Ubuntu </li></ul></ul><ul><ul><li>Apache </li></ul></ul><ul><ul><li>Aptana </li></ul></ul><ul><ul><li>Virtual box </li></ul></ul>
    30. 33. עבודה נוחה מול דפדפן דסקטופ <ul><li>כי אין כמו פיירבאג ... </li></ul><ul><li>הגבילו מימדים בשביל נוחות </li></ul><ul><li>מפו אירועי עכבר לאירועי מגע </li></ul><ul><li>השתמשו ב -moz </li></ul><ul><li>השתמשו ב user agent switcher </li></ul><ul><li>הוסיפו יכולת לעקוף הגדרות מתוך ה -querystring </li></ul>
    31. 34. דיווחי לוג <ul><li>ב -iOS יש console.log </li></ul><ul><li>חסכו באורך מחרוזות - אין הרבה מקום </li></ul><ul><li>פלטרו דיווחים על פי סביבה </li></ul><ul><li>נסו את ה -Webkit Remote Debugging </li></ul>
    32. 35. הרצה במכשיר <ul><li>גלישה מקומית מהמכשיר באמצעות תוכנת פרוקסי </li></ul><ul><li>ניתן גם דרכו לנטר פעילות רשת </li></ul><ul><li>סימולטור אייפון - xcode במאק </li></ul><ul><li>אמולטור אנדרויד - מגיע עם ה -SDK </li></ul>
    33. 36. תודה ובהצלחה ! [email_address]   רן בן אהרון
    34. 37. אנחנו מחפשים FED ים מוכשרים [email_address] [email_address]   רן בן אהרון

    ×