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

מה זה פיתוח פרונטאנד - frontend development

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

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

מה זה פרונטאנד - frontend

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

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

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

מודל לקוח-שרת - client-server model

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

כלומר:
- הדפדפן (chrome, firefox, safari) = הלקוח = מריץ את הפרונטאנד
- השרת (מחשב מרוחק) = מריץ את הבאקאנד

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

מפתח פרונטאנד אחראי על כמה דברים עיקריים:

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

שלושת עמודי התווך - HTML, CSS, JavaScript

כל אתר אינטרנט בנוי משלוש טכנולוגיות בסיסיות. אפשר לחשוב על זה כמו בניית בית:

שפת HTML - השלד

HTML (HyperText Markup Language) היא השפה שמגדירה את המבנה של דף האינטרנט.
היא קובעת מה יש בדף: כותרת, פסקה, תמונה, כפתור, טבלה, טופס.

בדיוק כמו שקירות, רצפה ותקרה הם השלד של בית - HTML הוא השלד של אתר.

<h1>Welcome to my website</h1>
<p>This is a paragraph of text.</p>
<button>Click me</button>

הקוד למעלה מגדיר כותרת, פסקה וכפתור. בלי עיצוב, בלי התנהגות - רק מבנה.

שפת CSS - העיצוב

CSS (Cascading Style Sheets) היא השפה שמגדירה איך הדברים נראים.
צבעים, גדלים, פונטים, מיקום, רווחים, אנימציות.

בדיוק כמו צבע, רהיטים ותאורה בבית - CSS הוא העיצוב של אתר.

h1 {
    color: blue;
    font-size: 32px;
}

button {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

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

שפת JavaScript - ההתנהגות

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

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

// when button is clicked, show an alert
document.querySelector("button").addEventListener("click", function() {
    alert("You clicked the button!");
});

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

סיכום האנלוגיה

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

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

דוגמאות לאתרים מפורסמים

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

• גוגל (Google) - הממשק של גוגל בנוי עם פריימוורק פנימי שלהם שנקרא Angular. גוגל גם יצרו את Angular וחלקו אותו עם העולם.
• פייסבוק ואינסטגרם (Meta) - בנויים עם React, פריימוורק שמטא (פייסבוק) פיתחו. React הוא הפריימוורק הכי פופולרי בעולם כיום והוא מה שנלמד בקורס.
• נטפליקס (Netflix) - הפרונטאנד של נטפליקס בנוי עם React ו-Node.js.
• טוויטר/X - בנוי עם React.
• אירבנב (Airbnb) - בנוי עם React.

שימו לב ש-React מופיע שוב ושוב. זה לא מקרי - React הוא הכלי הכי מבוקש בשוק העבודה ולכן נלמד אותו לעומק בקורס.

שוק העבודה

פיתוח פרונטאנד הוא אחד התחומים הכי מבוקשים בהייטק:

• כמעט כל חברת תוכנה צריכה מפתחי פרונטאנד - מסטארטאפים ועד חברות ענק.
• לא חסרים משרות. בכל רגע נתון יש אלפי משרות פתוחות למפתחי פרונטאנד ו-fullstack.
• פולסטאק - fullstack זה מפתח שיודע גם פרונטאנד וגם באקאנד. זה מה שאתם תהיו בסוף הקורסים - כי אתם כבר יודעים פייתון ובאקאנד, ועכשיו תלמדו גם פרונטאנד.
• הטכנולוגיות הכי מבוקשות: React, TypeScript, Next.js - בדיוק מה שנלמד בקורס.

מה נלמד בקורס

הנה סקירה של מה שמחכה לכם:

• HTML - המבנה של דפי אינטרנט. נלמד את כל התגיות, טפסים, טבלאות, ו-HTML סמנטי.
• CSS - עיצוב אתרים. צבעים, פונטים, Flexbox, Grid, אנימציות, רספונסיביות.
• ג'אווהסקריפט - JavaScript - שפת התכנות של הדפדפן. משתנים, פונקציות, DOM, אירועים, async/await, fetch.
• ג'אווהסקריפט מתקדם - Advanced JavaScript - ES6+, מודולים, closures, prototypes, וכלי פיתוח.
• טייפסקריפט - TypeScript - שפה שמוסיפה טיפוסים (types) ל-JavaScript ומונעת באגים.
• ריאקט - React - הפריימוורק הכי פופולרי לבניית ממשקי משתמש. קומפוננטות, state, props, hooks.
• ריאקט מתקדם וניהול סטייט - Advanced React - ניהול state מתקדם, context, ופטרנים מתקדמים.
• עיצוב בריאקט - Styling in React - Tailwind CSS, styled-components, ספריות UI.
• Next.js - פריימוורק שמבוסס על React ומוסיף SSR, routing, ועוד המון פיצ'רים.
• ביצועים, בדיקות ו-SEO - אופטימיזציה, בדיקות אוטומטיות, ו-SEO.

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

בואו נתחיל.