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

اگر به تازگی یادگیری توسعه وب را شروع کرده‌اید، احتمالاً موارد زیادی در مورد برنامه‌ نویسی فرانت‌اند و بک‌اند شنیده‌ باشید. اما مفهوم دقیق آن‌ها چیست؟ اگر در این زمینه مبتدی هستید، دانستن این‌که هر کدام چه ویژگی‌هایی دارند، ممکن است برایتان دشوار باشد. همچنین این‌که کدام یک، دیگری را پوشش می‌دهد. تفاوت بین توسعه frontend و backend در این است که اولین مورد به سرویس گیرنده خدمات می‌دهد (آنچه در روبرو مشاهده می‌کنیم. یعنی صفحه نمایش) و دومی از طرف سرور پشتیبانی می‌کند (آنچه که در لایه‌های زیرین وبسایت وجود دارد).

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

1- توسعه فرانت اند چیست ؟

در یک وبسایت آن چیزی که در مرورگر خود می‌بینید و با آن تعامل دارید، همان فرانت‌اند است. همچنین به عنوان “سمت کلاینت” نیز شناخته می‌شود. فرانت‌اند شامل هر چیزی است که کاربر مستقیماً تجربه می‌کند: از متن و رنگ‌ها تا دکمه‌ها، تصاویر و منوهای navigation.

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

2- زبان‌های اصلی توسعه فرانت‌اند کدامند؟

این سه زبان این کار را انجام می‌دهند:

HTML

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

هم رویش منتشر کرده است:

آموزش HTML5 پروژه محور و سریع __ طراحی سایت شخصی در 60 دقیقه

CSS

CSS زبانی است که همراه HTML است. سبک (استایل) محتوای یک وبسایت مانند طرح، رنگ، فونت و غیره را مشخص می‌کند.

پیش از این آموزش پروژه محور css در هم‌رویش منتشر شد. برای دیدن فیلم معرفی این بسته آموزشی بر روی این لینک (+) و یا پخش کننده پایین کلیک کنید:

برای دریافت بسته کامل آموزش css بر روی لینک زیر کلیک کنید:

آموزش CSS سریع و پروژه محور __ طراحی سایت با CSS در 60 دقیقه

JavaScript

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

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

ابزارهای دیگر فرانت‌اند

علاوه بر زبان‌های اصلی فرانت‌اند، با فریمورک‌های وب مانند Bootstrap ، Django و Angular، کتابخانه‌های جاوا اسکریپت مانند jQuery و اکستنشن‌های CSS مانند Sass و LESS سر و کار دارید. تعداد این منابع، بسیار زیاد هستند. همچنین طیف وسیعی از ابزارهای مختلف برای هر زبان و عملکرد بالقوه‌ای وجود دارد.

هدف فریمورک‌های وب و کتابخانه‌های فرانت‌اند، ساده کردن مدیریت و سازماندهی کد (و فرآیند نوشتن آن)، با استفاده از ابزارهای مختلف و تمپلت‌های سازگار با زبان‌های رایج کدنویسی، است.

هم رویش منتشر کرده است:

آموزش بوت استرپ 4 و 5 ---- سریع و پروژه محور Bootstrap را بیاموزید!

3- تفاوت بین توسعه frontend و طراحی وب چیست؟

توجه به این نکته ضروری است که، اگرچه توسعه فرانت‌اند با جنبه‌های بصری و تعاملی یک وبسایت سروکار دارد؛ اما همان طراحی وب نیست.

توسعه‌دهندگان Frontend در واقع جنبه‌های نمای دیداری وبسایت را طراحی نمی‌کنند. این کار طراح وب یا به طور خاص طراح UI است. توسعه‌دهنده فرانت‌اند طرح را از طراح UI می‌گیرد. با استفاده از زبان‌های فرانت‌اند که در قبل در مورد آن‌ها صحبت کردیم، آن را به چیزی کاربردی تبدیل می‌کند.

بنابراین توجه طراحان وب به طراحی است : ظاهر وبسایت، نحوه طراحی آن، دکمه‌ها و قسمت هایی که کاربران تجربه می‌کنند. توسعه‌دهندگان Frontend به عملکرد توجه دارند؛ یعنی مهندسی تبدیل این طرح‌ها به یک وبسایت زنده و تعاملی.

در پشت صحنه

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

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

4- توسعه بک‌ اند چیست ؟

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

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

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

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

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

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

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

برای مشاغل باز است!

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

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

5- باید کدام را یاد بگیریم؟ توسعه فرانت‌اند یا بک‌اند یا هر دو؟

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

با این حال تمایز بین frontend و backend همیشه چندان روشن نیست. برخی از توسعه‌دهندگان هم در frontend و هم در backend مهارت دارند. این افراد را  توسعه‌دهندگان full-stack می‌نامند.

با خواندن این مقاله امیدواریم تفاوت‌های بین frontend و backend و نحوه کار کردن هر دو با یکدیگر را برای ایجاد وبسایت‌های کاربردی و کاربر پسند به خوبی درک کرده باشید.

کلمه‌های کلیدی

تفاوت backend و frontend | تفاوت frontend و backend | تفاوت فرانت اند و بک اند | تفاوت فرانت اند با بک اند | فرانت اند و بک اند چیست | تفاوت برنامه نویسی بک اند و فرانت اند | backend چیست | بک اند چیست | بک اند و فرانت اند | توسعه فرانت اند چیست | توسعه frontend چیست | توسعه دهنده front end چیست | زبان‌ اصلی توسعه فرانت‌اند | زبان های فرانت اند | فرانت اند چیست | frontend چیست | توسعه بک‌ اند چیست | توسعه دهنده بک اند | توسعه backend چیست | بک اند چیست | backend چیست | تفاوت توسعه فرانت اند و بک اند | توسعه فرانت اند و بک اند | توسعه frontend و backend 

منبع

What’s the Difference Between Frontend and Backend Web Development?

• آموزش فرانت اند پروژه محور __ طراحی سایت با HTML و CSS و Bootstrap ۱۱۵,۰۰۰ تومان
• آموزش ساخت وبسایت انیمیشن دار با html و css ۱۴۲,۰۰۰ تومان