مقدمة إلى WebAssembly

اكتشف سبب كون WebAssembly جزءًا مهمًا جدًا من النظام الأساسي للويب في المستقبل

WebAssemblyهو موضوع رائع جدا في الوقت الحاضر.

WebAssembly هو تنسيق ثنائي جديد منخفض المستوى للويب. إنها ليست لغة برمجة ستكتبها ، ولكن بدلاً من ذلك ، سيتم تجميع لغات أخرى ذات مستوى أعلى (في الوقت الحالي C و Rust و C ++) إلى WebAssembly للحصول على فرصة للتشغيل في المتصفح.

إنه مصمم ليكون سريعًا وآمنًا للذاكرة ومنفتحًا.

لن تكتب أبدًا تعليمات برمجية في WebAssembly (يُطلق عليه أيضًا WASM) ولكن بدلاً من ذلك ، يعد WebAssembly التنسيق ذو المستوى المنخفض الذي يتم تجميع اللغات الأخرى إليه.

إنها اللغة الثانية التي يمكن فهمها من قبل متصفحات الويب ، بعد مقدمة JavaScript في التسعينيات.

WebAssembly هو معيار تم تطويره بواسطةمجموعة عمل W3C WebAssembly. اليوم تدعمها جميع المتصفحات الحديثة (Chrome و Firefox و Safari و Edge ومتصفحات الجوال) و Node.js.

هل قلت Node.js؟ نعم ، لأن WebAssembly ولد في المتصفح ، لكن Node يدعمه بالفعل منذ الإصدار 8 ويمكنك إنشاء أجزاء من تطبيق Node.js بأي لغة أخرى غير JavaScript.

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

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

يتفاعل كود JavaScript و WebAssembly لتوفير تجارب مستخدم رائعة على الويب.

إنه مفيد للويب ، حيث يمكننا استخدام المرونة وسهولة استخدام JavaScript وإكمالها بقوة وأداء WebAssembly.

أمان

يتم تشغيل رمز WebAssembly في بيئة وضع الحماية ، مع نفس سياسة الأمان التي تتبعها JavaScript ، وسيضمن المتصفح سياسات نفس الأصل والأذونات.

إذا كنت مهتمًا بالموضوع ، فإنني أوصي بقراءتهالذاكرة في WebAssemblyو المستندات الأمان الخاصة بـ webassembly.org.

أداء

تم تصميم WebAssembly للسرعة. هدفها الرئيسي هو أن تكون سريعًا حقًا. إنها لغة مجمعة ، مما يعني أنه سيتم تحويل البرامج إلى ثنائيات قبل تنفيذها.

يمكن أن تصل إلى أداء يمكن أن يتطابق بشكل وثيق مع اللغات المترجمة محليًا مثل C.

بالمقارنة مع JavaScript ، وهي لغة برمجة ديناميكية ومترجمة ، لا يمكن مقارنة السرعة. سيتفوق WebAssembly دائمًا على أداء JavaScript ، لأنه عند تنفيذ JavaScript ، يجب على المستعرض تفسير التعليمات وإجراء أي تحسين يمكنه القيام به بسرعة.

من يستخدم WebAssembly اليوم؟

هل WebAssembly جاهز للاستخدام؟ نعم! العديد من الشركات تستخدمه بالفعل لتحسين منتجاتها على الويب.

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

تم إنشاء التطبيق باستخدام React ، ولكن الجزء الرئيسي من التطبيق ، محرر الرسومات ، هو تطبيق C ++ تم تجميعه إلى WebAssembly ، ويتم تقديمه في Canvas باستخدام WebGL.

في أوائل عام 2018 ، أصدر AutoCAD منتج التصميم الشهير الذي يعمل داخل تطبيق ويب ، باستخدام WebAssembly لتقديم محرره المعقد ، والذي تم إنشاؤه باستخدام C ++ (وتم ترحيله من قاعدة رموز عميل سطح المكتب)

لم يعد الويب تقنية مقيدة لتلك المنتجات التي تتطلب قطعة عالية الأداء في جوهرها.

كيف يمكنك استخدام WebAssembly؟

يمكن نقل تطبيقات C و C ++ إلى WebAssembly باستخدامإمسكربتن، سلسلة أدوات يمكنها ترجمة التعليمات البرمجية الخاصة بك إلى ملفين:

  • أ.wasmملف
  • أ.jsملف

أين ال.wasmيحتوي الملف على كود WASM الفعلي ، و.jsيحتوي الملف على الغراء الذي سيسمح لكود JavaScript بتشغيل WASM.

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

يختلف كود Rust ، حيث يمكن تجميعه مباشرة إلى WebAssembly باعتباره هدف الإخراج الخاص به ، وهناك ملفhttps://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm.

ما الذي سيحدث لـ WebAssembly في المستقبل؟ كيف تتطور؟

WebAssembly الآن في الإصدار 1.0. يدعم حاليًا رسميًا 3 لغات فقط (C ، Rust ، C ++) ولكن هناك العديد من اللغات الأخرى القادمة. لا يمكن حاليًا تجميع Go و Java و C # (رسميًا) إلى WebAssembly لأنه لا يوجد دعم لجمع البيانات المهملة حتى الآن.

عند إجراء أي استدعاء لواجهات برمجة تطبيقات المتصفح باستخدام WebAssembly ، تحتاج حاليًا إلى التفاعل مع JavaScript أولاً. هناك عمل جاري لجعل WebAssembly مواطناً من الدرجة الأولى في المتصفح وجعله قادرًا على استدعاء DOM أو Web Workers أو واجهات برمجة تطبيقات المتصفح الأخرى مباشرةً.

بالإضافة إلى ذلك ، هناك عمل مستمر حتى نتمكن من جعل كود JavaScript قادرًا على تحميل وحدات WebAssembly ، من خلالوحدات ESتخصيص.

تثبيت Emscripten

قم بتثبيت Emscripten عن طريق استنساخ ملفemsdkجيثب ريبو:

git clone https://github.com/juj/emsdk.git

من ثم

dev cd emsdk

الآن ، تأكد من تثبيت إصدار محدث من Python. كان لدي 2.7.10 وهذا تسبب في خطأ TLS.

اضطررت إلى تنزيل الإصدار الجديد (2.7.15) منhttps://www.python.org/getit/قم بتثبيته ثم قم بتشغيل ملفInstall Certificates.commandالبرنامج الذي يأتي مع التثبيت.

ثم

./emsdk install latest

دعها تقوم بتنزيل الحزم وتثبيتها ، ثم تشغيلها

./emsdk activate latest

وأضف المسارات إلى صدفتك عن طريق تشغيل:

source ./emsdk_env.sh

تجميع برنامج C إلى WebAssembly

سأقوم بإنشاء ملف بسيطجالبرنامج وأريده أن ينفذ داخل المتصفح.

هذا برنامج "Hello World" قياسي جدًا:

#include <stdio.h>

int main(int argc, char ** argv) {
  printf("Hello World\n");
}

يمكنك تجميعها باستخدام:

gcc -o test test.c

و الركض./testستطبع "Hello World" على وحدة التحكم.

لنقم بتجميع هذا البرنامج باستخدام Emscripten لتشغيله في المتصفح:

emcc test.c -s WASM=1 -o test.html

قدم لنا Emscripten صفحة html تحتوي بالفعل على برنامج WebAssembly الذي تم تجميعه ، وهو جاهز للتشغيل. تحتاج إلى فتحه من خادم ويب ، وليس من نظام الملفات المحلي ، لذا ابدأ خادم ويب محلي ، على سبيل المثالhttp-serverحزمة npm العالمية (قم بتثبيتها باستخدامnpm install -g http-serverإذا لم يكن مثبتًا لديك بالفعل). ها هو:

The program running in the browser

كما ترى ، تم تشغيل البرنامج وطباعته "Hello World" في وحدة التحكم.

كانت هذه إحدى طرق تشغيل برنامج تم تجميعه في WebAssembly. خيار آخر هو جعل البرنامج يعرض وظيفة ستقوم باستدعائها من JavaScript.

قم باستدعاء وظيفة WebAssembly من JavaScript

دعنا نعدل Hello World التي تم تعريفها مسبقًا.

تشملemscriptenرؤوس:

#include <emscripten/emscripten.h>

وتعريفhelloوظيفة:

int EMSCRIPTEN_KEEPALIVE hello(int argc, char ** argv) {
  printf("Hello!\n");
  return 8;
}

EMSCRIPTEN_KEEPALIVEضروري للحفاظ على الوظيفة من التجريد تلقائيًا إذا لم يتم استدعاؤها منmain()أو أي كود آخر يتم تنفيذه عند بدء التشغيل (لأن المترجم سيعمل بطريقة أخرى على تحسين الكود المترجم الناتج وإزالة الوظائف غير المستخدمة - لكننا سنستدعى هذا ديناميكيًا من JS ، والمترجم يعرف ذلك الآن).

This little function prints Hello! and returns the number 8.

الآن إذا قمنا بالتجميع مرة أخرى باستخدامemcc:

emcc test.c -s WASM=1 -o test.html -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

هذه المرة أضفنا ملفEXTRA_EXPORTED_RUNTIME_METHODSعلم لإخبار المترجم بترك ملفccallوcwrapوظائف على كائن الوحدة النمطية ، والتي سنستخدمها في JavaScript.

الآن يمكننا تشغيل خادم الويب مرة أخرى وبمجرد أن تكون الصفحة مفتوحةModule.ccall('hello', 'number', null, null)في وحدة التحكم ، وستتم طباعة "Hello!" والعودة 8:

Calling from JS

المعلمات الأربعة التيModule.ccallيأخذ اسم دالة C ونوع الإرجاع وأنواع الوسائط (مصفوفة) والوسيطات (أيضًا مصفوفة).

إذا قبلت وظيفتنا سلسلتين كمعلمات ، على سبيل المثال ، فسنسميها على النحو التالي:

Module.ccall('hello', 'number', ['string', 'string'], ['hello', 'world'])

الأنواع التي يمكننا استخدامها هيnullوstringوnumberوarrayوboolean.

يمكننا أيضًا إنشاء غلاف JavaScript لملفhelloتعمل عن طريق استخدامModule.cwrapوظيفة ، حتى نتمكن من استدعاء الوظيفة عدد المرات التي نريدها باستخدام نظير JS:

const hello = Module.cwrap('hello', number, null, null)

Using cwrap

ها هي المستندات الرسمية لـccallوcwrap.


المزيد من دروس js: