Front-end چیست؟ | صفر تا صد فرانت-اند

فرانت-اند
فرانت-اند چیست؟

طراحی سایت از قسمت های مختلفی از جمله فرانت-اند (front-end) و بک-اند (Back-end) و سرور و پایگاه داده و ..و تشکیل میشود. ما در این مقاله گذری میکنیم بر فرانت-اند و شناخت آن.

سفری به عمق فرانت اند

در این مقاله:

۱: front-end را به صورت کامل توضیح میدهیم.

۲: انواع تکنولوژی های front-end را بررسی میکنیم.

Front-end چیست؟

توسعه فرانت-اند (Front-End) توسعه سمت مشتری نیز نامیده میشود.
این شاخه در واقع عمل تولید HTML – CSS – JavaScript میباشد به طوری که کاربر بتواند به راحتی با سایت شما تعامل داشته باشد.

فرانت اند
فرانت اند

مهمترین چیزی که باعث جلب توجه مراجعه کنندگان میشود، ظاهر سایت شماست.
رقابت زیادی بین سایت های معروف وجود دارد تا بتوانند ظاهر زیبا و جدیدی را ارائه دهند تا کاربران بیشتری را جذب خود کنند.

چالش همراه با توسعه ی front-end ، پیشرفت سریع و اضافه شدن تکنولوژی های به روز در این زمینه است.
به طوری که توسعه دهندگان باید از به روزترین تکنولوژی ها آگاه باشد.
مجله آموزشی ویتکس همیشه به روزترین تکنولوژی ها رو بررسی میکند. همراه باشید…

هدف از طراحی یک سایت، این است که اطمینان حاصل شود که کاربر زمانی که وبسایت را باز میکند، مطالب را با یک نظم خاصی ببیند و بتواند آن هارا به هم مرتبط کند.
این مسئله ای بسیار پیچیده است. زیرا امروزه کاربران با دستگاه های مختلفی با اندازه های مختلف به سایت شما مراجعه میکنند. از جمله لپتاپ، انواع گوشی موبایل، رایانه و تبلت.

همانطور که گفتیم ظاهر سایت و درواقع المان های نمایش داده شده به کاربر (Front-end)، توسط ابزار ها و زبان های مختلفی پیاده سازی میشود، در ادامه به بررسی هرکدام میپردازیم.

HTML چیست؟

واژه HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کلیه کدهای صفحه اعم از طرف سرور و طرف کاربر در نهایت به کدهای HTML تبدیل میشود و توسط مرورگر نمایش داده می شوند.

HTML چیست؟
HTML چیست؟

یکی از عناصر مهم در توسعه فرانت-اند HTML میباشد که به صورت اختصاصی در مقاله html بررسی شده است.
اما به صورت خلاصه و در یک جمله، html حکم استخوان بندی یک وبسایت را دارد.

مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.

در واقع در html میتوان توسط تگ های مختلف، متن، عکس، فیلم و المان های مختلفی را در صفحه گذاشت.

فایل html، یک پروندهٔ متنی است که معمولاً با پسوند htm یا html نام‌گذاری میشود و محتویات آن از تگ های html تشکیل می‌شود. مرورگرهای وب، که میتوانند تگ های html را درک کنند، تک‌تک آن‌ها را از داخل فایل اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اگر به یک ساختمان و قسمت های مختلف آن توجه کنید، ملاحظه میکنید که ستون های ساختمان مهمترین بخش آن هستند. این ستون ها حکم همان HTML در یک وبسایت را دارند اما…!

جادوگری به نام CSS :

همان ساختمانی که در نظر دارید، بدون نما و بدون رنگ، اصلا به دل نمیشیند و فقط مثل چند قطعه آهن ایستاده می باشد.

در دنیای طراحی سایت، CSS، حکم همان نما و ظاهر را دارد.

واژه CSS مخفف Cascading Style Sheets میباشد که در کنار HTML برای طراحی صفخات وب استفاده میشود. در واقع CSS زبانی است که توسط آن قادر خواهید تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید.

CSS چیست؟
CSS چیست؟
CSS چیست؟

در واقع CSS به شما قدرت کنترل رنگ ها و استایل های موجود در سایت را میدهد و شما میتوانید حتی انیمیشن های بسیار زیبایی به کمک آن بسازید که به طور تخصصی توسط ویتکس بررسی میشود.

JavaScript چیست؟

اما حالا فرض کنید که سایت ما دارای استخوان بندی و ظاهری بسیار دلنشین باشد. اما هیچ تحرکی و یا هیچ عملیاتی انجام ندهد. آیا این سایت کامل است؟ آیا ما نیاز نداریم که عملیاتی توسط سایت انجام داده شود؟ راهکار چیست؟

نگران نباشید. JS یه کمک شما آمده است.

جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان مفسری بسیار محبوب میباشد که وظیفه عملیاتی کردن سایت شما را بر عهده دارد.

میتوانید معرفی جاوا اسکریپت و آموزش جاوا اسکریپت را به صورت اختصاصی در ویتکس دنبال کنید.

مرورگر چیست؟

مرورگر وب، نرم افزاری است که اطلاعات را را از سرور های وب جهانی دریافت کرده، به نمایش می گذارد و یا اطلاعاتی را به این سرور ها میفرستد. این منابع اطلاعاتی می توانند صفحات HTML ، عکس، ویدیو و انواع دیگری از محتوا باشند.

انواع مرورگرها
انواع مرورگرها

به عبارت دیگر مرورگر ها اطلاعات و صفحات موجود در سرور های اینترنت را به صورت ساده و قابل درک، نمایش میدهد.

انواع مرورگر های معروف:

مرورگر وب بدون واسط گرافیکی کاربر(Headless Browsers):

این مرورگر ها در واقع مرورگر هایی هستند که ظاهر گرافیکی خاصی ندارند و برای کاربران عادی ساخته نشده اند.

کاربرد کلی مرورگرهای بدون واسط گرافیکی در آزمایش صفحات وب، چگونگی رندر المان های HTML، بررسی کتابخانه های جاوا اسکریپت می باشد باید در نظر داشت در حالت معمول مباحثی همچون چارچوب صفحه، رنگ بندی، قلم، اجرای کد جاوا اسکریپت و ajax در دسترس نیست.

انواع مرورگر های بدون رابط کاربری:

واکنش گرا یا Responsive چیست؟

واکنش گرا چیست؟
واکنش گرا چیست؟

واکنش گرا به این معنی است که سایت شما به دستگاه های مختلف با ابعاد متفاوت واکنش مناسب نشان دهد.

در گذشته برای طراخی سایت ها دو مدل کد نویسی انجام میشد یکی desktop mode و دیگری mobile mode .

اما جدیدا توسط سیستم های پیشرفته مانند بوت استرپ (bootstrap) میتوان به راحتی سایت را واکنش گرا به ابعاد مختلف ساخت و دیگر مشکلی در نمایش سایت در ابعاد مختلف نخواهیم داشت.

خب تا اینجا توانستیم قسمت های مختلف فرانت-اند را بررسی کنیم.

حالا چندتا از مهمترین و محبوبترین تکنولوژی های فرانت اند را معرفی میکنیم. لازم به ذکر است که در مقالات بعدی و همچنین در آکادمی ویتکس به صورت اختصاصی به آموزش هر یک میپردازیم.

جی کوئری (jQuery):

جی کوئری چیست؟
جی کوئری چیست؟

جی کوئری یکی از کتابخانه های قدرتمند جاوا اسکریپت میباشد که مانند جاوا اسکریپت وظیفه ی عملیاتی کردن سایت را بر عهده دارد.

اگر بخواهیم به صورت خلاصه jquery را تعریف کنیم:

  • یک کتابحانه رایگان جاوا اسکریپت میباشد.
  • توسط آن میتوان اسکریپت های قدرتمندی را فقط در چند خط نوشت.
  • توسط آن میتوان برای ساخت افکت های زیبای ظاهری، اجرای دستورات AJAX استفاده کرد.

انگولار (AngularJS) چیست؟

انگولار چیست؟
انگولارasd چیست؟

یکی دیگه از کتابخانه های جاوا اسکریپت انگولار میباشد که از سیستم کنترل داده CRUD پیروی میکند.

AngularJS یک فریمورک ساختاری برای وب اپلیکیشن های پویا است. این کتابخانه به شما اجازه میدهد تا HTML را به عنوان زبان قالب خود انتخاب کنید Data binding و dependency injection انگولار، بیشتر کدهایی را که شما مجبور به نوشتن آن هستید را از بین می برد. همه ی این کارها در مرورگر انجام می شود و این باعث شده است که با همه تکنولوژی های سروری سازگاری خوبی داشته باشد.

ویو (VueJS) چیست؟

ویو جی اس چیست؟
ویو جی اس چیست؟

VueJS یکی از فریم ورک‌های برتر جاوا اسکریپتی در حوزه توسعه رابطه کاربری یا UI است.

این فریم ورک محبوب در سال ۲۰۱۴ به عنوان یک فریم ورک متن باز متولد شده است. الگوی طراحی به کار رفته شده در این فریم ورک به صورت MVVM یا Model-View-ViewModel است.

ویژگی های VueJS :

۱: درواقع این فریمورک ترکیبی از بهترین ویژگی های ReactJS و AngularJS میباشد. و این موضوع باعث محبوبیت این فرمورک شده است.

۲: یادگیری این فرمورک بسیار آسان و سریع است و به راحتی میتوان طی زمان کوتاهی با ساخت اپلیکیشن های وب پرداخت.

۳: حجم بسیار پایین داده های خروجی توسط این فریمورک باعث سرعت بالای لود سایت های نوشته شده میباشد.

ری اکت(ReactJS) چیست؟

ری اکت جی اس چیست؟
ری اکت جی اس چیست؟

از نظر شخص بنده، ReactJS جذاب ترین و بهترین کتابخانه و فریمورک طراحی فرانت-اند میباشد.

این کتابخانه در ابتدا توسط فردی در کمپانی فیسبوک ساخته شد و در ادامه در سال ۲۰۱۳ معرفی شد و تا کنون سایت ها و اپلیکیشن های بسیاری از جمله instagram توسط این فریموک طراحی شده اند.

سرعت یادگیری و بهره برداری این فریمورک بسیار بالا، سرعت اجرای سایت های طراحی شده توسط reactJS بسیار بالا میباشد.

یکی از مهمترین نکاتی که باعث جذابیت این فریمورک میشود امکان کدنویسی برای تمام دیوایس ها از جمله اندروید و ایفون میباشد.

دراین مقاله سعی شد تا فرانت-اند و انواع تکنولوژی های آن معرفی شود. در مقالات بعدی و آکادمی ویتکس به صورت اختصاصی به تمامی مطالب ذکر شده، پرداخته میشود. با ویتکس همراه باشید.

درباره‌ی امیرمحمد مروی فرد

برنامه نویس ، تحلیلگر سیستم متخصص دات نت و ری اکت و پایتون و پلتفرم جنگو عاشق برنامه نویسی

دیدگاه شما

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *