آموزش پیشرفته کامپوننت ها در بلیزر Blazor

آموزش پیشرفته کامپوننت ها در بلیزر Blazor یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته ی آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه ی فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته ی آموزشی ساخت Component ها در Blazor است که با نام اصلی Creating Blazor Components از شرکت Pluralsight منتشر شده است.

فریم ورک Blazor چیست؟

احتمالاً می‌دانید که فریم ورک Blazor به منظور ساختن وب اپلیکیشن ها و به طور ویژه واسط کاربری آنها در Client-side و به صورت کاملا تعاملی و یا Interactive مورد استفاده قرار می‌گیرند. در رابطه با فریم ورک Blazor و موضوعات مرتبط با آن پیشتر نیز آموزش‌هایی بر روی وبسایت پرووید قرار گرفته اند که برای مثال می توانید از آموزش شروع به کار با بلیزیر Blazor در ASP.NET Core دیدن بفرمایید. برخی از ویژگی های فریم ورک Blazor که آن را کاملاً از دیگر فریم ورک های توسعه وب اپلیکیشن ها منحصر به فرد میکند را در ادامه بررسی خواهیم کرد.

1. امکان استفاده کردن از زبان برنامه نویسی سی شارپ به جای زبان زن برنامه نویسی جاوا اسکریپت به منظور ساختن واسط های کاربری کاملا تعاملی و یا Interactive در وب اپلیکیشن ها
2. به اشتراک گذاشتن Logic نوشته شده در زبان برنامه نویسی سی شارپ و با استفاده از فریم ورک دات نت در Server Side و Client Side
3. رندر شدن واسط کاربری برنامه قالب محتواهای HTML و CSS به منظور پشتیبانی از مرورگرهای مختلف و سیستم در کامپیوتری و همچنین موبایل‌ها
4. یکپارچه شدن با پلتفرم‌ های میزبانی مدرن از قبیل Docker

استفاده کردن از Blazor به منظور توسعه وب اپلیکیشن های Client-side مزیت های متعددی دارد، که در رابطه با برخی از آنها در ادامه صحبت خواهیم کرد.

1. امکان نوشتن Logic برنامه با زبان برنامه نویسی سی شارپ بجای استفاده کردن از زبان برنامه نویسی جاوا اسکریپت.
2. استفاده کردن از کتابخانه‌ها و دیگر قابلیت‌های دات نت و بهره‌مند شدن از آنها در توسعه وب اپلیکیشن
3. استفاده مشترک از Logic پیاده سازی شده با زبان سی شارپ در سمت سرور و در سمت کلاینت
4. استفاده کردن از قابلیت هایی از قبیل Performance و Reliability و Security که فریم ورک دات نت در اختیار برنامه نویسان قرار می‌دهد
5. 5- امکان توسعه نرم افزار با استفاده از ویژوال استودیو بر روی ویندوز و لینوکس و MacOS برای. یادگیری ویژوال استودیو میتوانید از آموزش کار با ویژوال استادیو برای ساخت برنامه های دات نت استفاده کنید.
6. استفاده کردن از مجموعه‌ ای از زبان های برنامه نویسی و فریم ورک های کاملاً غنی و ابزارهای پایدار به منظور ساختن هرچه آسانتر وب اپلیکیشن های Client Side

مفهوم Component ها در Blazor

وب اپلیکیشن های توسعه داده شده با Blazor بر اساس Component ها کار می‌کنند. در زبان فارسی کلمه Component به جز تشکیل دهنده ترجمه می‌شود. در واقع در فریم ورک Blazor یک Component یک عنصر است، که با استفاده از آن میتوانید واسط کاربری برنامه را ایجاد کنید. برای مثال یک Page و یا Dialog و یا فرم ورود داده ها می توانند در قالب Component پیاده سازی بشوند. به بیان ساده Component ها در فریم ورک Blazor همان کلاس هایی هستند که می توانید در قالب اسمبلی های دات نت ایجاد کنید. با استفاده از کامپوننت ها میتوانید موارد زیر را لحاظ نمایید.

1. تعریف کردن Rendering لاجیک مربوط به واسط کاربری برنامه به صورت کاملا انعطاف پذیر
2. هندل کردن User Event ها
3. استفاده کردن تو در تو و یا استفاده مجدد از آنها
4. به اشتراک گذاشتن آنها در قالب Razor Class Library ها و یا NuGet Package ها

در فریم ورک Balzor به سادگی میتوان Component ها را قالب یک Razor Page پیاده سازی کرد. همانطور که احتمالاً می دانید فایل های Razor با پسوند razor ایجاد می شوند. در رابطه با Razor می توانید از آموزش برنامه نویسی وب با Razor Pages در ASP.NET Core دیدن کنید. اغلب به کامپوننت های مربوط به فریم ورک بلیزر Razor Component نیز می گویند.

در واقع Razor یک روش برای ترکیب کردن دستورات زبان برنامه نویسی سی شارپ برای ایجاد کردن Logic و کدهای مربوط به HTML می باشد. Razor به شما اجازه می دهد که بین ایجاد کردن کدهای HTML و زبان برنامه نویسی سی شارپ در یک فایل یکسان و با لحاظ نمودن کاراکتر @ جابجا بشوید. در ویژوال استودیو و فایلهای Razor قابلیت IntelliSense نیز وجود دارد که این موضوع خود می‌تواند یک مزیت بسیار مهم بحساب بیاید. فریم وریک های Razor Pages و MVC نیز از فایلهای Razor استفاده می‌کنند. تفاوت اصلی فریم ورک Blazor با فریم ورک های Razor Pages و MVC در این است که فریم ورک های Razor Pages و MVC بر اساس یک مدل Request و Response کار می‌کنند. این در حالی است که فریم ورک Blazor و کامپوننت های ایجاد شده در آن به منظور ایجاد کردن UI Logic برنامه در سمت کلاینت و همچنین ترکیب شدن با یکدیگر مورد استفاده قرار می‌گیرند. کدی که در قسمت زیر مشاهده می کنید تعریف کردن یک کامپوننت بسیار ساده به نام Dialog.Razor را در فریم ورک Balzor به شما نشان می‌دهد.

	@Title
    @ChildContent
    Yes!

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}

در دستور بالا مشاهده می کنید که محتوای بدنه این کامپوننت که ChildContent نام دارد، و همچنین عنوان آن که Title نام دارد توسط کامپوننت دیگری که از این کامپوننت به عنوان فرزند خود استفاده خواهد کرد فراهم می شود. علاوه بر این، در زمان کلید شدن بر روی یک Button و رخ دادن رویداد onClick یک متد در زبان برنامه نویسی سی شارپ به نام OnYes تعریف شده است، که این Event را هندل نمایند. در رابطه با هندل کردن Event ها توصیه می‌کنیم از آموزش Event ها، Delegate ها و Lambda Expression ها در سی شارپ استفاده کنید. در پایان توصیه می کنیم که حتما از آموزش های مختلف وب سایت پرووید در رابطه با Blazor از قبیل آموزش Authentication و Authorization در بلیزر Blazor و آموزش بلیزر Blazor پیشرفته برای اپلیکیشن های تجاری استفاده کنید.

مدیریت Parameter، EventCallback و ارتباط میان کامپوننت‌های Blazor

در توسعه رابط کاربری با Blazor، کامپوننت‌ها باید بتوانند داده دریافت کنند، رویدادها را پردازش کنند و تغییرات را به بخش‌های دیگر برنامه اطلاع دهند. این آموزش با ایجاد کامپوننت ساده شروع می‌شود و سپس به تعریف `Parameter`، مدیریت رویدادها و پیاده‌سازی `EventCallback` می‌پردازد. با این مفاهیم می‌توانید کامپوننتی بسازید که مقدار موردنیاز خود را از والد دریافت کند و هنگام وقوع یک رویداد، نتیجه را به آن برگرداند. این الگو در ساخت فرم‌ها، کنترل‌های قابل استفاده مجدد و رابط‌هایی که چند بخش تعاملی دارند، کاربرد دارد.

بخش دیگری از آموزش به Data Binding در کامپوننت‌های ورودی و استفاده از `Cascading Values` اختصاص دارد. Data Binding ارتباط میان مقدار یک کنترل و داده برنامه را برقرار می‌کند و Cascading Values امکان انتقال اطلاعات مشترک به کامپوننت‌های پایین‌دست را فراهم می‌سازد، بدون اینکه لازم باشد تمام مقادیر از تک‌تک والدها عبور کنند. همچنین استفاده از `@key` برای حفظ هویت عناصر هنگام تغییر مجموعه داده‌ها بررسی می‌شود. این مباحث به توسعه‌دهندگان کمک می‌کنند رفتار رابط کاربری را در زمان به‌روزرسانی اطلاعات بهتر کنترل کنند و ارتباط میان کامپوننت‌ها را با ساختاری روشن‌تر طراحی کنند.

ساخت Templated Component و کتابخانه‌های قابل استفاده مجدد در Blazor

وقتی چند بخش رابط کاربری ساختاری مشابه اما محتوای متفاوت دارند، ایجاد کامپوننت‌های قالب‌پذیر می‌تواند از تکرار کد جلوگیری کند. این آموزش مفهوم `Templated Component` را معرفی می‌کند و نحوه مصرف این کامپوننت‌ها را با استفاده از `Razor Template Syntax` بررسی می‌کند. برای مثال، یک کامپوننت می‌تواند ساختار کلی نمایش مجموعه‌ای از داده‌ها را مدیریت کند، درحالی‌که نحوه نمایش هر آیتم به قالبی واگذار شود که مصرف‌کننده مشخص می‌کند. این روش در ساخت فهرست‌ها، بخش‌های نمایشی تکرارشونده و کنترل‌هایی که باید با مدل‌های داده متفاوت کار کنند، کاربرد دارد.

آموزش ایجاد `Class Library`های مربوط به Blazor نیز نشان می‌دهد چگونه می‌توان کامپوننت‌ها را از اپلیکیشن اصلی جدا کرد و در قالب یک کتابخانه سازمان‌دهی کرد. چنین جداسازی‌ای برای پروژه‌هایی اهمیت دارد که چند بخش برنامه به کامپوننت‌های مشترک نیاز دارند یا می‌خواهند ساختار رابط کاربری را مستقل‌تر نگه دارند. بررسی `Child Content` نیز امکان قرار دادن محتوای دلخواه درون یک کامپوننت را روشن می‌کند و در کنار قالب‌های Razor، ابزارهای بیشتری برای طراحی کامپوننت‌های انعطاف‌پذیر فراهم می‌سازد. این مباحث برای توسعه‌دهندگانی مناسب است که در حال ساخت مجموعه‌ای از کنترل‌های اختصاصی برای پروژه‌های Blazor هستند.