دمج WebAssembly وC#: إنشاء تطبيقات ويب عالية الأداء

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

مقدمة إلى WebAssembly وC#

WebAssembly (WASM) هو تنسيق تعليمات ثنائي منخفض المستوى يسمح بتشغيل الكود المكتوب بلغات برمجة مختلفة في متصفح الويب بأداء قريب من الأداء الأصلي. بفضل دعم .NET وC#، يمكن للمطورين نقل المهام الحسابية المعقدة والمكتبات وحتى التطبيقات الكاملة إلى جانب العميل باستخدام بناء الجملة والنظام البيئي المألوفين لـ C#.

في هذه المقالة، سننظر في كيفية عمل تكامل WebAssembly وC# (.NET)، وما هي الأدوات الموجودة لذلك، وسنقدم أمثلة عملية على الكود. ستكون المقالة مفيدة لكل من المطورين المبتدئين وذوي الخبرة الذين يرغبون في توسيع إمكانيات مشاريعهم على الويب.

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

تعتمد عملية ترجمة C# إلى WebAssembly على استخدام Mono أو .NET runtime، والتي تم تكييفها للعمل في بيئة WASM. الأداة الرئيسية لذلك هي Blazor WebAssembly، وهي جزء من منصة .NET.

عند إنشاء تطبيق Blazor WebAssembly، يقوم المترجم بتحويل كود C# الخاص بك إلى لغة وسيطة (IL)، ثم يتم تحميل .NET runtime، المُجمَّع في WebAssembly، في المتصفح مع تطبيقك. يتم تنفيذ كود IL بالكامل بواسطة هذا runtime مباشرة في المتصفح.

مزايا هذا النهج:

الأداء — يعمل WebAssembly بسرعة تقريبية للكود الأصلي، وهو أمر مهم بشكل خاص للمهام كثيفة الاستخدام للموارد (معالجة الصور، التشفير، الحسابات الرياضية).
الأمان — يتم تنفيذ الكود في بيئة معزولة للمتصفح.
قابلية النقل — يمكن لنفس كود C# العمل على الخادم وعلى العميل.

مثال عملي: إنشاء تطبيق Blazor WebAssembly

لنفكر في إنشاء تطبيق بسيط على Blazor WebAssembly يقوم بحساب أرقام فيبوناتشي باستخدام WebAssembly لتحسين الأداء.

الخطوة 1: تثبيت الأدوات

تأكد من تثبيت .NET SDK (الإصدار 6.0 أو أعلى). لإنشاء المشروع، استخدم الأمر:

dotnet new blazorwasm -n FibonacciAppcd FibonacciApp

الخطوة 2: إنشاء خدمة للحسابات

أنشئ ملف Services/FibonacciService.cs:

using System;using System.Collections.Generic;

namespace FibonacciApp.Services{    public class FibonacciService    {        public List<long> GenerateSequence(int count)        {            var sequence = new List<long>();            long a = 0, b = 1;            for (int i = 0; i < count; i++)            {                sequence.Add(a);                long temp = a;                a = b;                b = temp + b;            }            return sequence;        }

        public long CalculateNth(int n)        {            if (n <= 1) return n;            long a = 0, b = 1;            for (int i = 2; i <= n; i++)            {                long temp = a + b;                a = b;                b = temp;            }            return b;        }    }}

الخطوة 3: تسجيل الخدمة في DI

في ملف Program.cs، أضف تسجيل الخدمة:

using FibonacciApp.Services;using Microsoft.AspNetCore.Components.Web;using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });builder.Services.AddScoped<FibonacciService>();

await builder.Build().RunAsync();