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، وهي مصممة لوكلاء الذكاء الاصطناعي، تحقق من هذا الفيديو من جيمس.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video