شما یک برنامه قدیمی دارید که روی Net Framework اجرا می شود. علیرغم سنش عملکرد قابل قبولی دارد و همینطور است
بعید است به این زودی پشتیبانی مایکروسافت از بین برود. اما با .NET 8 (و اکنون 9) به خوبی تثبیت شده است، وجود دارد
بهبودهای بسیاری در کیفیت کد، امنیت، سرعت و حتی ویژگی‌های زبان جدید که استفاده از آنها محدود است
با دات نت فریم ورک.
رویکردهای مختلفی برای “ارتقا” یک برنامه Net Framework وجود دارد. یک روش “الگوی خفه کننده” است
به موجب آن شما تکه‌ای از پایگاه کدهای قدیمی را جدا می‌کنید، آن را بازنویسی می‌کنید و به نحوی آن را دوباره به برنامه تزریق می‌کنید.
بنابراین، چگونه می‌توانیم از قدرت Blazor WASM استفاده کنیم تا عملکردی را که در حال حاضر توسط فناوری قدیمی در .NET Framework ارائه می‌شود، در اختیار بگیریم؟
اساساً، هنگامی که یک برنامه Blazor WASM را اجرا می کنید، توسط یک فایل جاوا اسکریپت بوت استرپ می شود که به نوبه خود باینری های ضروری WASM را از برنامه کامپایل شده دانلود می کند. در اشکال زدایی، این باینری ها می توانند نسبتاً بزرگ باشند، اما وقتی در زمان انتشار کامپایل شوند، باینری ها می توانند به دلیل لرزش درخت و کامپایل AOT بسیار کوچک شوند.
از آنجایی که Blazor WASM در مرورگر شبیه یک برنامه جاوا اسکریپت به نظر می رسد، ما باید بتوانیم یک برنامه Blazor WASM بسازیم و سپس آن را در داخل برنامه .NET Framework بدون دردسر زیاد نماییم.
Blazor Runtime Size
انتقادی که اغلب به WebAssembly وارد می شود، اندازه دانلود مورد نیاز برای اجرای برنامه و اینکه چگونه برنامه را کند می کند است. در حالی که درست است زمان اجرا در حالت اشکال زدایی حدود 20 مگابایت است، نسخه منتشر شده نزدیک به 7 مگابایت است. مهم است به خاطر داشته باشید که این یک بارگیری است و توسط مرورگر ذخیره می شود.
همچنین مهم است به یاد داشته باشید که بسیاری از برنامه های تلفن همراه دارای بارگیری اولیه در صدها مگابایت هستند، بنابراین کمی
تأخیر زمانی که مرورگر یک بار اجرا را بارگیری می‌کند باید برای اکثر کاربران قابل تحمل باشد.
برای دریافت کد مخزن به (https://github.com/two-thirty-seven/BlazorWithFramework) مراجعه کنید.
این مخزن دارای راه حلی است که یک برنامه Net Framework را چرخانده و برنامه Blazor را در آن جاسازی می کند.
توجه: در این مرحله، برای اجرای راه حل با استفاده از Net Framework، باید در یک دستگاه ویندوزی باشید.
BlazorApp
با دات نت 6، Blazor ایده در دسترس بودن کامپوننت ها را به جاوا اسکریپت معرفی کرد (استفاده از اجزای Razor در برنامه های جاوا اسکریپت و چارچوب های SPA | Microsoft Learn)
این یک روش جدید را نشان می دهد که کلید کارکرد همه اینها است – RegisterForJavaScript
این روش به ما اجازه می‌دهد تا باینری‌های Blazor WASM را فراخوانی کرده و کامپوننت را به یک گره DOM مشخص تبدیل کنیم. بنابراین، اگر به برنامه Blazor بگوییم که یک مؤلفه را افشا کند، می‌توانیم مقداری جاوا اسکریپت را در برنامه Framework اجرا کنیم و آن مؤلفه را در صفحه قرار دهیم. 🙂
اگر نگاه کنید program.cs، دو جزء ثبت شده را مشاهده خواهید کرد:
builder.RootComponents.RegisterForJavaScript(identifier: "counter", javaScriptInitializer: "initializeComponent");
builder.RootComponents.RegisterForJavaScript(identifier: "weather", javaScriptInitializer: "initializeComponent");
همچنین یک وظیفه ساخت در BlazorApp.csproj فایل این کار خروجی ساخت آن پروژه را می گیرد و دارایی ها را در آن کپی می کند _framework پوشه در پروژه FrameworkApp. بله، گیج کننده است، اما برنامه های Blazor WASM در یک کامپایل می شوند _framework پوشه به دلایلی
جدای از آن، برنامه Blazor از قالب خارج از جعبه است.
Framework App
این پروژه جایی است که جادو اتفاق می افتد. نگاه کردن به _Layout.cshtml، خواهید دید که یک بلوک جاوا اسکریپت جدید در پایین وجود دارد:
این کد در واقع بسیار ساده است.
ابتدا کد بوت استرپینگ را بارگیری می کند blazor.webassembly.js که از مرحله ساخت بالا در پروژه کپی شده است.
بعد، آن را اضافه می کند initializeComponent تابع callback بر روی شی پنجره و این توسط برنامه Blazor WASM هنگامی که هر جزء در هنگام راه اندازی ثبت می شود فراخوانی می شود.
در داخل این فراخوانی، جایی است که ما اجزا را به DOM متصل می کنیم. ما این کار را با یافتن تمام عناصر DOM که دارای ویژگی خاص هستند انجام می دهیم data-component ویژگی ارزش این ویژگی باید مطابق با نام داده شده به جزء در RegisterForJavaScript تماس بگیرید.
سپس بر روی هر عنصری که مطابقت دارد تکرار می‌شود و سپس مولفه Blazor منطبق را به آن گره DOM متصل می‌کند.
نتیجه باید چیزی شبیه به این باشد:
جزء "Counter" Blazor WASM است اما صفحه اطراف آن مستقیما ASP.NET Framework 4.8 است.
اگر DOM را بررسی کنیم، هیچ چیز ناخوشایندی نمی بینیم، فقط نشانه گذاری ساده:
عبور پارامترها
رندر کردن کامپوننت ها عالی است، اما اگر بخواهیم برخی از پارامترها را از MVC به کامپوننت ارسال کنیم، چطور؟
اول از همه، ما می توانیم به سادگی یک پارامتر به کامپوننت در Blazor اضافه کنیم. در این مثال، ما می خواهیم به آن آدرس API بدهیم تا داده ها را از آن استخراج کند:
برای تنظیم این مقدار از MVC، باید ویژگی ها را به عنوان یک شی JSON به اسکریپت راه اندازی ارسال کنیم. ما می توانیم این کار را با رندر کردن JSON در گره DOM و سپس خواندن آن در طول انجام دهیم initializeComponent پاسخ به تماس (به بالا مراجعه کنید).
سپس اگر به کد اضافه شده نگاه کنید _Layout.cshtml در زیر، می توانید ببینید که رشته JSON را به یک شی تجزیه می کند و آن را به کامپوننت می دهد.
نتیجه نهایی این است اگر برنامه Blazor را به تنهایی اجرا کنیم و از داده های نمونه پیش فرض استفاده کنیم:
اما اگر آن را جاسازی کنیم و یک URL متفاوت ارسال کنیم، نتیجه داده متفاوتی دریافت می کنیم:
شما می خواهید اجزای Blazor خود را بدون نیاز به چرخاندن برنامه Net Framework توسعه و آزمایش کنید.
اگر به program.cs در BlazorApp، منطقی را خواهید دید که وضعیت اجرای پروژه را تعیین می کند.
if (builder.HostEnvironment.IsEnvironment("Development"))
{
builder.RootComponents.Add("#app");
builder.RootComponents.Add("head::after");
}
else
{
builder.RootComponents.RegisterForJavaScript(identifier: "counter", javaScriptInitializer: "initializeComponent");
builder.RootComponents.RegisterForJavaScript(identifier: "weather", javaScriptInitializer: "initializeComponent");
}
اگر ASPNETCORE_ENVIRONMENT تنظیم راه اندازی است Development، به عنوان یک پروژه WebAssembly مستقل Blazor اجرا می شود. سپس می توانید مؤلفه ها را در صفحات Blazor میزبانی کنید و آزمایش کنید.
اگر ASPNETCORE_ENVIRONMENT تنظیم راه اندازی هر چیز دیگری است، کامپوننت ها را برای جاوا اسکریپت ثبت می کند.
قابلیت جاسازی اجزای Blazor WASM در برنامه های قدیمی به شما امکان می دهد ابزارهای توسعه مدرن را با رویکرد اصطکاک نسبتاً کم اضافه کنید.
