פיתוח ווב – מה, איך, ולמה?

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

ממה פיתוח ווב מורכב?

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

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

HTML & CSS

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

JS

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

ספריות

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

  • Angular – ספריה (יותר נכון Framework) לפיתוח אפליקציות ווב מורכבות, מדריך
  • React – ספרייה דומה לאנגולר אך יותר Lightweight, מדריך
  • Vue – ספרייה חדשה שדומה לשתיים שציינתי קודם, שיותר פשוטה למתחילים, מדריך
  • jQuery – ספרייה די ישנה שמאפשרת לכתוב קוד JS בצורה יותר פשוטה (לא יכולה לעבוד ביחד עם הספריות שציינתי קודם לכן), מדריך
  • Next – ספרייה חדשה מאוד שמבוססת על ריאקט ונותנת להשתמש בחלק מהאפשרויות שלה בצורה ממש פשוטה, מקצר זמני פיתוח מאוד אך לא מתאים לאפליקציות מורכבות, מדריך
  • Bootstrap – ספריית CSS שמאפשרת לכתוב אתר בלי להתעסק יותר מדי בעיצוב ו-CSS, מדריך
  • Materialize – ספריית CSS דומה לקודמת אך עם עיצוב מודרני יותר, מדריך

פיתוח באק אנד

שפת תכנות

בבסיס של פיתוח באק אנד חייבת להיות שפת תכנות שבה השרת כולו ייכתב. שפות שמתאימות למשימה הזו יכולות להיות Python, NodeJS, Ruby, Go או כל אפשרות אחרת שמאפשרת לכם לכתוב קוד צד שרת בצורה פשוטה ומהירה. איך לומדים? מדריכים שאפשר למצוא בגוגל בציון השפה שאתם רוצים ללמוד + tutorial, רוב התוצאות הראשונות יהיו די מוצלחות. זה נהיה רפטטיבי כבר אז אני לא אחזור על זה, אבל קחו את זה כבר כמובן מאליו.

ספריית פיתוח

לממש שרת HTTP ולהרים מערכת מלאה מאפס זה לא כיף כשאתם כולה רוצים לכתוב אתר, וזוהי הסיבה שאנחנו משתמשים בספריות, על מנת להקל על העבודה שלנו, לקצר אותה, ולדאוג שהקוד שאנחנו כותבים הוא קוד בטוח בהקשר של אבטחת מידע. ספריות נהדרות שאני ממליץ עליהן בחום: Django, Flask, ExpressJS. לכל הספריות האלו אפשר לצרף עוד ספריות שמרחיבות את הספריות המקוריות ונותנות עוד אפשרויות, כמו העברת תשלומים בPayPal.

מסד נתונים (לרוב)

ברוב האתרים שתכתבו, תשתמשו במסד נתונים (Database) על מנת לשמור את המידע שלכם, כמו את פרטי המשתמשים. על מנת לעשות זאת צריך להשתמש במסד נתונים מוכן מראש וללמוד איך לעבוד מולו בעזרת ספריות לשפת התכנות שלכם, או בעזרת המערכת שמגיעה מובנית בתוך ספריית פיתוח צד השרת שאתם משתמשים בה. יש שני סוגים של מסדי נתונים: SQL ו-NoSQL, וכל אחד מהם מתאים למשימות אחרות (יפורט בפוסט עתידי). מסדי נתונים מומלצים: MongoDB, SQLite, PostgreSQL, MySQL.

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

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

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

3 thoughts on “פיתוח ווב – מה, איך, ולמה?”

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

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *