שבוע שעבר החלטתי ללמוד קצת ג'אווה סקריפט.

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

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

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

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

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

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

פרוייקט

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

מבחינת טכנולוגיה, המטרה היא מן הסתם לתרגל ג'אווה סקריפט, אז הבקאנד יכתב בג'אווה סקריפט וירוץ על Node.js בעזרת ספריית Express.js, והפרונטאנד יכתב גם הוא בג'אווה סקריפט וישתמש בספריית React.js הפופולרית. מן הסתם, אצטרך גם דאטהבייס, והבחירה הפשוטה עבורי במקרים כאלה היא SQLite.

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

סיכום

אז כך ישבתי ובמשך כמה ימים כתבתי עבור האתר מערכת תגובות יחסית בסיסית שאותה תוכלו לראות בסוף הדף הזה.

בסה"כ זו הייתה חוויה טובה שלמדתי ממנה הרבה וגם יצא ממנה משהו שימושי בסוף (כלומר, זה יהיה שימושי ברגע שתכתבו תגובה!).

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

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