آشنایی با فریمورک Blazor
برنامه نویسی Blazor (بلیزور) چیست ؟
نزدیک دو دهه پیش جاوااسکریپت نقش چندانی در توسعه صفحات وب نداشت , نهایت استفاده از جاوااسکریپت ایجاد یک افکت یا انیمیشن یا نمایش پنجره Alert بود و تقریبا تمام business یا منطق یک برنامه تحت وب در سمت سرور(Backend) با تکنولوژی هایی مثل ASP کلاسیک و یا زبان هایی مثل php پیاده سازی می شد , اما با ظهور تکنولوژی به اسم Ajax که انقلابی در زمان خودش به حساب می آمد , روز به روز نقش جاوااسکریپت در برنامه نویسی وب بیشتر شد , تا قبل از Ajax , زمانی که کاربر مثلا یک فرم ثبت نام را پر می کرد و دکمه ذخیره را فشار می داد , کل صفحه وب به سمت سرور ارسال می شد ,اصطلاحا Post می شد و بعد از پردازش در سمت سرور و بازگشت اطلاعات از سمت سرور مجددا کل صفحه از اول لود می شد ,خوب این عملیات هم برای کاربر زمان بر بود و هم مصرف حافظه و CPU سرور رو بالا می برد , البته همان زمان هم راهکار هایی برای حل این مشکل ابداع شده بود مثل گوگل که از IFrame برای ذخیره فرم ها استفاده می کرد.
بعد از معرفی تکنولوژی Ajax , اتفاقی که برای همان دکمه ثبت اطلاعات می افتاد این بود که , با فشردن دکمه ثبت توسط کاربر تنها اطلاعات فرم ثبت نام به سرور ارسال و تنها نتیجه ثبت نام که می تواند یک متغییر منطقی مثل true یا false باشد از سمت سرور بر می گشت و تنها نیاز به آپدیت فرم بود نه کل صفحه وب , با این روش علاوه بر اینکه سرعت افزایش چشمگیری داشت در منابع سرور نیز کاهش مصرف چشم گیری اتفاق می افتاد.
اما کاهش مصرف و افزایش سرعت تنها شروع انقلاب بود , با معرفی SPA ها گام دوم انقلاب اتفاق افتاد , اما SPA چیست ؟
SPA از سر حروف کلمات Single Page Application حاصل شده است , هدف اصلی یک SPA اینکه تمام پردازش های یک برنامه در یک صفحه انجام شود (منظور از صفحه یک اسکلت یا زیر ساخت اصلی می باشد و منظور تغییر آدرس صفحات نیست.) و با تغییر ادرس نیاز به لود مجدد کل وبسایت نباشد.
شما حتما نام فریم ورک های SPA مثل React یا Angular یا Vue را شنیدید که متعلق به غول های بزرگ دنیای کامپیوتر مثل فیسبوک و گوگل هستند , اتفاق بزرگی که به کمک این فریم ورک ها افتاد امکان انتقال بخش بزرگی از business یا منطق برنامه از سمت سرور به سمت Client یا کاربر بود که این امر باعث می شود نه تنها حجم بزرگی از مصرف منابع و ترافیک سرور کاهش پیدا کند بلکه سرعت و کاربر پسند (User Friendly) بودن برنامه نیز افزایش چشمگیریی پیدا کند.
Blazor فریم ورک SPA غول نرم افزاری دنیا یعنی شرکت مایکروسافت هست , اما در واقع تها یک فریم ورک جدید دیگه نیست بلکه شبیه تکنولوژی Ajax یک انقلاب دیگر در صنعت تولید نرم افزارهای تحت وب به حساب می آید , خوب حتما سوالی که الان براتون پیش اومده اینه که چرا Blazor یک انقلاب دیگر به حساب می آید ؟
استاندارد WebAssembly اولین بار در سال ۲۰۱۷ معرفی شد , تا قبل از WebAssembly تنها زبان برنامه نویسی قابل اجرا بر روی مرورگرها جاوااسکریپت بود , هر چند در واقع جاوااسکریپت اصلا زبان برنامه نویسی نیست و همانطور که از اسمش معلوم هست بیشتر یک زبان اسکریپت نویسی هست تا برنامه نویسی . در حقیقت WebAssembly قابلیت نوشتن برنامه های قابل اجرا با زبان های سطح بالا و ساخت یافته مثل ++C بر روی مرورگر را می دهد به طوری که این برنامه بر روی سایر پلتفرم ها به تنهایی نیز قابل اجرا باشند.
اما کار بزرگی که مایکروسافت انجام داد امکان نوشتن WebAssembly با زبان بسیار پرقدرت و محبوبی به نام #C بود , در واقع دیگر جاوااسکریپت تنها زبان برنامه نویسی مرورگرها نمی باشد و این یک تغییر زمین بازی در مقابل فریم ورک SPA سایر غول های نرم افزاری مثل گوگل و فیسبوک بود که بر پایه جاوا اسکریپت هستند.
Blazor چیست؟
بلیزر به زبان ساده فریمورک رایگان و اوپن سورس شرکت مایکروسافت است که که توسعه دهندگان را قادر می سازد با استفاده از C# و HTML صفحات وب ایجاد کنند.
تیم Asp.net مجموعه ابزاری را به نام Blazor ساخته اند که یک فریمورک سمت کلاینت (client side) برای برنامه های دات نت است.
تفاوت این فریمورک با فریمورک های سمت کلاینت دیگر مانند angular, react این است که anuglar و react هنگامی که برای مرورگرف کامپایل می شوند به کد جاوا اسکریپت که قابل درک برای مرورگر ها است تبدیل می شوند.
اما blazor به کد جاوااسکریپت تبدیل نمی شود و به وب اسمبلی کامپایل می شود.
این فریمورک به صورت Open source ارائه شده است و بسیاری از طرفداران مایکروسافت به به سراغ آن رفته اند یکی از دلایل استقبال از این فریمورک این است که می توان از قدرت زبان سی شارپ برای برنامه نویسی سمت کلاینت هم استفاده کرد و همینطور از قابلیت های ویژوال استودیو برای این زبان.
همچنین با این فریمورک نیازی به نوشتن کد جاوا اسکریپت نیست.
از ویژگی هایی که این فریمورک دارد موارد زیر است:
- فریمورک blazor از WebAssembly استفاده می کند. WebAssembly یک فرمت باینری برای کد در مرورگر است که هنگام اجرا از جاوااسکریپت بسیار سریع تر است و سرعت اجرای آن مانند اجرای برنامه به صورت لوکال است.
- پایه آن تکنولوژی های امروزی مثل html , css است با این تفاوت که به جای استفاده از جاوا اسکریپت از سی شارپ و دستورات Razor استفاده می کنید.
- شما با استفاده از blazor می توانید همه قابلیت های پلتفرم SPA (برنامه های تک صفحه ای وب) را در دسترس دارید.
اما سوال اصلی , چرا باید Blazor یاد بگیریم ؟
با توجه به سرعت رشد تکنولوژی های برنامه نویسی همیشه این سوال وجود دارد که کدام تکنولوژی یا زبان را برای یادگیریی انتخاب کنیم , برای انتخاب صحیح یک تکنولوژی می توان آنرا از ۵ منظر مورد بررسی قرار داد :
- – زبان و ابزار ها
- – میزان پیچیدگی یا سادگی
- – کارایی یا Performance
- – جامعه یا community استفاده کننده
- – آینده و بازارکار
در اینجا من Blazor را از این ۵ منظر بررسی می کنم:
زبان و ابزار
اولین و شاید مهمترین دلیل انتخاب Blazor برای یادگیری , زبان برنامه نویسی آن یعنی #C (سی شارپ) می باشد , به طور خلاصه در قیاس با جاوااسکریپت , سی شارپ یک زبان ساخت یافته شی گرا و چند منظوره و Cross PlatForm هست که شما بوسیله آن می توانید برای تمامی پلتفرم های ویندوز و لینوکس و مک و اندروید و IOS برنامه بنویسید , هر چند قابلیت شبیه سازی شی گرایی در جاوااسکریپت وجود دارد ولی این زبان بالذات شی گرا نمی باشد و این شبیه سازی برای برنامه نویسان تازه کار خودش چالشی به حساب میاد.
از طرف دیگر هرچند با پیدایش NodeJs زبان جاوااسکریپت نیز چند منظوره به حساب میاید اما برنامه های NodeJs بیشتر برای نوع خاصی از سیستم های Real Time مناسب می باشند و همانند سی شارپ طیف گسترده برنامه های دسکتاپ و وب و سرور و موبایل رو در بر نمی گیرند , ضمن اینکه برای اجرای برنامه های نوشته شده با NodeJs یا حتی Java (منظور جاوا اسکریپت نیست , جاوا یک زبان شی گرا چند منظوره می باشد) شما نیاز به نصب NodeJs یا ماشین مجازی برای Java را دارید ولی سی شارپ به صورت Native بر روی تمامی پلتفرم ها از ویندوز و لینوکس و Mac بدون نیاز به نصب هیچ مورد اضافی قابل اجرا می باشد , که خود اجرای Native سرعت اجرایی بسیار بالاتری از سایر زبان ها در اختیار شما قرار می دهد.
اما در مورد ابزار , قطع به یقین قوی ترین IDE که تا کنون بشیریت برای توسعه نرم افزار ساخته است چیزی نیست جز Visual Studio (ویژوال استدیو) , هر چند شما با این ابزار می توانید برای بسیاری از زبان ها از جمله جاوااسکریپت کد بزنید ولی این ابزار بهینه شده , برای .net (فریم ورک برنامه نویسی شرکت مایکروسافت) و سی شارپ می باشد و نعمتی بس بزرگ برای برنامه نویسان تازه کار تا تیم های حرفه ایی تولید و پشتیبانی نرم افزار می باشد.
میزان پیچیدگی یا سادگی
خوب این مورد رو میشه در دو سطح زبان سی شارپ و خود Blazor بررسی کرد :
در مورد خود سی شارپ این زبان یکی از ساده ترین زبان های برنامه نویس دنیا می باشد عالی الخصوص در مقایسه با جاوا اسکریپت که به علت مشکل شی گرایی که قبلا ذکر کردم دارای پیچدگی های خاص خودش می باشد و در یک جمله می توان گفت , به سادگی زبان پایتون و پرکاربردی زبان Java (منظور جاوا اسکریپت نیست , جاوا یک زبان شی گرا چند منظوره می باشد) می باشد.
اما در مورد Blazor , طبق تجربه شخص خودم و با توجه به اینکه Blazor بر پایه C# می باشد , سادگی سی شارپ کاملا به Blazor هم منتقل شده است بر خلاف React یا انگولار یا Vue که پیچدگی جاوا اسکریپت را به ارث برده اند. این سادگی باعث می شود اگر درست آموزش دیده باشید خودتون بتونید تمامی کنترل های لازم یک وبسایت مثل تقویم فارسی و منوها و جداول نمایش محصولات و غیره را با انواع انیمیشن و افکت ها و به صورت Responsive بسازید , کارهایی که با جاوا اسکریپت برای برنامه نویسان تازه کار بسیار پیچیده است.
کارایی یا Performance
بلیزور را باید به عنوان یک تکنولوژی فول استک (یک زبان و یک معماری برای برنامه نویسی هر دو سمت کاربر(Frontend) و سرور(Backend)) در نظر گرفت در نتیجه کارایی این تکنولوژی را در دو سمت Backend و Frontend می توان بررسی کرد :
در سمت Backend که با وجود Asp.net Core که یک فریم ورک Cross PlatForm هم هست , هیچ شک و شبه ایی در سرعت و کارایی آن نیست با یک سرچ ساده در اینترنت بنچ مارک های زیادی را پیدا می کنید که Asp.net Core همیشه در مکان های بالای جدول است حتی با توجه به اینکه Asp.net Core یک تکنولوژی چند منظوره است و مثلا مثل فریم ورک های خیلی کوچک نیست که فقط در یک زمینه خاص بهینه شده باشند.
اما در سطح Frontend , اگر یک سرچ کوچک در اینترنت یا شبکه های اجتماعی انجام دهید با تعداد زیادی از مقالات با کلامات کلیدی React vs Blazor یا Angular vs Blazor یا Vue vs Blazor مواجه می شوید که برای مقایسه بلیزور با سایر فریم ورک های محبوب بازار اکثرا با اطلاعات ناقص و قدیمی نوشته شده اند در حالی که بلیزور به سرعت در حال رشد و بهبود بوده و هست , اما واقعیت چیست ؟
همانطور که قبل ذکر کردم , C# بر روی تمامی پلتفرم ها من جمله مرورگر به صورت Native اجرا می شود پس ما توقع داریم سرعت اجرای بلیزور در مقایسه با سایر فریم ورک های جاوااسکریپتی بالاتر باشد , به طور مثال اگر فریم ورک React را محبوب ترین فریم ورک حال حاضر SPA در بازار در نظر بگیریم , در مقایسه با بلیزور , اگر شما پروژه پیش فرض بلیزور در ویژوال استدیو را اجرا کنید در کمال تعجب در اولین اجرا یک کندی نسبت به یک وبسایت React مشابه حس می کنید , خوب سوال خوبی که اینجا پیش میاد :
مشکل کندی Blazor در کجاست و آیا قابل رفع است ؟
خیلی خلاصه بخوام بگم بله این کندی در مقایسه با React کاملا رفع شدنی است , شما تنها نیاز دارید رفع این مشکل را یاد بگیرید , اما برای پاسخ کامل تر به این سوال باید گذشته حال و آینده بلیزور را بررسی کرد , من در اینجا نمی خوام خیلی جزپیات فنی رو بیان کنم چون خارج از بحث ما هست , بنابراین خیلی خلاصه مطرح می کنم :
واحد اصلی برنامه نویسی در Blazor فایل هایی هستند به نام Razor که همانند قطعات لگو به هم متصل و صفحات و کامپوننت های وبسایت شما مثل تقویم و جداول دیتا و منوها و … رو می سازند , این فایل ها شامل کدهای #C و Html هستند و از آنجا که مرورگرها فقط قابلیت نمایش Html را به صورت عناصر گرافیکی دارند , این فایل ها قبل از نمایش باید به Html رندر (Render) شوند.
اولین نسخه از بلیزور که توسط شرکت مایکروسافت منتشر شد , Blazor Server نام داشت و چون این عملیات رندر کردن در سمت سرور اتفاق می افتاد , کندی مدنظر ما مشاهده نمی شد , اما مشکل بزرگ Blazor Server نیاز به یک سرور قوی و شبکه پایدار بود چون تمامی واکنش های کاربر مثل حرکت موس یا تایپ باید به سرور ارسال و همچنین تمام State کاربر در سمت سرور ذخیره می شد.
با انتشار نسخه .net Core 3.1 نسخه جدید بلیزور نیز با عنوان Blazor WebAssembly منتشر شد , این نسخه اصلی فریم ورک SPA مایکروسافت می باشد و نه تنها تمام مشکلات نسخه سرور را حل کرده است بلکه قابلیت کارکرد آفلاین (بدون نیاز به Backend) و PWA (وبسایت هایی که همانند یک App بر روی دستگاه های موبایل نصب می شوند و قابلیت هایی مثل دریافت نوتیفکشن و … دارند)را هم داراست , اما به دلیل رندر فایل های Razor در سمت مرورگر به جای سرور , همان کندی اولین اجرا به وجود آمد , خوب تا اینجا قسمت مربوط به گذشته بلیزور به پایان رسید.
اما برسیم به حال , با انتشار .net 5 ویژگی جدیدی به بلیزور اضافه شد به نام WebAssembly Prerender , که با استفاده از این قابلیت می توان در حالت Blazor WebAssembly , رندر فایل های Razor را در سمت سرور انجام داد در نتیجه سرعت اجرای اولیه را بسیار بالا برد , تا همینجا مشکل کندی اولین اجرا تا حد زیادی حل شده است ,اما هنوز یک مشکل دیگر باقی است :
مشکل حجم دانلود بیشتر در نخستین بازدید از سایت , با تنظیمات پیش فرض بلیزور ,تمام dll های لازم (کدهای سی شارپ که باید در مرورگر اجرا شوند) برای اجرای وبسایت , در اولین بازدید سایت توسط کاربر باید دانلود شوند که در نتیجه حجم دانلود و در نتیجه زمان لود اولین درخواست افزایش پیدا می کند , حال در .NET 5 مایکروسافت امکانی را معرفی کرده است به نام Lazy Loading که در نتیجه dll ها فقط در زمان نیاز دانلود می شوند و نه اینکه همه یکباره و در اولین درخواست.
در نتیجه این مشکل نیز مرتفع شده است , خوب با اینکه با افزودن دو امکان WebAssembly Prerender و Lazy Loading تقریبا مشکل کندی اولین درخواست در مقایسه با یک وبسایت React ایی حل شده است اما مایکروسافت همچنان افزایش سرعت در آینده را در نظر دارد.
اما برسیم به آینده یعنی .Net 6: امکانی به نام AOT Compilation به بلیزور افزوده شده است که مجددا سرعت اجرا را تا ۶ برابر سریعتر می کند , این امکان هم قرار بود ابتدا در .NET 5 قرار گیرد که به علت ظهور کرونا به Net. 6 موکول شده است .
نتیجه گیریی نهایی :
WebAssembly Prerender + Lazy Loading + AOT Compilation >= React
یعنی با استفاده از این امکانات که توضیح داده شد , اگر سرعت بلیزور بیشتر از React نشود مطمئن باشید کمتر از آن نیست.همانطور که قبلا گفتم Blazorیک تکنولوژی فول استک می باشد و باید به شکل یک پکیج کامل سمت Backend و Frontend به آن نگاه شود , مزیتی که هیچ یک از فریم ورک های دیگر مثل React یا Angular یا Vue جز با استفاده از NodeJs ندارند.
جامعه یا community استفاده کننده
این مورد هم یکی از نقاط قوت برنامه نویسی .NET می باشد جامعه برنامه نویسان .Net یکی از بزگترین جوامع برنامه نویسی است و شما به راحتی برای یادگیری و نمونه کد به منابع بی پایانی در گیت هاب و StackOverFlow دسترسی دارید.
آینده و بازارکار
این مورد , بسیار مهمه و دوست دارم راجع بهش صحبت کنم , اول در مورد آینده بلیزور , ببینید بلیزور حاصل سال ها تجربه مایکروسافت در زمینه وب هست و تنها فریم ورک SPA غول نرم افزاری دنیا است , پس مطمئن باشید از یادگیری Blazor ضرر نمی کنید. در حال حاضر با انتشار Net. 6 اتفاق بزرگی که میافته امکان توسعه برنامه Native برای ویندوز و مک به کمک BlazorWebView هست و کامل تر شدن Mobile Blazor Bindings با .NET MAUI برای توسعه Appهای اندروید و IOS به کمک Blazor پس همانطور که مشاهده می کنید , مایکروسافت بلیزور را تنها برای ساخت وبسایت ایجاد نکرده است , بلکه برنامه های بسیار مفصلی برای ساخت App های موبایلی و دسکتاپی به کمک بلیزور دارد.
مورد بعدی بازار کار هست , ببینید دوستان بلیزوز یک تکنولوژی بسیار جدید هست و مطمئنا بازار کارش با یک تکنولوژی کاملا شناخته شده مثل React برابر نیست , اما خوب با همین شرایط هم من بخوام تجربه شخصی خودم رو بگم , من از اروپا با همین تکنولوژی پیشنهاد کار داشتم و اصلا از همونجا به Blazor علاقه مند شدم.
اما در داخل ایران هنوز بازار جدیدی هست ولی با توجه به بازار بزرگ خود Asp.net در ایران , دیر یا زود تمامی شرکت های .Net ایی ترجیح می دهند که برنامه نویسی سمت Front رو هم با تکنولوژی خود مایکروسافت انجام دهند ,چون نمیشه شما از یک تکنولوژی نصف کاره استفاده کنی ,همیشه یکپارچگی بهتر عمل می کنه به قول معروف ترجیح می دهند فول استک بر روی .Net باشند. در نتیجه یک بازار بسیار بزرگ برای Blazor وجود خواهد داشت.
همانطور که گفتم , Blazor یک فریم ورک فول استک می باشد و در نتیجه به نسبه حقوق بیشتری از برنامه نویسی Front یا Back به تنهایی خواهد داشت و همین طور شما اگر بخواهید به عنوان فری لنسر (Freelancer) کار کنید می توانید از صفر تا صد یک وبسایت را خودتان به تنهایی برای یک مشتری تهیه نمایید یا از اونم بهتر بتونید ایده استارت آپی خودتون رو به طور کامل چه در سمت سرور چه در سمت کاربر , برنامه نویسی کنید.
آشنایی با فریمورک Blazor