הדפדפן ככלי אולטמטיבי לפיתוח GUI

[pcinfogmach]

@dovid כתב בשיתוף להערות - maPraqti תוכנה ליצירת מפת מקומות בבית כנסת:

@pcinfogmach שום כלי ושום פלטפורמה כיום לא טובה מספיק כמו הסטאק של הדפדפן.
למשל אם משתמשים בכלי UI שעובד עם פייתון ורוצים שיהיה עיצוב בעת מעבר עכבר (:hover בCSS), זה פי כמה (עשרות? ואולי מאות?) עבודה, תחזוקה, ואי יעילות, מהשורת עיצוב הקלילה בCSS.
הדפדפן זה הכלי האולטימטיבי לפיתוח GUI היום, גם של תוכנות אופליין (כמו VSCODE)

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

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

1. יצירת פקד עץ.
2. גרירה של אובייקטים.

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

בקיצור אשמח לשמוע איך בעצם אפשר לתכנת על מלא על בסיס JS -HTML.

[dovid]

@pcinfogmach שים לב שלא אמרתי שזה הכי טוב או הכי קל באופן כללי, אלא שמתי דגש על "פיתוח GUI". בנקודה הזו זה שווה, בדברים אחרים (לא הרבה) זה עלול להיות פחות טוב.
לגבי פקדים מורכבים - זה נכון יחד עם העיקרו הנסתר שהנחת - לא להשתמש ברכיבים צד שלישי.
ברור שיש הרבה דברים שקשה בלי ספריות צד שלישי, אבל ספריות צד שלישי בווב זה כמו .net framework בWPF כמעט.

הדוגמאות שהזכרת ממחישות את עוצמת הדפדפן, הם לא צריכים שום רכיב צד ג':

1. יצירת עץ זה קלי קלות כמעט בלי CSS עם HTML נטו.
2. טיפול גרירה של אובייקטים לדעתי יותר קלה בWEB מאשר בדסקטופ.

[dovid]

@pcinfogmach כתב בהדפדפן ככלי אולטמטיבי לפיתוח GUI:

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

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

בקיצור אשמח לשמוע איך בעצם אפשר לתכנת על מלא על בסיס JS -HTML.

פה עיקר השאלה. יש כמה שיטות, למשל VSCODE וגם עוד הרבה תוכנות (סלאק למשל ועוד רבים) משתמשים עם פלטפורמה בשם אלקטרון. זה בעצם JS שחלקו רץ בהקשר של דפדפן, וחלקו רץ כחלק אחורי.
כיום נהייתה אפשרות חדשה, להשתמש בפקד WebView2 המטורף של מייקרוסופט. זה בעצם edge (שזה כרום) עם המון מאפיינים אירועים ופונקציות לשליטה מוחלטת עליו. אפשר להגיש שפקד תיקיית HTML סטטית, ולתקשר דרך הJS עם התוכנה המארחת שיכולה להיות WPF עם C#, אני עשיתי את זה וזה ממש עובד נהדר.
תכלס זה עדיין מורכב איך שלא תהפוך את זה, ובמקרים של אפליקציה קטנה מאוד הגיוני להסתפק בממשק אחר. אבל אחרי כמה קפיצות ראש קשה לשוב לממשקים המסורבלים ובלתי יעילים של הdesktop.

[צדיק תמים]

@pcinfogmach כתב בהדפדפן ככלי אולטמטיבי לפיתוח GUI:

או ספריות צד שלישי.

למה זה מוקצה אצלך?

[pcinfogmach]

@צדיק-תמים
האם ספריות צד ג' עובדים אופליין? אם כן אשמח לשמוע כיוונים טובים בנושא.
כבר מזמן רציתי לעבור לפיתוח בדפדפן אבל לא מצאתי לכך דרך משביעה רצון. (אני בבורותי מכיר C# wpf - וזהו).

[צדיק תמים]

@pcinfogmach למה לא? זה סך הכל קבצי טקסט בסיומת js
יש 2 דרכים לטעון קבצי JS, באמצעות CDN כלומר לכתובת כתובת של שרת שמחזיק לך את הקובץ, או להתקין באמצעות npm ולהשתמש בbundler שדוחס את הכל לקובץ (או קבצים) ניידים וקלים
הדרך הנורמלית היא דרך NPM

[pcinfogmach]

@dovid כתב בהדפדפן ככלי אולטמטיבי לפיתוח GUI:

כיום נהייתה אפשרות חדשה, להשתמש בפקד WebView2 המטורף של מייקרוסופט. זה בעצם edge (שזה כרום) עם המון מאפיינים אירועים ופונקציות לשליטה מוחלטת עליו. אפשר להגיש שפקד תיקיית HTML סטטית, ולתקשר דרך הJS עם התוכנה המארחת שיכולה להיות WPF עם C#, אני עשיתי את זה וזה ממש עובד נהדר.

אני משתמש באופציה זו הרבה - מה שמעניין לי שאתה מגדיר אותה כאופציה נהדרת בזמן שאצלי זה רק מקל עלי בגלל סיבה אחת שאני מתעסק עם מסמכים על בסיס טקסט (כלומר מאגרים תורניים).
לולא זה אני מרגיש שאני מפסיד מדאי הרבה כשאני עובר לדפדפן - אני מפסיד את הקלות של ה-debugging, את ה-intellisense העוצמתי של C#, את ההתמשקות העוצמתית של C# עם WPF.

טוב, כתבת שזה קשה אולי לזה התכוונת.

בכל אופן עדיין נותרו לי כמה שאלות ברמה כללית:
א. האם זה לא מאט את זמן הטעינה - לעבוד ככה?
ב. האם יש לי את הגמישות של ה-layout שאני מכיר ב-wpf?
ג. באיזה IDE אוכל להשתמש כדי לייצר אפליקציות בזרימה שאני מכיר מ-C#.

[meir lamdan]

@dovid כתב בהדפדפן ככלי אולטמטיבי לפיתוח GUI:

להשתמש בפקד WebView2 המטורף של מייקרוסופט

החיסרון לכאו' שזה לא נתמך במק

[צדיק תמים]

יש פריימוורקים ייעודיים לתוכנה מבוססת HTML CSS JS חוצת פלטפורמות
הותיק והכבד - אלקטרון, כולל בתוכו כרומיום שלם,
או קלים יותר מבוססי WebView כמו Tauri (חסרון מסוים שאם אתה צריך לממש יכולות נייטיב שלא זמינות בAPI של טאורי אתה צריך לכתוב את זה בRust) או Neutralinojs

[dovid]

@pcinfogmach כתב בהדפדפן ככלי אולטמטיבי לפיתוח GUI:

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

אתה משתמש בפקד.
אני מתכוון למשהו אחר לגמרי, פיתוח לWEB נפרד בפני עצמו, כשהאפליקציה היא רק ה"צד האחורי". זה בעצם ללמוד פיתוח לWEB רק עבור הממשק משתמש, ואז לשלב את C# בשביל כל הפעילות האמיתית של האפליקציה (שלעיתים ממש קטנה).

לולא זה אני מרגיש שאני מפסיד מדאי הרבה כשאני עובר לדפדפן - אני מפסיד את הקלות של ה-debugging, את ה-intellisense העוצמתי של C#, את ההתמשקות העוצמתית של C# עם WPF.

כיום חוויית הדיבאג של תכנות לדפדפן לעיתים עולה על של C#. גם ההשלמה אוטומטית וההבנה של IDE מעולה אם משתמשים בTypeScript (שזה הנורמה היום בכל הפרימוורקים המובילים).
הקושי שהתכוונתי זה עצם הפיצול. אתה כאילו מפתח שני כלים: צד אחורי וצד קדמי נפרדים שמתקשרים ביניהם כאילו הם שני תוכנות.

בכל אופן עדיין נותרו לי כמה שאלות ברמה כללית:
א. האם זה לא מאט את זמן הטעינה - לעבוד ככה?
ב. האם יש לי את הגמישות של ה-layout שאני מכיר ב-wpf?
ג. באיזה IDE אוכל להשתמש כדי לייצר אפליקציות בזרימה שאני מכיר מ-C#.

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

א. תיאורטית אולי, מעשית בכלל לא.
ב. יותר...
ג. VSCODE, לתיקיה נפרדת לגמרי שאחראית על צד הממשק.

[pcinfogmach]

עוד שאלה בנושא הנ"ל:
מה קורה אם אני מפתח תוכנה שאני לא רוצה שהקוד יהיה זמין וקריא ככה בקלות? אם הכל זה קבצי JS ו-html?

[צדיק תמים]

@pcinfogmach אתה יכול להוסיף בבילד שלב ערפול עם https://github.com/javascript-obfuscator/javascript-obfuscator
ישפיע במידה מסוימת על הביצועים, תלוי ברמת הערפול שתבחר

[pcinfogmach]

@dovid כתב בהדפדפן ככלי אולטמטיבי לפיתוח GUI:

אם אתה רוצה לשלב ממשק WEB אתה לא יכול לעשות את זה בלי ללמוד פיתוח לWEB

מה בעצם אני צריך ללמוד כדי ללמוד פיתוח WEB

[יוסף בן שמעון]

@צדיק-תמים קלוד הצליח לשחזר עבורי קוד מעורפל, אחרי מהפכת ה AI הערפול כבר לא מה שהיה

[צדיק תמים]

@יוסף-בן-שמעון תלוי ברמת הערפול

[dovid]

@pcinfogmach ערפול? זה רק הממשק הגרפי, זה בכל מקרה לא קריא בקלות בכלל (בכל הפרימוורקים המובילים שיש אריזה), וגם C# לא ממש מעורפל...
איך לומדים פיתוח WEB? מה היה קורה לו היית שואל אותי את זה על C# וWPF, או שהיית יודע יותר טוב או שלא היית יודע כלום...
במקרה שלך לא צריך את כל הסטאק, אפשר ממש רק צד לקוח: צריך בעיקרון ללמוד HTML+JS בסיסי, ובבסיסי הזה כדאי להבין טוב מה קורה שמה. כמו כן בJS להבין קצת אסינכרוניות: קלאבק, פרומייס וasync\await, ואז להתחיל ללמוד פרימוורק שאתה בוחר וזהו.
אם אתה רוצה ללמוד טיפה על הרעיון של שרת/לקוח (שאתה תממש אותו בדרך שונה בwebview2 עם post message) אז תוכל להפיק תועלת מהמדריך שלי פה בפורום על פיתוח full stack שנותן קצת רקע לעניין. לצערי חסר שמה כמה יסודות, אבל זה לא נוגע בכלל לענייננו.