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