در دنیای توسعه وب و نرم‌افزار، دو واژه “بک‌اند” و “فرانت‌اند” به طور گسترده‌ای مورداستفاده قرار می‌گیرند، چرا که این دو مفهوم پایه و اساس هر وبسایتی محسوب می‌شوند که با همکاری و هماهنگی با یکدیگر، یک وب‌سایت را کارآمد کرده و آماده خدمت‌رسانی به کاربران می‌کنند. در این مقاله به طور جامع به بررسی تعاریف، مفاهیم و تفاوت‌های بک‌اند و فرانت‌اند می‌پردازیم.
فهرست مطالب
مفاهیم اولیه درباره تفاوت بک‌اند و فرانت‌اند
فرانت‌اند که همچنین به‌عنوان برنامه/کدنویسی “سمت کاربر” یا “سمت کلاینت” شناخته می‌شود، شامل تمام عناصر و جنبه‌های بصری است که کاربر مستقیماً با آنها تعامل دارد. برنامه‌نویسان فرانت‌اند به طور خلاصه ظاهر هر چیزی که در یک صفحه وب مشاهده می‌کنید را طراحی کرده‌اند. تمام المان‌های موجود در صفحه وب از جمله فرم‌ها، اسلایدرها، هدر و فوتر، دکمه‌ها، رنگ‌ها، سایزها، میزان واکنش‌گرایی و… از مثال‌های پرکاربرد موجود در هر صفحه هستند. اگر یک وب‌سایت اینترنتی را به اتومبیل تشبیه کنیم، اسکلت ظاهری اتومبیل در اصل همان بخش فرانت‌اند در یک وب‌سایت است. به‌عنوان‌مثال تصور کنید یک پدال ترمز بسیار زیبا در ماشین طراحی شده است، ظاهر این پدال به بخش فرانت مربوط است؛ اما کارکرد این پدال چطور؟ اگر صرفاً پایتان را روی یک پدال خالی فشار دهید ماشین به حرکت در می‌آید؟ طبیعتاً خیر، کارایی آن پدال فارغ از ظاهری که دارد به بخش منطق و عملگری آن ماشین برمی‌گردد؛ درست همان‌طور که کارایی یک دکمه در وب‌سایت به بخش بک‌اند مربوط است و کدنویسان فرانت‌اند صرفاً ظاهر آن را طراحی می‌کنند.
بک‌اند که همچنین به‌عنوان برنامه‌نویسی “سمت سرور” نیز شناخته می‌شود، شامل پیاده‌سازی منطق وب‌سایت، ایجاد و مدیریت پایگاه‌داده و تمام مسائل مربوط به عملگری و مدیریت وب‌سایت است. به‌عنوان‌مثال زمانی که بر روی دکمه “ثبت‌نام در سایت” کلیک می‌کنید، بارها مشاهده کرده‌اید که یک حساب کاربری با مشخصات شما در سایت ثبت می‌شود، بدون پیاده‌سازی منطق موردنیاز در قسمت بک‌اند کلیک کردن بر روی دکمه “ثبت‌نام” یا هر دکمه دیگری در سایت صرفاً همانند آب در هاون کوبیدن است و هیچ تغییری ایجاد نمی‌کند. در ادامه به‌صورت اختصاصی این موارد را زیر ذره‌بین قرار می‌دهیم.
منظور از بک‌اند چیست؟
بک‌اند به قسمت “سمت سرور” یک نرم‌افزار تحت وب گفته می‌شود که کاربر به طور مستقیم با آن تعامل ندارد، اما تمام منطق و عملکرد اصلی و پویایی برنامه را مدیریت می‌کند. تصور کنید یک وب‌سایت فروشگاهی را مدیریت می‌کنید. هزاران محصول، کاربر، خریدار، دیدگاه و… روزانه در سایت شما منتشر/ویرایش یا حذف می‌شود. وظیفه ایجاد و مدیریت تمام این تغییرات در وب‌سایت شما بر عهده بک‌اند است. اگر سایتی از بک‌اند استفاده نکند اصطلاحاً وب‌سایت ایستا (static) نامیده می‌شود که تفاوتی با یک ویترین و اسکلت خالی ندارد. همانند ماکت یک اتومبیل صرفاً ظاهر آن خودرو را نمایش میدهد و در عمل توانایی حرکت و رانندگی ندارد. اگر می‌خواهید وب‌سایتتان را پویا کنید نیازمند به بک‌اند هستید. در یک وب‌سایت پویا، زمانی که از سمت کاربران داده‌ای تغییر می‌کند، درخواست به سمت سرور ارسال می‌شود؛ سپس درخواست ارسالی باتوجه‌به نوع و ماهیت مورد تفسیر قرار می‌گیرد و عملیات موردنیاز همچون ثبت اطلاعات جدید در پایگاه‌داده صورت می‌گیرد، سپس نتیجه نهایی مجدداً به سمت کاربر ارسال می‌شود تا کاربر بتواند آن را مشاهده کند. تمام این مراحل از دریافت درخواست کاربر، تفسیر و انجام عملیات موردنیاز، ایجاد تغییرات لازم در پایگاه‌داده، ایجاد و ارسال پاسخ موردنیاز به کاربر و در نهایت نمایش آن توسط منطقی که در بک‌اند پیاده‌سازی شده است صورت می‌گیرد.
همچنین تمام عملیات مدیریتی سایت همچون اضافه‌کردن محصولات، اضافه‌کردن دکمه‌های هدر و فوتر و باقی بخش‌های مشابه، ویرایش یا حذف اطلاعات، قیمت‌گذاری و مسائل هم خانواده آن همچون تخفیف، ثبت‌نام کاربران، مدیریت دیدگاه‌های ارسالی و مسائلی ازاین‌قبیل توسط بک‌اند در اختیار تیم مدیریت قرار می‌گیرد. در اکثر اوقات یک پنل با نام “پنل مدیریت” توسط برنامه‌نویسان بک‌اند طراحی می‌شود تا مدیران سایت بتوانند به سادگی هر تغییری که مد نظر دارند را در کوتاه‌ترین زمان ممکن اعمال کنند.
زبان‌های برنامه‌نویسی بک‌اند
زبان برنامه‌نویسی PHP
زبان برنامه‌نویسی PHP در حدود 80% از کل سایت‌های موجود در وب را تشکیل میدهد که رقم بسیار قابل توجهی است. این زبان ضمن سرعت بالا و سازگاری مناسب با پایگاه‌های داده، زبان تشکیل دهنده سیستم مدیریت محتوا وردپرس نیز است که به نوبه خود سهم بسزایی در بالا بودن آمار زبان PHP در مقایسه با دیگر زبان‌های برنامه‌نویسی است. این زبان به پاس سال‌های طولانی محبوب بودن بین دولوپرهای بک‌اند دارای منابع آموزشی فراوان و همچنین انجمن‌های پشتیبانی متعددی چه در سطح جهانی چه در سطح کشوری برخوردار است که همین مزایا این زبان را به یک انتخاب معقول برای افرادی که به تازگی وارد این دنیا شده‌اند تبدیل کرده است.
زبان برنامه‌نویسی سی‌شارپ #C
زبان برنامه‌نویسی Python
پایتون به‌عنوان یک‌زبان همه‌منظوره که می‌تواند در هوش مصنوعی، یادگیری ماشین، پردازش متن و تصویر، طراحی اپلیکیشن، طراحی اسکریپت، طراحی وب‌سایت، علم داده و… استفاده شود در سال‌های اخیر به‌شدت بین برنامه‌نویسان به‌ویژه افرادی که تازه‌وارد این عرصه شده‌اند محبوبیت پیدا کرده است. این زبان به دلیل ساختار (سینتکس) ساده‌ای که دارد برای یادگیری اولیه از نظر خیلی‌ها گزینه معقولی به نظر می‌رسد، به شکلی که یادگیری مفاهیم این زبان برای افرادی که هیچ آشنایی قبلی‌ای با برنامه‌نویسی ندارند نیز در مدت‌زمان کوتاه‌تری در مقایسه با بقیه زبان‌ها امکان‌پذیر است. پایتون نیز دارای تعداد زیادی انجمن‌های پشتیبانی و همچنین منابع یادگیری اینترنتی و غیراینترنتی است که راه را برای فراگیری این زبان شیرین و پر استفاده هموار کرده است.
فریم‌ورک‌های محبوب بک‌اند
اگر در این حوزه مطالعه مختصری هم داشته باشید احتمالاً بارها با واژه “فریم‌ورک” مواجه می‌شوید. فریم‌ورک در اصل یک چارچوب برنامه‌نویسی است که در آن مجموعه‌ای از کتابخانه‌ها، تابع‌ها، قوانین و منطق‌های از پیش ایجاد شده برنامه‌نویس را قادر می‌سازد که کار ایجاد منطق بک‌اند یک وب‌سایت را به‌صورت بهینه‌تر و با سرعت عمل بالاتری انجام دهند. در ادامه با تعدادی از محبوب‌ترین فریم‌ورک‌های حوزه وب آشنا می‌شویم.
فریم‌ورک Laravel (لاراول)
لاراول به‌عنوان محبوب‌ترین فریم‌ورک زبان PHP شناخته می‌شود، این فریم‌ورک باوجوداینکه در سال 2011 منتشر شده و در مقایسه با بسیاری از برادرانش در این حوزه یک فریم‌ورک نو پا محسوب می‌شود؛ اما در همین مدتی که انتشار پیدا کرده به‌سرعت مورد توجه برنامه‌نویسان PHP قرار گرفته است به شکلی که امروزه احتمالاً اولین پیشنهاد برنامه‌نویسان با تجربه PHP برای فریم‌ورک توسعه وب همین لاراول است. سرعت و امنیت بالا در کنار گستردگی توابع درونی که کدنویسی را برای برنامه‌نویسان بک‌اند بهینه‌تر می‌کند از دلایل محوببیت این فریم‌ورک هستند.
فریم‌ورک Django (جنگو)
فریم‌ورک جنگو که با زبان Python توسعه پیدا کرده است یک چارچوب کامل و بی‌نیاز از ماژول‌های خارجی برای توسعه و برنامه‌نویسی سمت بک‌اند با زبان پایتون است. این فریم‌ورک سنگین برای توسعه و ایجاد وب‌سایت و نرم‌افزارهای حجیم استفاده بهتری دارد و توصیه می‌شود برای نرم‌افزارهای کوچک از این فریم‌ورک استفاده نشود؛ هرچند که بین برنامه‌نویسان در این موضوع اختلاف است و وب‌سایت‌های کوچک زیادی نیز با زبان پایتون و تحت فریم‌ورک جنگو توسعه داده شده‌اند. سایت‌هایی همچون پینترست، موزیلا و حتی اینستاگرام نمونه‌های بزرگی هستند که بخش‌هایی از نرم‌افزار خود را با جنگو توسعه داده‌اند. فریم‌ورک جنگو با تمام امکانات بی‌نظیرش تبدیل به محبوب‌ترین گزینه بین برنامه‌نویسان پایتون بالاتر از فریم‌ورک رقیب خود یعنی فلسک شده است.
ASP.NET (ای اس پی دات نت)
در نهایت اما به فریم‌ورک محبوب ASP.NET می‌رسیم. این فریم‌ورک ساخت شرکت بزرگ مایکروسافت است و با استفاده از زبان‌های ویژوال بسیک و C# و… امکان توسعه بک‌اند یک نرم‌افزار تحت وب را برای برنامه‌نویسان فراهم می‌کند. جالب است بدانید که به‌زودی 10 سال از منبع‌باز شدن کدهای این فریم‌ورک می‌گذرد و در طی این سال‌ها ASP.NET بسیار ایمن، قابل‌اعتماد و پایدار شده است که همین موضوع این فریم‌ورک را به گزینه محبوبی برای برنامه‌نویسان بک‌اند تبدیل کرده است.
منظور از فرانت‌اند چیست؟
فرانت‌اند به زبان ساده تمام بخش‌هایی در وب‌سایت است که شما می‌بینید و به طور مستقیم با آن تعامل دارید. هر چیزی که در یک وب‌سایت به طور بصری می‌بینید مثل دکمه‌ها، رنگ‌ها، عکس‌ها، منوها، متن‌ها، لینک‌ها و… توسط برنامه‌نویس فرانت‌اند ایجاد و طراحی شده‌اند. کدنویسان فرانت‌اند نه‌تنها این المان‌ها را ایجاد و در مکان مناسب و درست قرار می‌دهند؛ بلکه با استایل‌هایی که برای المان‌ها تعریف می‌کنند باعث زیبایی و پویایی بیشتر رابط کاربری و ظاهر وب‌سایت می‌شوند. از همین رو برنامه‌نویسی فرانت‌اند را “سمت کاربر” می‌نامند که اتصال و ادغام کدهای “سمت کاربر” و “سمت سرور” در نهایت باعث ایجاد یک سایت می‌شود. به‌عنوان‌مثال تصور کنید که شما یک کافه تأسیس کرده‌اید، ظاهر این کافه، شکل و شمایل در و دیوارها، رنگ‌بندی استفاده شده، ظاهر منو و میزها و صندلی‌ها، ظاهر سقف و تمام چیزهایی که مشتری شما در اطراف خود مشاهده می‌کند در حقیقت نقش همان فرانت‌اند را در یک وب‌سایت را ایفا می‌کند.
زبان‌های برنامه‌نویسی و تکنولوژی‌های فرانت اند
برنامه‌نویسان سمت کاربر یا فرانت‌اند (دولوپرها) با کمک فناوری‌های محبوب و کلاسیکی که در این حوزه در طی سالیان دراز وجود داشته است کدهای بصری و رابط کاربری وب‌سایت را طراحی و ایجاد می‌کنند. در ادامه به معرفی زبان‌های برنامه‌نویسی فرانت‌اند می‌پردازیم.
زبان نشانه‌گذاری HTML
اچ‌تی‌ام‌ال HTML اولین و اصلی‌ترین عنصر برنامه‌نویسی فرانت‌اند است. بدون کدهای HTML عملاً چیزی از فرانت‌اند باقی نمی‌ماند و به عبارتی تمام فناوری‌های حوزه فرانت‌اند حول محور HTML حرکت می‌کنند. البته این نکته را به در نظر داشته باشید که اچ‌تی‌ام‌ال زبان برنامه‌نویسی به‌حساب نمی‌آید و یک‌زبان نشانه‌گذاری است. با استفاده از HTML تمام نشانه‌های موردنیاز صفحه کدنویسی و ایجاد می‌شود. تمام دکمه‌ها، فرم‌ها، تصاویر و هرآن چیزی که در یک وب‌سایت مشاهده می‌کنید توسط کدهای HTML پدید آمده‌اند. به‌طوری که موتورهای جستجو مثل گوگل برای آنالیز و رتبه‌بندی صفحات به خواندن کدهای HTML آن صفحه می‌پردازند.
معرفی CSS
سی اس اس در کنار زبان نشانه‌گذاری HTML هسته اصلی ساخت هر صفحه از وب‌سایت را تشکیل میدهد. به کمک CSS کدهای HTML به اصلاح “استایل دهی” می‌شوند، به این منظور که نحوه نمایش، چیدمان، رنگ و خصوصیات ظاهری آنها تعیین می‌گردد. صفحات پر زرق و برق و چشم‌نوازی که امروزه در سطح وب می‌بینیم مدیون خصوصیات ظاهری زیبایی هستیم که توسط css به کدهای آن صفحه الحاق شده است.
زبان برنامه‌نویسی جاوا اسکریپت
زبان برنامه‌نویسی جاوا اسکریپت سومین و آخرین ستونی است که در کنار دو فناوری معرفی شده در بخش‌های قبلی پایه و اساس برنامه‌نویسی فرانت‌اند را تشکیل می‌دهند. برای هر برنامه‌نویس فرانت‌اندی تسلط به سه تکنولوژی اچ‌تی‌ام‌ال، سی‌اس‌اس و در نهایت جاوا اسکریپت ضروری است. زبان جاوا اسکریپت یک‌زبان شی گرا است که با کمک آن برخی از فرایندهای سمت سرور، در سمت کاربر پردازش و انجام می‌شود که به این وسیله فشار سرور کاسته شده و سرعت نرم‌افزار بالا می‌رود. همچنین با زبان جاوا اسکریپت می‌توان به ساخت المان‌های واکنش‌گرا و افزایش کارایی و جذابیت صفحه پرداخت.
فریم‌ورک‌ها و کتابخانه‌های محبوب فرانت‌اند
فریم‌ورک‌های کاربردی و پر تعدادی در حوزه فرانت‌اند وجود دارند که بدون استفاده از آنها توسعه بهینه صفحات بسیار دشوار و تقریباً غیرممکن است. در ادامه به معرفی فریم‌ورک‌های محبوب این حوزه می‌پردازیم:
React.js(ری‌اکت)
ری‌اکت یک کتابخانه قدرتمند و متن‌باز برای زبان جاوا اسکریپت است که برای ساخت رابط کاربری و المان‌های مختلف صفحات وب به کار می‌رود. این کتابخانه مبتنی بر مفهوم کامپوننت توسعه پیدا کرده است و از مزایای آن به‌سرعت بالا، سازگاری با انواع فریم‌ورک‌های وب و یکپارچگی می‌توان اشاره کرد. پیشنهاد می‌شود پس از یادگیری ری‌اکت به سراغ فراگرفتن Next.js بروید.
Bootstrap(بوت‌استرپ)
بوت‌استرپ یک فریم‌ورک CSS است که همچون ری‌اکت متن‌باز و البته رایگان است. به کمک این فریم‌ورک ضمن افزایش قابل‌توجه سرعت کدنویسی و بهینه‌تر کردن کدها، قابلیت واکنش‌گرا (ریسپانسیو) سازی صفحات را نیز ساده و حرفه‌ای در اختیار برنامه‌نویسان قرار میدهد.
البته در سال‌های اخیر فریم‌ورک تیلویند به‌عنوان رقیب سی‌اس‌اس بسیار مورد اقبال و توجه توسعه‌دهندگان فرانت‌اند قرار گرفته است و سال‌به‌سال سهم این فریم‌ورک نیز روبه‌افزایش است.
SASS(سس)
Sass (Syntactically Awesome Style Sheets) یک پیش‌پردازنده CSS است که به برنامه‌نویسان و طراحان وب این امکان را میدهد تا استایل‌های CSS خود را به شکلی قدرتمندتر و سازمان‌یافته‌تر بنویسند. این ابزار به کمک قابلیت‌های پیشرفته‌ای که در اختیار می‌گذارد، فرآیند نوشتن و نگهداری CSS را تسهیل می‌کند.
ویژگی‌های کلیدی Sass:
متغیرها: Sass این امکان را به شما میدهد که متغیرهایی برای مقادیر CSS تعریف کنید. با این ویژگی، می‌توانید مقادیری مانند رنگ‌ها، اندازه‌ها و دیگر خصوصیات CSS را یک‌بار تعریف کنید و در سراسر پروژه به‌راحتی از آنها استفاده کنید. این کار به مدیریت و تغییر متمرکز مقادیر کمک می‌کند.
نحو تو در تو: در Sass، شما می‌توانید قوانین CSS را به طور تو در تو بنویسید. این ویژگی به شما امکان میدهد تا ساختار سلسله‌مراتبی عناصر را به‌طور واضح‌تری نمایش دهید و کد شما از لحاظ بصری سازمان‌دهی بهتری داشته باشد.
Mixinها: Mixinها تابع‌های CSS هستند که به شما اجازه می‌دهند کدهای تکراری را در یک محل تعریف کرده و سپس در جاهای مختلف از آنها استفاده کنید. این قابلیت به شما کمک می‌کند تا کدهای خود را ساده و کارا نگه‌دارید.
توابع: Sass دارای توابع داخلی است که به شما امکان میدهد محاسبات ریاضی و پردازش رشته‌ای انجام دهید. این امکان به شما انعطاف‌پذیری بیشتری در ایجاد استایل‌ها میدهد.
الگوهای کلیدی: با استفاده از صنایع و الگوهای کلیدی، می‌توانید کدهای خود را بهتر سازمان‌دهی کنید و تعاملات بین مختلف بخش‌های پروژه را مدیریت کنید. همچنین، این قابلیت کمک می‌کند تا کد شما خواناتر و قابل نگهداری‌تر باشد.
ترکیب و تقسیم‌بندی کد: Sass به شما این امکان را میدهد که کد CSS را در چندین فایل جداگانه سازمان‌دهی کنید و سپس آنها را به یک فایل نهایی ترکیب نمایید. این ویژگی می‌تواند به بهبود ساختار پروژه و آسان‌تر کردن توسعه کمک کند.
سخن پایانی
در این مقاله به بررسی دو مفهوم بک‌اند و فرانت‌اند پرداختیم، ابتدا مفاهیم اولیه را مرور کردیم و سپس به مقایسه تفاوت‌های این دو بخش حیاتی و اساسی از وب اشاره کردیم. فرانت‌اند به‌عنوان اسکلت ظاهری هر وب‌سایت تمام جنبه‌های بصری که کاربر در صفحه مشاهده می‌کند را تشکیل میدهد و بک‌اند منطق پشت وب‌سایت را تشکیل میدهد تا وب‌سایت کارایی پیدا کند و بتواند عملیات مختلفی را انجام دهد. در مثالمان اشاره کردیم اسکلت ظاهری یک اتومبیل همانند پدال گاز نقش فرانت‌اند را ایفا می‌کند و این موضوع که پس از فشردن پدال گاز خودرو به حرکت درآید به فرایندهای پس‌زمینه برمی‌گردد که درست همان بک‌اند در موضوع طراحی سایت است. در نهایت به معرفی زبان‌های محبوب بک‌اند مثل پی‌اچ‌پی، پایتون و سی‌شارپ و همچنین فریم‌ورک‌های آنها یعنی لاراول، جنگو و ای‌اس‌پی‌دات‌نت پرداختیم. سپس با معرفی زبان‌های اصلی فرانت‌اند یعنی HTML و CSS و JS و همچنین فریم‌ورک‌های محبوب آنها مثل بوت‌استرپ، ری‌اکت و سس ادامه دادیم. امیدواریم این مقاله برایتان مفید واقع شده باشد.
