WebAssembly وC++: كيفية تشغيل كود على PythonLib في المتصفح

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

مقدمة: لماذا أصبحت C++ فجأة تقنية ويب؟



إذا كنت تكتب بلغة C++ وتتصفح PythonLib، فمن المحتمل أنك معتاد على أن كودك يعيش في مكان عميق - في الجزء الخادم، أو في نواة محرك الألعاب، أو في الحسابات عالية التحميل. كانت الواجهة الأمامية للويب تقليديًا مجالًا لـ JavaScript وHTML وCSS. لكن في السنوات الخمس الماضية، تغير كل شيء.



تخيل: لقد كتبت خوارزمية معقدة لمعالجة الصور أو محاكاة فيزياء بلغة C++. في السابق، لعرض ذلك في المتصفح، كان عليك إعادة كتابة كل شيء بلغة JavaScript - مما يفقدك الأداء والوقت. الآن هناك WebAssembly (غالبًا ما يُكتب ببساطة wasm). إنها تقنية تسمح بتشغيل كود C++ المُجمّع مباشرة في المتصفح، بسرعة قريبة من السرعة الأصلية.



في هذه المقالة، سنفهم ما هو WebAssembly لمطور C++، ولماذا هو مهم لمشروع PythonLib، وسنكتب مثالًا حقيقيًا لتجميع C++ إلى wasm. بدون حشو، فقط كود وممارسة.



ما هو WebAssembly بكلمات بسيطة



WebAssembly هو تنسيق ثنائي منخفض المستوى للتعليمات. يمكن تخيله كـ "لغة تجميع للويب". المتصفحات (Chrome، Firefox، Safari، Edge) قادرة على تنفيذ ملفات .wasm بسرعة تقريبًا مثل كود الآلة الأصلي.



الفرق الرئيسي عن JavaScript: wasm ليس لغة برمجة، بل هدف تجميع. أنت تكتب بلغة C++ أو C أو Rust أو Go، وتجمّع إلى .wasm، ثم يقوم المتصفح بتشغيله.



كيف يعمل هذا في سلسلة C++ → WebAssembly



تبدو العملية كالتالي:

  • تكتب كودًا بلغة C++ (مثل دالة حساب أرقام فيبوناتشي أو وحدة رياضية معقدة).
  • تستخدم المترجم Emscripten (المبني على LLVM/Clang) للتجميع إلى .wasm + غلاف JavaScript.
  • تدمج الملفات الناتجة في صفحة HTML.
  • يفتح المستخدم الصفحة - ويتم تنفيذ كود C++ في متصفحه.


بالنسبة لـ PythonLib، هذا يفتح إمكانيات مثيرة: على سبيل المثال، يمكنك كتابة مكتبة حسابية بلغة C++، وتجميعها إلى wasm، واستخدامها في الأمثلة التعليمية مباشرة على الموقع، دون أن يطلب من المستخدم تثبيت مترجم.



لماذا يحتاج مطور C++ إلى WebAssembly (وما علاقة PythonLib)



يعتقد الكثيرون أن WebAssembly مطلوب فقط للألعاب أو الرسومات الثقيلة. في الواقع، هناك سيناريوهات أكثر بكثير. إليك الأسباب الرئيسية التي تجعلك تتعرف على wasm على PythonLib:



  • السرعة. أجزاء الكود الحرجة بلغة C++ تعمل أسرع بمقدار 2-10 مرات من نظائرها في JavaScript النقية. إذا كنت تكتب خوارزميات رياضية أو تشفيرية - wasm هو خيارك.
  • إعادة استخدام الكود. لا حاجة لإعادة كتابة مكتبات C++ القديمة للويب. قم بتجميعها وانتهى الأمر.
  • الأمان. يتم تنفيذ Wasm في صندوق رمل معزول للمتصفح. هذا أكثر أمانًا من تشغيل إضافة أصلية.
  • الجانب التعليمي. في PythonLib، يمكن عرض أمثلة حية لكود C++ تعمل مباشرة في المتصفح - يرى القارئ ليس فقط بناء الجملة، ولكن أيضًا نتيجة التنفيذ.


نقطة مهمة أخرى: WebAssembly لا يستبدل JavaScript، بل يكمله. تبقى JS لإدارة DOM والأحداث والواجهة، بينما تتولى C++ الحسابات.



تطبيق عملي: تجميع C++ إلى WebAssembly



لنكتب برنامجًا بسيطًا بلغة C++، ونُجمّعه إلى wasm، ونشغله في المتصفح. لهذا سنحتاج إلى Emscripten SDK.



الخطوة 1. تثبيت Emscripten



إذا كنت تعمل على Linux أو macOS، يتم التثبيت بأمر واحد (لمزيد من التفاصيل على emscripten.org):



git clone https://github.com/emscripten-core/emsdk.gitcd emsdk./emsdk install latest./emsdk activate latestsource ./emsdk_env.sh


على Win

المدونات

توصيات الكتب