�ݺ�ߣ

טיפים לפיתוח אפליקציות מובייל ווב רן בן אהרון

דפדפני מובייל ציון פיצ ' רים על פי html5test

יכולות דפדפנים מעניינות local storage, application cache html5 syntax canvas css3 JSON parser websockets pushState

יכולות מכשיר אירועי מגע element.addEventListener("touchstart", func, bubble); מיקום navigator.geolocation.getCurrentPosition(successFunc, errorFunc); מצפן וחיישן תנועה * window.addEventListener("deviceMotion", func,��bubble); אוריאנטציה window.addEventListener("orientationchange", func,��bubble); האצת חומרה *�� DIV { transform: rotate(45deg) } * iOS בלבד כרגע

... לעניינו להבין מגבלות לתת הרגשה של נייטיב

להבין את מגבלות המשאבים כח עיבוד רשת זכרון

כח עיבוד מעבד חלש מוביל ל : שמתבטא ב :�� איטיות בפרסור קוד איטיות בהרצת קוד איטיות בתצוגה עיכוב בטעינת עמוד תגובתיות לקויה אנימציות מקרטעות

JS השוואת מהירות הרצת var ul = document. createElement ( "ul" ) ; �� var i ; �� for ( i = 0 ; i < 100 ; i ++ ) { �� var li = document. createElement ( "li" ) ; �� var text = document. createTextNode ( "feds" ) ; �� li. appendChild ( text ) ; �� ul. appendChild ( li ) ; } 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

JS השוואת מהירות הרצת var ul = $ ( "<ul/>" ) ; �� var i ; �� for ( i = 0 ; i < 100 ; i ++ ) { �� var li = $ ( "<li>feds</li>" ) ; �� ul. append ( li ) ; �� } 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

JS השוואת מהירות הרצת var arr = document. querySelectorAll ( "UL LI" ) ; var i , len = arr. length ; for ( i = 0 ; i < len ; i ++ ){ �� arr [ i ] . className = "bar" ; } 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

JS השוואת מהירות הרצת var arr = $ ( "UL LI" ) ; arr. each ( function () { �� this . className = "bar" ; }) ; 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

כח עיבוד אופטימיזציה לקוד יעיל שימוש בנייטיב JS ספריות יעודיות ל -webkit כמו zepto / xui שימוש אנימציות hardware accelerated

מגבלות רשת 4-6 קריאות HTTP בו זמנית אין חלוקה בין הוסטים לייטנסי גבוה קישור אלחוטי לא אמין

מגבלות רשת CSS3 במקום תמונות הטמעת קבצים (base64) ספריית סקריפטים מצומצמת התאמת גדלי תמונות שמירה לזכרון המכשיר �� appcache, local storage lazy loading

כלי CSS http://css-tricks.com/examples/ShapesOfCSS/ 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

הרגשה של נייטיב ��

תנועה חלקה בין עמודים הצמדות לאירועי מגע תזוזה באמצעות translate

גלילה פנימית position: fixed -webkit-overflow-scrolling:touch�� אלטרנטיבה ב -JS

התאמה למימדי מסך מימדים בלתי צפויים באנדרויד שינוי אוריאנטציה

מסך מלא העלמת��סרגל��כתובת (window.scrollTo(0,0 או מצב standalone 44px 20px 416px

התאמה ליחס פיקסלים ניתן לגילוי ב -JS window.devicePixelRatio וב -CSS ע " י media query @media all and (-min-device-pixel-ratio: 2){ }

ביטול התנהגויות ביטול scaling <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> ביטול scrolling <body ontouchmove="function(e){e.preventDefault()}"> ביטול selection -webkit-user-select: none; -webkit-touch-callout: none;

חיווי טעינה לא מומלץ animated gif עדיפות ל -css animation כמו spin.js

סופר אקסטרה בונוס Pull to refresh browser history deep linking

סביבת הפיתוח שלנו Ubuntu Apache Aptana Virtual box

עבודה נוחה מול דפדפן דסקטופ כי אין כמו פיירבאג ... הגבילו מימדים בשביל נוחות מפו אירועי עכבר לאירועי מגע השתמשו ב -moz השתמשו ב user agent switcher הוסיפו יכולת לעקוף הגדרות מתוך ה -querystring

דיווחי לוג ב -iOS יש console.log חסכו באורך מחרוזות - אין הרבה מקום פלטרו דיווחים על פי סביבה נסו את ה -Webkit Remote Debugging

הרצה במכשיר גלישה מקומית מהמכשיר באמצעות תוכנת פרוקסי ניתן גם דרכו לנטר פעילות רשת סימולטור אייפון - xcode במאק אמולטור אנדרויד - מגיע עם ה -SDK

תודה ובהצלחה ! [email_address] �� רן בן אהרון

אנחנו מחפשים FED ים מוכשרים [email_address] [email_address] �� רן בן אהרון

�ݺ�ߣ

DoAT - mobile web-app development

More Related Content

DoAT - mobile web-app development

Editor's Notes