כנס You Gotta Love Frontend הבינלאומי התקיים בתל אביב – הנה מה שפספסתם

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

yglf

You Gotta Love Frontend – אתם חייבים לאהוב צד לקוח, הינו הכנס הבינלאומי הראשון מסוגו בארץ. הכנס נמשך יומיים בין התאריכים 8-9 ביוני ואירח את המובילים הגדולים בעולם בתחום פיתוח צד לקוח, איש איש בתחומו, מ-JavaScript למתודולגיות עבודה וקונספטים, CSS וטכנולוגיות חדשות.

הכנס, המכונה YGLF – התקיים בתאטרון הקאמרי בתל אביב בסגנון ביר-גארדן אירופאי עם בירה ויין, ארוחת בוקר, צהריים ונשנושים בין לבין וכמובן מאווררים גדולים כי אין כמו הקיץ בארץ. כ-700 אורחים פקדו את הכנס השנה ויצרו אווירה מאוד נעימה תחת אותה אהבה משותפת לקוד וובי יפה וחדשני.

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

Douglas CrockfordDouglasCrockford

הדובר הראשון היה לא אחר מאשר Douglas Crockford – דגלס קרוקפורד אחד ממקדמי JavaScript, מפתח כלים כמו JSlint ו-JSmin. ארכיטקט ראשי ל-javascript בחברת paypal והכי חשוב ממציא ומפתח פורמט ה-JSON.

JSON – ראשי תיבות של JavaScript Object Notation. אחד הפורמטים להעברת מידע הנפוצים והשכיחים ביותר באינטרנט, הפורמט קל לקריאה וכתיבה על ידי בני אדם ומציג מבנה נוח לעבודה ופרסור של המערכות השונות.

קרדיט: דגלס קרוקפורד

קרדיט: דגלס קרוקפורד

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

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

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

היום לכל אתר יש שם משתמש וסיסמא ולא אגזים אם אגיד שיש לי קרוב ל-30 סיסמאות ושמות משתמשים שונים ואני צריך לזכור את כולם כי אני לא סומך על פתרונות כמו lastPass ו-onePassword.

מעבר לבעיית הסיסמאות שהמשתמשים צריכים לזכור, גם אבטחת המידע מצד האתרים והשרתים הופכת להיות קשה ומסורבלת מאוד, לדוגמא SSL שאיתנו קרוב ל-15 שנה ועדיין מוצאים בו חולשות ופגיעויות. גם מתווכי צד שלישי שעליהם העולם צריך לסמוך כמו comodo או verisign נפרצים לעיתים ואנחנו לא באמת יודעים מי ומה עומד מאחוריהם.

אז נכון, הראייה מאוד פסימית לגבי כל רכיב ורכיב המרכיבים את האקוסיסטם של אינטרנט מאובטח, אבל לדג יש פתרון, או יותר נכון חזון. המפתח הפרטי ישמר כ-hash לוקאלית על המכשיר של המשתמש, וכדי לחלץ אותו המשתמש נזקק לזכור סיסמא אחת בלבד שתשמש אותו עבור כל השירותים. המפתח הפרטי ידע להזדהות ולפתוח גישה לאתרים מאובטחים וה-URL שלהם יהיה במבנה הבא: web:512bitPublic_key@IPv6/Capability. מבנה כזה שומר על המפתח הפומבי מפני Social engineering למינהם או מפני sholder surfing.

המשתמשים לא יזדקקו לזכור את הקישורים בעצמם שכן יגיעו אליהם במייל או אפילו פקיד הבנק שלכם יספק לכם QRcode שלאחר הזיהוי הראשוני לא יהיה בו צורך עוד. נשמע כמו חזון למועד? אולי, אבל אני יודע שהייתי שמח לפתרון כזה, ונכון לעכשיו אין לנו – המפתחים, מה לשנות בצורת העבודה.

Yelena Jetpyspayeva & Vladimir Grinenko

קרדיט: YGLF conf

קרדיט: YGLF conf

ילנה וולדמיר עובדים ב-Yandex – הגוגל הרוסי, לאתר Yandex שירותים רבים מאוד ומפתחים בכל העולם. ילנה וולדימיר הם שניים מהמפתחים ומההוגים של מתודולוגיה וטכנולוגיית BEM – Block Element Modifiler. כולנו משתמשים בקונבנציה כזו או אחרת לסידור ונתינת שמות לקלאסים ומזהים, לפונקציות ולמשתנים, אבל מה קורה אחרי שבוע חופש או עובד חדש שצריך להכנס לקוד, או אחרי חצי שנה שעשיתם מעט שינויים במערכת הגדולה שלכם, האם אתם באמת יודעים מה יקרה אחרי שתורידו אלמנט? או תנסו לשנות צבע של הגדרת ה-CSS הבאה: footer div div# ? כמה באמת ניתן לבצע שימוש חוזר בקוד קיים מבלי לכתוב מחדש עוד פעם את float:left? האם זה ‘בטוח’ למחוק שורה מסויימת? לא, כדאי שנשאיר את זה.

פרויקט BEM התחיל בהגדרת קונבנציה או יותר נכון מתודולוגיה להגדרת שמות לקלאסים כדי שתדעו בדיוק מה כל שורה מתוך 3,000 שורות CSS שלכם אומרת.

קודם כל המתודולוגיה מנחה לעבוד רק עם קלאסים ולא עם שמות אלמנטים ולא עם מזהים (ID). ברגע שתעבדו כך תחסכו מעצמכם הרבה מאוד כאבי ראש לחשב קדימויות:

div span .red{color:red;} או #stDiv span a {color:blue;}

בנוסף לכך הגדרת מאפיינים לאלמנט המורכב מעץ של יותר מ-3-4 הגדרות CSS כמו בדוגמא הנ”ל, מאטים את תהליך הציור (render) של הגדרות העיצוב. שימוש בפורמט קבוע נקבע באופן כזה שהוא גם מקל בבחירת השם לקלאס, גם נותן משמעות אמיתית להגדרה וגם self documented. הפורמט הוא block__element_mod

קרדיט: https://en.bem.info/

קרדיט: https://en.bem.info/

כל חלק המוקף בעיגול הוא למעשה בלוק, כדוגמא נסתכל על הבלוק העליון שהוא menu. כל אחד מהאפשרויות בתפריט הם אלמנט, ומצב האלמנט הוא ה-modifier כך שלמעשה אם נסתכל על כל אחד משלושת האלמנטים שלא נבחרו הקלאס יראה כך: menu__tab#_notSelected. בעוד לאלמנט השני משמאל, הנבחר – menu__tab3_selected.

קרדיט: https://en.bem.info

קרדיט: https://en.bem.info

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

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

myFacebook/
myFacebook.html–
myFacebook.css–
myFacebook.js–

ואפילו נוכל להכיל את המתודולוגיה ברמת הקבצים:

blocks/
menu.css–
head.css–

וכן הלאה.

אז אחרי שיש לנו את המתודולוגיה הזו, איך נפתור את בעיית הזכרון של מה בשימוש ומה לא? או אם יש הגדרות כפולות בקבצים שונים? פה נכנסת הטכנולוגיה לפעולה. צוות BEM בנו את הפלטפורמה מעבר לאידיאולוגיה העוברת על הקוד וסורקת את מבנה הקבצים ומייצרת רק את האלמנטים בשימוש, כולל modifiers של JS לקריאה מעמיקה על שימוש והטמעת הטכנולוגיה תוכלו למצוא פה.

אני אישית מאוד אהבתי את המתודולוגיה ובאופן אישי הולך להתחיל לישם אותה בפרוייקטים הבאים שלי. אין קורלציה הכרחית בין המתודולוגיה לטכנולוגיה וכל אחד יכול להחליט מה וכמה הוא מאמץ מ-BEM. משפט שפעם שמעתי: טכנולוגיות באות והולכות מתודולוגיות נשארות לנצח… או משהו כזה.

Screen Shot 2015-06-24 at 15.31.03

Lea Verou

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

ההצגה של ליה היתה כולה ב-live code והציגה שיטות שונות לבנות את אחד האלמנטים המרגיזים ביותר שאפשר לבנות ב-web, ה-Pie Chart.

ליה ציינה בתחילת ההצגה שקוד CSS טוב הוא קוד גמיש, ניתן לתחזוקה ובר הרחבה, והראתה מספר שיטות מהגרועה ביותר לטובה ביותר, החל משימוש ב-skew ו-rotate, והמשיכה בשימוש באינטרפולציות עם keyframe והראתה כלים מעניינים לדיבאג לאנימציות CSS.

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

Screen Shot 2015-06-24 at 15.33.43

ערן זינמן BOOM Performance – DaPulse

מה זה ביצועי בום? זה למעשה הזמן שאתה מצפה שמשהו יעלה ב-web. כמו שאתם יודעים ומרגישים, ככל שאתר מגיב מהר יותר, אתם תשתמשו בו יותר, כמו שרובנו משתמשים בגוגל לכל דבר החל ממחשבון עד לתיקון שגיאות – כי זה פשוט מהיר יותר מלפתוח word או calculator.

כנראה שהשקעה במהירות האתר חשובה יותר מעוד פיצ’ר:
פיצ’ר חדש ישמש כ-10% מהמשתמשים שלכם.
שיפור מהירות ישפיע על 100% מהמשתמשים שלכם.

אז איך אפשר לשפר את הביצועים (צד לקוח) או לפחות לרמות ולתת את התחושה כאילו שיפרתם אותה?
נתחיל מהרשימה הבסיסית, שאם אתם לא מימשתם אותה, כדאי שתבצעו אותה לפני שתמשיכו לדברים הבאים: כיווץ JS ו-CSS שימוש ב-Gzip, אופטימזציה של תמונות, שימוש ב-CDN, תעדוף טעינה של JS ו-CSS, וכמובן הסרה או הזזה של JS המעכב render של עמוד.

תחסכו מעצמכם חישובים מיותרים כמו selector-ים עמוקים בלולאה גדולה, חישובי ‘ציור’ כמו opacity או box shadows, יפה ככל שיהיה, אם זה משפיע על הביצועים זה עלול לגרוע יותר מלהועיל. binding ל-scroll event, כל פיקסל של תזוזה, הפונקציה מתבצעת – המנעו אם אפשר. נסו לצמצם את כמות האלמנטים ב-DOM וטיפ בסיסי אחרון, נסו אם ניתן להשתמש ב-GPU לבצע עבורכם פעולות כבדות כמו אנימציה. על ידי שימוש בפרמטר translate3d ב-CSS, רוב הדפדפנים המודרנים יודעים להתייחס לפרמטר ולהכריח את הכרטיס הגרפי לבצע את העבודה השחורה.

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

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

על פי אג’נדה הזו, עדכנו את ה-UI כאילו היתה הצלחה (למפתחים שביננו: הזיזו את התוכן של jquery success לבלי קשר אם הפעולה הצליחה או לא. אם היא נכשלה, עדכנו פעם נוספת שהיתה בעיה).
לדוגמא אם תכתבו תגובה בפייסבוק בלי אינטרנט, ה-UI יתעדכן כאילו היתה הצלחה, ורק אחרי הכישלון יתריע לכם שהפעולה נכשלה.

2. ראיית העתיד – בנו תחזיות והשתמשו ב-preconnect, prefetch, prerender ותחסכו זמן יקר בטעינה, וציור של העמוד הבא שאתם צופים שהמשתמש יגיע אליו, על ידי שימוש בכלים האלו העמודים הצפויים להופיע ישמרו ב-cache של הדפדפן ויופיעו באופן מיידי כשהמשתמש באמת יחליט ללכת לעמוד הבא. המשתמשים צפויים – תעקבו אחריהם ותצרו תחזיות מבוססות.

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

צילום מסך

צילום מסך

לסיכום

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

הכנס כלל גם תחרות אנימציה ללוגו של הכנס שיכולה לרוץ בדפדפן, אדביק פה את 4 המקומות הראשונים אולי תוכלו לקבל השראה למשימות הבאות שלכם.

מקום ראשון – אורון מוזס

מקום שני – גלעד קוראטי

מקום שלישי – אריאל ורבר

מקום רביעי – דימה קוזמיץ

קרדיט תמונה: vector collection of web development shield signs: html5, css3 and javascript. isolated icons on white background/shutterstcok.com

דניאל

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

הגב

6 תגובות על "כנס You Gotta Love Frontend הבינלאומי התקיים בתל אביב – הנה מה שפספסתם"

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

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

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

דניאל, תודה על הסיכום המעולה. רצינו לבקש לתקן את השם של החברה מ depulse ל-dapulse תודה :))

שי
Guest

ואולי על הדרך prefatch ל-prefetch ו-rander ל-render…

שלומי ינאי
Guest

היה כנס מדהים! יהיה עוד אחד בשנה הבאה?

Ard
Guest

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

הבעיה היא שאין דוגמא כדי לעשות עליה inspect.

Daniel Meschiany
Guest

צודקים, נפל בדרך :)
תוקן בכתבה והקוד:

ניר סמדר
Guest

סקירה מצוינת, תודה רבה

wpDiscuz

תגיות לכתבה: