در فصل پنجم از این آموزش متنی قراراست که در رابطه با تکنولوژی‌های صحبت کنیم که در توسعه وب اپلیکیشن ها در سمت کلاینت مورد استفاده قرار می‌گیرند. برخی از این تکنولوژی ها از قبیل html و css و جاوااسکریپت بسیار ضروری هستند و می بایست تمامی افرادی که می‌خواهند در حوزه توسعه اپلیکیشن‌های وب فعالیت داشته باشند آموزش ببینند. در رابطه با هر کدام از این سه تایی تکنولوژی می‌تواند از بسته ی آموزش ویدئویی HTML5 و بسته ی آموزش ویدئویی CSS و بسته ی آموزش ویدئویی جاوا اسکریپت دیدن کنید. همانطور که احتمالا می دانید اپلیکیشن های وب ایجاد شده با Asp.Net Core در واقع وب اپلیکیشن هایی هستند که به تکنولوژی‌های وب در سمت کاربر و یا Client Side از قبیل HTML و CSS و جاوااسکریپت وابسته می‌شوند. با تفکیک کردن قسمتهای مختلف یک صفحه از قبیل محتوای آن که همان HTML می باشد از Layout و Style ها که همان CSS می‌باشند و نهایتاً رفتار برنامه که از طریق جاوااسکریپت پیاده سازی می شود می‌توانیم اصل Separation of Concerns که در قسمت های قبل از این آموزش مطرح شد را به سادگی به دست بیاوریم. زمانی که Separation of Concerns پیاده سازی می شود تغییرات ایجاد شده بر روی ساختار طراحی و همچنین رفتار برنامه به سادگی اتفاق می‌افتد و هیچ کدام از این موارد با یکدیگر درگیر نمی شوند.
علیرغم تکنولوژی های HTML و CSS است که در حال حاضر نسبتاً پایدار هستند، تکنولوژی و زبان برنامه نویسی جاوااسکریپت با سرعت بسیار زیادی در حال تکامل یافتن است و مرتبا فریم ورک های مختلفی از قبیل Angular و React و View Js منتشر می‌شوند. در این فصل قرار است که در رابطه با روش های استفاده از زبان برنامه نویسی جاوااسکریپت توسط برنامه نویسان وب صحبت کرده و دیدی کلی در رابطه با برخی از تکنولوژی ها و فریم ورک ها از قبیل React و Angular را در اختیار شما قرار بدهیم. ضمنا توصیه می‌کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 و بسته ی آموزش ویدئویی شروع به کار با Vue.js دیدن بفرمایید.
نکته آخر اینکه احتمالاً می‌دانید بلیزر یک روش جایگزین برای استفاده کردن از کد های سی شارپ در توسعه وب اپلیکیشن ها در Client Side می باشد. به عبارت دیگر با استفاده از بلیزر شما دیگر نیازی به استفاده کردن از فریم ورک های جاوااسکریپت ندارید و می توانید User Interface برنامه در سمت کلاینت را به صورتی کاملا Interactive و تعاملی ایجاد کنید. البته پشتیبانی شدن از Client-side Blazor در زمان تولید این آموزش در حالت پیش نمایش و یا in preview می‌باشند. در این رابطه توصیه می‌کنیم از آموزش متنی Blazor برای توسعه دهندگان ASP.NET Web Forms دیدن کنید.
بررسی تکنولوژی HTML
زبان برنامه نویسی HTML مخفف Hyper Text Markup Language می باشد در واقع یک زبان Markup استاندارد است که برای ایجاد کردن صفحات وب و وب اپلیکیشن ها از آن استفاده می شود. عناصر موجود در زبان HTML باعث می‌شوند تا بتوانیم اجزای تشکیل دهنده Page ها را ایجاد کرده، متن های مورد نظر خود را در قالب مطلوب خود قرار داده، عکس ها و form input ها و دیگر اجزای سازنده را نیز به راحتی لحاظ کنیم. زمانی که یک مرورگر یک درخواست و یا request را به یک url ارسال می کند در پاسخ به آن درخواست یک Page و یا یک اپلیکیشن دریافت شده و در قالب یک سند و یا داکیومنت از نوع HTML به سمت مرورگر کاربر ارسال می شود. این فایل HTML ممکن است اطلاعات دیگری را نیز نیاز داشته باشد و از فایل های دیگری از قبیل CSS برای نمایش اطلاعات و از جاوااسکریپت برای اضافه کردن کدهای برنامه نویسی استفاده کند.
بررسی CSS
کلمه CSS مخفف Cascading Style Sheet می‌باشد. از زبان CSS به منظور کنترل کردن ظاهر و چیدمان عناصر که تحت عنوان HTML element نیز شناخته می‌شود استفاده می‌کنیم. در واقع Style ها و یا ظاهر برنامه با استفاده از css اعمال شده بر روی عناصر HTML ایجاد می‌شود. کدهای css را می توان به طور مستقیم در یک فایل یکسان که محتوای HTML در آن قرار گرفته است اضافه کرد و یا در یک فایل جداگانه با پسوند css قرار داد و از فایل HTML به این فایل یک reference ایجاد نمود. Style های ایجاد شده توسط CSS بر اساس مکانیزمی که با استفاده از آن HTML element ها را انتخاب می کنید اعمال خواهند شد.
برای مثال یک Style ممکن است بر روی یک داکیومنت کامل اعمال شود اما توسط Style های دیگری که به یک element خاص اعمال گردیده اند رونویسی شود. از طرفی یک Style منحصر به فرد برای یک element می‌تواند توسط Style دیگری که بر اساس CSS class مورد نظر لحاظ گردیده است رونویسی بشود. تمامی این مکانیزمها در ذات cascading و یا آبشاری بودن CSS لحاظ گردیده است. تأثیری که در قسمت زیر مشاهده می کنید مثالی از نحوه عملکرد CSS را نشان می‌دهد. در رابطه با CSS می توانید از بسته ی آموزش ویدئویی CSS استفاده کنید.
یکی از روش‌های مناسب در استفاده کردن از کدهای CSS این است که آنها را در فایل های جداگانه قرار داده و بر اساس انتخاب‌های مختلفی که انجام می دهید یک Style و یا قالب قابل استفاده مجدد و یک شکل را برای کل برنامه در نظر بگیرید. قراردادن Style ها درون فایل های HTML روش مناسبی نیست و همچنین نباید از اضافه کردن Style ها به عناصر تک تک استفاده کنید. به عبارت دیگر باید سعی شود که Style ها را بر اساس کلاسهایی لحاظ کنید که این کلاس ها را به عناصر موجود در فایل HTML اعمال می‌کنیم. در رابطه با تمامی این موارد در بسته ی آموزش ویدئویی HTML5 و بسته ی آموزش ویدئویی CSS صحبت کرده‌ایم.
بررسی CSS preprocessor ها
یکی از مشکلات استفاده کردن از فایل ها و دستورات css عدم امکان لحاظ کردن دستورات شرطی، تعریف متغیرها و دیگر ویژگی‌های زبان های برنامه نویسی می باشد. از همین جهت ابلاغ فایل های CSS بسیار حجیم هستند و کد های تکراری زیادی در آنها وجود دارد. دلیل این موضوع استفاده کردن از فونت ها، رنگ ها و دیگر تنظیمات تکراری برای قسمتهای مختلف فایل های HTML و HTML element های مختلف می باشد. با استفاده از CSS preprocessor ها شما می توانید برخی از ویژگی های زبان های برنامه نویسی را به فایلهای CSS اضافه کنید و اصل DRY و یا don’t repeat yourself را به فایل های CSS خود یا لحاظ نمائید.
دو مورد از مشهورترین و محبوبترین CSS preprocessor ها Sass و LESS می باشند. هر دوی اینها فایل های CSS را گسترش داده و قابلیت‌های زبان های برنامه نویسی را به آن اضافه می‌کنند و البته backward compatible نیز می‌باشند. منظور از backward compatible بودن آنها این است که یک فایل CSS ساده می‌تواند یک فایل معتبر Cass و یا LESS باشد. Cass بر اساس روبی پیاده سازی شده است و LESS بر اساس جاوااسکریپت کار می‌کند و هر دوی آنها می‌توانند در فرآیند توسعه نرم افزار شما به صورت محلی مورد استفاده قرار بگیرند. هر دوی این preprocessor ها از ابزارهای Command line خود بهره مند شده و علاوه بر این می تواند در ویژوال استودیو با استفاده از ابزارهایی از قبیل Gulp و یا Grunt مورد استفاده قرار بگیرند.
بررسی زبان جاوا اسکریپت
زبان برنامه نویسی جاوااسکریپت یک زبان برنامه نویسی dynamic و یا پویا و مفسری و یا interpreted می باشد. این زبان برنامه نویسی در حال حاضر بر اساس استانداردهای ECMAScript در حال استانداردسازی شدن می باشند. زبان برنامه نویسی جاوااسکریپت کاربرد زیادی در توسعه وب اپلیکیشن ها دارد. شبیه به کدهای CSS می توانید کدهای زبان برنامه نویسی جاوااسکریپت را نیز در همان فایل HTML یکسان قرار داده و به عنوان Attribute هایی به HTML element های خود اضافه کنید. علاوه بر این امکان تعریف کردن یک بلاک از فایلهای جاوااسکریپت در فایل HTML وجود دارد و البته امکان تعریف کردن کدهای جاوااسکریپت در یک فایل جداگانه نیز هست. شبیه به کدهای CSS توصیه می‌شود که کدهای جاوااسکریپت را نیز در یک فایل جداگانه قرار دهید و سپس از درون فایل HTML به این گروه از فایلها reference ایجاد کنید.
در زمان استفاده کردن از زبان برنامه نویسی جاوااسکریپت در یک وب اپلیکیشن چندین کار مختلف با استفاده از آن امکان پذیر خواهد شد:
- انتخاب کردن یک HTML element و بازیابی کردن و یا بروز رسانی کردن مقدار آن
- انجام یک کوئری بر روی یک Web API برای به دست آوردن داده
- ارسال کردن یک دستور به یک Web API و سپس دریافت کردن یک نتیجه و پاسخ دادن به آن نتیجه با استفاده از یک callback
- انجام عملیات اعتبارسنجی و یا validation
تمامی این عملیات را می‌توان با استفاده از زبان برنامه نویسی جاوااسکریپت انجام داد. اما بسیاری از کتابخانه‌ها توسعه داده شده اند تا بتوانند انجام این گونه از کارها را برای شما ساده تر کنند. یکی از موفق ترین و پرکاربردترین این کتابخانه‌ها jQuery نام دارد که با استفاده از آن می توانید بسیاری از کارهای مربوط به توسعه وب اپلیکیشن‌ها را به روشی ساده تر انجام دهید. برای Single Page Applications ها که تحت عنوان SPA نیز شناخته می‌شوند jQuery ویژگی‌های خاص و مناسبی را در اختیار شما قرار نمی‌دهد. بنابراین می بایست در چنین شرایطی از دیگر گزینه‌ها از قبیل Angular و یا React استفاده کنید. در رابطه با jQuery توصیه می‌کنیم از معرفی و شروع به کار با jQuery و آموزش ویدئویی توسعه وب با جی کوئری موبایل (jQuery Mobile) دیدن کنید. در قسمت بعدی در رابطه با jQuery و کاربردهای آن صحبت خواهیم کرد