» «

פרונט אנד

פרונט אנד
מהם פרונט אנד, בק אנד ופול סטאק בתכנות?



פרונט אנד (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/D7_PegGnhto


בק אנד:

https://youtu.be/cbSrsYiRamo


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

https://youtu.be/NMKdd1Hz06U
HTML
מה זה HTML ולמה משמש CSS?



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
בניית אתרים
מהו המקצוע של בניית אתרים?



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

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

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

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

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

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


#תפקידים בתעשיית הטכנולוגיה

מפתח אתרים: מי שבונה ומתחזק אתרים, באמצעות שפות קידוד כמו HTML, CSS ו-JavaScript.

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

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

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

מעצב UI/UX: מי שהופך אתרים קלים לשימוש ומושכים חזותית. מתמקד בחוויית משתמש ובעיצוב Layout.

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

מפתח מסחר אלקטרוני: מתמחה בבניית חנויות מקוונות.


הנה פרסומת של בוני אתרים (עברית):

https://youtu.be/TwP5hM1z3yo


שפת הסימון 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


והנה קורס מלא לבניית אתרים באמצעות AI ואלמנטור, כולל בניית בריף בשיחה, מפת אתר, ווייר פריים, עיצוב, איחסון, דומיין ושאר השלבים (עברית) 12:45:

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


אֵאוּרִיקַה - האנציקלופדיה של הסקרנות!

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

אלפי נושאים, תמונות וסרטונים, מפתיעים, מסקרנים וממוקדים.

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

בואו לגלות, לחקור, ולקבל השראה!

אֵאוּרִיקַה - האנציקלופדיה של הסקרנות!

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