כלים

הרנסנס העכשווי בעולם הפרונטאנד

עמית צור | 3 במאי 2017

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

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

עשורים של שינוי

נקודות הממשק בין אדם למחשב התפתחו דרמטית ב-30 השנים האחרונות. בשנות השמונים היה זה המסוף בצבע שחור-ירוק. בשנות ה-90 נכנסו ה"חלונות" לחיינו. בשנות האלפיים פותחו ממשקי תוכנה מורכבים לאינסוף תוכנות. ולבסוף, עם יציאתו של הסמארטפון, התחלנו כולנו לבצע דרך המחשב והאינטרנט כמעט את כל פעולות היומיום, בין אם זה קניות, חיים חברתיים ורומנטיים, בילוי ופנאי ועוד. במבט לעתיד, טרנד ה-IoT) Internet of Things) וטרנד ה-AR) Augmented Reality) מבשרים על המשך השינוי.

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

לכן תפקידו של מפתח פרונט בווב בתחילת שנות ה-2000 התבטא בעיקר בבכתיבת HTML ושימוש ב-ווידג'טים מספריות שונות כמו jQuery, Dojo, MooTools, Prototype במטרה להעשיר במעט את יכולת הדפדפן וכדי לגשר על הבדלי הדפדפנים בתוך ג'ונגל אכזרי של חוסר תאימות.
ייתכן שהיינו ממשיכים לחיות בעידן החשוך ההוא, אבל ב-2007 נפלה פצצת אטום בעולמנו וסטיב ג'ובס הכריז על האייפון.
המובייל כבש את העולם בסערה וכולנו התחלנו להשתמש במחשב לכל מטרה בחיי היומיום.
כמו כל פצצת אטום טובה – עיקר האפקט הוא בנשורת, שנים ארוכות אחרי.

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

חוויה שווה כסף

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

כך נולד המושג של ממשק הווב העשיר, או ה- RIA: Rich Internet Applications.

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

(אפשר להזכיר בנימה זו גם את GWT שאיפשר לכתוב ב- Java, שפה שהייתה נגישה יותר למתכנתים רבים מאשר JavaScript שעדיין נחשבה ל"שפת צעצוע". אבל לטכנולוגיה זו היו חסרונות רבים והיא לא המריאה, עד שגוגל נטשה אותה לאחר כמה שנים).

Flash חי ובעט, עד שב-2010 מיודענו סטיב ג'ובס עושה הכרזה דרמטית נוספת. במאמר שנקרא Thoughts on Flash הוא משתף כי אינו תומך בטכנולוגיה זו, וכי גרסאות אייפון עתידיות לא יתמכו ב-Flash ובמקומה יושקעו מאמצים לתמוך בעולם הסטנדרטים הפתוח של HTML5. זו הייתה בשורת מוות עבור Flash, אך בזכותה עולם פיתוח האפליקציות ב-JavaScript, HTML ו-CSS קיבל את הדחיפה הגדולה ביותר שלו.

המשימה של בניית ממשק מורכב אינה פשוטה כלל ועיקר. הסיבות לכך רבות, תיאור הקשר בין המידע לבין התצוגה הויזואלית, הדרישה לעבוד בכל סוגי המכשירים (ממחשב שולחני ועד הזול שבמכשירים הניידים), שמירה על קוד שניתן לתיחזוק, טיוב הביצועים, ועוד. ולכן בסביבות 2010 ביצבצו להן ספריות שנועדו להקל על המשימה – Backbone, Angular, Ember – ספריות שהביאו פתרונות בסגנונות שונים למשימה המורכבת הזו. לכל הספריות הייתה מטרה אחת – לאפשר יכולת קלה למפתחים לקשר בין ה-UI ובין ה-data, מה שנקרא בעגה המקצועית data binding.

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

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

בנקודה זו היה ברור שהעולם הולך ל-HTML, אבל היכולת לייצר ממשק איכותי בטכנולוגיה הזו הייתה מאתגרת. התוכניתנים שלמדו לבנות web UI בצורה נכונה החזיקו במידע בעל ערך גבוה מאי פעם – הפרונטאנד הפך להיות מקצוע, ומקצוע מבוקש מאוד!

העולם בסערה

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

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

כלי בנייה

הקוד שאנו כותבים צריך לרוב לעבור שינוי על מנת להיות אופטימלי לזמן ריצה בפרודקשיין (לדוגמא, כיווץ הקוד על מנת לצמצם את נפח ההורדה, או שירשור קבצים במטרה למעט בקריאות רשת).
כלים כגון grunt, gulp, webpack עוזרים לבצע משימות מסוג זה ביעילות ולכל אחד מהם אינסוף תוספים. החדשנות בעולם זה הרקיעה שחקים – לדוגמא, עם webpack נולדה היכולת לשנות קוד ולטעון אותו לתוך התוכנה בזמן ריצה (דבר שמתכנתי בקאנד יכולים רק לחלום עליו!)

כלי טסטים

קוד שעובד בנקודת זמן מסוימת לא בהכרח ימשיך לבצע את המצופה ממנו אחרי שייעשו בו שינויים, לפעמים על ידי מספר רב של חברי צוות ולפעמים לאורך תקופה של חודשים ושנים. הצורך בבדיקות אוטומטיות קיים בכל מערכת תוכנה, על מנת להבטיח שהיא פועלת כצפוי. בעוד שבשאר שפות הפיתוח היו כלים רבים, JavaScript נותרה מאחור במשך שנים רבות, אך ככל שהקוד גדל, נוצר צורך לעבוד עם כלי טסטים ורבים מאד נכתבו בשנים האחרונות. הם נבדלים בעיקר בדקדוק ובסביבת הריצה, אך כולם מאפשרים להריץ את הקוד בסביבה מבודדת ולבדוק את נכונותו. כלים לדוגמא: Jasmine, Mocha, Chai, Sinon, Karma, QUnit, Ava, Jest.

שפות, ספריות ושיטות מעל CSS

לשפת CSS חסרות יכולות רבות שעוזרות לתאר את התצוגה בצורה הגיונית. לדוגמא, שימוש במשתנים. על מנת להקל על פיתוח ה-CSS נכתבו שפות שמרחיבות את CSS ביכולות כמו משתנים, אך באמצעות כלים שונים, ניתן מהן לייצר CSS תקני שהדפדפן יבין.
הכלים המרכזיים הם: Sass, LESS, PostCSS
כמו-כן, פותחו במהלך השנים מתודולוגיות מוכחות לכתיבת CSS קריא, ברור וניתן לתחזוקה. לדוגמא: BEM, SMACSS, OOCSS, CSS Modules. מתכנתים לרוב אינם המעצבים הכי מוכשרים, ולכן גם נוצרו ספריות CSS שמביאות עיצוב יפה ועדכני גם למי שאינו מעצב: Bootstrap, Zurb Foundation.

כלי ניהול תלויות והורדת קוד

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

שפות מעל JavaScript

נוצרו אף שפות חדשות, שמביאות יכולות שאין ל-JavaScript כמו types (טיפוסי משתנים). מי שכותב בשפות אלה (לדוגמא TypeScript, Flow, ClojureScript, Elm) משתמש בכלים שמתרגמים אותן ל-JavaScript (תהליך בשם טרנספילציה – transpilation) מכיוון שהדפדפן יודע להריץ רק קוד JavaScript. הכלי המרכזי לכך היום הוא Babel, שהיסטוריה עשירה של שינויים נרחבים בו מעידה על הדרישה הגדולה של מפתחים לכתוב בלהג החביב עליהם.

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

במקביל, המתכנתים החלו להבין את חשיבות הצורך בביצועים מהירים של האפליקציות שלהם וחברות כמו גוגל ופייסבוק החלו להשקיע בקהילת המפתחים על מנת לעזור להם במשימה. צוותי ה-Dev relations של גוגל ואחרים יצאו בקמפיינים ללמד מתכנתים שיטות מומלצות לשיפור ביצועי אפליקציות בדפדפן – הרצאות ופוסטים שמסבירות איך לטעון עמוד בפחות משניה, מקורות מידע על איך הדפדפן מצייר, איך להימנע מקירטועים באנימציות. ההאשטאג perfmatters# עלה לכותרות! אפילו Adobe יצאו מעולם הפלאש והוציאו מגזין דיגיטלי סביב פיתוח פרונטאנד בשם Appliness.

ב-2013 פייסבוק שיחררו את אחת הבשורות המשמעותיות בעולם הפרונטאנד – React. הספריה, שמאפשרת לייצר מודל קומפוננטות ולחבר אליה data בדרכים שונות, הביאה גישה חדשנית לפיתוח UI ויצרה סביבה ecosystem עצום של קוד וקהילה.

בד בבד, הדפדפנים ממשיכים להתפתח בקצב מהיר, ומממשים יכולות חדשות שגופי הסטנדרטים מתכננים. המפרט (ספציפיקציה) של JavaScript הולך ומתקדם, והשפה הופכת מודרנית. גם הכלים הולכים והופכים מתוחכמים, לדוגמא חידושים מתמידים ב-chrome devtools.

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

ישנה תנועה חדשה בשם PWA – Progressive Web Apps שמאגדת לתוכה יכולות חדשות של דפדפנים כגון מצב offline ושמירת העמוד על מסך הבית של הסמארטפון, מה שמקרב את חוויית הווב לחוויית אפליקציית מובייל. מהכיוון השני, עולם הפרונטאנד בווב הולך ומתקרב גם אל עולם פיתוח המובייל על ידי פרוייקטים המאפשרים למפתחי JS לפתח אפליקציות נייטיב לאנדרואיד ואייפון, בראשם React Native, ודומיו NativeScript ו-Weex.

אנשי אשכולות

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

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

  1. ארכיטקטורה – בניית  UI תתבצע ככל הנראה סביב תשתית או ספריה מסויימת. הנפוצות שבהן הן Angular ו-React
  2. עיצוב ויזואלי
  3. עיצוב חוויית משתמש
  4. פיתוח UI – שליטה באינטראקציה עם ה-DOM, אנימציות, אפקטים, בניית layout, וכתיבה נכונה של CSS ו-HTML
  5. טסטים, בנייה ו-CI – היכרות עם מתודולוגיות וכלים לבדיקות ושחרור יציב של קוד
  6. אופטימיזציה וניתוח ביצועים – צריכת זיכרון, הבנת מנוע הדפדפן וידע ב-HTTP. כל אפליקציה תיתקל בצורך לבצע אופטימיזציה בשלב זה או אחר
  7. אינטגרציות – בעוד שבעבר רובן קרו בשרת, היום יש אינטגרציות עם גורמים חיצוניים (רשתות חברתיות, טלפון, מנועי חיפוש) גם בצד הקליינט.

איך נשארים בעניינים?

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

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

מעל הכל הייתי ממליץ להתחבר לקהילה. הקהילה בישראל משגשגת, ולא חסרים פורומים ומיטאפים עם תוכן מצוין, לציין רק כמה:
Javascript Israel, React Israel, Front-End.IL, Angular-IL

מעבר לכך, יש newsletters מעניינים בנושא, ששווה לעקוב אחריהם:

Javascript weekly, Mobile web weekly, Pony foo, FrontEnd Focus, JSter

עוד מקורות ניתן למצוא בפודקאסטים טובים כמו Thewebahead ו – javascriptair , בלוגים, כנסים, reddit, וטוויטר. ההמלצה שלי היא לבנות רשימה באופן הדרגתי עם הזמן, מכיוון שכמות המידע היא אינסופית וניתן לטבוע בים הזה בקלות (מה שנקרא analysis paralysis).

לסיכום

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

 

מתעניינים בלימודי פיתוח פרונט אנד? לחצו כאן לכל המידע

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

כתיבת תגובה

האימייל לא יוצג באתר.

הוספת תגובה בפייסבוק