הרבה השתנה וממשיך להשתנות בעולם ה Front End. גם אם נראה שהתחום מתייצב עדיין יש הרבה Frameworks והרבה מאוד בחירה. מה שמקשה עוד יותר על החלטות הוא שאין באמת דרך "נכונה" לפתח וכל אוסף טכנולוגיות מתאים לצוותים אחרים עם מטרות שונות וניסיון קודם שונה. לכן במקום להגיד לכם באיזה טכנולוגיות כדאי או לא כדאי לכם להשתמש אני חושב שעדיף להציג את השאלות והאתגרים של מפתחי Front End היום. לפני הבחירה הטכנולוגית הבאה תצטרכו ללכת ולבדוק איך אוסף הטכנולוגיות שבחרתם עוזר לכם להתמודד (לפחות) עם אתגרים אלו.

1. מבנה העמוד: נגישות, התאמה למגוון מכשירים

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

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

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

2. טיפול בהמון אירועים במקביל

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

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

בנוסף מערכות רבות משתמשות היום ב Front End כממשק ניהול מרכזי לארכיטקטורת Micro Services. במבנה כזה קוד צד הלקוח צריך להיות מסוגל לבצע פעולות כ Transaction במספר Micro Services ורק כשכל הפעולות הצליחו לעדכן את הממשק.

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

3. ביצועים וזמני טעינה

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

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

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

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

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

4. תמיכה ב Offline

עדיין לא בטוחים מה זה Service Worker או איך הוא עוזר? מעניין. כי Service Workers עובדים היום על כל הדפדפנים המובילים (פרט ל IE, ברור). העבודה עם Service Workers מאפשרת שיפור ביצועים משמעותי שכן הם מאפשרים שליטה מדויקת על הדברים שדפדפן שומר.

בנוסף Service Workers מספקים תשתית ל Push Notifications שזה עוד פיצ'ר שמשתמשים (מסוימים) מאוד אוהבים.

5. אבטחת מידע

רשימת ה HTTP Headers הבאים יעזרו לכם לכתוב יישומי Web מאובטחים יותר. וודאו שאתם יודעים מה המשמעות של כל אחד ושהתשתית הטכנולוגית שלכם מאפשרת להשתמש בהם:

1. Content Security Policy (CSP)
2. X-XSS-Protection
3. HSTS
4. X-Frame-Options
5. HPKP - נתמך כבר היום בכרום ופיירפוקס

למידע נוסף על Headers אלו ממליץ לקרוא את ההסבר המלא כאן: https://www.keycdn.com/blog/http-security-headers/

6. סיכום

בשביל להיות מפתחי Front End אתם כמובן צריכים לדעת JavaScript, HTML ו CSS - אבל זה לא מספיק. תחום Front End ממשיך לרוץ קדימה ולדעתי היום זה פחות חשוב באיזה Framework בחרתם להשתמש והרבה יותר חשוב איך אתם משתמשים בתשתית שבחרתם כדי לתת חוויה טובה למשתמשים.

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