כלים

מה זה פיתוח פרונט אנד?

עמית טל | 9 באפריל 2017

 

אני מפתח פרונט אנד

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

אז איך עובד האינטרנט?

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

לדוגמא, כאשר אנו גולשים ב-Facebook, אנו בעצם פונים לשרתים שנמצאים בכתובת ״Facebook.com״. אנו פונים לשרתים אלה ומבקשים את המידע ואת ה-״עמודים״ שמראים לנו את ה-Feed שלנו. עמוד web הוא קובץ בשפת HTML שמכיל את התוכן העיקרי וקורא לקבצים נוספים לפי הצורך: קבצי CSS ,Javascript, תמונות, פונטים ועוד.

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

בהתאמה, תהליך פיתוח של פרויקט web מורכב משני חלקים עיקריים. החלק האחד מתמקד בפעולות שמתבצעות על השרת (למשל: שליפה של הנתונים המבוקשים, הכנה של העמוד, שליחת הקבצים לגולש). החלק הנוסף מתמקד בפעולות שמתבצעות על הדפדפן שלנו – קוד ה-HTML, ה-CSS, וה-JavaScript.

מה תפקידו של מפתח פרונט אנד?

פיתוח פרונט אנד (או גם: פיתוח צד לקוח. מאנגלית: Front-End Development, Client Side Development) הוא התחום שעוסק בפיתוח הקוד שמתבצע על הדפדפן (או: ההוראות לדפדפן) והרכיבים שהגולש בא אתם במגע ישיר בזמן השימוש במערכת. המשימות העיקריות העומדות לפנינו הן נגישות, ממשק משתמש, שמישות, וביצועים.

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

למה כיף להתמחות בפרונט אנד?

מפתחי פרונט אנד באים במגע עם המשתמשים –

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

אני עובד עם אנשים יצירתיים ושותף בתהליך יצירה של מוצר –

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

בפרונט אנד אנחנו תמיד בתנועה

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

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

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

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

שפות פיתוח וטכנולוגיות

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

עבודתו של מפתח פרונט אנד נעשית בשפות שהדפדפן מבין:

HTML

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

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

CSS

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

בניה של קוד ב-CSS

ספריות CSS שכדאי להכיר

Bootstrap  ו-Foundation הן הספריות הוותיקות והמוכרות בתחום. הן מספקות המון כלים למפתח החל מכלים להגדרה מהירה של עימוד תוכן, ועד תשתיות לרכיבי JS מורכבים יותר. ספריה חדשה ומסקרנת שנמצאת עדיין בגרסה ראשונית היא Bulma שעושה בערך את אותם הדברים אבל מתבססת על תקנים חדשים יותר וחוסכת הרבה קוד.

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

Javascript

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

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

ספריות שכדאי להכיר

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

React של פייסבוק מכריזה על עצמה ״ספרית JS לבניית ממשקי משתמש״ והיא מיועדת לפיתוח אפליקציות ווב, לצד אחותה React Native המיועדת לפיתוח אפליקציות מובייל.

Vue.js מיועדת גם היא לפיתוח ממשקי משתמש, אבל היא קלה יותר לאימוץ כי המבנה שלה יותר אינטואיטיבי.

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

ובצד השרת?

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

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

לסיכום

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

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

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

7 תגובות על “מה זה פיתוח פרונט אנד?”

  1. yoni הגיב:

    מאמר מעולה!

  2. יפעת הגיב:

    מאמר נהדר, נגיש וברור!

  3. אלמונית הגיב:

    מאמר ברור ומסכם
    אהבתי

  4. אביה הגיב:

    מצוין!!
    עשית קצת סדר
    תודה 🙂

  5. אביהוא הגיב:

    מאמר מצוין! תודה עמית ובהצלחה בעבודה שלך (:

  6. עופר הגיב:

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

כתיבת תגובה

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

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