ما WebAssembly وأين يأتي دور React؟

WebAssembly (WASM) هو تنسيق تعليمات ثنائي مصمم للعمل في متصفحات الويب بسرعة قريبة من السرعة الأصلية. وعلى خلاف JavaScript، وهي لغة مفسرة عالية المستوى، فإن WASM عبارة عن bytecode منخفض المستوى يترجمه محرك JavaScript في المتصفح وينفذه بأقل قدر من الحمل الإضافي، محققًا أداءً يقل عن الشيفرة الأصلية بنسبة تتراوح بين 10 و20%.

WebAssembly ليست لغة برمجة تكتبون بها مباشرة، بل هي هدف للترجمة البرمجية. يمكن ترجمة لغات مثل Rust وC وC++ وGo إلى bytecode الخاص بـ WASM باستخدام سلاسل أدواتها. تكتبون الشيفرة بلغة من لغات الأنظمة، ثم تترجمونها إلى WASM، وترسلون الوحدة الثنائية إلى المتصفح.

يعمل WASM داخل آلة افتراضية معزولة في المتصفح، مع خضوعه لقيود الأمان نفسها المفروضة على JavaScript. ولا يمكنه الوصول مباشرةً إلى DOM أو الشبكة أو نظام الملفات؛ إذ تمر كل هذه العمليات عبر روابط JavaScript. وتضمن هذه العزلة أن الشيفرة، حتى مع سرعتها الأصلية، لا تستطيع تجاوز سياسات أمان المتصفح.

صُمم WASM وJavaScript للعمل معًا، لا ليحل أحدهما محل الآخر. يتفوق JavaScript في تنسيق العمليات، ومعالجة DOM، والتعامل مع الأحداث، واستدعاء واجهات برمجة المتصفح. أما WASM فيتفوق في الخوارزميات كثيفة الحسابات. والنمط القياسي هو أن ينسّق JavaScript التطبيق، بينما يتولى WASM الحسابات الثقيلة.

يستخدم WASM نموذج ذاكرة خطية: كتلة متصلة من البايتات ممثلة في JavaScript بواسطة ArrayBuffer. ويمكن لكل من WASM وJavaScript قراءة هذه الذاكرة المشتركة والكتابة فيها. ويجري تمرير البيانات الكبيرة بين JavaScript وWASM عبر الكتابة إلى هذا المخزن المشترك والقراءة منه، مما يتجنب تكلفة التسلسل الباهظة.

يتولى React طبقة واجهة المستخدم، بما في ذلك العرض وإدارة الحالة وتفاعلات المستخدم. أما WASM فيتولى الحسابات التي لا يستطيع React تنفيذها بكفاءة في JavaScript. يستدعي React دوال WASM من معالجات الأحداث أو التأثيرات، ويتلقى النتائج، ثم يحدّث الحالة لتحفيز إعادة العرض. React هو طبقة العرض، وWASM هو محرك الحساب.

يُعد WASM مناسبًا لتطبيقات React التي تحتاج إلى: معالجة الصور أو الفيديو (معالجة البكسلات)، وتوليف الصوت ومعالجته، والعمليات التشفيرية (التجزئة والتشفير)، ومحاكاة الفيزياء، ومنطق الألعاب، والضغط وفك الضغط، والبحث النصي في البيانات الكبيرة. وهذه كلها مهام يكون فيها أداء JavaScript غير كافٍ بصورة ملحوظة.

يحقق WASM سرعة قريبة من السرعة الأصلية في الحسابات المرتبطة بوحدة المعالجة المركزية، لأنه يُترجم إلى شيفرة آلة بواسطة مُجمِّع JIT في المتصفح، مع حاجة ضئيلة جدًا إلى أعمال التحسين. ومع ذلك، فإن عبور الحد الفاصل بين JavaScript وWASM، سواء باستدعاء دالة WASM من JS أو العكس، ينطوي على حمل إضافي. قلّلوا مرات عبور هذا الحد عبر تجميع عمليات البيانات داخل WASM.

يعالج كل من WASM وWeb Workers مشكلات الأداء. ينقل Web Worker حسابات JavaScript بعيدًا عن الخيط الرئيسي، بينما يجعل WASM الحسابات أسرع على أي خيط يعمل عليه. والنمط الأمثل هو استخدامهما معًا: شغّلوا حسابات WASM داخل Web Worker، بحيث يبقى خيط React الرئيسي متاحًا لتحديثات واجهة المستخدم بينما يعمل WASM بسرعة قريبة من السرعة الأصلية.

تدعم جميع المتصفحات الحديثة (Chrome وFirefox وSafari وEdge) WebAssembly منذ عام 2017. ويحظى الإصدار الأساسي من مواصفة WASM بدعم شبه شامل. أما الامتدادات الأحدث، مثل الخيوط مع SharedArrayBuffer، وSIMD للعمليات المتجهية، وجمع البيانات المهملة للغات المُدارة، فتختلف مستويات دعمها، لكنها تُوحَّد معاييرها وتُطرح تدريجيًا.

تنمو منظومة WASM بسرعة كبيرة. ومن الاستخدامات المهمة في المنتجات: Figma (محرك العرض)، وGoogle Earth (الكرة الأرضية ثلاثية الأبعاد)، وAdobe Photoshop Web (معالجة الصور)، وAutoCAD Web (عرض الرسومات الهندسية)، والعديد من مكتبات التشفير. وتستخدم تطبيقات React عادةً WASM للأجزاء كثيفة الحسابات من هذه الفئات نفسها.

كيف يُنفَّذ WebAssembly في المتصفح؟

WebAssembly هو هدف ثنائي للترجمة البرمجية، وليس لغة، للغات Rust وC وC++ وGo، ويعمل بسرعة قريبة من السرعة الأصلية داخل آلة افتراضية معزولة في المتصفح. يتكامل WASM وJavaScript؛ إذ ينسّق JS العمليات، بينما ينفذ WASM الحسابات. ويتمثل دور React في طبقة واجهة المستخدم التي تستدعي WASM لإجراء الحسابات الثقيلة. استخدموا WASM لمعالجة الصور والتشفير والفيزياء والصوت والبحث في البيانات الكبيرة. وقلّلوا عبور الحد الفاصل بين JS وWASM عبر تجميع العمليات داخل WASM.