استفاده از تکنولوژی WebAssembly

مقدمه

در درس‌های گذشته با مدل کامپوننت‌محور Blazor آشنا شدیم و دیدیم که چگونه می‌توانیم رابط‌های کاربری تعاملی بسازیم. ما تا به اینجا به صورت ضمنی از مدل میزبانی Blazor Server استفاده کرده‌ایم، جایی که کد C# ما بر روی سرور اجرا می‌شود. اما Blazor یک مدل میزبانی دیگر و انقلابی را نیز ارائه می‌دهد که به طور کامل نحوه‌ی تفکر ما در مورد توسعه‌ی وب با .NET را تغییر می‌دهد: Blazor WebAssembly.

این مدل میزبانی، با استفاده از یک استاندارد وب پیشگامانه به نام WebAssembly (Wasm)، به ما اجازه می‌دهد تا کد C# و حتی کل فریم‌ورک .NET را مستقیماً در مرورگر کاربر اجرا کنیم. این یعنی ساخت اپلیکیشن‌های تک‌صفحه‌ای (SPA) غنی، سریع و حتی آفلاین با C#، دیگر یک رویا نیست. در این درس پایانی، به بررسی این تکنولوژی و نحوه‌ی استفاده از آن در Blazor خواهیم پرداخت.

تکنولوژی WebAssembly چیست؟

WebAssembly یک استاندارد باز وب است که یک فرمت باینری قابل حمل را برای فایل‌های اجرایی تعریف می‌کند. Wasm به عنوان یک هدف کامپایل برای زبان‌های سطح بالایی مانند C/C++، Rust و البته C# طراحی شده است. به عبارت ساده، Wasm به ما اجازه می‌دهد کدی را که با این زبان‌ها نوشته شده، با سرعتی نزدیک به کد بومی (native) در مرورگرهای وب مدرن اجرا کنیم.

مهم است بدانیم که WebAssembly برای جایگزینی JavaScript نیامده، بلکه برای تکمیل آن طراحی شده است. این دو می‌توانند با یکدیگر تعامل داشته باشند. Wasm در همان جعبه شنی امنیتی (sandbox) جاوااسکریپت اجرا می‌شود و به همان APIهای مرورگر دسترسی دارد.

مدل میزبانی Blazor WebAssembly در عمل

وقتی شما یک اپلیکیشن Blazor WebAssembly می‌سازید، اتفاقات زیر در پشت صحنه رخ می‌دهد:

1. کاربر آدرس وب‌سایت شما را در مرورگر وارد می‌کند.
2. سرور، فایل‌های استاتیک اولیه (شامل HTML، CSS و یک فایل جاوااسکریپت به نام blazor.webassembly.js) را به کلاینت ارسال می‌کند.
3. فایل blazor.webassembly.js اجرای فرآیند را بر عهده گرفته و شروع به دانلود فایل‌های زیر می‌کند:
   • فایل dotnet.wasm: این فایل، نسخه‌ای از .NET Runtime است که به فرمت WebAssembly کامپایل شده است.
   • تمام اسمبلی‌های برنامه‌ی شما: شامل YourApp.dll و تمام وابستگی‌های .NET آن.
4. پس از اتمام دانلود، رانتایم .NET در داخل مرورگر بوت شده، اسمبلی‌های شما را بارگذاری کرده و اجرای کد C# شما را آغاز می‌کند.

از این لحظه به بعد، تمام برنامه (شامل رندر کردن UI، مدیریت رویدادها و اجرای منطق) به طور کامل در مرورگر کاربر و بدون نیاز به ارتباط مداوم با سرور انجام می‌شود.

تعامل با API سمت سرور

یک اپلیکیشن Blazor WebAssembly که در مرورگر اجرا می‌شود، به دلیل محدودیت‌های امنیتی جعبه شنی، نمی‌تواند مستقیماً به منابعی مانند پایگاه داده دسترسی داشته باشد. برای خواندن و نوشتن داده‌ها، این اپلیکیشن باید با یک وب‌سرویس API در سمت سرور ارتباط برقرار کند.

برای این کار، ما از همان کلاس HttpClient که در فصل قبل با آن آشنا شدیم، استفاده می‌کنیم. در یک پروژه‌ی Blazor Wasm، یک نمونه از HttpClient از قبل به صورت یک سرویس پیش‌فرض ثبت شده و ما می‌توانیم آن را به سادگی به کامپوننت‌های خود تزریق کنیم.

FetchData.razor

@page "/fetchdata"
@inject HttpClient Http

<PageTitle>Weather forecast</PageTitle>

<h1>Weather forecast</h1>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <!-- ... HTML table to display forecasts ... -->
}

@code {
    private WeatherForecast[]? forecasts;

    // This lifecycle method runs when the component is initialized.
    protected override async Task OnInitializedAsync()
    {
        // Make an HTTP GET request to the backend API and deserialize the JSON response.
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
    }
}

در این کامپوننت، ما با استفاده از دایرکتیو @inject HttpClient Http، یک نمونه از HttpClient را دریافت می‌کنیم. سپس در متد OnInitializedAsync یک درخواست GET به یک آدرس API ارسال کرده و نتیجه‌ی JSON را مستقیماً به یک آرایه از اشیاء WeatherForecast دی‌سریالایز می‌کنیم. متد کمکی GetFromJsonAsync<T> تمام کارهای مربوط به ارسال درخواست، خواندن پاسخ و دی‌سریالایز کردن را برای ما انجام می‌دهد.