ملخّص
SVGOMG: واجهة أمامية جميلة ومتجاوبة ومصمّمة وفقًا لمبادئ المواد لـ SVGO
ما الذي نحبه؟
تم إنشاء SVGOMG من قِبل جاك أرشيبالد، وهو مثال يكاد يكون مثاليًا لأداة فعّالة ومستجيبة بالكامل مكتوبة باستخدام تكنولوجيات الويب. يتميز التطبيق بتصميم جميل على غرار أسلوب Material Design، ويضمن ServiceWorkerتحميل التطبيق بسرعة وتوفره بلا إنترنت، كما أنّه يضمن سلاسة التحولات على الأجهزة الجوّالة.
التحسينات المحتملة
إنّ الانتقاد الوحيد الذي يمكننا تقديمه هو أنّ تجربة المستخدم الأولية مربكة بسبب عدم توفّر واجهة المستخدم الرئيسية. بخلاف ذلك، أحسنت.
أسئلة وأجوبة مع "جاك أرشيبالد"
ما هي مزايا استخدام الويب؟
الكسل الكسل التام لست خبيرًا في تطوير التطبيقات المتوافقة مع نظام التشغيل Windows، ولست خبيرًا في التطبيقات المتوافقة مع نظام التشغيل OSX، ولا أملك خبرة في إنشاء التطبيقات المتوافقة مع نظام التشغيل iOS أو Android أو Windows Phone أو Linux. يمكنني مع ذلك العمل على الويب، وسمحت لي مجموعة المهارات هذه بإنشاء مرة واحدة محتوى يعمل على كل منصّات الويب هذه.
ما الذي كان ناجحًا جدًا أثناء التطوير؟
أنا سعيد حقًا بأداء الجهاز. أحرص على عرض الصفحة قبل أن يصبح JavaScript متاحًا. في الواقع، يتم عرض الصفحة لأول مرة باستخدام 5 آلاف رمز HTML فقط مع بعض علامات CSS وSVG المضمّنة. يتم تحميل النصوص البرمجية الرئيسية وCSS في الخلفية. وهذا يعني أنّه يبدو أنّ الموقع الإلكتروني يتم تحميله في 1.5 ثانية حتى على شبكة الجيل الثالث مع ملف cach فارغ، ويعود معظم ذلك إلى نظام أسماء النطاقات وطبقة المقابس الآمنة (SSL).
إنّ الشاشة الافتتاحية بسيطة جدًا، لذا لم يكن تنفيذ ذلك بدقة 5k مهمةصعوبة. يزعجنا حقًا أنّ العديد من المواقع الإلكترونية تنتظر JavaScript لتنفيذ عملية المعالجة الأولى، بل إنّ بعضها يتطلّب من JavaScript إرسال طلبات إضافية قبل المعالجة. يؤدي ذلك إلى زيادة وقت عرض المحتوى على شبكة الجيل الثالث إلى 10 ثوانٍ تقريبًا، وهو وقت لا يمكنني تحمله بصفتي مستخدمًا للأجهزة الجوّالة.
تبلغ سعة ملف JavaScript الرئيسي 15 كيلوبايت، ولكنّه لا يتضمّن الأجزاء التي تُحلِّل ملف SVG وتُصغّره، والذي يتم تحميله كخطوة إضافية في الخلفية. وهذا أمر رائع لأنّه يتم عرض التفاعل بسرعة كبيرة، ولا يلاحظ المستخدم عملية التحميل الإضافية. إذا تمكّن المستخدم من اختيار ملف SVG قبل توفّر هذا البرنامج النصي، يبدو أنّ تحميل هذا البرنامج النصي هو جزء من وقت المعالجة.
لقد استخدمتُ أيضًا ServiceWorker لتشغيل التطبيق بالكامل بلا اتصال بالإنترنت. إنّ العمل بلا إنترنت هو ميزة رائعة، ولكنّني أستخدمها في أغلب الأحيان لتحسين الأداء. يتم عرض الزيارات اللاحقة إلى SVGOMG بشكلٍ فوري تقريبًا، بغض النظر عن سرعة اتصال العميل. ونظرًا للاختلافات في إمكانية الاتصال بالشبكة على الأجهزة الجوّالة، هذا أمر مهم جدًا.
إذا كان بإمكانك الحصول على أي واجهة برمجة تطبيقات لتحسين تطبيقك، ما هي؟
لقد استخدمت Babel حتى أتمكّن من الاستفادة من ميزات JavaScript المستقبلية. سيكون من الرائع أن تتوفّر بعض هذه الميزات في المنصة. وعلى وجه التحديد، دالات الانتظار غير المتزامن/الانتظار، والدوالّ المستندة إلى الأسهم، والقيم التلقائية للوسيطات، وتحليل البنية.
اضطررت إلى استخدام مكتبة لضغط الإخراج بتنسيق gzip لمعرفة حجمه بعد ضغطه. إنّ استخدام مكتبة لهذا الغرض أمر مزعج إلى حدٍ ما لأنّ هذا الرمز البرمجي متوفّر في المتصفح لعناصر HTTP، ولكن لا تتوفّر له واجهة برمجة تطبيقات. من المفترض أن يكون نوعًا من بث التحويل حتى أتمكّن من احتساب حجم الإخراج بدون تخزين كل البيانات في الذاكرة.