פרונט אנד (Front-End) ובק אנד (Back-End) הם שני מושגים שמשתמשים בהם הרבה בעולם התכנות והנדסת התוכנה ויש אנשי תוכנה ומהנדסים שמתמחים בכל אחד מהם.

אבל מה המשמעות וההבדלים ביניהם?

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


#Frontend
הפרונט אנד, צד המשתמש, כולל את כל מה שרואים באתר או באפליקציה, כל הצדדים הנראים, הוויזיאליים של הפיתוח. בין השאר הוא כולל את המסך, החלונות, הכפתורים, השדות והתפריטים. את ה-Front End רואה המשתמש ולא רק המפתח.

זהו צד הלקוח (Client), או צד המשתמש (User). הוא מפותח בטכנולוגיות האינטרנט הידועות והקלאסיות, של HTML, CSS, JavaScript ועוד. ממשקי ה-WEB כאן נועדו לאפשר תמיכה בתקשורת עם מסדי הנתונים והשרתים, תקשורת שעליה אחראי הבק אנד.


#Backend
הבק אנד, צד השרת, נמצא אכן ברקע. כאן נעשה כל הצד הלוגי וחישובי של. ב"בק אנד" מנוהלת הפעילות שמאחורי הקלעים של האתר, האפליקציה או התוכנה שבה אנו משתמשים. הבק אנד הוא שאחראי לפעולה החלקה, התקינה והיעילה של השירות. יש לו אחריות על התקשורת עם השרתים (Servers), שעליהם שמורים בסיסי הנתונים.

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


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

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

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

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

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


הנה הפרונט אנד, לעומת הבק אנד (עברית):

https://youtu.be/eU-C17D6hfU?t=17s


פרונט אנד:

https://youtu.be/WG5ikvJ2TKA


בק אנד:

https://youtu.be/XBu54nfzxAQ


והנה השניים וה"פול סטאק" שמשלב ידע בשניהם:

https://youtu.be/NMKdd1Hz06U

HTML (קיצור של HyperText Markup Language) היא שפה או פרוטוקול שבו כתובים דפי אינטרנט ואתרי אינטרנט פשוטים. כלומר, זו שפה שבאמצעותה ניתן ליצור דפי אינטרנט ואתרים.

CSS, לעומתה, היא שפת סגנון בסיסית, שגורמת לדפי אינטרנט להיראות טוב.

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

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

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

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


הנה ה-HTML:

https://youtu.be/akf9j0Jo0PE


ה-CSS:

https://youtu.be/1srYXgDRNak


מדריך שמסביר מצוין את עולם ה-HTML ב-12 דקות:

https://youtu.be/bWPMSSsVdPk?long=yes


ומדריך ל-CSS ב-12 דקות:

https://youtu.be/0afZj1G0BIE?long=yes