در گذشته JavaScript تنها انتخاب توسعه دهندگان وب بصورت client-side (سمت کاربر) بود. توسعه دهندگان می توانستند فریم ورک هایی مثل Angular و React و... را انتخاب کنند که همه آن در نهایت به JavaScript تغییر پیدا می کنند، اما WebAssembly این موضوع را تغییر داد.
Blazor فریم ورک مایکروسافت جهت ایجاد رابط کاربری (UI) براساس اکوسیستم NET. است که بوسیله WebAssembly در مرورگر اجرا می شود. این فریم ورک قابلیت های زیر را فراهم می کند:
- ایجاد رابط کاربری قوی و تعاملی توسط #C بجای استفاده از JavaScript
- اشتراک منطق برنامه نویسی client-side و server-side توسط NET.
- رندر رابط کاربری شامل HTML و CSS با پشتیبانی از گستره زیادی از مرورگرها شامل مرورگرهای تلفن همراه
استفاده از NET. برای توسعه دهنده سمت کاربر مزایای زیر را شامل می شود:
- کدنویسی #Cبجای JavaScript
- استفاده از کتابخانه های متعدد اکوسیستم NET.
- اشتراک منطق برنامه سمت server و client
- ایجاد یک مجموعه مشترک از زبان ها، چارچوب ها و ابزار که پایداری، سهولت و ویژگی های غنی را به همراه خواهد داشت.
کامپوننت ها
برنامه تولید شده توسط Blazor مبتنی بر کامپوننت است. یک کامپوننت در Blazor یک عنصر رابط کاربری می باشد، مثل یک
صفحه، باکس گفتگو و یا فرم ورود اطاعات.
کامپوننت ها رویدادهای کاربر را مدیریت می کنند و میزان انعطاف رابط کاربری هنگام رندر را تعیین می کنند. کامپوننت ها بصورت کلاس در اکوسیستم NET. ایجاد می شوند. همچنین کامپوننت ها معمولاً توسط صفحات Razor نوشته می شوند.
گاهی اوقات کامپوننت ها همان کامپوننت های صفحات Razor هستند. Razor یک syntax برای ترکیب نشانه های HTML و کد #C می باشد. MVC و Razor Page از Syntax Razor استفاده می کنند. برخلاف MVC و Razor Page که از مدل درخواست/پاسخ استفاده می کنند، کامپوننت ها به طور خاص فقط برای منطق رابط کاربری استفاده می شود.
کد زیر یک کامپوننت Razor ایجاد می کند که خود این کامپوننت می تواند در کامپوننت دیگری نیز استفاده شود.
در این قطعه کد (که بیان کننده کامپوننت یک Dialog است) از کامپوننت ها ChildContent و Title که قبلاً ایجاد گردیده، استفاده شده است. همچنین onYes یک متد #C است که رویداد onclick را راه اندازی می کند.
Blazor از tagهای متداول HTML برای ایجاد رابط کاربری استفاده می کند. عناصر HTML کامپوننت ها را مشخص می کنند و ویژگی های tagها مقادیر را به پارامترهای موجود در کامپوننت ها پاس می دهند. ChildContent و Title پارامترهای کامپوننت Dialog هستند و توسط کامپوننت دیگری که از کامپوننت Dialog استفاده می کند، مقداردهی می شوند.
در مثال زیر کامپوننت Dialog توسط Index.razor استفاده شده است.
هنگامی که Index.razor توسط مرورگر بارگزاری می شود، کامپوننت Dialog رندر می شود.
Blazor client-side
Blazor سمت کاربر یک برنامه با چارچوب کاری تک صفحه ای است که باعث ایجاد برنامه های تعاملی توسط فرم فرک NET. می شود. Blazor سمت کاربر از استانداردهای متداول وب استفاده می کند که بدون هیچ پلاگین و کد رمزگذاری شده ای در تمامی مرورگرهای مدرن شامل مروگرهای موبایل کار می کند. اجرای کد فریم ورک NET. در مرورگر توسط WebAssembly (بطور خلاصه wasm) امکانپذیر می شود. WebAssembly یک استاندارد وب است و بدون نیاز به پلاگین توسط مرورگرهای وب پشتیبانی می شود. WebAssembly در فرمت فشرده بایت کد است که جهت افزایش سرعت دانلود و افزایش حداکثری سرعت اجرا، بهینه شده است.
کد WebAssembly توسط JavaScript می تواند به تمامی عملکردهای (functionality) مرورگر دسترسی داشته باشد که به آن JavaScript interoperability گفته می شود. کد NET. توسط WebAssembly در مرورگر اجرا می شود، در همان sandbox مطمئنی که JavaScript اجرا می شود و که عملاً فرصت انجام عملیات مخرب توسط برنامه روی دستگاه کاربر را از بین می برد.
هنگامی که یک برنامه سمت کاربر ایجاد شده توسط Blazor در مرورگر اجرا می شود:
- فایل کدهای #C و فایل های Razor به NET. کامپایل می شوند.
- NET Runtime. برای مرورگر بارگذاری می شود.
- کدهای Bootstrap، تنظیمات و NET Runtime. برای مجموعه نرم افزار بارگذاری می شود. Blazor Runtime سمت کاربر از JavaScript interoperability برای مدیریت و تغییر DOM و فراخوانی APIها استفاده می کند.
اندازه برنامه منتشر شده را payload size می گویند. payload size فاکتور خیلی مهم در مورد قابل استفاده بودن یک برنامه است. یک برنامه حجیم زمان نسبتاً طولانی جهت دانلود در مرورگر نیاز دارد که به تجربه کاربری لطمه وارد می کند. در Blazor سمت کاربر payload size بهینه شده تا زمان دانلود را کاهش داده شود:
- کدهای بدون استفاده هنگام انتشار برنامه توسط پیوند دهنده
(Intermediate Language (IL حذف می شوند.
- درخواست های HTTP فشرده سازی می شوند.
- مجموعه NET. و Runtime آن در مرورگر کش می شوند.
Blazor server-side
Blazor منطق رندر کردن کامپوننت ها را از چگونگی بروزرسانی رابط کاربری، مجزا می کند. Blazor سمت سرور توسط برنامه ASP.NET Core پشتیبانی و میزبانی می شود. همچنین بروزرسانی های رابط کاربری توسط ارتباط SignalR مدیریت می شود. مدیریت کننده های Runtime رویدادها را از مرورگر به سرور ارسال می کنند و سرور بروزرسانی های مورد نیاز را بعد از اجرای کامپوننت ها به مرورگر ارسال می کند. ارتباط استفاده شده توسط Blazor سمت سرور برای تعامل با مرورگر، برای فراخوانی های مورد نیاز JavaScript interoperability نیز استفاده می شود.
JavaScript Interoperability
برای برنامه هایی که نیاز به کتابخانه های JavaScript و APIهای مرورگر دارند، کامپوننت ها با JavaScript تعامل می کنند. کامپوننت ها می توانند هر کتابخانه و یا API ای که Javascript از آن استفاده می کند را بکار بگیرند. کد #C می تواند داخل کد JavaScript فراخوانی شود و همچنین کد JavaScript می تواند داخل کد #C فراخوانی شود.
اشتراک کد و NET. استاندارد
برنامه ها می توانند از کتابخانه های NET. استاندارد استفاده کنند. NET. استاندارد خصوصیات رسمیِ APIها .NET است که در تمامی نوع های متداول NET. پیاده سازی شده است. Blazor پیاده سازی شده با استاندارد 2 APIهای NET. در مرورگرهای وب کاربرد ندارد (برای مثال در دستیابی به فایل سیستم، بازکردن یک سوکت و Threading استفاده می شود). کتابخانه های استاندارد NET. می توانند در پلتفرم های مختلف NET. اشتراک گذاشته شوند مثل Blazor ،.NET Framework ،.NET Core ،Xamarin ،Mono و Unity.
منبع docs.microsoft.com