تفاوت فرانت اند و بک اند

دسته بندی ها : تکنولوژی رومینا محرر صفائی
تفاوت فرانت اند و بک اند

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

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

ما میخواهیم تفاوت فرانت اند و بک اند را با پاسخ به 5 سوال به شما بگوییم:

توسعه Frontend چیست؟

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

به خاطر بسپارید که در هر تجارتی باشید، به معرفی و تبلیغات در تجارت خود نیاز دارید. باید یک وب سایت داشته و به مشتریان بگویید که در کجا قرار دارید و حداقل چند عکس و توضیح برای معرفی خود درج کنید.

تفاوت فرانت اند و بک اند
  • زبان های اصلی فرانت اند کدام اند؟

این سه زبان کل وظایف یک فرانت اند را انجام می دهند:

HTML

HTML یک نشانه گذاری پایه ای است که به کمک آن میتوانید محتوای وب را ایجاد و سازمان دهی کرده تا توسط یک مرورگر نمایش داده شود.

CSS

این زبان به همراه HTML سبک محتوای وب سایت، مانند طرح ، رنگ ها ، قلم ها و… را تعریف می کند.

جاوا اسکریپت

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

 با کمک این سه زبان میتوانید تمام چیزهایی که نیاز است در یک صفحه وجود داشته باشد را طراحی کنید.

علاوه بر زبان های پایه فرانت اند، یک لیست طولانی از منابع وجود دارد که HTML ، CSS و JavaScript را پشتیبانی می کند. به کمک آنها می توانید وب سایت خود را راحتتر طراحی کنید. این چهارچوب ها با استفاده از ابزار و قالب سازگار با زبان هاي رمزگذاري معمول، قابل كنترل تر و سازماندهي تر هستند. بطور مثال: Bootstrap و Angular و کتابخانه های JavaScript مانند jQuery و برنامه های افزودنی CSS مانند Sass و LESS.

تفاوت فرانت اند و بک اند در توسعه وب سایت چیست؟

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

کاربرانUI  یا همان طراحان، با استفاده از نرم افزارهای گرافیکی و بدون استفاده از کدها وظیفه طراحی ظاهروب سایت را دارند. کار طراحان فرانت اند با کدهاست و با کدنویسی میتوانند صفحات وب مختلف را طراحی کنند.

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

بک اند چیست؟

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

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

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

راه اندازی سمت سرور

وب سایت شما برای مدیریت کردن اطلاعات مربوط به مشتری و محصول، به یک پایگاه داده نیاز دارد. بانک اطلاعاتی محتوای وب سایت را در ساختاری ذخیره، بازیابی ، سازماندهی و ویرایش می کند. این برنامه بر روی رایانه ای از راه دور به نام سرور اجرا می شود. چندین پایگاه داده مختلف وجود دارد که به طور گسترده مورد استفاده قرار می گیرند، مانند MySQL ، SQL Server و Oracle.

برنامه شما همچنان یک کد پایه دارد اما باید با استفاده از زبانی ساخته شود که یک پایگاه داده می تواند آن را تشخیص دهد. برخی از زبانهای بک اند رایج عبارتند از Ruby ، ​​PHP ، Java ، .Net و.Python  این زبان های برنامه نویسی اغلب در چارچوب هایی اجرا می شوند که فرایند توسعه وب را ساده می کنند.

مثلا زبان Rails، چارچوبی است که در روبی نوشته شده است. از این رو با نام Ruby on Rails یک فناوری محبوب برای ایجاد برنامه های وب پویا است که روند کار را بسیار سریعتر می کند.

پویایی وب سایت با فرانت اند و بک اند

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

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

آیا باید هم فرانت اند و هم بک اند را یاد بگیریم؟

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

با این حال، مرز تفاوت فرانت اند و بک اند برای بسیاری از سازمان ها و افراد چندان واضح و روشن نیست. بعضی از توسعه دهندگان هم در فرانت اند مهارت دارند و هم در بک اند.

امیدواریم در پایان این محتوا به طور کامل تفاوت فرانت اند و بک اند را درک کرده باشید.

منبع

رومینا محرر صفائی
رومینا محرر صفائی

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

مطالب زیر را حتما بخوانید:

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

نظرات کاربران

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

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

    لینک کوتاه :