Bun.Image يجعل خط معالجة الصور بالكامل شيئاً من الماضي
BBetter Stack
Computing/SoftwareInternet Technology
Transcript
00:00:00هذا Bun Image، وهو واجهة برمجة تطبيقات مدمجة لمعالجة الصور أُطلقت مع Bun 1.3.14 يمكنها تغيير الحجم،
00:00:06وقص وتحويل الصور بين صيغ مختلفة بدون أي تبعيات أصلية،
00:00:10وكل هذا يعمل خارج الخيط الرئيسي، مما يعني أنه لن يعطل خادمك أثناء
00:00:14المعالجة. لكن Bun هو بالفعل بيئة تشغيل، ومدير حزم، ومجمع، ومشغل اختبارات،
00:00:19والآن أصبح معالج صور؟ هل هذا كثير جداً، أم أنه يخبرنا بشيء
00:00:24أكبر حول اتجاه Bun؟ اضغط على اشتراك ولنكتشف ذلك.
00:00:30إذا سبق لك معالجة الصور على الخادم باستخدام JavaScript، فربما استخدمت مكتبة تسمى
00:00:35Sharp دون أن تعرف حتى، والتي لديها أكثر من 55 مليون عملية تنزيل على npm أسبوعياً، بل إنها
00:00:41تُستخدم بواسطة Next.js داخلياً لتحسين الصور. لكن Sharp تعتمد على ثنائي أصلي يسمى libvips،
00:00:47مما يعني أن كل تثبيت يجب أن يسحب البناء الصحيح لمنصتك. وإذا سبق لك
00:00:51أن واجهت فشلاً في بناء Docker أو خط أنابيب CI بسببه، فأنت تعرف مدى إحباط هذا. لذا قرر Bun
00:00:57ببساطة بناء معالجة الصور في بيئة التشغيل نفسها، وهي في الواقع أسرع من Sharp في
00:01:02معظم الاختبارات. قراءة البيانات الوصفية أسرع بـ 70 مرة، وتغيير الحجم أسرع بنسبة 30% تقريباً. الآن الكثير من
00:01:08المطورين في حيرة من أمرهم بشأن سبب إضافة Bun لهذا، لكنني أرى نوعاً ما إلى أين يتجه كل هذا،
00:01:13وسأخبرك قليلاً عن ذلك لاحقاً. ولكن في الوقت الحالي، دعنا نستعرض بعض العروض التوضيحية لكيفية استخدام
00:01:17واجهة برمجة تطبيقات Bun للصور. وسنجربها على مدونتي، وهي موقع Waku ثابت، يحتوي على
00:01:22بعض الصور الضخمة. لنبدأ ببرنامج نصي بسيط يقوم بتحسين صورة واحدة،
00:01:27وهي صورة الملف الشخصي لوجهي، وهي قادرة على تقليل الحجم بنسبة 99%، وهو أمر جنوني.
00:01:33دعنا نرى كيف. أولاً، نحصل على الصورة، لاحظ أننا نستخدم Bun.image هنا، ولكن يمكنك أيضاً القيام بـ
00:01:37Bun file مع وظيفة الصورة. ثم نقوم بتغيير حجم الصورة لتقليل حجمها، مع منحها عرضاً قدره 800
00:01:43بكسل، ويتم حساب الارتفاع تلقائياً بناءً على نسبة العرض إلى الارتفاع. ولكن إذا كنت ترغب،
00:01:47يمكننا إضافة ذلك هنا أيضاً. ثم نمنحها تنسيق إخراج WebP بجودة مخفضة. بالطبع،
00:01:52يتم دعم تنسيقات إخراج أخرى، ثم نخرج الصورة الجديدة إلى ملف،
00:01:56وهو وعد (promise)، ولذا فهو يتطلب الكلمة المفتاحية await. ويمكنك رؤية مدى بساطة هذا.
00:02:01في الواقع، كل هذا الكود هنا غير ضروري، لذا يمكننا إزالته وجعل الكود أكثر بساطة.
00:02:06يمكننا أيضاً تعيين مرشح تغيير الحجم، وتغيير نواة إعادة التشكيل، مما يزيد من تقليل حجم الصورة.
00:02:10يمكننا تدوير الصورة أو قلبها، وهذا رائع حقاً. يمكننا حتى تغيير السطوع أو
00:02:15التشبع، مما قد يؤدي إلى بعض الصور ذات المظهر الغريب. ولكن هناك شيء ذكي حقاً
00:02:19يمكنك القيام به عندما يتعلق الأمر بالاتصالات البطيئة، وهو استخدام وظيفة العنصر النائب (placeholder) لإظهار
00:02:23صورة ضبابية تلقائياً أثناء تحميل الصورة الرئيسية. وللقيام بذلك، لدي حلقة for التي
00:02:29تمر عبر كل ملف يحتوي على هذه الامتدادات داخل الدليل الذي يحتوي على كل
00:02:34صور المدونة. لذا يتم تغيير حجم كل صورة، وتصغيرها دون قص، وعدم
00:02:39تكبيرها. ثم ننشئ عنصراً نائباً لكل صورة، مما ينشئ thumb hash، مما يعني أنه يرمز
00:02:45أي صورة إلى هاش بحجم 28 بايت، وهو مثالي كعنصر نائب لصورة ضبابية.
00:02:49يتم إضافة هذا الهاش إلى كائن العناصر النائبة، ثم يتم كتابته في ملف،
00:02:53والذي يبدو هكذا. الآن، السبب في أن العنصر النائب هو صورة base64 بدلاً من
00:02:58صورة WebP أصغر منفصلة هو حتى لا تضطر الشبكة إلى إجراء طلب لجلبها.
00:03:02لذا ما يمكنني فعله هو استيراد جميع العناصر النائبة وإضافتها كصورة خلفية في CSS،
00:03:07أثناء انتظار تحميل الصورة الرئيسية، وهو ما سيعمل مع كل صورة في مدونتي.
00:03:11ولكن إذا كنت ترغب في القيام بذلك لصورة واحدة في ملف MDX، يمكنك فقط إضافة كود base64
00:03:16يدوياً، وهو يعمل بشكل جيد بنفس القدر. لاحظ أنه يمكنك أيضاً الحصول على سلوك مماثل باستخدام
00:03:20صور JPEG عن طريق ضبط progressive على true. بالطبع، هناك العديد من الأشياء الأخرى التي يدعمها BUN image
00:03:24والتي لم أستعرضها بعد، مثل القدرة على الحصول على صور من دلو متوافق مع S3،
00:03:28أو كتابة الصور إلى دلو، باستخدام خط أنابيب الصور كهيئة استجابة صالحة،
00:03:33وتكوين تنسيق احتياطي إذا كان نظام تشغيل معين لا يدعم تنسيقاً ما.
00:03:37إذن هل يستحق هذا الاستخدام؟ حسناً، إذا كنت تستخدم BUN بالفعل، فنعم، هذا لا يحتاج إلى تفكير.
00:03:41ولكن إذا كنت تستخدم Node، فإن Sharp تعمل بشكل جيد جداً وتم اختبارها ميدانياً،
00:03:45ولا داعي للتغيير إلى بيئة تشغيل مختلفة تماماً لمجرد معالجة الصور.
00:03:49أتذكر عندما قلت أن هناك سبباً أكبر لإضافة BUN لهذا؟ حسناً، إذا نظرت إلى ما كان يفعله BUN
00:03:54على مدار العام الماضي، SQLite مدمج، S3، Postgres، والآن الصور، وهذا أساساً
00:03:59كل ما تحتاجه لتطبيق متكامل، باستثناء ربما المصادقة والبريد الإلكتروني. لكن هذا يجعلني أتساءل،
00:04:04هل يحاول BUN بناء إطار عمل يشبه Laravel أو Rails لـ JavaScript، ولكن على مستوى بيئة التشغيل؟ إذا كانوا كذلك،
00:04:11فإن الشيء التالي الذي سيعملون عليه هو المصادقة. وإذا كان الأمر كذلك، فتذكر، لقد سمعت ذلك هنا أولاً.
00:04:15ولكن لسوء الحظ، في الوقت الحاضر، لا يمكنك الحديث عن BUN دون ذكر إعادة الكتابة الضخمة من Zig إلى Rust
00:04:20والتي، نأمل أن تخرج في الإصدار التالي. لنأمل أن يسير كل شيء على ما يرام.
00:04:25وبالحديث عن Zig، إذا كنت تريد معرفة المزيد عن لغة Vercel المسماة Language Zero التي تشبه Zig،
00:04:29ولكنها ليست Zig، وهي مصممة لوكلاء الذكاء الاصطناعي، تحقق من هذا الفيديو من جيمس.