אותה מפה, שלוש דרכים: SVG, Rust ו-Flutter

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

אז ערכנו ניסוי. לקחנו את המפה בעמוד הבית שלנו ובנינו אותה מחדש פעמיים: פעם אחת ב-Rust שמורץ ל-WebAssembly, ופעם אחת ב-Flutter. מאמר זה מציג את שלושתם בעמוד אחד ומשווה ביניהם.

1. המקורי: SVG, CSS וקצת JavaScript

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

זו ציור SVG אחד. הדפדפן מריץ את רוב ההנפשות מ-CSS, וסקריפט קטן מטפל בשאר.

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

המחיר הוא במשקל בעמוד. סימון המפה הוא כ-107 קילו-בתים (כ-30 קילו-בתים בדחיסה), ובריצה יש כ-670 אלמנטים וכ-200 הנפשות CSS. הלוגיקה גם קשה לבדיקה: התזמון חי בתוך keyframes של CSS וסקריפט בעמוד, כך שהבדיקה היחידה היא להסתכל עליה.

2. ראסט ו-WebAssembly

במילים פשוטות: ראסט היא שפת תכנות הידועה במהירותה וביכולתה לגלות טעויות רבות עוד לפני שהקוד רץ. כאן כתבנו את “המוח” של המפה בראסט, ארזנו אותו לצורה קומפקטית שהדפדפנים יכולים להריץ (שנקראת WebAssembly), ונתנו לו לצייר את כל המפה בעצמו, כמו צייר שמצייר מחדש קנבס אחד פעמים רבות בשנייה. בשבילך זה נראה אותו דבר.

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

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

העמוד בסוף מאוד קל: אלמנט קנבס אחד. אבל ההורדה גדולה יותר. המודול המקמפל שוקל כ-254 ק"ב (כ-92 ק"ב דחוס) ועוד כ-28 ק"ב של קוד JavaScript שמחולל כלי הבנייה. ויש עלויות שאנחנו מרגישים כשאנחנו עובדים על זה:

• שרשרת כלים. הבנייה דורשת Rust, את היעד WebAssembly וכלי שורת פקודה שהגרסה שלו חייבת להתאים בדיוק לגרסת הספרייה. סקריפט הבנייה שלנו מריץ את הבדיקות קודם ועוצר אם אחת נכשלת.
• אין גישה למקלדת או לקורא מסך לערים בודדות. קנבס הוא תמונה. גרסת ה-SVG עם 44 הנקודות שניתן למקד בהן נעלמה.
• רק אנגלית. התוויות כתובות לתוך התוכנית.
• טשטוש. קצה הצללית הרכה משתמש במסנן טשטוש קנבס, שלא כל דפדפן תומך בו. לא בדקנו את Safari, שם הקצה עשוי להיות קשה.

3. Flutter

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

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

זו אותה הלוגיקה כמו במפת Rust, מותאמת ל-Dart, עם 11 מבחנים. כ-1,100 שורות כולל מבחנים. Flutter מעביר כל עיר לקוראי מסך ככפתור מתויג, מה שחסר בגרסת הקנבס (לא בדקנו עד כמה זה עובד טוב עם קורא מסך אמיתי). זו גם ההורדה הגדולה ביותר: האפליקציה היא כ-1.8 מגה-בייט (כ-535 קילו-בייט בדחיסה). מנוע הציור של Flutter הוא הורדה נוספת, אבל האתר כבר משתף עותק אחד עם המחשבון, כך שמבקר שפתח את המחשבון לא מוריד אותו שוב. הטקסט שלה מוגדר בגופן של האתר, Merriweather, שהדפדפן טוען בזמן הריצה.

מה שמצאנו

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

דברים שהפתיעו אותנו

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

אזורי זמן לא היו מובנים מראש. גם Rust שמורכב ל-WebAssembly וגם Dart אינם כוללים מסד נתונים של אזורי זמן שיודע “Asia/Dubai”. שניהם שואלים את הדפדפן במקום זאת, דרך שירות Intl המובנה שלו, שגם מטפל נכון בשעון קיץ.

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

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

המסקנה שלנו

מפת ה-SVG נשארת בדף הבית. עבור ציור בגודל כזה היא הקלה ביותר, נגישה, מתורגמת, ולא דורשת בנייה. Rust הוא המועמד המעניין יותר: אם אי פעם נצטרך שהלוגיקה של המפה תהיה נכונה באופן מוכח, או נצטרך לבצע חישובים כבדים בדפדפן, ליבת Rust שנבדקה היא דרך טובה לעשות זאת. Flutter הגיוני אם המפה תצטרך אי פעם לחיות בתוך אפליקציית Flutter.

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

מה שהמייסדים שלנו בונים בהמשך

פלטפורמה יציבה משאירה זמן לרעיונות אחרים. בנוסף ל-EVnSteven, המייסדים שלנו עובדים על הדברים הבאים:

שירות הזמנת נסיעות, יושק בקרוב מאוד Kimem ↗ (opens in a new tab) שירות הזמנת נסיעות לבהיר דאר, אתיופיה, מהמייסד מקונן אלמו. הנוסעים רואים הערכת מחיר לפני ההזמנה, צופים בנהג הקרוב ביותר מתקרב על המפה, ומשלמים את המחיר לפי המונה במזומן בסוף הנסיעה.

לא למטרות רווח, קוד פתוח StrayCats ↗ (opens in a new tab) פרויקט מדוד שמטרתו לעזור לאנשים המטפלים בחתולי רחוב, חתולים משוטטים, או כל חתול, אפילו אם החתול במקרה הוא כלב. הפרויקט עדיין בשלב הרעיון, ללא אפליקציה עדיין, ודוד ישמח לשמוע את הרעיונות והמשוב שלכם. מוקדש לסייבו, 2010–2026.

מעקב מזומן, חינמי, יושק בקרוב Effectivo ↗ (opens in a new tab) חשבונאות לא מושלמת עם טוויסט, למי שמשתמש במזומן. רישום רכישה בכמה הקשות, ספירת מה שיש בארנק, והסתכלות אחורה על מה שהיה שווה. הטוויסט הוא שכל מי שממשיך להשתמש במזומן עוזר לשמור עליו עבור כולם. חינמי וללא פרסומות, יגיע לאנדרואיד ולאייפון, עם גרסת בטא והדגמת ווב פעילה כעת.