«... بجای نمایش مبلغ در دیجی کالا و بامیلو میزان ساعت از عمرتون رو که باید کار کنید و این جنس رو بخرید، نشون خواهد داد ...»
اگر در بین روز، پس از کار مداوم برنامه نویسی به این نتیجه رسیدید که کند شدید، بین یک ربع تا نیم ساعت فعالیت بدنی کنید.
سلام
ممنون از لینکهای مفیدتون.
هر هفته شنبه ها ساعت 7 صبح کار من بررسی لینک های هفته ی گذشته ی شماست :)
ممنون از لینکهای مفیدتون.
هر هفته شنبه ها ساعت 7 صبح کار من بررسی لینک های هفته ی گذشته ی شماست :)
در صورتی که مشاوره احتیاج به تحقیق داشته باشه و زمانبر باشه به ازای هر ساعت کار هزینه معقولی دریافت میشه؟
در این قسمت روش جایگزین کردن متد css جی‌کوئری را با کدهای خالص جاوا اسکریپتی بررسی می‌کنیم.
کار با Inline Styles
در این مثال می‌خواهیم با استفاده از جاوا اسکریپت، المان‌های h2 و h3 را یافته و سپس h2ها را آبی و h3ها را سبز کنیم:
برای تغییر inline style المان‌ها، از خاصیت style آنها استفاده می‌شود که در نهایت این شیوه‌نامه‌های جدید توسط ویژگی style به همان المان اضافه می‌شوند:
خاصیت style جزو استاندارد DOM Level 2 است که در سال 2000 تصویب شده‌است (از زمان IE 8.0 به بعد در دسترس است). باید دقت داشت که از این روش بیشتر در کتابخانه‌های جاوا اسکریپتی برای شرایطی خاص، جهت تغییر پویای رابط کاربری استفاده می‌شود و هر تغییری که در اینجا اعمال شود، مقادیر قبلی موجود را بازنویسی می‌کند.
همچنین اگر بخواهیم به یک المان چندین شیوه‌نامه را انتساب دهیم، روش کار به صورت زیر است:
پس از یافتن المان‌های مدنظر، تنها کافی است نام شیوه‌نامه‌ی مدنظر را به خاصیت style اضافه و مقدار دهی کنیم. در اینجا نام شیوه‌نامه‌ای که «کبابی» باشد، مانند font-weight، به صورت camel case مانند fontWeight درج خواهد شد؛ هرچند از همان نام اصلی نیز می‌توان به صورت زیر استفاده کرد:
روش دیگری نیز برای انجام این تغییرات چندتایی وجود دارد:
خاصیت style یک المان، از نوع اینترفیس CSSStyleDeclaration است که دارای خاصیت استاندارد cssText نیز می‌باشد. توسط این خاصیت می‌توان چندین شیوه‌نامه را به صورت یکجا به عنصری انتساب داد و یا تمام آنها را خواند.
کار با Style Sheets
Inline styles تنها روش کار با شیوه‌نامه‌ها نیست. روش صحیح و قابل مدیریت کار با شیوه‌نامه‌ها استفاده از فایل‌های style sheets است. برای مثال تغییرات قبل را می‌توان در فایلی به نام styles.css و با محتوای زیر ایجاد کرد:
و سپس آن‌را به صفحه متصل نمود:
و یا حتی می‌توان این شیوه نامه را به صورت inline نیز به ابتدای صفحه اضافه نمود:
اما ممکن است در برنامه بخواهیم امکان تغییر پویای قالب را به کاربران بدهیم. در یک چنین حالتی اعمال این نوع شیوه‌نامه‌ها توسط جاوا اسکریپت مفهوم پیدا می‌کند:
اولین سطر، اولین تگ style اضافه شده به صفحه را یافته (این style می‌تواند inline و یا لینک شده‌ی توسط یک فایل باشد) و سپس شیوه نامه‌ی جدیدی را توسط متد insertRule، در انتهای آن به صورت پویا درج می‌کند.
مخفی کردن و نمایش دادن المان‌ها در صفحه
جی‌کوئری به همراه متدهای hide و show است که کار مخفی کردن و یا نمایش دادن مجدد یک المان‌را انجام می‌دهند:
در کل روش‌های زیادی برای مخفی کردن یک المان وجود دارند. برای مثال می‌توان opacity آن‌را به صفر تنظیم کرد و یا position آن‌را به absolute و سپس آن‌را در مختصاتی خارج از صفحه قرار داد. اما عموما خاصیت display را به none تنظیم می‌کنند. همچنین در استاندارد W3C HTML5، خاصیت جدید hidden از نوع boolean نیز به المان‌ها اضافه شده‌اند که دقیقا برای همین‌منظور بکار می‌رود. مزیت مهم این خاصیت نه فقط استاندارد بودن آن، بلکه بالابردن دسترسی پذیری المان‌های صفحه توسط برنامه‌های «screen reader» مخصوص معلولین است. بنابراین با استفاده از جاوا اسکریپت خالص برای مخفی کردن یک المان می‌توان نوشت:
این روش 25 بار سریعتر از متد hide جی‌کوئری است! از این جهت که jQuery در پشت صحنه مدام متد window.getComputedStyle را برای موارد خاص و بحرانی کار با شیوه‌نامه‌ها فراخوانی می‌کند (در تمام متدهایی که با CSS کار می‌کنند) و این متد تاثیر منفی بر روی کارآیی برنامه دارد.
و چون خاصیت hidden از نوع Boolean است، ذکر آن در یک المان یعنی تنظیم آن به true و حذف آن، یعنی تنظیم آن به false یا نمایش مجدد المان در اینجا:
اندازه‌گیری تاثیر شیوه‌نامه‌ها بر روی طول و عرض المان‌ها
CSS Box Model یک چنین تعریفی را دارد:
زمانیکه از متدهای ()width و ()height جی‌کوئری بر روی المانی استفاده می‌شود، صرفا طول و عرض قسمت «content» را دریافت خواهید کرد.
برای این منظور در جاوا اسکریپت خالص این خواص در اختیار ما است:
روش اندازه گیری Content + Padding توسط جاوا اسکریپت خالص:
این خواص هرچند اخیرا به استانداردهای CSS به صورت رسمی اضافه شده‌اند، اما از زمان IE 6.0 پشتیبانی می‌شده‌اند و با متدهای ()innerWidth و ()innerHeight جی‌کوئری قابل مقایسه هستند.
روش اندازه گیری Content + Padding + Border توسط جاوا اسکریپت خالص:
این خواص از زمان IE 8.0 پشتیبانی می‌شده‌اند.
کار با Inline Styles
<h1>News</h1> <div>Welcome to our site!</div> <h2>World</h2> <h3>Title 1</h3> <div>description 1.</div> <h2>Science</h2> <h3>Title 2</h3> <div>description 2.</div>
var headings = document.querySelectorAll('h2, h3');
for (var i = 0; i < headings.length; i++) {
if (headings[i].tagName === 'H2') {
headings[i].style.color = 'blue';
}
else {
headings[i].style.color = 'green';
}
} <h2 style="color: blue">….</h2> <h3 style="color: green">….</h3>
همچنین اگر بخواهیم به یک المان چندین شیوه‌نامه را انتساب دهیم، روش کار به صورت زیر است:
<h2>World</h2>
...
<h2>Science</h2>
<script>
var headings = document.querySelectorAll('h2');
for (var i = 0; i < headings.length; i++) {
headings[i].style.color = 'blue';
headings[i].style.fontWeight = 'bold';
}
</script> headings[i].style['font-weight'] = 'bold';
var headings = document.querySelectorAll('h2');
for (var i = 0; i < headings.length; i++) {
headings[i].style.cssText = 'color: blue; font-weight: bold';
} کار با Style Sheets
Inline styles تنها روش کار با شیوه‌نامه‌ها نیست. روش صحیح و قابل مدیریت کار با شیوه‌نامه‌ها استفاده از فایل‌های style sheets است. برای مثال تغییرات قبل را می‌توان در فایلی به نام styles.css و با محتوای زیر ایجاد کرد:
h2 { color: blue; }
h3 { color: green; } <link href="styles.css" rel="style sheet">
<style>
h2 { color: blue; }
h3 { color: green; }
</style> var sheet = document.styleSheets[0];
sheet.insertRule('h2 { font-style: italic; }', sheet.cssRules.length - 1); مخفی کردن و نمایش دادن المان‌ها در صفحه
جی‌کوئری به همراه متدهای hide و show است که کار مخفی کردن و یا نمایش دادن مجدد یک المان‌را انجام می‌دهند:
// hide an element $element.hide(); // show it again $element.show();
element.setAttribute('hidden', ''); و چون خاصیت hidden از نوع Boolean است، ذکر آن در یک المان یعنی تنظیم آن به true و حذف آن، یعنی تنظیم آن به false یا نمایش مجدد المان در اینجا:
element.removeAttribute('hidden'); اندازه‌گیری تاثیر شیوه‌نامه‌ها بر روی طول و عرض المان‌ها
CSS Box Model یک چنین تعریفی را دارد:
زمانیکه از متدهای ()width و ()height جی‌کوئری بر روی المانی استفاده می‌شود، صرفا طول و عرض قسمت «content» را دریافت خواهید کرد.
برای این منظور در جاوا اسکریپت خالص این خواص در اختیار ما است:
<style>
.box {
padding: 10px;
margin: 5px;
border: 3px solid;
display: inline-block;
}
</style>
<span class="box">a box</span> // returns 38
var clientHeight = document.querySelector('.box').clientHeight;
// returns 55
var clientWidth = document.querySelector('.box').clientWidth; روش اندازه گیری Content + Padding + Border توسط جاوا اسکریپت خالص:
// returns 44
var offsetHeight = document.querySelector('.box').offsetHeight;
// returns 61
var offsetWidth = document.querySelector('.box').offsetWidth; 
درود بر جناب نصیری عزیز
با تک تک جملاتتون موافقم و نمونه بارزی از عدم رعایت نکاتی که اشاره کردین سایت برنامه نویس هست با یک نگاه به بخش سی شارپ می‌تونید تمام این مواردی رو که اشاره کردین مشاهده کنید. بعد از چند سال نتونستیم جا بندازیم که دوستان عنوان مناسب برای تاپیک خودتون انتخاب کنید در شرح اون به بطور کامل به تشریح مسئله بپردازید اما دریغ از یک اثر مثبت.
یکی از مواردی هم که میشه بهش اشاره کرد نوع ادبیات و بیان احساسات هست
- استادمون گیر داده می‌گه...
- آقا من یه مشکل دارم
- داداش مثله اینکه نمی‌فهمی چی می‌گم
اما اینجا جای تشکر داره از افرادی که "مثلا در سایت StackOverFlow" با مدیریت خودشون (حذف یا ویرایش سوالات) باعث می‌شن که سوالات بی مورد و تکراری کمتر بشن و ما با یک جستجوی ساده بتونیم به جواب برسیم
با تک تک جملاتتون موافقم و نمونه بارزی از عدم رعایت نکاتی که اشاره کردین سایت برنامه نویس هست با یک نگاه به بخش سی شارپ می‌تونید تمام این مواردی رو که اشاره کردین مشاهده کنید. بعد از چند سال نتونستیم جا بندازیم که دوستان عنوان مناسب برای تاپیک خودتون انتخاب کنید در شرح اون به بطور کامل به تشریح مسئله بپردازید اما دریغ از یک اثر مثبت.
یکی از مواردی هم که میشه بهش اشاره کرد نوع ادبیات و بیان احساسات هست
- استادمون گیر داده می‌گه...
- آقا من یه مشکل دارم
- داداش مثله اینکه نمی‌فهمی چی می‌گم
اما اینجا جای تشکر داره از افرادی که "مثلا در سایت StackOverFlow" با مدیریت خودشون (حذف یا ویرایش سوالات) باعث می‌شن که سوالات بی مورد و تکراری کمتر بشن و ما با یک جستجوی ساده بتونیم به جواب برسیم
در مطلب قبلی قراردادهای کوئری نویسی در OData و WCF Data Service - قسمت اول با قراردادهای کوئری نویسی آشنا شدید در این مطلب به جزئیات بیشتر این قراردادها می‌پردازیم.
ادامه دارد...
عمگرهای منطقی
در OData نه عملگر منطقی داریم که امکان مقایسه منطقی در عبارات‌های شرطی را در اختیارمان قرار می‌دهد.
- eq عملگر برابری
- ne عملگر مخالف
- lt عملگر کوچکتری
- le عملگر کوچکتر یا مساوی
- gt عملگر بزرگنری
- ge عملگر بزرگتر یا مساوی
- and
- or
- not
پنج عمگر ریاضی وجود دارد که امکان انجام عملیات ریاضی در کوئری را میسر می‌سازد.
- add جمع دو عملوند
- sub تفریق دو عملوند
- mul ضرب دو عملوند
- div تقیسم دو عملوند
- mod باقیمانده تقسیم دو عملوند
در آخر () برای گروه بنده و اولویت دهی عبارات کاربرد دارد.
توابع عبارت‌های کوئری نویسی
در OData چهار دسته توابع داریم
- String Functions در جدول زیر این توابع با توضیح آن آورده شده است:
آیا رشته p0 شامل رشته p1 هست؟
مثال:http://services.odata.org//Northwind.svc/Customers?$filter=substringof('Alfreds', CompanyName) eq true
شرح: مشتریانی که نام شرکت آنها شامل رشته Alfreds باشدbool substringof(string p0, string p1)
آیا رشته p0 با رشته p1 پایان می‌یابد؟
مثال:http://services.odata.org/Northwind/Northwind.svc/Customers?$filter=endswith(CompanyName, 'Futterkiste')
شرح: مشتریانی که نام شرکت آنها با رشته FutterKiste پایان می‌یابدbool endswith(string p0, string p1) آیا رشته p0 با رشته p1 آغاز می‌شود؟
مثال:http://services.odata.org/Northwind.svc/Customers?$filter=startswith(CompanyName, 'Alfr')
شرح: مشتریانی که نام شرکت آنها با رشته Alfer آغاز می‌یابدboolstartswith(string p0, string p1) محاسبه طول رشته دریافتی.
مثال:http://services.odata.org/Northwind/Northwind.svc/Customers?$filter=length(CompanyName) eq 19
شرح: مشتریانی که طول نام شرکت آنها برابر 19 باشدint length(string p0) برگشت اندیس رشته وروری
مثال:http://services.odata.org/Northwind.svc/Customers?$filter=indexof(CompanyName, 'lfreds') eq 1
شرح: مشتریانی که نام شرکت آنها با رشته lfreds که از کارکتر دوم شروع می‌یابدint indexof(string arg) جایگزینی یک رشته در رشته دیگر
مثال:http://services.odata.org/Northwind.svc/Customers?$filter=replace(CompanyName, ' ', '') eq 'AlfredsFutterkiste'
شرح: مشتریانی که نام شرکت آنها بدون فاصله برابر AlfredsFutterkiste باشد با پرکردن فاصله با جای خالیstring replace(string p0, string find, string replace)
برگرداندن رشته ای از رشته دیگر از شماره اندیس ورودی یا از شماره اندیس تا طول رشته ورودی
مثال:http://services.odata.org/Northwind.svc/Customers?$filter=substring(CompanyName, 1) eq 'lfreds Futterkiste
شرح: مشتریانی که نام شرکت آنها از کاراکتر دوم برابر lfreds Futterkiste باشد
'http://services.odata.org/Northwind.svc/Customers?$filter=substring(CompanyName, 1,2) eq 'lfstring substring(string p0, int pos)
string substring(string p0, int pos, int length)برگرداندن رشته ورودی با کارکتر بزرگ
برگرداندن رشته ورودی با کاراکتر کوچکstring tolower(string p0)
string toupper(string p0)حذف کارکتر‌های Whitespace از دو طرف رشته string trim(string p0) الحاق رشته به هم string concat(string p0, string p1)
- Date Functions
برگرداندن سال تاریخ ورودی
مثال:http://services.odata.org/Northwind.svc/Employees?$filter=year(BirthDate) eq 1971 نint year(DateTimep0)
برگرداندن ماه تاریخ ورودی
مثال:http://services.odata.org/Northwind/Northwind.svc/Employees?$filter=month(BirthDate) eq 5int month(DateTimep0) برگرداندن روز تاریخ ورودی
برگرداندن تعداد روز فاصله زمانی
مثال: http://services.odata.org/Northwind.svc/Employees?$filter=day(BirthDate) eq 8int days(DateTimep0)
int day(DateTimep0)
برگرداندن ساعت تاریخ ورودی
مثال:http://services.odata.org/Northwind.svc/Employees?$filter=hour(BirthDate) eq 4int hour(DateTimep0)
برگرداندن دقیقه تاریخ ورودی
مثال:http://services.odata.org/Northwind.svc/Employees?$filter=minute(BirthDate) eq 40int minute(DateTimep0)
int minutes(DateTimep0)
برگرداندن ثانبه تاریخ ورودی
مثال:http://services.odata.org/Northwind.svc/Employees?$filter=second(BirthDate) eq 40int second(DateTimep0)
- Math Functions
برگرداندن سقف عدد ورودی
مثال:http://services.odata.org/Northwind.svc/Orders?$filter=ceiling(Freight) eq 32double ceiling(double p0)
decimal ceiling(decimal p0)برگرداندن کف عدد ورودی
مثال:http://services.odata.org/Northwind.svc/Orders?$filter=floor(Freight) eq 32double floor(double p0)
decimal floor(decimal p0)گردن کردن عدد ورودی
مثال:ttp://services.odata.org/Northwind.svc/Orders?$filter=round(Freight) eq 32double round(double p0)
decimal round(decimal p0)
- Type Functions
برگرداندن نوع داده وروری
مثالhttp://services.odata.org/Northwind.svc/Orders?$filter=isof(Customer, NorthwindModel.MVPCustomer)
شرح: سفارشاتی که نوع مشتری آنها برابر MVPCustomer باشدboolisof(type p0)
boolisof(expression p0, type p1)تبدیل نوع داده ورودی
<p0> cast(type p0)
< p1> cast(expression p0, type p1
در آخر چند نکته
- برای استفاده از رشته‌ها در عبارات از ' تک کوتشن استفاده نمایید
- برای دستیابی به مقادیر پروپرتی‌ها از value$ استفاده نمایید
- برای دستیابی به آدرس روابط‌های یک موجودیت از links$ استفاده نمایید
مثال:http://services.odata.org/OData/OData.svc/Categories(1)/$links/Products - select$ برای محدود کردن پروپرتی‌های یک موجودیت استفاده می‌شود
مثال:http://services.odata.org/OData/OData.svc/Products?$select=Price,Name - از ستاره برای دستیابی به همه پروپرتی‌های یک موجودیت می‌توان استفاده نمود
مثال:http://services.odata.org/OData/OData.svc/Products?$select=*
کلان‌داده در مسیر تغییر معرفت‌شناسانه جهان است، به گونه‌ای که ما را در مسیر دومین انقلاب فناوری اطلاعات و ارتباطات قرار داده است.
در حالی که حجم داده‌ها هر لحظه بیشتر می‌شود، رقابت بین مراکز تحلیل داده‌ها جدی‌تر می‌شود. در سال ۲۰۱۷ هر روز حدود چهار اگزابایت داده تولید می‌شود که تا ۱۰ سال پیش غیرقابل تصور بود. بدین ترتیب نقش Data Scientistها به سرعت در حال تغییر است. فارغ‌التحصیلان برجسته جهان در رشته‌های جامعه‌شناسی، مدیریت، آمار، فیزیک و… به عنوان تحلیلگر و داده‌کاو در حال فعالیت در شرکت‌های مالی، تجاری و امنیتی هستند. بنا بر مطالعه استیون وبر (استاد مدرسه فناوری برکلی) با توجه به اهمیت کلان‌داده‌ها و توجه ویژه به داده‌کاوی، در نیمه دوم سال ۲۰۱۷ میلادی، فقط در ایالات متحده به بیش از ۸۵۰ هزار متخصص (Data scientist) دیگر نیاز است
در سال جدید، حتی اگر گزینه‌ی daylight saving time را در تنظیمات ویندوز غیرفعال کنید:
با اجرای قطعه کد زیر که سعی می‌کند DateTimeOffset.UtcNow را بر اساس اطلاعات منطقه‌ی زمانی ایران، به زمان محلی تبدیل کند:
باز هم در خروجی، درنظر گرفته شدن 4:30+ مشخص است و به همین جهت در تبدیل صورت گرفته، ساعت نهایی، یک ساعت جلوتر از ساعت واقعی خواهد بود. علت آن هم به مفهوم dynamic daylight saving time برمی‌گردد که اطلاعات بیشتر آن‌را در این مطلب می‌توانید مطالعه کنید.
دات نت نیز در پشت صحنه، همین اطلاعات را دریافت و تحت عنوان Adjustment rules، مورد استفاده قرار می‌دهد:
همانطور که مشاهده می‌کنید، آخرین گزینه‌ی پویای آن به بازه‌ی زمانی 1402 تا سال 9378 تنظیم شده‌است و در طی این بازه، دات نت هنوز همان 4:30+ را جهت تبدیلات منطقه‌ی زمانی ایران به رسمیت می‌شناسد؛ مگر اینکه در به‌روز رسانی‌های بعدی ویندوز، این مشکل برطرف شود و یا ... می‌توانید از این وصله، جهت رفع این مشکل استفاده کنید:
پس از افزودن اطلاعات این فایل رجیستری به ویندوز، نه فقط daylight saving time غیرفعال می‌شود، بلکه اجزای dynamic daylight saving time نیز از سال 2023 به بعد، غیرفعال خواهند شد و اینبار دات نت، سال 1401 را سال آخر تنظیمات ساعت تابستانی درنظر می‌گیرد:
مابقی موارد در اینجا ذکر نشده‌اند، چون به عنوان ورودی دارای daylight saving time غیرفعال تشخیص داده می‌شوند.
اکنون اگر مجددا همان مثال ابتدای بحث را اجرا کنیم، بجای 4:30، عدد 3:30 قابل مشاهده است.
با اجرای قطعه کد زیر که سعی می‌کند DateTimeOffset.UtcNow را بر اساس اطلاعات منطقه‌ی زمانی ایران، به زمان محلی تبدیل کند:
var iranStandardTime = TimeZoneInfo.GetSystemTimeZones()
.FirstOrDefault(timeZoneInfo =>
timeZoneInfo.StandardName.Contains("Iran",
StringComparison.OrdinalIgnoreCase));
Console.WriteLine(iranStandardTime.BaseUtcOffset); // 03:30:00
var dateTime = DateTimeOffset.UtcNow;
var iranTime = TimeZoneInfo.ConvertTime(dateTime, iranStandardTime);
Console.WriteLine(iranTime); // 06/02/1402 12:34:23 ?.? +04:30 --> this is coming from the `adjustment rules` دات نت نیز در پشت صحنه، همین اطلاعات را دریافت و تحت عنوان Adjustment rules، مورد استفاده قرار می‌دهد:
همانطور که مشاهده می‌کنید، آخرین گزینه‌ی پویای آن به بازه‌ی زمانی 1402 تا سال 9378 تنظیم شده‌است و در طی این بازه، دات نت هنوز همان 4:30+ را جهت تبدیلات منطقه‌ی زمانی ایران به رسمیت می‌شناسد؛ مگر اینکه در به‌روز رسانی‌های بعدی ویندوز، این مشکل برطرف شود و یا ... می‌توانید از این وصله، جهت رفع این مشکل استفاده کنید:
پس از افزودن اطلاعات این فایل رجیستری به ویندوز، نه فقط daylight saving time غیرفعال می‌شود، بلکه اجزای dynamic daylight saving time نیز از سال 2023 به بعد، غیرفعال خواهند شد و اینبار دات نت، سال 1401 را سال آخر تنظیمات ساعت تابستانی درنظر می‌گیرد:
مابقی موارد در اینجا ذکر نشده‌اند، چون به عنوان ورودی دارای daylight saving time غیرفعال تشخیص داده می‌شوند.
اکنون اگر مجددا همان مثال ابتدای بحث را اجرا کنیم، بجای 4:30، عدد 3:30 قابل مشاهده است.
از لحاظ تاریخی، Blazor به همراه دو حالت اصلی است:
- Blazor Server، که در آن یک اتصال SignalR، بین مرورگر کاربر و سرور، برقرار شده و سرور حالات مختلف این جلسه‌ی کاری را مدیریت می‌کند. آغاز این حالت، بسیار سریع است؛ اما وجود اتصال دائم SignalR در آن ضروری است. نیاز به وجود این اتصال دائم، با تعداد بالای کاربر می‌تواند کارآیی سرور را تحت تاثیر قرار دهد.
- Blazor WASM: در این حالت کل برنامه‌ی Blazor، درون مرورگر کاربر اجرا می‌شود و برای اینکار الزاما نیازی به سرور ندارد؛ اما آغاز اولیه‌ی آن به علت نیاز به بارگذاری کل برنامه درون مرورگر کاربر، اندکی کند است. اتصال این روش با سرور، از طریق روش‌های متداول کار با Web API صورت می‌گیرد و نیازی به اتصال دائم SignalR را ندارد.
دات نت 8، دو تغییر اساسی را در اینجا ارائه می‌دهد:
- در اینجا حالت جدیدی به نام SSR یا Static Server Rendering ارائه شده‌است (به آن Server-side rendering هم می‌گویند). در این حالت نه WASM ای درون مرورگر کاربر اجرا می‌شود و نه اتصال دائم SignalR ای برای کار با آن نیاز است! در این حالت برنامه تقریبا همانند یک MVC Razor application سنتی کار می‌کند؛ یعنی سرور، کار رندر نهایی HTML قابل ارائه‌ی به کاربر را انجام داده و آن‌را به سمت مرورگر، برای نمایش ارسال می‌کند و همچنین سرور، هیچ حالتی را هم از برنامه ذخیره نمی‌کند و به‌علاوه، کلاینت نیز نیازی به دریافت کل برنامه را در ابتدای کار ندارد (هم آغاز و نمایش سریعی را دارد و هم نیاز به منابع کمتری را در سمت سرور برای اجرا دارد).
- تغییر مهم دیگری که در دات نت 8 صورت گرفته، امکان ترکیب کردن حالت‌های مختلف رندر صفحات، در برنامه‌های Blazor است. یعنی می‌توان یک صفحه‌ی SSR را داشت که تنها قسمت کوچکی از آن بر اساس معماری Blazor Server کار کند (قسمتهای اصطلاحا interactive یا تعاملی آن). یا حتی در یک برنامه، امکان ترکیب Blazor Server و Blazor WASM نیز وجود دارد.
این‌ها عناوین موارد جدیدی هستند که در این سری به تفصیل بررسی خواهیم کرد.
تاریخچه‌ی نمایش صفحات وب در مرورگرها
در ابتدای ارائه‌ی وب، سرورها، ابتدا درخواستی را از طرف مرورگر کلاینت دریافت می‌کردند و در پاسخ به آن، HTML ای را تولید و بازگشت می‌دادند. حاصل آن، نمایش یک صفحه‌ی استاتیک non-interactive بود (غیرتعاملی). علت تاکید بر روی واژه‌ی interactive (تعاملی)، بکارگیری گسترده‌ی آن در نگارش جدید Blazor است؛ تا حدی که ایجاد قالب‌های جدید آغازین برنامه‌های آن، با تنظیم این گزینه همراه است. برای مشاهده‌ی آن، پس از نصب SDK جدید دات نت، دستور dotnet new blazor --help را صادر کنید.
سپس JavaScript از راه رسید و هدف آن، افزودن interactivity به صفحات سمت کاربر بود تا بتوان بر اساس تعاملات و ورودی‌های کاربر، تغییراتی را بر روی محتوای صفحه اعمال کرد. در ادامه JavaScript این امکان را یافت تا بتواند درخواست‌هایی را به سمت سرور ارسال کند و بر اساس خروجی دریافتی، قسمت‌هایی از صفحه‌ی جاری استاتیک را به صورت پویا تغییر دهد.
در ادامه با بالارفتن توانمندی‌های سخت‌افزاری و همچنین توسعه‌ی کتابخانه‌های جاوااسکریپتی، به برنامه‌های تک صفحه‌ای کاملا پویا و interactive رسیدیم که به آنها SPA گفته می‌شود (Single-page applications)؛ از این دست کتابخانه‌ها می‌توان به Backbone اشاره کرد و پس از آن به React و Angular. برنامه‌های Blazor نیز اخیرا به این جمع اضافه شده‌اند.
اما ... اخیرا توسعه دهنده‌ها به این نتیجه رسیده‌اند که SPAها برای تمام امور، مناسب و یا حتی الزامی نیستند. گاهی از اوقات ما فقط نیاز داریم تا محتوایی را خیلی سریع و بهینه تولید و بازگشت دهیم؛ مانند نمایش لیست اخبار، به هزاران دنبال کننده، با حداقل مصرف منابع و در همین حال نیاز به interactivity در بعضی از قسمتهای خاص نیز احساس می‌شود. این رویه‌ای است که در تعدادی از فریم‌ورک‌های جدید و مدرن جاوااسکریپتی مانند Astro در پیش گرفته شده‌است؛ در آنها ترکیبی از رندر سمت سرور، به همراه interactivity سمت کاربر، مشاهده می‌شود. برای مثال این امکان را فراهم می‌کنند تا محتوای قسمتی از صفحه را در سمت سرور تهیه و رندر کنید، یا قسمتی از صفحه (یک کامپوننت خاص)، به صورت interactive فعال شود. ترکیب این دو مورد، دقیقا هدف اصلی Blazor، در دات نت 8 است. برای مثال فرض کنید می‌خواهید برنامه و سایتی را طراحی کنید که چند صفحه‌ی آغازین آن، بدون هیچگونه تعاملی با کاربر هستند و باید سریع و SEO friendly باشند. همچنین تعدادی از صفحات آن هم قرار است فقط یک سری محتوای ثابت را نمایش دهند، اما در قسمتهای خاصی از آن نیاز به تعامل با کاربر است.
معرفی Blazor یکپارچه در دات نت 8
مهم‌ترین تغییر Blazor در دات نت 8، یکپارچه شدن حالت‌های مختلف رندر آن در سمت سرور است. تغییرات زیاد رخ داده‌اند تا امکان داشتن Server-side rendering یا SSR به همراه قابلیت فعال سازی interactivity به ازای هر کامپوننت دلخواه که به آن حالت‌های رندر (Render modes) گفته می‌شود، میسر شوند. در اساس، این روش جدید، همان Blazor Server بهبود یافته‌است که حالت SSR، حالت پیش‌فرض آن است. در کنار آن قابلیت‌های راهبری (navigation)، نیز بهبود یافته‌اند تا برنامه‌های SSR همانند برنامه‌های SPA به‌نظر برسند.
در دات نت 8، ASP.NET Core و Blazor نیز کاملا یکپارچه شده‌اند. در این حالت برنامه‌های Blazor Server می‌توانند همانند برنامه‌های MVC Razor Pages متداول، با کمک قابلیت SSR، صفحات غیر interactive ای را رندر کنند؛ البته به کمک کامپوننت‌های Razor. مزیت آن نسبت به MVC Razor Pages این است که اکنون می‌توانید هر کامپوننت مجزایی از صفحه را نیز کاملا interactive کنید.
در نگارش‌های قبلی Blazor، برنامه‌های Blazor Server حتی برای شروع کار نیاز به یک صفحه‌ی Razor Pages آغازین داشتند، اما دیگر نیازی به این مورد با دات نت 8 نیست؛ چون ASP.NET Core 8x می‌تواند کامپوننت‌های Razor را نیز به صورت HTML خالص بازگشت دهد و یا Minimal API آن به همراه خروجی new RazorComponentResult نیز شده‌است. در حالت SSR، حتی سیستم مسیریابی ASP.NET Core نیز با Blazor یکی شده‌است.
البته این تغییرات، حالت‌های خالص Blazor WebAssembly و یا MAUI Blazor Hybrid را تحت تاثیر قرار نمی‌دهند؛ اما بدیهی است تمام آنها از سایر قابلیت‌های جدید اضافه شده نیز بهره‌مند هستند.
معرفی حالت‌های مختلف رندر Blazor در دات نت 8
یک برنامه‌ی جدید 8x Blazor، در اساس بر روی سرور رندر می‌شود (همان SSR). اما همانطور که عنوان شد، این SSR ارائه شده‌ی توسط Blazor، یک قابلیت مهم را نسبت به MVC Razor pages دارد و آن هم امکان فعالسازی interactivity، به ازای کامپوننت‌ها و قسمتهای کوچکی از صفحه است که واقعا نیاز است تعاملی باشند. فعالسازی آن هم بسیار ساده، یک‌دست و یکپارچه است:
در این حالت می‌توان مشخص کرد که آیا قرار است این کامپوننت خاصی که در قسمتی از صفحه‌ی جاری قرار است رندر شود، نیاز است به کمک فناوری وب‌اسمبلی اجرا شود و یا قرار است بر روی سرور رندر شود؟
این تعاریف حالت رندر را توسط دایرکتیوها نیز می‌توان به ازای هر کامپوننت مجزا، مشخص کرد (یکی از این دو حالت باید بکار گرفته شود):
حالت رندر مشخص شده، توسط زیرکامپوننت‌های تشکیل دهنده‌ی این کامپوننت‌ها نیز به ارث برده می‌شوند؛ اما امکان ترکیب آنها با هم نیست. یعنی اگر حالت رندر را InteractiveServer انتخاب کردید، زیرکامپوننت‌های تشکیل دهنده‌ی آن نمی‌توانند حالت دیگری را انتخاب کنند.
امکان اعمال این ویژگی‌ها به مسیریاب برنامه نیز وجود دارد که در این حالت کل برنامه را interactive می‌کند. اما در حالت پیش‌فرض، برنامه‌ای که ایجاد می‌شود فاقد تنظیمات تعاملی در ریشه‌ی اصلی آن است.
معرفی حالت رندر خودکار در Blazor 8x
یکی دیگر از حالت‌های رندر معرفی شده‌ی در Blazor 8x، حالت Auto است:
این حالت رندر، به صورت پیش‌فرض از WebAssembly استفاده می‌کند؛ اما فقط زمانیکه فایل‌های مرتبط با آن کاملا دریافت شده‌باشند. یعنی در ابتدای کار برای ارائه‌ی امکانات تعاملی، از حالت سریع و سبک InteractiveServer استفاده می‌کند؛ اما در پشت صحنه مشغول به دریافت فایل‌های مرتبط با نگارش وب‌اسمبلی کامپوننت فوق خواهد شد. پس از بارگذاری و کش شدن این فایل‌ها، برای بارهای بعدی رندر، فقط از حالت وب‌اسمبلی استفاده می‌کند.
معرفی حالت رندر Streaming در Blazor 8x
در بار اول بارگذاری صفحات، ممکن است دریافت اطلاعات مرتبط با آن کمی کند و با وقفه باشند. در این حالت برای اینکه برنامه‌های SSR یک صفحه‌ی خالی را نمایش ندهند، می‌توان در ابتدا با استفاده از حالت رندر جدید StreamRendering، حداقل قالب صفحه را نمایش داد و سپس اصل اطلاعات را:
این روش، از HTTP Streaming در پشت صحنه استفاده کرده و مرحله به مرحله قسمتهای تکمیل شده را به سمت مرورگر کاربر، برای نمایش نهایی ارسال می‌کند.
جزئیات بیشتر نحوه‌ی کار با این حالات را در قسمتهای بعدی بررسی خواهیم کرد.
نتیجه گیری:
روش‌های جدید رندر ارائه شده‌ی در Blazor 8x، برای موارد زیر مفید هستند:
- زمانیکه قسمت عمده‌ای از برنامه‌ی شما بر روی سرور اجرا می‌شود.
- زمانیکه خروجی اصلی برنامه‌ی شما بیشتر حاوی محتواهای ثابت است؛ مانند CMSها.
- زمانیکه می‌خواهید صفحات شما قابل ایندکس شدن توسط موتورهای جستجو باشند و مباحث SEO برای شما مهم است.
- زمانیکه نیاز به مقدار کمی امکانات تعاملی دارید و فقط قسمتهای کوچکی از صفحه قرار است تعاملی باشند. برای مثال فقط قرار است قسمت کوچکی از یک صفحه‌ی نمایش مقاله‌ای از یک بلاگ، به همراه امکان رای دادن به آن مطلب (تنها قسمت «تعاملی» صفحه) باشد.
- و یا زمانیکه می‌خواهید MVC Razor Pages را با یک فناوری جدید که امکانات بیشتری را در اختیار شما قرار می‌دهد، جایگزین کنید.
- Blazor Server، که در آن یک اتصال SignalR، بین مرورگر کاربر و سرور، برقرار شده و سرور حالات مختلف این جلسه‌ی کاری را مدیریت می‌کند. آغاز این حالت، بسیار سریع است؛ اما وجود اتصال دائم SignalR در آن ضروری است. نیاز به وجود این اتصال دائم، با تعداد بالای کاربر می‌تواند کارآیی سرور را تحت تاثیر قرار دهد.
- Blazor WASM: در این حالت کل برنامه‌ی Blazor، درون مرورگر کاربر اجرا می‌شود و برای اینکار الزاما نیازی به سرور ندارد؛ اما آغاز اولیه‌ی آن به علت نیاز به بارگذاری کل برنامه درون مرورگر کاربر، اندکی کند است. اتصال این روش با سرور، از طریق روش‌های متداول کار با Web API صورت می‌گیرد و نیازی به اتصال دائم SignalR را ندارد.
دات نت 8، دو تغییر اساسی را در اینجا ارائه می‌دهد:
- در اینجا حالت جدیدی به نام SSR یا Static Server Rendering ارائه شده‌است (به آن Server-side rendering هم می‌گویند). در این حالت نه WASM ای درون مرورگر کاربر اجرا می‌شود و نه اتصال دائم SignalR ای برای کار با آن نیاز است! در این حالت برنامه تقریبا همانند یک MVC Razor application سنتی کار می‌کند؛ یعنی سرور، کار رندر نهایی HTML قابل ارائه‌ی به کاربر را انجام داده و آن‌را به سمت مرورگر، برای نمایش ارسال می‌کند و همچنین سرور، هیچ حالتی را هم از برنامه ذخیره نمی‌کند و به‌علاوه، کلاینت نیز نیازی به دریافت کل برنامه را در ابتدای کار ندارد (هم آغاز و نمایش سریعی را دارد و هم نیاز به منابع کمتری را در سمت سرور برای اجرا دارد).
- تغییر مهم دیگری که در دات نت 8 صورت گرفته، امکان ترکیب کردن حالت‌های مختلف رندر صفحات، در برنامه‌های Blazor است. یعنی می‌توان یک صفحه‌ی SSR را داشت که تنها قسمت کوچکی از آن بر اساس معماری Blazor Server کار کند (قسمتهای اصطلاحا interactive یا تعاملی آن). یا حتی در یک برنامه، امکان ترکیب Blazor Server و Blazor WASM نیز وجود دارد.
این‌ها عناوین موارد جدیدی هستند که در این سری به تفصیل بررسی خواهیم کرد.
تاریخچه‌ی نمایش صفحات وب در مرورگرها
در ابتدای ارائه‌ی وب، سرورها، ابتدا درخواستی را از طرف مرورگر کلاینت دریافت می‌کردند و در پاسخ به آن، HTML ای را تولید و بازگشت می‌دادند. حاصل آن، نمایش یک صفحه‌ی استاتیک non-interactive بود (غیرتعاملی). علت تاکید بر روی واژه‌ی interactive (تعاملی)، بکارگیری گسترده‌ی آن در نگارش جدید Blazor است؛ تا حدی که ایجاد قالب‌های جدید آغازین برنامه‌های آن، با تنظیم این گزینه همراه است. برای مشاهده‌ی آن، پس از نصب SDK جدید دات نت، دستور dotnet new blazor --help را صادر کنید.
سپس JavaScript از راه رسید و هدف آن، افزودن interactivity به صفحات سمت کاربر بود تا بتوان بر اساس تعاملات و ورودی‌های کاربر، تغییراتی را بر روی محتوای صفحه اعمال کرد. در ادامه JavaScript این امکان را یافت تا بتواند درخواست‌هایی را به سمت سرور ارسال کند و بر اساس خروجی دریافتی، قسمت‌هایی از صفحه‌ی جاری استاتیک را به صورت پویا تغییر دهد.
در ادامه با بالارفتن توانمندی‌های سخت‌افزاری و همچنین توسعه‌ی کتابخانه‌های جاوااسکریپتی، به برنامه‌های تک صفحه‌ای کاملا پویا و interactive رسیدیم که به آنها SPA گفته می‌شود (Single-page applications)؛ از این دست کتابخانه‌ها می‌توان به Backbone اشاره کرد و پس از آن به React و Angular. برنامه‌های Blazor نیز اخیرا به این جمع اضافه شده‌اند.
اما ... اخیرا توسعه دهنده‌ها به این نتیجه رسیده‌اند که SPAها برای تمام امور، مناسب و یا حتی الزامی نیستند. گاهی از اوقات ما فقط نیاز داریم تا محتوایی را خیلی سریع و بهینه تولید و بازگشت دهیم؛ مانند نمایش لیست اخبار، به هزاران دنبال کننده، با حداقل مصرف منابع و در همین حال نیاز به interactivity در بعضی از قسمتهای خاص نیز احساس می‌شود. این رویه‌ای است که در تعدادی از فریم‌ورک‌های جدید و مدرن جاوااسکریپتی مانند Astro در پیش گرفته شده‌است؛ در آنها ترکیبی از رندر سمت سرور، به همراه interactivity سمت کاربر، مشاهده می‌شود. برای مثال این امکان را فراهم می‌کنند تا محتوای قسمتی از صفحه را در سمت سرور تهیه و رندر کنید، یا قسمتی از صفحه (یک کامپوننت خاص)، به صورت interactive فعال شود. ترکیب این دو مورد، دقیقا هدف اصلی Blazor، در دات نت 8 است. برای مثال فرض کنید می‌خواهید برنامه و سایتی را طراحی کنید که چند صفحه‌ی آغازین آن، بدون هیچگونه تعاملی با کاربر هستند و باید سریع و SEO friendly باشند. همچنین تعدادی از صفحات آن هم قرار است فقط یک سری محتوای ثابت را نمایش دهند، اما در قسمتهای خاصی از آن نیاز به تعامل با کاربر است.
معرفی Blazor یکپارچه در دات نت 8
مهم‌ترین تغییر Blazor در دات نت 8، یکپارچه شدن حالت‌های مختلف رندر آن در سمت سرور است. تغییرات زیاد رخ داده‌اند تا امکان داشتن Server-side rendering یا SSR به همراه قابلیت فعال سازی interactivity به ازای هر کامپوننت دلخواه که به آن حالت‌های رندر (Render modes) گفته می‌شود، میسر شوند. در اساس، این روش جدید، همان Blazor Server بهبود یافته‌است که حالت SSR، حالت پیش‌فرض آن است. در کنار آن قابلیت‌های راهبری (navigation)، نیز بهبود یافته‌اند تا برنامه‌های SSR همانند برنامه‌های SPA به‌نظر برسند.
در دات نت 8، ASP.NET Core و Blazor نیز کاملا یکپارچه شده‌اند. در این حالت برنامه‌های Blazor Server می‌توانند همانند برنامه‌های MVC Razor Pages متداول، با کمک قابلیت SSR، صفحات غیر interactive ای را رندر کنند؛ البته به کمک کامپوننت‌های Razor. مزیت آن نسبت به MVC Razor Pages این است که اکنون می‌توانید هر کامپوننت مجزایی از صفحه را نیز کاملا interactive کنید.
در نگارش‌های قبلی Blazor، برنامه‌های Blazor Server حتی برای شروع کار نیاز به یک صفحه‌ی Razor Pages آغازین داشتند، اما دیگر نیازی به این مورد با دات نت 8 نیست؛ چون ASP.NET Core 8x می‌تواند کامپوننت‌های Razor را نیز به صورت HTML خالص بازگشت دهد و یا Minimal API آن به همراه خروجی new RazorComponentResult نیز شده‌است. در حالت SSR، حتی سیستم مسیریابی ASP.NET Core نیز با Blazor یکی شده‌است.
البته این تغییرات، حالت‌های خالص Blazor WebAssembly و یا MAUI Blazor Hybrid را تحت تاثیر قرار نمی‌دهند؛ اما بدیهی است تمام آنها از سایر قابلیت‌های جدید اضافه شده نیز بهره‌مند هستند.
معرفی حالت‌های مختلف رندر Blazor در دات نت 8
یک برنامه‌ی جدید 8x Blazor، در اساس بر روی سرور رندر می‌شود (همان SSR). اما همانطور که عنوان شد، این SSR ارائه شده‌ی توسط Blazor، یک قابلیت مهم را نسبت به MVC Razor pages دارد و آن هم امکان فعالسازی interactivity، به ازای کامپوننت‌ها و قسمتهای کوچکی از صفحه است که واقعا نیاز است تعاملی باشند. فعالسازی آن هم بسیار ساده، یک‌دست و یکپارچه است:
@* For being rendered on the server *@ <Counter @rendermode="@InteractiveServer" /> @* For running in WebAssembly *@ <Counter @rendermode="@InteractiveWebAssembly" />
این تعاریف حالت رندر را توسط دایرکتیوها نیز می‌توان به ازای هر کامپوننت مجزا، مشخص کرد (یکی از این دو حالت باید بکار گرفته شود):
@rendermode InteractiveServer @rendermode InteractiveWebAssembly
امکان اعمال این ویژگی‌ها به مسیریاب برنامه نیز وجود دارد که در این حالت کل برنامه را interactive می‌کند. اما در حالت پیش‌فرض، برنامه‌ای که ایجاد می‌شود فاقد تنظیمات تعاملی در ریشه‌ی اصلی آن است.
معرفی حالت رندر خودکار در Blazor 8x
یکی دیگر از حالت‌های رندر معرفی شده‌ی در Blazor 8x، حالت Auto است:
<Counter @rendermode="@InteractiveAuto" />
معرفی حالت رندر Streaming در Blazor 8x
در بار اول بارگذاری صفحات، ممکن است دریافت اطلاعات مرتبط با آن کمی کند و با وقفه باشند. در این حالت برای اینکه برنامه‌های SSR یک صفحه‌ی خالی را نمایش ندهند، می‌توان در ابتدا با استفاده از حالت رندر جدید StreamRendering، حداقل قالب صفحه را نمایش داد و سپس اصل اطلاعات را:
@attribute [StreamRendering(prerender: true)]
جزئیات بیشتر نحوه‌ی کار با این حالات را در قسمتهای بعدی بررسی خواهیم کرد.
نتیجه گیری:
روش‌های جدید رندر ارائه شده‌ی در Blazor 8x، برای موارد زیر مفید هستند:
- زمانیکه قسمت عمده‌ای از برنامه‌ی شما بر روی سرور اجرا می‌شود.
- زمانیکه خروجی اصلی برنامه‌ی شما بیشتر حاوی محتواهای ثابت است؛ مانند CMSها.
- زمانیکه می‌خواهید صفحات شما قابل ایندکس شدن توسط موتورهای جستجو باشند و مباحث SEO برای شما مهم است.
- زمانیکه نیاز به مقدار کمی امکانات تعاملی دارید و فقط قسمتهای کوچکی از صفحه قرار است تعاملی باشند. برای مثال فقط قرار است قسمت کوچکی از یک صفحه‌ی نمایش مقاله‌ای از یک بلاگ، به همراه امکان رای دادن به آن مطلب (تنها قسمت «تعاملی» صفحه) باشد.
- و یا زمانیکه می‌خواهید MVC Razor Pages را با یک فناوری جدید که امکانات بیشتری را در اختیار شما قرار می‌دهد، جایگزین کنید.