العمل مع WebAssembly وC#: من الألف إلى الياء في .NET

مقدمة: لماذا يغير WebAssembly قواعد اللعبة لمطوري C#

لفترة طويلة، كان تطوير الويب حكراً على JavaScript. لكن مع ظهور WebAssembly (Wasm) تغير الوضع جذرياً. الآن يمكن لمطوري C# ترجمة كودهم إلى تنسيق ثنائي يُنفذ في المتصفح بسرعة تقترب من السرعة الأصلية. هذا يفتح إمكانيات هائلة: من نقل الخوارزميات الثقيلة إلى إنشاء تطبيقات SPA كاملة باستخدام Blazor.

في هذه المقالة، سنشرح كيفية عمل WebAssembly مع C# و.NET، ونستعرض الأدوات الرئيسية (Blazor وWasmtime وMono) ونكتب أمثلة عملية. في النهاية، ستتمكن من تشغيل كود C# بنفسك في المتصفح أو على الخادم باستخدام Wasm.

أساسيات WebAssembly وتكامله مع C#

ما هو WebAssembly بلغة بسيطة

WebAssembly هو كود بايت منخفض المستوى يُنفذ في آلة افتراضية داخل المتصفح. لا يحل محل JavaScript، بل يعمل معه. المزايا الرئيسية:

\n
• الأداء: الكود الثنائي يُنفذ أسرع بنسبة 30-50% من JS.
\n
• الأمان: بيئة تنفيذ معزولة.
\n
• قابلية النقل: نفس ملف .wasm يعمل في Chrome وFirefox وSafari وEdge.
\n

بالنسبة لـ C#، تم تنفيذ نظام WebAssembly البيئي من خلال عدة مشاريع: Blazor WebAssembly (إطار عمل لواجهات المستخدم)، Mono Wasm Runtime (ينفذ كود IL)، وWasmtime (لسيناريوهات الخادم).

كيف تُترجم C# إلى WebAssembly

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

\n
1. تكتب كوداً بلغة C#.
\n
2. المترجم Roslyn يحوله إلى IL (لغة وسيطة).
\n
3. Mono Runtime (أو NativeAOT) يترجم IL إلى WebAssembly.
\n
4. المتصفح يحمل ملف .wasm وينفذه.
\n

هام: يوجد نهجان — التفسير عبر Mono (أبطأ لكنه أبسط) وترجمة AOT (أسرع لكنها تتطلب إعدادات).

عملياً: ثلاث طرق لتشغيل C# في WebAssembly

1. Blazor WebAssembly — لواجهات الويب

Blazor يتيح كتابة الجزء العميل بلغة C# بدلاً من JavaScript. يتم ترجمة كود واجهة المستخدم ومنطق الأعمال بالكامل إلى Wasm.

مثال لمكون بسيط:

@page "/counter"\n<h3>العداد: @currentCount</h3>\n<button @onclick="IncrementCount">+1</button>\n\n@code {\n    private int currentCount = 0;\n\n    private void IncrementCount()\n    {\n        currentCount++;\n    }\n}

هذا الكود يُنفذ في المتصفح. Blazor يقوم تلقائياً بتحميل Mono Wasm Runtime وملف .wasm الخاص بك. للبدء، أنشئ مشروعاً:

dotnet new blazorwasm -o MyBlazorApp\ncd MyBlazorApp\ndotnet run

النتيجة: تطبيق SPA كامل بدون سطر واحد من JavaScript.

2. الترجمة المباشرة إلى .wasm باستخدام NativeAOT

إذا كنت بحاجة لتنفيذ وظيفة محددة (وليس واجهة مستخدم)، استخدم NativeAOT — فهو يترجم C# مباشرة إلى WebAssembly أصلي بدون Mono Runtime.

الخطوات:

\n
1. قم بتثبيت SDK .NET 8+ و workload: dotnet workload install wasm-tools
\n
2. أنشئ تطبيق وحدة تحكم:
\n

dotnet new console -n WasmDemo\ncd WasmDemo

\n
3. عدّل ملف .csproj بإضافة دعم Wasm:
\n

<PropertyGroup>\n    <OutputType>Exe</OutputType>\n    <TargetFramework>net8.0</TargetFramework>\n    <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>\n    <UseNativeAot>true</UseNativeAot>\n</PropertyGroup>

\n
4. اكتب الكود:
\n

using System;\n\npublic class Program\n{\n    public static void Main()\n    {\n