התקנה ושימוש עם bootstrap-vue

[dovid]

בשולי הדברים, למרות שנעלבתי ש@חוקר לא שעה לעצתי והלך אחריך @yossiz התיישבתי בדעתי והחלטתי שהצדק איתך ונכון להיום vue טובה יותר.
אני לא כותב אפליקציות צד לקוח ענקיות אלא סה"כ דף עם פונקציונליות של צד לקוח ולכן כל הwebpack הוא מיותר להחריד עבורי, לעיתים אני אפילו לא מפצל את הסקריפט מהhtml. ייתכן ש@חוקר נמצא באותו מקום.

[yossiz]

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

@yossiz האם @חוקר צודק שאין על זה כמעט תיעוד?

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

האם נראה לך שמה שכתבת די בו בשביל לקפוץ מאפס בצד לקוח לכל זה?

¯/_(ツ)_\¯
על זה @חוקר אמור לענות...

[yossiz]

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

בשולי הדברים, למרות שנעלבתי ש@חוקר לא שעה לעצתי והלך אחריך @yossiz התיישבתי בדעתי והחלטתי שהצדק איתך ונכון להיום vue טובה יותר.
אני לא כותב אפליקציות צד לקוח ענקיות אלא סה"כ דף עם פונקציונליות של צד לקוח ולכן כל הwebpack הוא מיותר להחריד עבורי, לעיתים אני אפילו לא מפצל את הסקריפט מהhtml. ייתכן ש@חוקר נמצא באותו מקום.

אתה צודק לגמרי ש-webpack הוא קצת יותר מדי עבור אתר פשוט. ואפשר בהחלט להשתמש ב-VUE כספרייה פשוטה כמו jquery (וכן עושה @chagold). הבעיה היא שזה כאב ראש להוסיף ספרייות חיצונים לאתר שבנוי ב-VUE בלי שימוש ב-webpack. עיין בנושאים קודמים של @chagold...
אבל @חוקר דיבר גם על SPA אם כן אני ממליץ בחום להשתמש ב-webpack ולא לנסות לעבוד בדרך אחרת.

[dovid]

@yossiz אמר בהתקנה ושימוש עם bootstrap-vue:

אבל @חוקר דיבר גם על SPA אם כן אני ממליץ בחום להשתמש ב-webpack ולא לנסות לעבוד בדרך אחרת.

יש סקאלה מאוד רחבה בSPA. כל אתר שמסתיר פקד ומראה אותו נחשב אצלך SPA? קריאת AJAX בודדת? אני מצטט את התיעוד ל vue:

NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components.

אתה אומר לבן אדם שעד אתמול לא כתב JS כמעט בצד לקוח, ללכת על מתודה שמומלצת עבור Large Application. @חוקר, שנס מתנך, זה שווה.

[chagold]

@yossiz אמר בהתקנה ושימוש עם bootstrap-vue:

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

בשולי הדברים, למרות שנעלבתי ש@חוקר לא שעה לעצתי והלך אחריך @yossiz התיישבתי בדעתי והחלטתי שהצדק איתך ונכון להיום vue טובה יותר.
אני לא כותב אפליקציות צד לקוח ענקיות אלא סה"כ דף עם פונקציונליות של צד לקוח ולכן כל הwebpack הוא מיותר להחריד עבורי, לעיתים אני אפילו לא מפצל את הסקריפט מהhtml. ייתכן ש@חוקר נמצא באותו מקום.

אתה צודק לגמרי ש-webpack הוא קצת יותר מדי עבור אתר פשוט. ואפשר בהחלט להשתמש ב-VUE כספרייה פשוטה כמו jquery (וכן עושה @chagold). הבעיה היא שזה כאב ראש להוסיף ספרייות חיצונים לאתר שבנוי ב-VUE בלי שימוש ב-webpack. עיין בנושאים קודמים של @chagold...
אבל @חוקר דיבר גם על SPA אם כן אני ממליץ בחום להשתמש ב-webpack ולא לנסות לעבוד בדרך אחרת.

גם היום אני (בפרויקט העיקרי שאני עובד עליו) כותב בקבצי vue נפרדים, ורק שזה לא בnpm אלא באמצעות ספריה אחרת שמדמה את webpack. אבל כבר עכשיו אני ג"כ מחפש את הזמן להמיר את כל הקוד לפלטפורמה שעל npm. אחת הסיבות זה כי רוב ככל הקומפוננטים של ההרחבות והפיצרים שכתובים על VUE זה על npm. אז אפשר אולי להמיר וכפי ש@yossiz הדריך אותי כאן בעבר, אבל זה ממש לא שווה את הזמן מול האפשרות להתחיל בדרך שהעולם כותב.

[חוקר]

תודה לכל העונים.
רק משהו אחד אשמח לחידודא או מראה מקום, אם אני כן עובד אם הNPM, מהי צורת העבודה כלפי המוצר המוגמר בשרת.
אם הבנתי נכון, אני מתקין ספריות ,מייבא וכו', ובסוף אני אמור לעשות איזה שהוא run.
מה קורה אחרי הrun?
נוצרים לי קבצי HTML וJS עדכניים?
אני מעלה לשרת (אני עובד על המחשב ומעלה לשרת) רק את המוצר הסופי? איפה זה יהיה?
וכן בהרבה דוגמאות של סוגי ספריות לצד לקוח ראיתי שלאחר הrun זה נגיש מ localhost:7070 וכדומה.
מה זה אומר? זה סטטי או שזה כן עם צד שרת?

[חוקר]

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

[davidnead]

Vue Mastery זה האתר האולטימטיבי ללימודי VUE. הסרטונים קלים לצפיה גם לדוברי עברית, וניתן גם לעשות תרגום אוטומטי של כיתוביות.
https://www.vuemastery.com/courses

כדאי להתחיל מintro-to-vue.
והיכרות עם החלק שעובד עם NPM וCLI שזה באמת לא מפחיד כדאי לראות בחלק real-world-vue

[dovid]

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

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

ההדרכה של vue מבקש לא להשתמש בbuild tools למי שזו הפעם הראשונה שלו, כנראה בגלל שאם כן אז לא מבינים כלום מה שקורה. וכפי ש@yossiz אומר, להתחיל ככה, זה להיתקע שהרי התוספים והספריות שבונים על המשתמש בהם שהוא בreal world אימתני ולא סה"כ ממיר דף ססטי לדף קצת יותר חי. מאותה סיבה, וכפי ש@davidnead אומר, היה גם צריך לדחוך אותך ישר לCLI - שמה החיים האמיתיים של vue.

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

[yossiz]

@dovid חבל, אין שום הבדל בין VUE לאנגולרJS. שניהם אפשר להשתמש כספרייה בלי שלב build ובשניהם אפשר להשתמש עם webpack. ההבדל היחיד הוא שאנגולר JS הוא - לא בדרך החוצה - אלא כבר החוצה ולא מעכשיו אלא ממזמן, ו-VUE הוא ספרייה פופולארית נתמכת ועכשווית וגם הרבה הרבה פחות מסובך ועם ביצועים טובים יותר. (לגבי הביצועים ורמת הסיבוך אני מדבר מנסיון וידיעה ולא סתם השערות.)

אני ממליץ גם לך ללכת על VUE. לאדם כמוך זה ייקח בדיוק יומיים ללמוד אותה. ועוד שבועיים עד שתהיה בקי בה. ואז נדבר ותוכל להשוות. אין שום צורך להשתמש ב-NPM + Webpack. רק שלפעמים האינטגרציה עם ספרייות אחרות קצת מסובכת.

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

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

על זה כבר כתבתי בעבר, שזה נתון שהולך ומשתנה כל הזמן לרעת angularjs ולטובת vue

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

לא הבנתי כלל וכלל על מה אתה מדבר. אין לי שום רקע במדעי מחשב, אני פחות מלומד ממך כי לא למדתי תכנות או מחשבים אף פעם בשום מוסד. ספריית VUE יותר פשוטה מאנגולר, היא מכניסה פחות מושגים חדשים מאגולר. שימוש ב-NPM לא נחשב מדעי מחשב. לשם דוגמה: באנגולר מקובל להשתמש ב-dependency injection, תסבוכת מיותרת לגמרי למתחילים.

נ.ב. אל תדאג, זו המילה האחרונה שלי בנושא. אני לא הולך להתווכח על זה יותר...

[yossiz]

@חוקר אמר בהתקנה ושימוש עם bootstrap-vue:

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

(אם אתה משתמש בכלי ה-CLI של VUE לבנות פרוייקט חדש אז) בקובץ ה-package.json אתה מקבל שתי פקודות: start ו-build.
הפקודה start עושה בנייה שמיועדת לצורך פיתוח מקומי ומריצה שרת מקומי שניתן לגשת אליה בד"כ בכתובת localhost:8080.
בבנייה זו מופעלות אופציות עבור מפתחים שהעיקריים מביניהם הם אפשרות להשתמש בתוסף המפתחים של VUE לדפדפן כדי להסתכל במצב הפנימי של כל קומפוננט ובכל הדאטה שמצורף לו (כלי שימושי ונפלא).
ועוד דבר נפלא שנקרא hmr (hot module replacment)‎ שזה אומר שכל שינוי שתעשה בקוד תישלח לדפדפן בלי צורך לרענן את הדף.

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

[dovid]

@yossiz ראשית כל כבר כתבתי בvue לפני כמה שנים טובות (זה היה נראה לי 1)
שנית כבר ביום שכתבת שאתה ממליץ יותר על vue החלטתי להיכנס חזרה לספריה הזו, והחלטתי שהיא אכן טובה יותר, בפרט עבורי. וכך כתבתי פה, שהסכמתי איתך.
שלישית, מצטער שלא הבנת אותי, לא חשבתי שא"א להשתמש בvue ללא webpack. אני לא הכי מבריק בצד לקוח, אבל אני בהחלט בעל ניסיון בהכוונת אנשים חדשים וגם ישנים לטכנולוגיות, ומה לעשות: vue (וכל הפיימוורקים המודרניים) פחות מדברת ומתועדת למשתמש מהסוג שאמרתי.

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

אדרבא, אני אשמח דוקא אם תדחוף פה לvue עוד יותר חזק - עד שתצליח.
@yossiz תודה על הvue ותודה על עוד הרבה!

[Shaya]

@dovid אמר בהתקנה ושימוש עם bootstrap-vue:

אני לא כותב אפליקציות צד לקוח ענקיות אלא סה"כ דף עם פונקציונליות של צד לקוח ולכן כל הwebpack הוא מיותר להחריד עבורי

נראה לי שבמקרים כאלה (שהדף מרונדר בצד שרת ויש רק צורך לזרוק קצת פונקציונליות ואינטראקטיביות בצד לקוח) יש פתרונות יותר אופטימליים, ראה למשל את Alpine.js, או Stimulus (האחרון הוא מהחבר'ה של Rails, אבל מלמעלה זה נראה יותר מסובך).

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

בקיצור, לא צריך להיות פה וויכוח מה "יותר נכון" (כן Webpack לא Webpack) השאלה היא מה הצורך.
(ואגב, עצם הדיון אם יש צורך ב-SPA, זה כבר כן נושא לוויכוח בהרבה מקרים...).

[davidnead]

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

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

[ב.ל]

@davidnead
באתר של vue יש תיעוד מפורט וברור גם למתחילים
עד שזה מגיע לעולם האמיתי של cli וכל הבנייה בפועל שזה משום מה סומכים עליך שתסתדר לבד..

[davidnead]

@ב-ל אמר בהתקנה ושימוש עם bootstrap-vue:

@davidnead
באתר של vue יש תיעוד מפורט וברור גם למתחילים
עד שזה מגיע לעולם האמיתי של cli וכל הבנייה בפועל שזה משום מה סומכים עליך שתסתדר לבד..

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

[ב.ל]

@davidnead אמר בהתקנה ושימוש עם bootstrap-vue:

@ב-ל אמר בהתקנה ושימוש עם bootstrap-vue:

@davidnead
באתר של vue יש תיעוד מפורט וברור גם למתחילים
עד שזה מגיע לעולם האמיתי של cli וכל הבנייה בפועל שזה משום מה סומכים עליך שתסתדר לבד..

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

לא חינמי.. [vue3]

[davidnead]

@ב-ל VUE2 זה די והותר, אין צורך ללכת על 3. הוא ממש ממש חדש, על כל החסרונות שבכך.

[ש.ב.ח.]

אוהה איזה אשכול...

@dovid אני חושב שveu ללא npm ואנגולרJS זה ממש אותו רעיון, ואולי גם veu הרבה יותר קליט, ועם פחות דברים חדשים מJS טהור.

אני בעיקר כותב על react היום (בhooks), אבל מכיר גם את veu
שניהם ספריות טובות מאוד (כמובן אני עובד עם webpack)

[חוקר]

תנו לי לסכם רגע.
@dovid המליץ על אנגולר JS
האחרים תמכו ב VUE
אם הבנתי נכון הרי שגם @dovid מסכים שזה בעצם עדיף, אלא שבמצב הספיציפי בו אני עומד ההמלצה היא על אנגולר.
@dovid אני צודק?
אציין שכבר הסתדרתי כבר עם VUE גם עם ה NPM, וכבר יצרתי בעמצאותו פרוייקט שלום עולם..
ואכן חן חן ל @davidnead על מראי המקומות של השיעורים שם, הם ממש מעולים!