איזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?
-
למה צריך פריימוורק? ("מה זה בכלל בעצם?")
פריימוורקים בעיקר מיועדים עבור ממשקים אינטראקטיביים לא טריוויאליים.
איך שאני רואה את זה, הפריימוורקים מביאים לשולחן בעיקר שני דברים. (אולי פיספסתי כמה, בינתיים זה מה שעולה לי בראש)
צורך מספר 1, data binding
כדי לממש אינטראקטיביות בצד לקוח צריך: להאזין לאירועים של קלט מהמשתמש ← לתרגם את הקלט לפקודה ← לשנות את ה-state של האפלקציה לפי הפקודה הספציפית ← לעדכן את התצוגה בצורה שהיא תשקף את ה-state הנוכחי.
(כדוגמה קונקרטית ניקח אפליקציית ניהול משימות (TODO) (- זה ה-hello world של ספרייות לבניית ממשקים אינטראקטיביים).
כמובן אני מדבר על דוגמה שבו הרינדור הוא בצד הלקוח, כלומר, פקודה משנה את התצוגה מיד בדפדפן בלי ללכת לשרת להביא HTML חדש.
מה נצרך לממש את זה?- נבנה ממשק פשוט שמציג רשימה של משימות, ליד כל משימה יש לחצן שמסמן אותו כ-"done". למטה יש תיבת טקסט שמקבל טקסט למשימות חדשות עם לחצן לידו "הוספה".
- נשמור את רשימת המשימות במשתנה כלשהו
- נאזין לכמה אירועים:
- לחיצה על לחצן ה-done ליד אחד מהאירועים,
- לחיצה על "הוספה" להוספת משימה חדשה
- בכל אירוע צריך לעשות את התהליך הזה: לתרגם את האירוע לפקודה קונקרטית (לדוגמה: מחק משימה עם מזהה X, הוסף משימה עם הטקסט "XYZ") ← לבצע את הפקודה, (למחוק את המשימה ממערך המשימות, או להוסיף משימה למערך) ← לעדכן את התצוגה עם הרשימה העדכנית
החלק של עדכון התצוגה לשקף את ה-state של האפליקציה, זה נקרה data binding כלומר אתה מאגד (binding) חלקים של הממשק, (תוכן טקסטואלי או עיצוב) לדאטה כלשהו. בחלק הזה הפריימוורקים עוזרים המון. ב-jquery או ב-JS פשוט אתה צריך להחזיק ראש על כל שינוי מה צריך לעדכן. וככל שהאפליקציה גודלת, כך המשימה נהיה יותר ויותר מסובכת עד בלתי אפשרית.
מה שהפריימוורק מביא לשולחן זה האפשרות להצהיר בצורה דקלרטיבית על האיגודים שאתה רוצה, (תוכןspanזה מאוגד למשתנה JS זה, אוulזה תקבל את רשימת המשימות ממערך זה), ולא צריך לטפל כלל בעדכון התצוגה. הפריימוורק מטפל בזה בצורה מושלמת. אתה פשוט מוסיף אבר למערך המשימות, והופ! התצוגה מתעדכנת עם עוד שורה.צורך מספר 2: חלוקה לרכיבים ובידוד בין הרכיבים
בכל אפליקציה גדולה, ככל שהיא גדלה כך יש יותר סיבוך. זה נכון בכל סוגי התוכנות. כבר מימים הראשונים של התכנות, הבינו שהפתרון לבעיה זו היא חלוקה לרכיבים ובידוד בין הרכיבים.
דבר זה נכון גם בבניית ממשקים. ובזה הפריימוורקים מאוד עוזרים, הם נותנים לך מסגרת שבו תוכל לחלק את הממשק לרכיבים (קומפוננטים) כאשר כל רכיב מכיל את ה- state שלו, והלוגיקה שלו, והוא מבודד מחביריו, ומתממשק עם חבריו רק באמצעות ממשקים מוגבלים ומוגדרים.
זה שינוי חשיבה חשוב מאוד כדי להצליח לשלוט בסיבוכיות של ממשק גדול.
זה עוזר גם לשימוש חוזר לחלקים של הקוד, וגם לשליטה יותר קלה על הקוד.
-
לגבי השוואה בין הפריימוורקים:
אני מסכים לדברי @מוטי-אורן ש-VUE זה הכי קל.
התרשמותי מהאחרים:- בריאקט יש יותר מכשולים, ויותר קשה להבין את המודל ולהשתמש בו בצורה נכונה.
- אנגולר הוא הרבה יותר ממה שתיארתי למעלה. הוא נותן לך הכל, ויש לו דיעה איך לממש את הכל, מקליינט HTTP ועד לטסטים,
- ב-angularjs לא לגעת למרות מה שדוד יטען.
@צדיק-תמים אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
בכלל אמר לי (בפרטי) ללכת על NPM
הדברים לא מובנים (אולי הוצאו חוץ מהקשרם). NPM לא מקביל בכלל לריאקט ויו ואנגולר. זה מטפל בנושא אחר לגמרי.
לגבי תיעוד בעברית, זה באמת בעיה, אני מצטער, אבל אין לי כל כך איך לעזור...
-
@yossiz פרימוורקים לא נצרכים לפעולה X או Y.
הם נצרכים כדי לחסוך כל הקדמה מובנת מאליה לפעולות שגרתיות.
בהקשר שלנו, ההתמקדות בdata binding או בקומפוננטים מצמצמת מאוד את הרעיון:
בJS טהור ישנם המון הקדמות כבדות לכל פעולה שקשורה לDOM - אין קשר קל וישיר בין התצוגה לקוד. -
@dovid אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
פרימוורקים לא נצרכים לפעולה X או Y
אתה מדבר על פריימוורקים בכללות
אני מדבר ספציפית על פריימורקים בצד לקוח ורק בחלק המשותף בין ריאקט אנגולר וויו וסוולטה וכל החברים. איך שאני רואה את זה הם לגמרי באים לפתור ספציפית את שתי הבעיות שציינתי.
ריאקט הוא בכלל לא פריימוורק במובן שאתה מדבר, זה ספרייה והיא מתמקדת בדיוק בבעיות שציינתי.
אנגולר באמת באה להיות פתרון כוללני לכל בעיות האנושות.
-
@yossiz אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
תוכן span זה מאוגד למשתנה JS זה, או ul זה תקבל את רשימת המשימות ממערך זה
בשביל מה צריך לזה פריימוורק?! אפשר לשנות את זה בקלות על ידי גישה לקלאס/id
כנ"ל לגבי עדכון התצוגה, מה העניין 'ללכת מסביב' ולעשות שהתצוגה תיקח תוכן ממערך x, ואז לשנות את המערך ולטעון מחדש את כל התצוגה דרך הפריימוורק?!
אפשר פשוט לשנות את התוכן דרך הjs, וזה ישתנה מעצמו במיידי...
במיוחד בדוגמה שהבאת של הניהול משימות, לא הבנתי בכלל מה התועלת ואיך זה עוזר...@yossiz אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
הדברים לא מובנים (אולי הוצאו חוץ מהקשרם)
ההקשר הוא - מה הלאה, לאן להתקדם אחרי הjs הבסיסי. נראה לי שכתבתי את זה במפורט בתחילת הפוסט הראשון.
ולכן אני תוהה לאור מה שכתבת מה מרוויחים מהידע הזה בפריימוורק? מעבר לjs רגיל עם jQuery במקרה הצורך. הדוגמה שהבאת זה איך לעשות דבר שאני יודע לעשות בjs, דרך הפריימוורק...
@yossiz אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
הוא נותן לך הכל, ויש לו דיעה איך לממש את הכל, מקליינט HTTP ועד לטסטים
וזה טוב או רע?...
לכאורה רע (לדעתי), מה העניין לעשות כל דבר ודבר בקוד בדיוק לפי הצורה שמישהו מסוים החליט? -
@צדיק-תמים אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
בשביל מה צריך לזה פריימוורק?! אפשר לשנות את זה בקלות על ידי גישה לקלאס/id
כנ"ל לגבי עדכון התצוגה, מה העניין 'ללכת מסביב' ולעשות שהתצוגה תיקח תוכן ממערך x, ואז לשנות את המערך ולטעון מחדש את כל התצוגה דרך הפריימוורק?!
אפשר פשוט לשנות את התוכן דרך הjs, וזה ישתנה מעצמו במיידי...
במיוחד בדוגמה שהבאת של הניהול משימות, לא הבנתי בכלל מה התועלת ואיך זה עוזר...נראה לי שאני מבין טוב מאוד איפה אתה עומד ובמה אתה מתקשה. גם אני הייתי שם (למרות שניסחתי את השאלה בצורה קצת שונה) שלא הבנתי מה הפריימוורק נותן לי. (אצלי היתה בעיה כפולה ומכופלת, כי angularjs מנסה לפתור את כל בעיות האנושות, ואני לא הכרתי אף אחת מהבעיות...)
ניסיתי לענות לך את התשובה שאולי היה עוזר לי אז. אבל במחשבה שנייה אני מבורך בקללת הידע... קשה להסביר אחרי שאתה כבר יודע את התשובה, בצורה שמי שלא יודע את התשובה יבין אותה.
עיין שם שדוד ענה לי תשובה מאוד מושקעת ובכל זאת לא הבנתי. (@dovid: קראתי שוב את התשובה, ולשמחתי אני כבר מתחיל להבין אותה
). לקח לי הרבה זמן של תכנות בפועל ולהיתקל בבעיות שונות עד שהתחלתי להבין מה הפריימוורק נותן לי. ולמען האמת אני עדיין בתהליך הלמידה.התשובה הקצרה היא: אם תבנה משהו יותר מסובך מאפליקציית TODO פשוט, כבר תראה איך זה מסתבך בלי פריימוורק.
התשובה הארוכה כבר כתבתי אבל תבין אותה יותר אחרי שתבין את התשובה הקצרה...
ההקשר הוא - מה הלאה, לאן להתקדם אחרי הjs הבסיסי
ברור שחשוב שתבין מה זה NPM. אבל זה לא קשור בצורה ישירה לפריימוורקים. גם כדאי ללמוד איזה פריימוורק. ואני ממליץ על VUE. הפריימוורקים כולם משתמשים בשירותים של NPM שהיא פשוט מאגר של ספרייות ל-JS ודרך לנהל תלויות בין ספריות.
וזה טוב או רע?...
תלוי את מי אתה שואל...
עיין למשל נושא זה: https://tchumim.com/topic/12300 -
@yossiz עדיין לא הבנתי -
איפה אני נפגש בפריימוורק?
נתת דוגמה למשהו שלא מצריך בכלל פריימוורק, אבל הסברת איך אפשר לעשות את זה איתו
אולי תוכל להביא דוגמה של משהו שצריך את הפריימוורק?
ואיך בכלל אני עובד איתו? זה קוד רגיל שאני יכול גם לכתוב ולהריץ בקונסול (ורק צריך לייבא קודם ספריה - כמו jQuery)?
או שצריך לקמפל אותו או משהו?
איך בכלל עובדים איתו - רגיל (במקרה שלי ב-VSC)? -
@צדיק-תמים אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
עדיין לא הבנתי -
איפה אני נפגש בפריימוורק?@yossiz אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
התשובה הקצרה היא: אם תבנה משהו יותר מסובך מאפליקציית TODO פשוט, כבר תראה איך זה מסתבך בלי פריימוורק.
האמת הוא שגם ב-TODO פשוט כבר תראה יתרונות של פריימוורק. זה מפשט הרבה את הקוד.
אני ממליץ לך שתנסה לבנות אפליקציית TODO כמו זה: https://todomvc.com/examples/vue עם jquery. ואז תבנה את זה עם VUE ותראה את ההבדלים.
@צדיק-תמים אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
ואיך בכלל אני עובד איתו? זה קוד רגיל שאני יכול גם לכתוב ולהריץ בקונסול (ורק צריך לייבא קודם ספריה - כמו jQuery)?
או שצריך לקמפל אותו או משהו?אתה שואל פה המון שאלות שלא קשורות לנושא המקורי.
איך מתחילים עם VUE? אני לא רוצה להסביר הכל על רגל אחת, בשביל זה יש מדריכים, ויש הרבה.לא כותבים את הקוד בקונסול. אפשר לייבא את הספרייה ולעבוד בלי קימפול, אבל אם כבר, יותר כדאי לעבוד עם קימפול.
@צדיק-תמים אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
איך בכלל עובדים איתו - רגיל (במקרה שלי ב-VSC)?
כן, זה נתמך טוב ב-VSC.
בקיצור אם החלטת ללכת על זה, תחפש מדריך טוב, ותעבוד לפי המדריך. אין לי המלצות ספציפיות על מדריכים. אבל נראה לי שזה נשאל בעבר פה בפורום, ואם אתה לא מוצא תוכל לפתוח נושא חדש על זה.
-
מטריד את @צדיק-תמים מהיכן להתקדם. אמנם ככל הנראה הוא עדין במקום שהוא לא חוה מספיק את הבעיות שמעלות את הצורך בפרייוורק.
דיברתי איתו על הכרת כלי הNPM, כי בעולם האמיתי כל JS שתכתוב יעבוד בפרוייקט מסודר, עם פיצול קבצים (וממילא קימפול של WEBPACK) וניהול תלויות (כי אין סיכוי שלא תשתמש בחבילות אחרי שתעבוד בפרוייקט מסודר ותגלה כמה קל להעזר בהם).
אז ראשית כל, מעבר מכתיבת סקריפטים שמוזרקים לאתרים, לבניית פרוייקטים משלך, בלי קשר לסדר גודל, ולהעזר בכלים כמו WEBPACK שבעצמם הם חבילות של NPM וכלי שורת פקודה. זו התחלה של "לטעום" איך הדברים עובדים בעולם האמיתי.לגבי פריימוורק - זו דילמה, כי הדרך הכי טובה להבין את הצורך בו זה להשתפשף היטב בלעדיו ולחוות את כל כאבי הראש הכרוכים בכך. רק כך מבינים באמת את התועלת ויודעים לנצל את השימוש. מאידך, רוב לומדי התכנות מדלגים על זה, כבר בקורס פולסטאק כשבקושי כתבתי שורה וחצי של העולם האמיתי מלמדים אותך ריאקט או אנגולר.
לגבי איזה פריימוורק, זו כבר שאלה נפרדת, שהשרשור הזה התמקד בה לחינם, והיא שלב מתקדם יותר. אבל אם זה עלה אציין שאני מאוד בעד VUE, ובודאי שהוא עדיף מאוד למתחילים בגלל עקומת בלמידה המפורסמת שלו, בדגש על VUE2.
-
@davidnead אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
הדרך הכי טובה להבין את הצורך בו זה להשתפשף היטב בלעדיו ולחוות את כל כאבי הראש הכרוכים בכך. רק כך מבינים באמת את התועלת ויודעים לנצל את השימוש.
לגבי שכך מבינים באמת את התועלת - אני מבין (אם כי לא מבין מה העניין בזה, מעבר לתחושה הטובה
), אבל למה זה עוזר לדעת לנצל את השימוש בפריימוורק, שעובד בצורה שונה למדיי? -
@צדיק-תמים אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
@davidnead אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
הדרך הכי טובה להבין את הצורך בו זה להשתפשף היטב בלעדיו ולחוות את כל כאבי הראש הכרוכים בכך. רק כך מבינים באמת את התועלת ויודעים לנצל את השימוש.
לגבי שכך מבינים באמת את התועלת - אני מבין (אם כי לא מבין מה העניין בזה, מעבר לתחושה הטובה
), אבל למה זה עוזר לדעת לנצל את השימוש בפריימוורק, שעובד בצורה שונה למדיי?יש דברים שעליהם הפתגם "אין חכם כבעל ניסיון" הוא התשובה המעשית והפשוטה.
-
@צדיק-תמים הרבה אנשים לומדים להשתמש בפריימוורקים בלי להבין למה זה נצרך והם לא פחות מוצלחים מאלה שכן מבינים. ברור שזה טוב להבין למה זה נצרך, אבל ללמוד להשתמש בו בלי להבין את ה"למה" גם בסדר גמור. וגם הסדר לא מעכב. תוכל ללמוד את VUE עכשיו ובעוד שנתיים תבין מה זה נותן לך.
-
@yossiz אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
צורך מספר 2: חלוקה לרכיבים ובידוד בין הרכיבים
מסורת בידינו כל המקפיד על צימוד רפוי ועל לכידות גבוהה זוכה לחיי העולם הזה.
@צדיק-תמים אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
וזה טוב או רע?...
לכאורה רע (לדעתי), מה העניין לעשות כל דבר ודבר בקוד בדיוק לפי הצורה שמישהו מסוים החליט?דעתי כאן ידועה אבל בשביל הפרוטוקול אני חייב להצביע, ברור שזה טוב ואפילו טוב מאוד. המישהו שהחליט לא "החליט" בשבילך שום דבר, הוא בסך הכל נותן לך שירות נהדר וחוסך ממך את ההתעסקות בפיציפקעס, אתה מחליט בסופו של דבר את החלטות הגדולות, תיכנון, ארכיטקטורה, UX ועוד, בזה צריך להיות המיקוד שלך לדעתי.
משל למה הדבר דומה? למי שהחליט לצאת לטיול, והוא מתלבט בין שירותי הסעות/השכרת רכב. אתה לא חושב לבנות בעצמך רכב נכון? העיסוק העיקרי שלך הוא טיול בארץ הקודש, ובחירת הרכב תהיה לפי שיקולים של יעילות. כך לגבי הפריימוורקים, ולכן אני חסיד גדול של אנגולר, כשאני עולה על מכונית אני רוצה כמה שפחות להתעסק בקושקובציות ומימושים, ולדעת שלכל פונקציה במכונית יש כפתור מוכן, יש מדריך מסודר ומדוייק איך לבצע, ולא דורשים ממך לעצור בצד הדרך ולפתוח ארגז כלי עבודה כדי לממש יכולת "מופשטת" שקיימת במכונית. -
אם כבר משל כזה, הדבר משול לאחד שרוצה לנסוע לחו"ל. הוא יכול לנסוע במסגרת טיול מאורגן, ואז יסדרו (ויקבעו) עבורו את מסלול הנסיעה, משך השהות באתרים, מקום האחסון, הכשרות והתפריט, ועוד ועוד.
והוא יכול לנסוע בעצמו, לארגן לבדו את כל אלו, לטרוח יותר ולהנות מחופש הפעולה.
זה 2 אופציות, שתיהם טובות. רוב האנשים מחליטים לפי אופי - העצמאים יותר יעדיפו טיול תרמילאי, והמסגרתיים יותר יעדיפו שקט נפשי ושאחרים יבנו להם הכל - וגם יחליטו בשבילם.המעשיים יותר שמתגברים על נטיית אופי ישקלו כל דבר עניינית לפי המטרות הספציפיות של הנסיעה - אם המטרה היא תפילה על קברי צדיקים - הרי שחבל להשקיע בכל המסביב, עדיף שאחרים יעשו לך את העבודה, העיקר שהמטרה מתמלאת בסוף.
אבל אם המטרה היא קברים ספציפיים ואתרים משפחתיים וכדו' - הרי שאתה יכול להצטרף לקבוצה המאורגנת, ולהתחנן למדריך באוטובוס ש"רק כמה דקות לקפוץ לעיירה הסמוכה על הדרך..." ו"תעלו לאוטובוס ואני כבר מגיע, רק מסיים עוד כמה פרקים פה בקבר של הצדיק הסבא-של-סבא שלי". אבל אולי יותר טוב כבר לנסוע לבד ולקבל את מלוא התמורה שאתה מצפה לה כמו בן אדם.מקוה שהנמשל ברור...
-
שמעתי שבמכללות והסמינרים מלמדים אנגולר, זה יכול להצביע על ההעדפות של התעשיה
-
@ארכיטקט אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
@davidnead
לדעתי המשל שלך יותר מתאים לדיינמיקס, סיילספורס וכיוצא באלו. שהם כבר לא "פריימוורקים" אלא יותר פלטפורמות ל CRM וכדומה.
אנגולר ריאקט וויו יותר דומה לשלי. הם ממש לא אומרים לך איפה המלון ולאיזה קברים ללכת.התגובה שלי התייחסה לאנגולר, שאליו חשבתי שהתייחסת (על פי דעתך הידועה במקום אחר). לדעתי ויו מעולה ולגמרי משאיר לך חופש פעולה, עד כמה שפריימוורק יכול להשאיר.
-
@יוסף-בן-שמעון אמר באיזה ספרייה/פריימוורק (מה זה בכלל, בעצם?...) מומלץ ללמוד כיום?:
שמעתי שבמכללות והסמינרים מלמדים אנגולר, זה יכול להצביע על ההעדפות של התעשיה
וזה גם יכול להצביע על קבעון. או על צרות אופקים - ללמד מה שהתעשיה צריכה כרגע (לתחזק פרוייקטים שנבנו לפני חמש שנים) ולא מה שהיא תצטרך עוד מעט (יותר ויותר פרוייקטים שנבנים, ויצטרכו תחזוקה גם עוד חמש שנים).
זה לגבי VUE, שלא לדבר על ריאקט שהתעשיה מוצפת בו, ולמיטב ידיעתי לומדים אותו ברוב ככל קורסי הפולסטאק. -
הויכוחים הדתיים איזה פרימוורק טוב יותר הם לא באים לעזור ולא לברר אלא רק להגן על הבחירה שכל אחד עשה.
אין טעות להצטרף למליונים שבחרו בכל אחד המפרימוורקים האלה, ומסקנות של שני שקל על חסרונות האחד לבטח נלקחה בחשבון ע"י המתכננים שסבורים שעדיין יש ייתרון במוצר שלהם.
בא נרשה לכל אחד להגיד את דעתו אבל רק בייחס למוצר שהוא עבד איתו כמה חודשים. מהיכירותי פה את הניקים אף אחד לא המיר דתו ומכיר טוב פרימוורק נוסף מאשר החביב עליו לכתחילא או למפרע.נ.ב. אני לא מכיר טוב שום פרימוורק מהנידונים פה.
