WebAssembly للمبتدئين - الجزء 2: الأهداف والمفاهيم الأساسية وحالات الاستخدام

هل تساءلت عن المفاهيم الأساسية لـ WASM وحالات الاستخدام؟ إذا لم يكن الأمر كذلك ، فقد قمنا بتغطيتك.

WebAssembly (WASM) هي لغة جديدة منخفضة المستوى تتيح لك إلغاء حظر الأداء الشبيه بالأصالة على الويب.

في WebAssembly للمبتدئين - الجزء الأول ، قدمنا ​​WASM من منظور المبتدئين من خلال تغطية تعريفه وقيوده. بالإضافة إلى ذلك ، راجعنا ميزات WebAssembly وخريطة طريق WASM وكيف يعمل JavaScript مع WebAssembly وليس ضده.

سيستكشف هذا المنشور WebAssembly من خلال مناقشة أهداف WASM والمفاهيم الأساسية وحالات الاستخدام. سنلقي نظرة أيضًا على بعض مشاريعها المثيرة.

هيا بنا نبدأ.

أهداف WebAssembly

لفهم المفاهيم الأساسية لـ WebAssembly ، نحتاج أولاً إلى إلقاء نظرة على أهدافه. تشمل هذه الأهداف:

• القدرة على الاستفادة من الأجهزة المتاحة باستخدام التنسيق الثنائي لوقت التحميل والحجم الفعال كهدف تجميع. بكلمات بسيطة ، يستخدم WASM شجرة بناء الجملة المجردة (AST) بتنسيق ثنائي ، مما يدعم التجميع والتنفيذ بالسرعة الأصلية. باستخدام هذا النهج ، يمكن لـ WASM الأداء على أجهزة مختلفة ، بما في ذلك إنترنت الأشياء والويب والجوال.
• هدف WASM ليس تغيير أو تغيير منصة الويب الحالية. باستخدام هذا الأسلوب ، يمكن أن يتكامل WebAssembly بشكل جيد مع الويب الحالي والسابق. كما أنه يمكّن WebAssembly من العمل بسلاسة مع JavaScript ، بما في ذلك التنفيذ جنبًا إلى جنب أو إجراء مكالمات متزامنة من JavaScript.
• للعمل بسلاسة مع سياسات أمان الأذونات ونفس الأصل.
• تأكد من أن المطورين يمكنهم تصميم حلولهم لدعم حفلات الزفاف بدون متصفح.
• أخيرًا ، منح المطورين الأدوات للعمل بكفاءة مع شفرة مصدر WebAssembly من خلال توفير تنسيق نص يمكن تحريره بواسطة الإنسان.

مفاهيم WebAssembly الأساسية

داخل الغطاء ، يتبع WebAssembly الخطوات التالية:

• في البداية ، تحتاج إلى كتابة التعليمات البرمجية بلغة مكتوبة بشكل ثابت بأنواع محددة.
• بمجرد الانتهاء من ذلك ، يمكنك إنشاء وحدة WASM مجمعة مسبقًا وإدخال الكود في مترجم المحرك.
• تضمن الخطوة أعلاه أن WASM يتخطى التحليل ويجعل الكود جاهزًا للعرض على متصفح الويب.

تتضمن المفاهيم الأساسية وراء WebAssembly الذي يعمل في مستعرض الويب ما يلي:

• الذاكرة: تتم إدارة الذاكرة في WebAssembly وكتابتها من خلال إرشادات الوصول إلى الذاكرة منخفضة المستوى. من الناحية الفنية ، هو ArrayBuffer يمكن تغيير حجمه ويحتوي على مجموعة من وحدات بايت الذاكرة.
• الوحدة النمطية: الوحدة النمطية في WebAssembly هي رمز كمبيوتر قابل للتنفيذ مجمع. نظرًا لشكله عديم الحالة ، يقوم مستعرض الويب بتجميع الوحدة النمطية ومشاركتها بين Windows و Workers. أيضًا ، تخزن الوحدة وتعلن عن الواردات والصادرات ، بالإضافة إلى احتواء الوظائف والجداول والأنواع والكرة الأرضية والذاكرة.
• الجدول: يتكون الجدول من جميع المراجع والوظائف باستخدام مصفوفة مكتوبة يمكن تغيير حجمها. هذا يزيل الحاجة إلى تخزين البايت الخام في الذاكرة.
• المثيل: في WASM ، المثيل عبارة عن وحدة نمطية أثناء وقت التشغيل ، مع إقران جميع الحالات. تتضمن هذه الحالات الجدول والذاكرة ومجموعات القيم المستوردة الأخرى.

بصفتك مطور ويب ، يمكنك استخدام JavaScript API لاستدعاء وتعريف الوحدات النمطية والجداول والمثيلات والجداول. علاوة على ذلك ، يمكنك استخدام JavaScript لاستدعاء صادرات WASM بشكل متزامن ضمن وظائف JavaScript. لذلك ، يعمل JavaScript جيدًا مع WebAssembly حيث يمكنك استخدام WASM لكتابة تطبيقات عالية الأداء في مستعرض الويب.

كائنات WASM

عند العمل مع WebAssembly ، يجب عليك تتبع ثمانية كائنات WASM. تشمل هذه الأشياء:

• WebAssembly.Global - الكائن العام هو مثيل متغير عام. يمكن الوصول إليه عن طريق WebAssembly.Module و JavaScript.
• WebAssembly.Module - هنا ، يحتوي كائن الوحدة النمطية على رمز WASM عديم الحالة. تم تجميع الكود مسبقًا.
• WebAssemly.Instance - WebAssembly.Instance هو مثيل قابل للتنفيذ وذو حالة من WebAssembly.Module.
• WebAssembly.Table - يحتوي كائن الجدول على مراجع وظيفية ويعمل كمجمل JavaScript.
• WebAssembly.CompileError - يحتوي الكائن CompileError على جميع الأخطاء أثناء التحقق من الصحة وفك التشفير.
• WebAssembly.RuntimeError - هنا ، يسرد كائن RuntimeError كافة أخطاء وقت التشغيل.
• WebAssembly.LinkError - يحتوي الكائن LinkError على الأخطاء التي تحدث أثناء إنشاء مثيل الوحدة النمطية.

مشاريع وقضايا استخدام WASM

نحن نعلم بالفعل أن WebAssembly يقدم أداءً مشابهًا للأداء الأصلي في متصفح الويب. ومع ذلك ، لكي تفهم حقًا المكان الذي يمكنك استخدامه فيه ، يجب أن تنظر في حالات استخدامه. دعنا نسرد أدناه بعض حالات استخدام WASM.

تمتد حالات استخدام WebAssembly داخل المتصفح وخارجه. على سبيل المثال ، إذا كنت تريد استخدام WASM في متصفح ، فيمكنك القيام بالعديد من الأشياء ، بما في ذلك:

• تحرير الفيديو أو الصوت ، مثل مشروع ffmpegwasm.
• ألعاب الفيديو في متصفح الويب ، مثل هذه الألعاب عالية الأداء.
• التصور العلمي والمحاكاة
• محاكاة / محاكاة النظام الأساسي مثل DOSBox و MAME وما إلى ذلك.
• التشفير
• سطح المكتب البعيد
• أدوات المطور

استخدم حالات

من وجهة نظر عامة ، تتضمن حالات الاستخدام المقنعة لـ WebAssembly

• يمكن أن تستفيد القدرة على كتابة تعليمات برمجية أسرع من الأجهزة الأساسية.
• علاوة على ذلك ، يمكنك أيضًا إجراء ضغط من جانب العميل ، مما يؤدي إلى تحسين وقت التحميل وتوفير النطاق الترددي. لذلك ، يمكنك استخدام وحدة المعالجة المركزية الخاصة بالعميل أو الأجهزة الأساسية للقيام بالضغط وإلغاء الضغط ، ثم استخدام موارد الخادم.
• بالإضافة إلى ذلك ، يمكنك استخدام لغات برمجة مختلفة لكتابة تعليمات برمجية للويب بخلاف استخدام JavaScript فقط. على سبيل المثال ، يمكنك استخدام Rust و C و C ++ لكتابة رمز عالي الأداء لجوانب معينة من تطبيقات الويب الخاصة بك.

المشاريع

إذا انتقلنا إلى أمثلة من العالم الحقيقي ، فإن المشاريع التالية تستحق الذكر.

• قامت Figma بتحسين أداء تطبيق الويب الخاص بها باستخدام WebAssembly. لقد قللوا من وقت التحميل أثناء تهيئة التطبيق ، وعرض التصميم بالكامل ، وحتى تنزيل ملف التصميم. كما ناقشنا سابقًا ، يعد WebAssembly أيضًا مفيدًا للضغط. نفذت Figma WASM لتحسين حجم التنزيل وتقليصه بشكل كبير.
• Pyodide : مشروع آخر مثير لـ WASM هو مشروع Pyodide ، الذي تم إصداره من Mozilla. إنه يمكّن العلماء من تجميع مكدس Python العلمي إلى WebAssembly ، بما في ذلك NumPy و SciPy و Scikit-Learn وما إلى ذلك إلى المتصفح. يوفر تحويلًا شفافًا للكائن بين Python و JavaScript. أخيرًا ، يسمح أيضًا للمطورين باستخدام واجهات برمجة تطبيقات الويب باستخدام Python.
• Brazor WebAssembly : يتيح إطار عمل Brazor WebAssembly للمطورين إنشاء صفحة واحدة وتطبيقات ويب تفاعلية من جانب العميل باستخدام .NET. يمكنك استضافة هذه التطبيقات إلى المستعرض باستخدام وقت تشغيل .NET المستند إلى WebAssembly. هنا ، بصفتك مطورًا ، يمكنك الوصول إلى وظائف المتصفح في كود .NET الخاص بك بمساعدة واجهات برمجة تطبيقات JavaScript الخاصة بـ WebAssembly.

تستخدم العديد من المشاريع المعروفة والقيمة WebAssembly. هذه هي Binaryen و Cheerp و Forest و Grain وغيرها.

افكار اخيرة

WebAssembly ليس صديقًا للمبتدئين تمامًا. ومع ذلك ، من خلال دراسة حالات الاستخدام والمفاهيم الأساسية ، يمكنك فهم قدرتها بوضوح.

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