פיתוח ממשק כאשר ניהול צד שרת nodejs
-
עד היום השתמשתי לממשקי הניהול ללקוחות עם פריימוורק php בשם YII2.
ניהול היוזרים בוצע עם המודל המובנה שם, יש שם גנרטור שיוצר מודולים תצוגות וקונטרולרים לכל הטבלאות.
רוב השימוש בממשק הינו CRUD פשוט על טבלאות, כאשר פה ושם יש צורך בכל מיני פונקציות שהייתי מוסיף לבד בקונטרולרים.
כעת יש לי פרוייקט שמורכב ממסך המתעדכן אוטומטי מהרשמות שנעשו בטלפון, ולכל שורה יש לי סט של פונקציות בהתאם לסטטוס וסוג השורה וכו', וכן ישנם מספר מערכות ללקוח אחד שיוצגו באותו תצוגה ועוד, מה שהביא אותי לתחושה שעלי לבנות משהו חדש, וצד השרת יהיה אותו תהליך nodejs המשמש אותי למערכת הטלפונית, ויש בו בין כך את כל הפונקציות והנתונים.
אני התחברתי לכיון כמו שקיים בממשק הניהול של נדרים פלוס, כל הממשק הינו html מוכן מראש עם כל סוגי התצוגות והפונקציות ב js, הכל בתוך divים המוגדרים ל hidden ובכניסה ראשונית מוצג רק הדיב של ההתחברות, לאחר התחברות שמבוצעת ב api הוא מוסתר ומוצג הדיב של התפריט הראשי, ובעת בחירת פעולה מסויימת מוסתרים שאר הדיבים ונגלה רק הדיב המציג את הטבלה/הפעולה הרצויה.
כאשר כל הפעולות בצד שרת מבוצעים על ידי api שכמובן חסומים, ונגישים רק למחוברים המזוהים על ידי עוגיות, וכן התצוגות של נתונים מקבלים מידע באמצעות api וטוענים אותם לטבלה הקיימת ב html מטעינת הדף הראשונית.
אשמח לשמוע מהחברים האם יש משהו יותר קליל ויותר פרקטי/מודרני אך בסגנון הנ"ל שצד השרת בנוי בנפרד ב nodejs.
אין לי חשק לעבוד כעת על צד שרת שמרנדר html.
האם יש ספריות/פריימוורקים מומלצים מעבר ל jquery ובוטסטראפ?
או משהו שמקל יותר על עניין העיצוב, שאגב זה יהיה לי קשה, כי אני לא הסגנון שיודע לעצב..
תודה -
@חוקר
כל הבעיות שיש לך היו לך גם קודם רק היה מישהו שטיפל בהם ופיטרת אותו. שמו היה YII2.
האינטרנט בנוי באופן שיש ניתוק מוחלט בין צד השרת ללקוח. מהרגע שהדף נשלח מהשרת ללקוח כל תהליך התקשורת מת לחלוטין. ממילא האופן בו אתה חושב לעשות הוא טבעי וגם ככה עבדת עד היום רק שהאחריות לא הייתה עליך בזכות הספריה הנ"ל.
איך היא עשתה את העבודה? כנראה עם כמה ספריות כמו jQuery שהזכרת.
איך מתחילים לעבוד עם צד לקוח בלי הרבה חשק לעיצובים ועבודת תכנות מעייפת? פרימוורקים? בטח.
יש פרימוורקי עיצוב כללים כמו bootstrap ויש ספריות קטנות לדברים קונקרטיים יותר.
יש ספריות JS להקלה על החלק התכנותי, ויש פרימוורקים של JS שלוקחים בד"כ את רוב העבודה לידיים.מה מומלץ? חח
זו שאלה שאין עליה תשובה (ע"ע איזה רכב כדאי לקנות, איזה מקצוע כדאי ללמוד וכו').
מה אני עושה? משתמש בbootstrap + angularjs. -
@חוקר אני חושב שאת הבסיס שבבסיס של המבנה האלמנטי של ה-HTML, תהיה חייב לבנות בעצמך. אני לא מכיר שום מין boilerplate עם טמפלייטים מוכנים לממשק ניהול X או ממשק נתונים Y, אם הבנת מה אני מדבר (חיפשתי בעבר על זה).
אז את הבסיס (כלומר כל ה-div שאתה מדבר עליהם והטבלאות הריקות וכו') תכתוב לבד.
והעיצוב - בא. א' יש לך ספריות עיצוב (גם בזה יהיה לך עבודונת - אמנם קטנה - ללמוד את השמות של הקלאסים של השפה הספציפית ולהכניס אותם נכון לאללמנטים שבדף שלך. אבל זה בקטנה), וגם סתם ככה העיצוב זה כבר שלב טכני לא חשוב באמת. (כמובן כמובן, צריך. אבל זה לא מה שאני חושב שצריך לתכנן).אתה כותב שאתה מתכנן משהו שיסתיר (hidden או יותר נכון collapse) את הדיבים שלא באים לך עכשיו. לדעתי יותר נכון לערוך את התוכן שלהם ל-כלום. (
document.getElementById('div').innerHTML = '') זה עושה באמת את מה שאתה רוצה (מרוקן את מה שלא צריך להיות כאן עכשיו) ולא פשוט 'מסתיר' את מה שאתה רוצה.
תסתכל בקוד של האפליקציה שבניתי (חחח עף על עצמי
) אני עושה שם כאלה דברים, כמובן במינורי..
גם הנתונים שם - הם כמו שאתה כותב - מתקבלים מ'API' מהצד שרת, בJSON, ומוכנסים למקומות הנכונים (בקוד בצד לקוח. לא מרונדר מהצד שרת).זהו מקווה שלא בלבלתי את השכל ונדחפתי לדיון של גדולים.. שמחתי להיעזר בך!
-
@חוקר אמר בפיתוח ממשק כאשר ניהול צד שרת nodejs:
ל הממשק הינו html מוכן מראש עם כל סוגי התצוגות והפונקציות ב js, הכל בתוך divים המוגדרים ל hidden ובכניסה ראשונית מוצג רק הדיב של ההתחברות, לאחר התחברות שמבוצעת ב api הוא מוסתר ומוצג הדיב של התפריט הראשי, ובעת בחירת פעולה מסויימת מוסתרים שאר הדיבים ונגלה רק הדיב המציג את הטבלה/הפעולה הרצויה
מה שאתה מתאר נקרא SPA. (ר"ת Single Page Application).
לאחרונה זה נהיה האופנה.
לא כדאי לממש את זה לבד. יש לזה ספריות. אם תלך על VUE יש מובנה.
בנוגע לפריימווקים, יש לי המלצות, (כנראה שדוד לא יסכים לראשון, אבל אני נשאר בשלי):- אל תלמד angularjs, תלמד VUE. זה יופי של פריימוורק. ומכלל הן אתה שומע לאו... (לגבי ריאקט אני לא יכול לחוות דעה כי אין לי נסיון).
- לגבי החלק העיצובי, יש פריימוורקים שנותנים לך קומפוננטים ברמה יותר high-level מ-bootstrap. השתמשתי פעם ב-vuetify ועשיתי דאשבורד שלם בלי צורך בשורת CSS אחת.
-
@yossiz אמר בפיתוח ממשק כאשר ניהול צד שרת nodejs:
יש לזה ספריות. אם תלך על VUE יש מובנה.
בעבר ראיתי את זה. מאד התרשמתי.
https://coreui.io/vue/?affChecked=1https://github.com/PanJiaChen/vue-element-admin
(מכאן..)
-
למעשה
אני מתלבט מאוד האם ללכת על ספריה שמנהלת את כל העבודה, או משהו קטן שמוסיף שיפורים קלים לקוד וזה הכל (וא"כ אשמח לדעת מה באמת אני מחפש.. אולי מישהו יודע בשבילי).
בספריות שצויינו לעיל יש כנראה מגוון כלים גדול שיכול לעזור ולהוסיף ולשפר וכו'
ומצד שני זה דורש למידה של משהו חדש, לבחור ספריה המתאימה לי מבין הספריות הקיימים בשוק ועוד.
@dovid אני חושש שלא ירדת לגמרי לסוף דעתי.
עד היום בYII2 היה לי לי הHTML מעורבב לגמרי בPHP, ובכל ניתוב בכל לחצן ערוך מחק הצג וכו' היינו שאתה עובר לגמרי לדף אחר, טעינה מחדש של כל הקבצים וכל הגופנים וכו' (כמובן מהירה יותר כאשר הן בקש, אבל בהחלט לכל פעולה טעינה מלאה), ובמקביל בשרת זה טעינה מלאה חוזרת של כל המודולים והקונטרולרים והספריות וכו' של הספריה המלאה של YII2.
כמובן צורך המון CPU וראם..
כעת אני רוצה גישה חדשה לחלוטין
אין בקשות כבדות.
יש אפליקציה אחת (HTML + JS + CSS) שנטענת במלואה בכניסה לדף, ואח"כ הכל מבוצע על ידי בקשות רזות של API לקבלת מחיקת ועריכת הנתונים. -
@dovid אמר בפיתוח ממשק כאשר ניהול צד שרת nodejs:
אני חשבתי לתומי שYII נותן גם ajax שזה בקשות שרת ללא טעינה מלאה.
יש תמיכה מוגבלת מאוד בזה.
התמיכה היחידה (שמצאתי שם) היא שניתן להגדיר קטעים בדף שהם pjax וניתן לטעון רק אותם.
למשל יש לי בתוך הדף טבלה, שברגיל אני פותח אותה עם כל התפריט העליון והתחתון וכו', pjax מאפשר לי להגדיר שאם אני ניגש לדף ובלינק אני נותן לי ערך pjax=gdfd השם של החלק שהגדרתי כ pjax אז זה ייתן לי את החלק הזה בלבד ללא הכותרות והחלקים של לפני ואחרי. (מגדירים קטע התחלה וקטע סיום).
נראה לי שזה פחות טעינות של קבצים סטטיים, (אלא א"כ הוכרז עליהם בתוך הקטע המבוקש הספיציפי), אך עדיין הCPU והראם הוא אותו דבר
