הטרנדים החמים בתחום הווב והמובייל (חלק א’)

סקירה קצרה על המגמות החמות בפיתוח Web ובעיקר בפיתוח Web ל-Mobile. חלק ראשון בסדרה

תמונה: יח"צ, עיבוד תמונה

נתבקשתי בעבודה להעביר סקירה על המגמות החמות בפיתוח ווב ובמיוחד ווב למובייל. הסקירה היא ברמת עומק היכולה לספק קצות חוט למי שמתעניין, ללא כניסה לעומק או השוואה בין האלטרנטיבות השונות. הדגש הוא גם על טכנולוגיות שהוכיחו את עצמן כמעשיות ופחות על ה”טכנולוגיות הכי חדשות”. חשבתי שזה חומר מעניין ולכן החלטתי לפרסם את עיקרי הדברים כאן:

HTML5 + CSS3

לא ניתן לדבר על עולם הווב והמובייל בשנה האחרונה מבלי לדבר על HTML5. זה יהיה כמו לדבר על מבנים גבוהים בת”א… מבלי להזכיר את מגדלי עזריאלי. זהו המובן מאליו.

HTML5 הוא תקן שמתגלגל כבר זמן רב. הוא זוכה גם לקידום מכירות יפה: אם תלכו למשל לאתר כמו HTML5 LOGO תוכלו למשל לקנות חולצה עם הדפס של “HTML5” כדי להבטיח שכ-ו-ל-ם ידעו שאתם מגה-חנונים.

אלמנט פחות מביש, ואפילו דיי שימושי, היא היכולת לייצר תג (“Badge”) שמציין את האלמנטים של HTML5 שהאתר שלכם משתמש בהם – ולפרסם זאת. ללא התג – יהיה קשה למדי לדעת במה השתמשתם, אבל ככל שהוא מופיע בעוד ועוד אתרים אנו מקבלים את התחושה ש HTML5 “כבר כאן” והגיע הזמן לשקול ולהשתמש בו.

יש בו גם אלמנט של Gamification: כל פעם שהוספתם יכולת-בסיס של HTML5 אתם מקבלים עוד “אייקון”. מי יודע – אולי יתפתח בכם צורך בלתי-נשלט “להשלים את כל הסריה”. עצם העובדה שאחד הסמלים ב-Badge מסמל CSS3, שאינו חלק ממטריית התקנים [1] של HTML5 – היא עובדה זניחה. לא ניתן לפרט שולי שכזה להפריע בקמפיין מוצלח.

מעבר לקידום המכירות, שמשמעותו לדעתי יחסית זניחה, הסיבה העיקרית להצלחת HTML5 היא עקשנותו של סטיב ג’ובס לא לתמוך ב Flash על המכשירים של אפל. אתרים שרצו להנות מקהל היעד החדש נאלצו לחפש אלטרנטיבה לפלאש (או Silverlight או Java Applets – מכשירי אפל לא תומכים באף אחד מהם) – ו-HTML5 היה האלטרנטיבה הנראית היחידה. מאותו הרגע HTML5 התקדם בקצב מסחרר, הן בצד האתרים שמשתמשים בו והן בצד התמיכה מצד הדפדפנים. גוגל (+Chrome for Android 4) ומיקרוסופט (Windows 8 Metro Experience) שהחליטו גם הן להפסיק לתמוך ב-Flash – סגרו סופית את הגולל ופתחו את דרך המלך ל-HTML5.

ציון תאימות ל HTML5 עבור דפדפנים שולחניים. מקור: html5test.com

ציון תאימות ל HTML5 עבוד דפדפנים לסמארטפונים. מקור: html5test.com

קוריוז קטן הוא זהות הדפדפן עם התמיכה הטובה ביותר ב-HTML5 נכון ליום זה (הנתונים משתנים מרגע לרגע). מנחשים??
לא Chrome של גוגל, לא ספארי ובטח לא Internet Explorer שמתשרך הרבה מאחור. דווקא Maxthon, הדפדפן הסיני מבוסס IE (במקור) זוכה לציונים הטובים ביותר. בעלות משותפת עם גוגל היא אולי הסבר שירגיע כמה מהקוראים מהפחד “הסינים באים” [2].

בואו נעבור לכמה טרנדים חמים ואולי פחות מוכרים מ HTML5:

עיצוב סתגלן Responsive Design

עקרון זה מדבר על בניית אתר אינטרנט (לרוב תוכן שברובו סטאטי) שיודע “להתאים את עצמו” לכל מכשיר ומצב. גם משתמש בדפדפן שולחני על מסך “24 וגם מכשיר מובייל עם מסך “3 – יוכלו לצפות באתר בהנאה.

איך עושים את זה? התבוננו למשל באתר הבא: http://mobilism.nl/2012 ממחשב שולחני / לפטופ. עכשיו לחצו על הכפתור, בפינה העליונה של החלון, שגורם לחלון של הדפדפן לא להיות maximized והתחילו להצר את רוחב החלון של הדפדפן עוד ועוד. שימו לב אילו שינויים חלים באתר ומתי. הנה עוד דוגמא.

המימוש המקובל לעקרון זה הוא שימוש ב-CSS media Queries – מנגנון שמאפשר לכם לכתוב אתר ב-HTML פעם אחת והתאים קובצי CSS שונים לטווחי רזולוציה (או Orientation) שונים. מכיוון ש CSS3 הוא דיי חזק – אתם יכולים לשנות את העיצוב בצורה דיי דרמטית: Layout, תמונות, רקעים ועוד.

CSS Media Queries, אגב, סובל כיום ממגבלה והוא יוריד את כל התמונות של כל המצבים על מכשיר iPhone למשל. ניתן להימנע מבעיה זו ע”י התערבות ב JavaScript או בצד השרת על מנת לטעון רק את הקבצים שבשימוש.

פתרון אחר של עקרון ה”עיצוב הסתגלן” יכול להיות החלפת Gadget שהוקצה לו מקום קטן מדי מכדי להיות שמיש (נאמר 100 פיקסלים) והחלפתו בתמונה, אשר לחיצה עליה פותחת את ה-Gadget ברוחב מתאים.

בסופו של דבר הרעיון נחמד מאוד אך הוא עובד בעיקר לתוכן שרובו סטאטי (כלומר אתר אינטרנט). עבור אפליקציות – גישה זו לא כ”כ ישימה. אני אומר את זה מניסיון.

העשרה מדורגת Progressive Enhancement

אם Responsive Design הוא לא הדרך לפתח אפליקציות לכמה מכשירים, הנה טכניקה שמתאימה יותר. אין כאן שום קסמים, רק דרך עבודה שהצליחה להוכיח את עצמה כמה פעמים.

  1. הגדירו baseline של החומרה / סט היכולות הכי מצומצם בו תרצו לתמוך.
  2. בנו אפליקציה עם פונקציונליות ושימושיות טובה מספיק בכדי להיות בעלת ערך, על בסיס ה-baseline שלכם. לרוב הפיתוח יעשה על הרזולוציה הקטנה ביותר שאתם מתכוונים לתמוך בה.
  3. העשירו את האפליקציה שלכם ביכולות נוספות (לרוב אלה יהיו שיפורי – נוחות, לא פונקציות קריטיות לעבודה) על בסיס חומרה זמינה: יותר מסך = יותר פרטים או קיצורי דרך זמינים. קיומו של GPS יכול להיתרגם למידע מותאם למקום או defaults חכמים יותר. יותר זיכרון או כוח עיבוד יכול להיות autocomplete שיחסוך הקלדה למשתמש וכו’.

עקרון משנה, שגם הוא נפוץ, נקרא “Mobile First”: כאשר אתם מתכננים אפליקציה אל תתחילו בעיצוב ל-desktop כי אם ל-mobile ובתור עקרון. יש בכך 2 יתרונות:

  • פיתוח למובייל (מסך מאוד מצומצם) יכריח אתכם להבין ולחדד מהם הנתונים או מהן סט היכולות החשוב באמת. הבחנה שכזו שאפשר בקלות לפספס עם נדל”ן מסך כמעט אינסופי. פיתוח במובייל יעזור לכם לפתח פשוט-יותר וממקוד-יותר.
  • כבני אדם, אנו יכולים בקלות יחסית להרחיב ולשפר – אך הרבה יותר קשה לנו לחסוך ולצמצם. אם פיתחתם אפליקציה לשולחן העבודה – רוב הסיכויים שההמרה למובייל תהיה קשה ועם תוצאות לא כ”כ טובות.
    גם תתחילו לפתח למובייל ותגדילו את האפליקציה לשולחן העבודה – המלאכה תהיה קלה בהרבה והסיכון העיקרי הוא שתיצרו אפליקציה דיי מינימליסטית – שבעצם… זה דבר לא כל כך רע.

ספרייה שהיא בגדר “חובה” לפיתוח בשיטת ההעשרה המדורגת היא Modernizr – סיפרית JavaScript שמזהה יכולות של המכשיר ו/או הדפדפן בו אתם רצים: תומך ב colors input של HTML5 או לא תומך. תומך ב-SVG או לא. יש GPS או לא.

הניסיון לעשות חישוב “זהו אייפון 4 ולאייפון 4 יש GPS” הוא אולי סביר בעולם ה-iOS – אך חסר כל סיכוי בעולם האנדרואיד בו יש כל-כך הרבה מכשירים.

JavaScript Micro-Frameworks

בכדי להכיר לכם את הטרנד הזה, אתחיל בדוגמא ספציפית למדי. הכירו נא את Zepto.js – מתחרה חדש שקם ל jQuery.
jQuery, כפי שאתם יודעים, הוא סטנדרט דה-פאקטו. זו ספריה מהירה, יציבה ובעלת קהילה ענקית ופעילה. ישנם מאות פלאג-אינס ל jQuery. היו לה מתחרות, אך jQuery יצאה מול כולן כשידה על העליונה.

מדוע אם כן שמישהו ישתגע ויחליף את jQuery שהוא כבר אוהב ומכיר? למה להחליף סוס מנצח?
אם תתבוננו ב-Zepto, היא נופלת מ-jQuery בכמעט כל פרמטר אפשרי:

  • Zepto היא פחות בוגרת ואולי פחות יציבה.
  • ל-Zepto יש קהילה קטנה יותר.
  • Zepto לא מהירה בצורה משמעותית. אולי באחוזים בודדים.
  • Zepto תומכת במגוון מצומצם בהרבה של דפדפנים. למשל – היא לא תומכת בכלל ב IE.
  • Zepto (עד כמה שידוע לי) לא תומכת באנימציות או טרנספורמציות.

אבל… בעוד jQuery מספקת קובץ בגודל 78K בגרסת ה minified (גודל ה GZip הוא פחות רלוונטי) – Zepto עושה הכל ב 6K בלבד – פחות מעשירית!

השוואת הגודל של ספריות נפוצות ל DOM Selection, במצב קוד מקור, מצומצם ומצומצם + דחוס. מקור: webappers.com

מה שעושה את ההבדל הוא הזיכרון המצומצם של מכשירי המובייל. מכשיר אייפון למשל, לא ישמור ב-cache קבצים (javaScript, CSS או תמונות) שגדולות מ-25K בזיכרון. “בזיכרון” = לאחר הפריסה של קובץ ה-Gzip.

ההבדל בין Zepto.js לבין jQuery היא היכולת להיות ב-cache של דפדפן במכשיר מובייל. האלטרנטיבה היא להביא את הקובץ, כל פעם, ברשת 3G יקרה ואיטית.

Zepto.js היא רק דוגמא אחת לטרנד הולך וגובר בו מוחלפות ספריות “שלמות ועשירות” (כגון jQuery Mobile, QT Touch או מקרה הקצה – Sencha Touch), בספריות קטנות ויעודיות שעושות “רק דבר אחד”, עושות אותו באופן ממוקד וטוב, ועושות אותו למובייל. “סופסופ לא צריך לתמוך ב Internet Explorer”, נאנחו לרווחה מפתחים רבים והחלו לכתוב ספריות פשוטות יותר למובייל.

הקלפים נטרפו עם הצגת שיתוף הפעולה בין מייקרוסופט לנוקיה, אך אני לא אתפלא אם קהל גדול של מפתחים פשוט יחליט לדלג על פיתוח למערכת ההפעלה הניידת של מייקרוסופט, הן בשל עלות / תועלת פחות משתלמת של פיתוח למכשירי Windows Phone והן בשל צלקות נפשיות שנותרו לכמה מהמפתחים מפיתוח על גבי Internet Explorer גרסה 6.

עדכון: יום לאחר שפירסמתי את הפוסט נשאר לי קובץ התמונה, Zepto.png שמוצג למעלה, על שולחן העבודה. במקרה הבחנתי שמדובר בקובץ בגודל 76K. בעזרת דחיסה פשוטה ל-Jpeg באיכות גבוהה הקובץ הפך ל-18K. אני יודע שחלק לא קטן מקוראי הבלוג משתמשים במכשירי מובייל ולכן מעתה, אני אשתמש בתמונות בפורמט JPEG ולא ב-PNG.

MicroJs, הוא לדוגמא, אתר שכולו מוקדש לאיסוף ספריות שכאלו – ויש כבר עשרות רבות.

עמוד הבית של microjs.com

בפוסט ההמשך אסקור עוד כמה ספריות, שפות וכלים “חמים” אחרים בטריטוריה של פיתוח ווב או ווב למובייל.

בהצלחה!

—————–

[1] HTML5 אינו תקן אחד אלא רשימה של כמה וכמה תקנים המתארים יכולות חדשות לדפדפנים שאינן תלויות זו-בזו. לדוגמא “HTML5 סמנטי” שמאפשר מבנה תגים שמתאר את התוכן בצורה יותר טובה או “Web Workers” – היכולת להשתמש ביותר מ thread אחד כדי לבצע חישובים ברקע. HTML5 היא פשוט השם הקל לתאר את אסופת כל היכולות השונות.

נ.ב. דרך קלה לדעת איזו יכולת נתמכת איפה היא להשתמש באתר המצוין http://caniuse.com/

[2] להזכיר: זה שאתה לא מפחד, לא אומר שלא רודפים אחריך.

הפוסט פורסם לראשונה בבלוג ארכיטקטורת תוכנה.

 

Avatar

ליאור בר-און

ליאור בר-און הוא Chief Architect בחברת סטארטאפ ישראלית גדולה.

הגב

7 תגובות על "הטרנדים החמים בתחום הווב והמובייל (חלק א’)"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
Ari Shalvi
Guest

יופי של כתבה

יואב ניומן-טיפול רגשי
Guest

משהו מהקוראים מוכן לסייע לי בהעברת האתר כך שיהיה מותאם לסלולרי, במחיר סביר?
אשמח לשמוע מכם,
יואב ניומן
050-5664431
http://tipul-tov.co.il/

גל
Guest

אחלה כתבה.
לגבי zepto במקום jquery אני לא כל כך מסכים. קודם כל:
jQuery PRODUCTION (32KB, Minified and Gzipped)

דבר נוסף, יש שיפור במהירות האינטרנט הסלולרי ושיפור במכשירי הסלולר. אני בטוח שבעתיד הקרוב ה25K כבר יהיו 250K וגם הורדת הקובץ מחדש לא תהיה כל כך יקרה. הפיתוח לעומת זאת יהיה יותר אפקטיבי ומהיר כשמשתמשים בספרייה יותר חזקה.

ליאור בר-און
Guest

היי גל,

יש עדיין לא מעט מכשירים זולים ומהירים פחות (לדוגמא Samsung Y) והתחרות הגבוהה בין האפליקציות מעודדות להציג תגובה במהירות שיא.

יש רמזים (קרא את http://forum.jquery.com/topic/configure-your-build) ש jQuery בעצמם יאפשרו גרסה מותאמת ומוקטנת של התוצרים שלהם.

יכול להיות שאתה צודק – אבל כרגע אני עדיין רואה מגמה ברורה של הידוק החגורה והשקעה בתשתיות רזות יותר.

ליאור

יואכים
Guest

זה נראה כאילו אנחנו חוזרים לעידן ה-wap
איזה תסכול

ניר
Guest

אין באמת יתרון לZEPTO שכן, best practices מציעים להצביע על ספרית JQUERY המתארחת על שרתי גוגל.
מדובר בסטנדרט שנשמר בCACHE של דפדפן הספארי באייפון ולכן דה-פקטו לא מתבצעת הורדה כלל.

ליאור בר-און
Guest
היי ניר, הייתרון בשימוש ב CDN של גוגל כדי לקבל את jQuery הוא שמירת עותק אחד משותף ב cache ולא יהיה צורך להחזיק עותק של jQuery עבור כל מקור (הדפדפן מודע ל url המלא – הוא לא יכול להניח ששם ספרייה זהה מחייב קוד זהה). אם jQuery לא נכנס ל cache – הוא יורד כל פעם מחדש – אפילו אם מארחים אותו בגוגל. גודל הקובץ משמעותי יותר להורדה, אך יש גם את זמן האיתחול: parsing, והרצה של קוד javaScript הוא בערך ביחס ישר לגודלו – זמן שמשפיע על הזמן עד שהמשתמש יראה תוצאה ראשונה של האפליקציה. הבט ב Modernizr (לינק:… Read more »
wpDiscuz

תגיות לכתבה: