الخريطة نفسها، ثلاث طرق: SVG، Rust و Flutter

وصل EVnSteven إلى مكان مريح. المنصة مستقرة ولا تحتاج إلى الكثير من الصيانة، وهذا بالضبط ما أردناه عندما بدأنا: نظام صغير يعمل بهدوء وباستمرار. هذا يترك مساحة صغيرة للتجربة، وقد منح مؤسسينا الوقت لبدء بعض المشاريع الأخرى، والتي ستجدها في النهاية.

لذا أجرينا تجربة. أخذنا الخريطة الموجودة في صفحتنا الرئيسية وأعدنا بنائها مرتين: مرة باستخدام Rust مترجمة إلى WebAssembly، ومرة باستخدام Flutter. تضع هذه المقالة الثلاثة كلها في صفحة واحدة وتقارن بينها.

1. الأصلية: SVG، CSS وقليل من JavaScript

بعبارات بسيطة: هذه هي الخريطة في صفحتنا الرئيسية. تم بناؤها بنفس طريقة بناء بقية صفحة الويب: رسم مكون من أشكال يعرف متصفحك بالفعل كيفية عرضها وتحريكها. إنها الأبسط من بين الثلاثة، وهي التي يراها معظم الزوار.

إنها رسم SVG واحد. يقوم المتصفح بتشغيل معظم التحريكات من CSS، ويتولى سكريبت صغير الباقي.

لمصلحتها: لا توجد خطوة بناء، لذا قالب Hugo هو كل ما تحتاجه. إنها متجهة، لذا تبقى حادة في أي حجم. يمكن الوصول إلى جميع النقاط الأربع والأربعين باستخدام لوحة المفاتيح، كل واحدة مع تسمية لقرّاء الشاشة. وقليل من كلماتها مترجمة إلى جميع لغاتنا.

التكلفة هي الوزن في الصفحة. حجم ترميز الخريطة حوالي 107 كيلوبايت (حوالي 30 كيلوبايت مضغوطة)، وعند التشغيل تحتوي على حوالي 670 عنصرًا وحوالي 200 تحريك CSS. المنطق أيضًا من الصعب اختباره: التوقيت موجود داخل إطارات CSS الرئيسية وسكريبت في الصفحة، لذا الاختبار الوحيد هو النظر إليها.

2. Rust و WebAssembly

بعبارات بسيطة: Rust هي لغة برمجة معروفة بسرعتها وقدرتها على اكتشاف العديد من الأخطاء قبل تشغيل البرنامج. هنا كتبنا “عقل” الخريطة بلغة Rust، وحزمناه في شكل مضغوط يمكن للمتصفحات تشغيله (يسمى WebAssembly)، وسمحنا له برسم الخريطة بأكملها بنفسه، مثل رسام يعيد رسم لوحة واحدة عدة مرات في الثانية. بالنسبة لك، تبدو الخريطة نفسها.

يتم رسم الخريطة بأكملها على لوحة واحدة بواسطة Rust التي تم تجميعها إلى WebAssembly. كود Rust يتحكم في كل سلوك الخريطة ويعيد رسم كل شيء في كل إطار.

الجزء الذي أعجبنا هو أن المنطق هو Rust صافي بدون أي شيء من المتصفح: الرياضيات الخاصة بمكان الأشياء ومتى تتغير، والمحلل الذي يقرأ حدود الأرض. يحتوي على 13 اختبارًا تعمل في جزء من الثانية، وإذا كان توقيت الدورة خاطئًا، يفشل اختبار بدلاً من أن يلاحظ أحد أن الشكل يبدو غريبًا. حوالي ثلث حوالي 1,070 سطرًا من كود Rust هو ذلك الجوهر المختبر (مع اختباراته)؛ والباقي يرسم على اللوحة ويتعامل مع أحداث الماوس.

تنتهي الصفحة خفيفة جدًا: عنصر لوحة واحد فقط. لكن التنزيل أكبر. الوحدة المجمعة حوالي 254 كيلوبايت (حوالي 92 كيلوبايت مضغوطة) بالإضافة إلى حوالي 28 كيلوبايت من جافا سكريبت اللاصقة التي يولدها أداة البناء. وهناك تكاليف نشعر بها عند العمل عليها:

• سلسلة أدوات. البناء يحتاج إلى Rust، هدف WebAssembly وأداة سطر أوامر يجب أن يتطابق إصدارها تمامًا مع إصدار المكتبة. يقوم نص البناء الخاص بنا بتشغيل الاختبارات أولاً ويتوقف إذا فشل أحدها.
• لا يوجد وصول عبر لوحة المفاتيح أو قارئ الشاشة إلى المدن الفردية. اللوحة هي صورة. نسخة SVG التي تحتوي على 44 نقطة يمكن التركيز عليها اختفت.
• الإنجليزية فقط. العلامات مكتوبة داخل البرنامج.
• تمويه. يستخدم حافة الظل الناعم فلتر تمويه اللوحة، والذي لا يدعمه كل متصفح. لم نختبر Safari، حيث قد تكون الحافة صلبة.

3. Flutter

بعبارات بسيطة: Flutter هو مجموعة أدوات من Google لبناء تطبيقات تعمل على الهواتف وأجهزة الكمبيوتر والويب من مجموعة واحدة من الشيفرة. لا يستخدم مكونات صفحة الويب الخاصة بها. يرسم كل شيء بنفسه. هنا الخريطة هي تطبيق صغير معروض داخل هذه الصفحة، نفس مجموعة الأدوات التي تدعم حاسبة الشحن.

يرسم الخريطة بواسطة رسام مخصص، وتُعرض هنا داخل إطار. يمكن لـ Flutter أيضًا بناء تطبيقات للهواتف وأجهزة الكمبيوتر من نفس الشيفرة، وهو حجته الرئيسية: اكتب الخريطة مرة واحدة، وشغلها في عدة أماكن.

إنها نفس منطق خريطة Rust، محمولة إلى Dart، مع 11 اختبارًا. حوالي 1100 سطر بما في ذلك الاختبارات. يقوم 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) محاسبة غير مثالية مع لمسة خاصة، لأولئك الذين يستخدمون النقد. سجّل عملية شراء ببضع نقرات، عد ما في محفظتك، وراجع ما كان يستحق الشراء. اللمسة الخاصة هي أن كل من يستمر في استخدام النقد يساعد على إبقائه متاحًا للجميع. مجاني وخالي من الإعلانات، سيأتي إلى أندرويد وآيفون، مع نسخة تجريبية وعرض ويب يعملان الآن.