چگونه تصمیم گرفتم از Blazor استفاده کنم:

مدتی هست که در حال نوشتن یک سیستم مدیریت محتوا و وبلاگ بر پایه معماری میکروسرویس هستم که دربارش توضیح مفصلی در مطلب دیگه ای خواهم داد.
رابط کاربری و سمت فرانت اند رو اول با Angular شروع کردم به پیاده سازی. متای سرویس ها و مدل های سمت سرور به صورت خودکار توسط nswag تولید میشه برای کلاینت آنگولار. nswag کتابخانه ای برای تولید کدهای سمت سرور شما برای کلاینت ها با زبان های مختلفی مثل typescript, c#, js و ... استفاده میشه.
فقط نیاز هست تا ماژول ها، کامپوننت های مورد نظر و فراخوانی سرویس ها نوشته بشه که در کلاینت generate شده. برای من بخش سخت و طاقت فرسای کار طراحی رابط کاربری و سر و کله زدن با پکیج های node بود. علاوه بر اون syntax تایپ اسکریپت (که باز نسبت به js خیلی بهتره) یه سری قواعد متفاوتی داره. در عین حال فریم ورک خوبیه هم از لحاظ سرعت و هم ابزارها و امکانات زیادی که براش تولید شده. امکان PWA کردن اپ هم به راحتی هست.
اما همونطور که گفتم چند چیز اذیتم میکرد، اول پکیج های بسیار زیاد npm و مدیریت ورژن ها و آپدیت هاشون که کلی side effect و باگ ممکنه ایجاد بکنن در برنامه. دوم با syntax اش خیلی راحت نبودم و کلی باید میگشتم تا مثلا بفهمم داده های دریافتی رو چطوری Map میکنن و کلی تابع و چیز مختلف که داره.
این مشکلات برای امثال من بیشتر پر رنگ هست که فرانت کار حرفه ای نیستن یا با این فریم ورک ها زیاد کار نکردن. برای کسی که کلی وقت گذاشته و پروژه زده مسلما راحت تره کما اینکه میشنوم خیلیاشون به مشکلات آنگولار واقف ان.
در درجه بعد نمیخواستم mvc بزنم فرانت رو چون SPA میخواستم.
تا چند وقت پیش که با یکی از دوستان بحث Blazor و وب اسمبلی شد. از نحوه کارکردش تا مقایسه اش با مابقی فریم ورک ها. مهمتر از همه بحث وب اسمبلی.
بعد از اون مشتاق شدم درباره Blazor در دات نت 5، یه تحقیق مجدد بکنم. دیدم نسبت به ۲ سال پیش خیلی بهتر شده هر چند هنوز جای کار داره اما سریع باهاش ارتباط گرفتم. وب اسمبلی و در کنارش طراحی رابط کاربری با سی شارپ و قابلیت هاش برام جذاب بود. کما اینکه افرادی مثل من که به سی شارپ و net core تسلط بیشتری دارن تا جاوا اسکریپت و تایپ اسکریپت، به راحتی میتونن باهاش فرانت اند رو هم پیاده بکنن و چندین ماه درگیر یادگیری فریم ورک های دیگه و سر و کله زدن باهاشون نشن.
به خصوص که من نیاز دارم تا برای پروژم فرانت هم طبق نیازهای خودم پیاده سازی کنم.
در ادامه درمورد وب اسمبلی و فریم ورک Blazor.net یه توضیحی میدم و نمونه پروژه ای که باهاش پیاده کردم رو در گیتهاب قرار میدم تا بقیه علاقه مندان هم بتونن باهاش آشنا بشن.
@csharpfriends #Blazor #WebAssembly #FrontEnd

*یک نکته درباره فریم ورک Blazor و مدل کلاینت یا همون WebAssembly

همینطور که در مطالب قبلی گفته شد، blazor دات نت، دو مدل ServerApp و WebAssembly داره.
نمونه پروژه ای که در مطلب پیشین معرفی کردم با مدل وب اسمبلی blazor نوشته شده. وقتی یک پروژه blazor میسازید، در حالت blazor web assembly دو option وجود داره:
1. گزینه اول Asp.Net Core Hosted، امکان میده برنامه blazor شما، تحت Net. هاست بشه. یعنی نیاز به net core. برای اجرا شدن روی سرور شما داره و به راحتی میتونین از طریق خروجی exe یا dll که میسازه، اون رو اجرا کنید. (با مدل blazor server اشتباه نگیرید، این گزینه فقط امکان اجرای برنامه روی وب سرور دات نت رو اضافه میکنه و خروجی همچنان یک وب اسمبلی هست)
اگر تیک این گزینه رو نزنید( یا در کنسول آرگومان hosted-- موقع new کردن ندین)، خروجی پابلیش برنامه مستقل از دات نت ساخته میشه و اصلاحا فایل های فشرده static میده مثل html, js که میتونین اون ها رو در CDN ها یا Github Pages آپلود و اجرا کنین. پابلیش کردن این مدل مقداری کانفیگ و مراحل داره برای اجرا.

2. گزینه دوم PWA، که امکانات لازم مانند service worker.js رو برای ساختن یک اپ PWA به پروژه اضافه میکنه. میتونید خروجی رو روی سیستم عامل یا موبایلتون بدون نیاز به مرورگر اجرا کنین و قابلیت offline browsing داشته باشین. درست مثل یک اپ دسکتاپ یا موبایل. در غیر اینصورت برنامه باید حتما روی مرورگر و آنلاین کار بکنه.
برای ساختن اپ blazor pwa در vscode در command line وارد کنید:

 dotnet new blazorwasm --hosted --pwa 

یا با VisualStudio مدل blazor web assembly رو انتخاب و تیک گزینه PWA و Hosted و همچنین Configure Https رو بزنین (امن بودن ارتباطات در این اپ ها الزامیه و نیاز به https هست و این قابلیت فقط در خروجی publish فعال میشه)

اکثر فریم ورک ها مانند Angular, React.js,Vue.js هم از ساختن برنامه های PWA پشتیبانی میکنن.
برنامه های PWA امکان میدن تا وب سایت خودتون رو به شکل یک اپ ریسپانسیو موبایلی یا دسکتاپ در بیارین و کاربر میتونه اون رو مستقل از مرورگر نصب و اجرا کنه. به اینصورت نیاز به ساخت اپ های native برای هر سیستم عاملی مثل android,ios,windows,... نیست.

برای ساخت و آشنایی بیشتر با اپ های PWA میتوانید مقاله های زیر را مطالعه کنید:
https://devblogs.microsoft.com/visualstudio/building-a-progressive-web-app-with-blazor/
https://www.dotnetcurry.com/aspnet-core/progressive-web-apps-blazor-vuejs-angular
مقاله فارسی:
https://roocket.ir/articles/progressive-web-apps-future-of-modern-web

t.me/csharpfriends
#Blazor #WebAssembly #PWA #Net5 #AspNetCore

یک نکته درباره اجرای پروژه Blazor MicroBlog و عملکردش:

توجه داشتیه باشین که برای استفاده از قابلیت pwa پروژه Blazor MicroBlog و نصب اون مثل یک اپلیکیشن در دستگاهتون، باید خروجی publish از api بگیرید و روی https اجرا کنین (ترجیحا Edge/Chrome)
(همچنین برای تست میتونید نسخه v0.8-beta1 PreRelease رو از قسمت releases گیتهاب پروژه دانلود و اجرا کنید)
برنامه سرور Api، اپ کلاینت رو داخل Net. پراکسی و هاست میکنه. از مزایای این روش عدم نیاز به اجرای جداگانه پروژه ها، caching یکپارچه تر، تست و اجرای نسخه pwa برنامه است.
تنها عیب این حالت نیاز به net core. برای اجراست که در هر صورت برای اجرای پروژه سرور نیازه. بعد از اون رابط کاربری روی مرورگر کاربر ذخیره و از همونجا اجرا میشه. بنابراین سرور سبک تر خواهد بود و کلاینت هم میتونه از قابلیت offline استفاده بکنه. چرا که نیاز به گرفتن صفحات از سرور نداره و از وب اسمبلی استفاده میکنه.
اگر نمیخواین از مدل Net Hosted. استفاده کنین، باید سرویس های Blazor رو از فایل startup سرور حذف کنین. در اینصورت پروژه کلاینت blazor رو باید دستی هاست و اجرا کنین که یکم دردسر داره. و بعدا روشش رو میگم. (چون فقط static file دارید)

خوشحال میشم دوستانی که علاقه مند هستن، نسخه 0.8 بتا پروژه MicroBlog رو تست کنن و بازخورد بدن. میتونید مستقیما exe برنامه رو اجرا کنین، بدون دردسر و کامپایل. در release ها موجوده)

https://github.com/mrgrayhat/BlazorMicroBlog
t.me/csharpfriends
#Blazor #Net5 #WebAssembly #BlazorHosted

انصافا مجموعه خوب و کاربردی ایه برای یادگیری و استفاده از blazor علل خصوص مدل وب اسمبلی که معمولا با بک اند و سرور ساید ارتباطات خیلی زیادی داره (مگر اپ شما کلا wasm باشه هیج سرور و api ای نداشته باشه همه چیز تو خودش پیاده میشه مثل وصل شدن به دیتابیس و احراز هویت و ..، همه جا هم قابل اجراست اصلا هاستم نمیخواد ولی معمولا کسی نمیخواد همه بیزنس لاجیک و امنیت برنامه رو بفرسته سمت کلاینت)، در کنار بحث خوده blazor اموزش های خیلی خوبه نوشته که چطور احراز هویت کنیم، دسترسی و خطاهارو هندل کنیم، با سرور ارتباط بگیریم، crud کنیم، با استفاده از قدرت c# و پکیج ها، نیاز به js و کتابخونه هاش رو خییلی کم کنیم و ...

https://code-maze.com/blazor-webassembly-series/

عموما فرانت ها از http rest api ها استفاده میکنن چون پروتکل استاندارد و مرسومیه در همه چیز. تو موارد حرفه ای یا خاص تر خب signalr و grpc هم زیاد استفاده میشه، مخصوصا اگر بحث realtime و سرعت مطرح باشه مثل چت، استریم، بازی و ..
که بازم میگم هر چیزی به جاش خیلیم خوبه. هر کی گفت سوکت مطلقا برای فرانت بده مهمل گفته ( کانکشن خیلی زیاد به پروژه یکپارچه تک سروری مهمترین دلیلشه که راهش توزیع کردن و سرویس لود بالانس هست برای سیستمی که خیلی یوزر داره، وگرنه کلاینت از خداشم هست همه چیز براش تولید شه و فقط متد صدا بزنه و کمتر درگیر api بشه). جاش هست آشم هست امکانش برای همه طراحی شده و استفاده میشه.
البته از Http2/3 هم غافل نشید ولی خب بحث چیز دیگه ای بود در گنجایش این پست و اندک دانش و تجربه این حقیر.
#Blazor #WebAssembly #aspcore
@csharpfriends

چقدر و در چه وب اپ هایی از blazor استفاده میشه، از دید افزونه wappalyzer:
https://www.wappalyzer.com/technologies/web-frameworks/blazor

awesome blazor resources:
https://project-awesome.org/AdrienTorris/awesome-blazor

#blazor #wasm #webassembly #dotnet