טרנדים חמים בתחום ה Web וה Mobile - חלק 1

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

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 - אך חסר כל סיכוי בעולם ה Android בו יש כל-כך הרבה מכשירים.


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", נאנחו לרווחה מפתחים רבים והחלו לכתוב ספריות פשוטות יותר למובייל. עם הצגת שיתוף הפעולה בין מייקרוסופט לנוקיה ייתכן שדברים יישתנו.

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

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

ביטוי אחר של מגמה זו היא היכולת שנותנות ספריות מסויימות ל"ארוז" ולהוריד רק פונקציות מסויימות. הנה דוגמא מ Modernizer והנה דוגמא מ jQuery UI. שמועות (מקור) אומרות שגם jQuery יציגו יכולת כזו בקרוב. נשמע לי כמו תגובה לתחרות מ Zepto.js. תגובה שיכולה להיות דיי מוצלחת, לדעתי.

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



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

בהצלחה!



-----------------

[1] HTML5 אינו תקן אחד אלא רשימה של כמה וכמה תקנים המתארים יכולות חדשות לדפדפנים שאינן תלויות זו-בזו. לדוגמא "HTML5 סמנטי" שמאפשר מבנה תגים שמתאר את התוכן בצורה יותר טובה או "Web Workers" - היכולת להשתמש ביותר מ thread אחד כדי לבצע חישובים ברקע. HTML5 היא פשוט השם הקל לתאר את אסופת כל היכולות השונות.
נ.ב. דרך קלה לדעת איזו יכולת נתמכת איפה היא להשתמש באתר המצוין http://caniuse.com/

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