یکی از مسائل پایه در دنیای برنامه نویسی تفاوت فرانتاند و بکاند با هم است. تازه واردها در این حوزه کاری اغلب سوالاتی درباره تفاوت برنامهنویسی فرانتاند و بکاند دارند. در این مطلب تلاش کردهایم تا به تفاوتها و وظایف هر یک از این دو مفهوم بپردازیم. اگر شما نیز سوالات و ابهاماتی در رابطه با فرانت اند و بک اند دارید با ما همراه شوید.
فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم میشود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و... ظاهر سایت را طراحی میکنند. اما بخش توسعهی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و جاوا اسکریپت است. بخش قابل مشاهده سایت برای کاربران در سمت فرانت را سمت کاربر یا Client Side مینامند. بنابراین کدهای نوشته شده در سمت فرانت اند، در مرورگر کاربر پردازش و اجرا میشوند. یعنی کاربر به راحتی به این کدها دسترسی مستقیم دارد و میتواند آنها را مشاهده کند. فرانت اند با بخش بک اند (BackEnd) در ارتباط مستقیم است و بر روی تجربه کاربران هنگام استفاده از محصول تاثیر بسیاری میگذارد. بنابراین توضیحات هر چیزی که در ظاهر یک سایت مشاهده میکنید اعم از:
و غیره جزو فرانتاند محسوب میشوند. این ماهیت تا حد زیادی به ما در درک بهتر تفاوت برنامهنویسی فرانتاند و بکاند میکند. کاربران نگاهی مشابه اپلیکیشن به سایت دارند و با هر چیزی که در آن میبینند تعامل برقرار میکنند. این وظیفه طراح سایت و برنامهنویس فرانت اند است که فعالیتهای سمت کاربران سایت را به خوبی پوشش دهد.
طراح فرانت اند باید از طرح هایی خلاقانه، کاربرپسند و چشم نواز برای ظاهر یک اپلیکیشن استفاده کند. یک طراح موفق کسی است که بتواند رابط کاربری زیبا منطبق بر استانداردهای ظاهری و تجربه کاربری ایجاد کند. ایجاد همین تفاوتهای ظاهری و طرحهای جذاب است که کار شما را از سایر رقبا جدا میکند.
گفتیم که فرانتاند بخشی از سایت است که کاربران مشاهده میکنند و با آن در تعامل هستند. اما بکاند در واقع بخش سمت سرور سایت محسوب میشود که قابل مشاهده نیست. در نتیجه کاربران سایت هیچ تعاملی با بخش بکاند سایت نداشته و تنها از قابلیتها و امکانات آن استفاده میکنند. به بیان ساده اتفاقاتی که در پشت صفحه مانیتور رخ میدهند تعیین کننده پارامترهایی هستند که روی صفحه نمایش دیده میشود. از بکاند بیشتر با عنوان یک پشتیبان غیر مستقیم فرانتاند یاد میشود. این بخش که با سیستمهای پیچیدهی سمت سرور سایتها سر و کار دارد توسط برنامهنویس بکاند اداره میشود. برای اینکه مفهوم BackEnd را بهتر درک کنید، یک فیلم سینمایی را در نظر بگیرید. فرانتاند یا همان ظاهر سایت، حکم فیلم سینمایی را دارد که شما مشاهده میکنید. بازیگران و صحنههای فیلم اجزایی هستند که فرانت اند را تشکیل میدهند و بر اساس دستورات کارگردان در جای مورد نظر قرار میگیرند و به بازیگری میپردازند.
برای اینکه این فیلم ساخته و اکران شود، عوامل پشتصحنه زیادی مانند تصویر بردار، صدا بردار، کارگردان و غیره داشته است که شما آنها را در فیلم نخواهید دید. کدهایی که در پس زمینه سایت در حال اجرا شدن هستند، مانند عوامل پشتصحنه فیلم میباشند که مربوط به برنامه نویسی بک اند (BackEnd) هستند.
اغلب سایتها به یک برنامه نویس BackEnd نیاز دارند تا منطق سایت را به وسیله زبانهای برنامه نویسی پیادهسازی کنند. بک اند یا BackEnd به بخشی از یک وب سایت یا نرم افزار میگویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفهی کنترل منطق آن را بر عهده دارد. کاربران به کدهای نوشتهشده در بخش بک اند دسترسی ندارند و نمیتوانند آنها را مشاهده کنند. بخش بک اند با سرور اصلی (که سایت روی آن قرار گرفته است) و پایگاه داده سروکار دارد.
هنگامی که کاربر روی یک دکمه کلیک میکند، در اصل روی یکی از المانهای بخش فرانت اند کلیک کرده است. فرانت اند این کلیک را شناسایی کرده و براساس کدی که برنامه نویس فرانت اند نوشته است، درخواست خود را به بخش بک اند ارجاع میدهد. با استفاده از منطقی که برنامه نویس بک اند کد آن را پیاده سازی کرده است، آن درخواست اجرا میشود. در این بخش است که ممکن است اطلاعاتی از پایگاه داده گرفته شود یا پردازشی در کدهای بک اند انجام شود و نیازی به برقراری ارتباط با پایگاه داده نباشد. در نهایت جواب نهایی دوباره توسط بخش بک اند به فرانت اند فرستاده میشود و فرانت اند آن را به کاربر در قالب المانهای گرافیکی مثل پیام متنی، تصویر و... نشان میدهد.
|
بکاند |
فرانتاند |
|
سمت سرور سایت |
سمت کاربر سایت |
|
اتفاقات و محاسبات منطقی پشت صحنه سایت و غیر قابل مشاهده برای کاربران |
اتفاقات درون سایت و قابل مشاهده توسط کاربران |
|
مغز وبسایت و بخش درون آن |
بخش قابل لمس و بیرونی سایت |
|
ذخیره و بازیابی اطلاعات مورد نیاز در این بخش انجام میگیرد |
بخش قابل لمس و بیرونی سایت |
|
درخواستهای تفسیر پایگاه داده توسط مرورگر از این فیلتر عبور میکند |
تمام درخواستها توسط مرورگر چیدمان میشود |
|
برنامهنویس بکاند به تنهایی کار میکند. |
برنامهنویس فرانتاند با طراح سایت همکاری میکند. |
|
ترکیبی از ساخت و توسعه در کنار هم |
ترکیبی از طراحی و تست با هم |
هر دو گروه از برنامهنویسان فرانتاند و بکاند وظایفی مهم و کاربردی را بر عهده دارند. در واقع این دو گروه از برنامه نویسان در توسعه وبسایت نقش و سهم زیادی دارند. طراح فرانت اند باید از طرح هایی خلاقانه، کاربرپسند و چشم نواز برای ظاهر یک اپلیکیشن استفاده کند. یک طراح موفق کسی است که بتواند رابط کاربری زیبا منطق بر استانداردهای ظاهری و تجربه کاربری ایجاد کند. ایجاد همین تفاوتهای ظاهری و طرحهای جذاب است که کار شما را از سایر رقبا جدا میکند. اما برای یک بکاند کار موفق استدلال مسائل و ذهنیت منطقی ویژگیهای مهمتری به شمار میروند. در واقع اگر از چیدمان یک پازل یا حل معماهای چند مرحلهای لذت میبرید احتمالا روحیه بکاند کار شدن را دارید.
در این بخش به وظایف هر کدام از این شاخههای برنامهنویسی اشاره میکنیم. تفاوت وظایف توسعهدهندگان فرانتاند و بکاند قسمت مهمی از تمایز این دو مسئولیت با هم است.
وظایف کاری برنامهنویس فرانتاند: تمرکز روی بهبود تجربه کاربری UX- رابط کاربری UI و پیادهسازی طراحیهای وب از جمله وظایف فرانتاند کار است. همچنین وی باید از واکنشگرا بودن سایت (responsive) و دسترسپذیری آن در دستگاههای مختلف نیز اطمینان حاصل کند.
وظایف کاری برنامهنویس بکاند: تمرکز روی طراحی و اجرای منطق سایت اصلیترین وظیفه بکاند کارها میباشد. آنها برای دسترسی به این هدف با پایگاه دادهها و امنیت آنها سروکار دارند. مدیریت سرور و API ها نیز بر عهده بکاند کارها میباشد.
این شرح وظایف به خوبی تفاوت برنامهنویسی فرانتاند و بکاند را نشان میدهد.
معرفی زبانهای برنامهنویسی فرانتاند و بکاند
در این بخش کمی درباره تفاوت زبان برنامهنویسی در بکاند و فرانتاند خواهیم گفت. البته برنامهنویسی به ویژه در حوزه وب بسیار پویا بوده و تنوع بالایی در زبانهای مورد استفاده وجود دارد.
دو زبان CSS و HTML به نوعی زیربنای بکاند و فرانتاند محسوب میشوند. بنابراین بهتر است که توسعهدهندگان بکاند در حد نیاز با این دو زبان آشنا باشند. البته این دو زبان کاربرد مستقیمی روی فعالیتهای بکاند کارها ندارد. علاوه بر آن سایر زبانهای برنامهنویسی و فریمورکهایی مانند:
PHP
Laravel
JAVA
Python
Django
Express
Rails
Spring
نیز در کار بکاند کاربرد زیادی دارند.
2- زبانهای برنامهنویسی فرانتاند
اصلیترین زبانها و فریم ورک هایی که فرانتاند کارها میتوانند از آنها استفاده کنند عبارتند از:
HTML
CSS
JavaScript
Vue.JS
AngularJS
React.HS
JQuery
Sass
تفاوت برنامهنویسی فرانتاند و بکاند در زبان مورد استفاده و اهداف و شیوه کار آنها نمود پیدا میکند. در این مطلب تلاش شد تا به بهترین و سادهترین شکل به این تفاوتها در بکاند و فرانتاند، پرداخته شود. برای کسب اطلاعات بیشتر در زمینه انجام پرژههای برنامهنویسی از طریق راههای ارتباطی درج شده در سایت با ما در ارتباط باشید.
