שעון יפייפה, עם SVG וReact (סרטון הסבר +קוד +חומר)

[5127109]

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

זה בקצב די מהיר, (ערב פסח...) אבל בהחלט אפשר ללמוד מזה המון.

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

 

[java]

יפיפה ומדויק.
בהזדמנות אתעמק בClock.js

רק למה השארת את הקוד הדיפולטי של React בApp.js?

 

[5127109]

רק למה השארת את הקוד הדיפולטי של React בApp.js?

ערב פסח. תקנתי את זה. תודה.

 

[@shaye]

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

איזה יופי, תודה רבה על החומר הנפלא, באמת מחכים!

או להטמיע את השעון שיראה את השעה הנוכחית ממש

ביצעתי את זה עכשיו במהירות עם Vue!
יש כמה דברים שסידרתי ככה במהירות, אז אני מניח שלא הכל 100%...

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

 

[5127109]

יהיה יותר נכון לעדכן את המחוגים אחת לדקה במקום האינמציה

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

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

 

[@shaye]

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

נקודה חשובה, אבל יש 2 בעיות עם הגישה הזאת (ולהם התכוונתי):
1) הtiming בדפדפן אינו מדוייק כ"כ, זה נכון לגבי setTimeout, setInterval וגם לגבי אנימציות עם CSS ואני משער שגם לSVG, כך שאם אתה בודק רק פעם אחת את השעון בזמן הטעינה, יכול להיווצר הטייה רצינית מהזמן האמיתי ככל שעובר יותר זמן (יש הרבה חומר על זה ברשת, ראה למשל כאן וכאן).

2) הפעילות של הwindow נפסקת ברגע שהכרטיסייה הופכת ללא פעילה, כך שאם עזבת את הכרטיסיה ל5 דקות, כשתחזור השעון יהיה 5 דקות באיחור...

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

אמנם, קלודינרי, יש להם חלקים עם ויו.

הנה רשימה קטנה של עוד כמה ידועים כאן בארץ שמשתמשים עם Vue:
יד 2
מאוחדת
רמי לוי
שופרסל
חשבונית ירוקה

כנראה יש עוד הרבה... (אפשר לזהות אותם בקלות עם תוסף הdev-tools של Vue או עם Wappalyzer).

 

[5127109]

1) הtiming בדפדפן אינו מדוייק כ"כ,

מגניב, לא ידעתי את זה.

הפעילות של הwindow נפסקת ברגע שהכרטיסייה הופכת ללא פעילה

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

כל השימוש של פריימוורק הופך להיות מיותר, אפשר הרי לעשות את זה עם HTML סטטי וקצת JS

נכון, באתי להדגים שימוש SVG בreact ועוד חזון למועד. יש הרבה מה לעשות עם הסטייט (stay tuned...)

 

[@shaye]

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

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

נכון, באתי להדגים שימוש SVG בreact

אגב, זה עוד משהו מיוחד ב-Vue, אתה כותב HTML/SVG "אמיתי" כך שאתה יכול לחסוך את כל ההמרה ל-JSX (ובמידה שאתה כן צריך/רוצה JSX - ב-Vue אפשר להשתמש גם עם JSX, אלא שהם לא ממליצים את זה ברוב המקרים, אפשר לקרוא על זה כאן).