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

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

מבנה הדף ועיצוב

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

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

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

עיצוב רספונסיבי - responsive design
זה עיצוב שמתאים את עצמו אוטומטית לגודל המסך, כך שהאתר ייראה טוב גם בנייד וגם במסך רחב. זה נעשה בעזרת יחידות גמישות, Flexbox או Grid, ותוספת של Media Query כשצריך שינוי משמעותי בפריסה.

Media Query ונקודת שבירה - breakpoint
Media Query היא הוראת CSS שמפעילה כללי עיצוב שונים בהתאם לרוחב המסך, למשל @media (max-width: 600px). נקודת השבירה היא הרוחב שבו בונים את הגבול הזה, כלומר הרגע שבו הפריסה "נשברת" ועוברת מ-3 עמודות לעמודה אחת, למשל.

מודל התיבה - box model
כל אלמנט ב-HTML הוא בעצם תיבה שמורכבת מתוכן, ריפוד פנימי (padding), גבול (border) ורווח חיצוני (margin). זו הסיבה שאלמנטים לא נראים בגודל שציפיתם, אלא אם משתמשים ב-box-sizing: border-box.

סדר שכבות - z-index
כש-2 אלמנטים חופפים על המסך, z-index קובע מי מהם מוצג מעל השני. אלמנט עם z-index: 10 יופיע מעל אלמנט עם z-index: 1, וזה שימושי למשל כדי לוודא שחלון קופץ (modal) יופיע מעל כל שאר התוכן.

HTML סמנטי - semantic HTML
זה שימוש בתגיות HTML שמתארות את המשמעות של התוכן ולא רק את המראה שלו, כמו header, nav, main ו-article במקום div בכל מקום. זה עוזר לקוראי מסך, למנועי חיפוש, ואפילו למפתחים אחרים להבין את מבנה הדף בלי לקרוא כל שורת CSS.

קומפוננטות ומצב באפליקציה

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

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

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

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

מאזין אירועים - event listener
מאזין אירועים הוא קוד שמחכה שמשהו יקרה, כמו קליק על כפתור, ומריץ פונקציה כשזה קורה. button.addEventListener("click", handleClick) אומר לדפדפן להריץ את handleClick בכל לחיצה על הכפתור, וזה הבסיס לכל אינטראקטיביות בדף.

אחסון מקומי - Local Storage
Local Storage הוא מקום באחסון של הדפדפן ששומר נתונים גם אחרי שסוגרים את הטאב או מכבים את המחשב. משתמשים בו לדברים כמו העדפת מצב כהה, כי localStorage.setItem("theme", "dark") ישמור את הבחירה עד שמישהו ימחק אותה במפורש.

כלי בנייה ותהליך פיתוח

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

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

אפליקציית עמוד יחיד - SPA
SPA, ראשי תיבות של Single Page Application, היא אפליקציה שטוענת דף HTML אחד בלבד, ולאחר מכן מחליפה תוכן בעזרת ג'אווהסקריפט במקום לטעון דף חדש מהשרת בכל ניווט. זה נותן תחושה מהירה ורציפה, אבל דורש תשומת לב מיוחדת ל-SEO ולזמן הטעינה הראשוני.

עיבוד בצד השרת - SSR
SSR, ראשי תיבות של Server-Side Rendering, הוא כשהשרת בונה את ה-HTML המלא של הדף עוד לפני ששלח אותו לדפדפן, במקום להשאיר את כל הבנייה לג'אווהסקריפט בצד הלקוח. זה משפר את מהירות ההצגה הראשונית ואת ה-SEO, כי מנועי חיפוש רואים תוכן מלא מיד.

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

Fetch/AJAX
אלו שיטות לבקש נתונים מהשרת מתוך ג'אווהסקריפט בלי לרענן את כל הדף. הפונקציה המובנית fetch("/api/users") שולחת בקשה ומחזירה תשובה שאפשר לעבד ולהציג, וזה הבסיס לכל אתר שמציג נתונים עדכניים בלי טעינה מחדש.

ביצועים ונגישות

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

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

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

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

הצטרפו לקהילה בדיסקורד