تفاوت بین توسعه‌ وب Frontend و Backend چیست؟

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

در حالی‌که توسعه‌ frontend و backend به‌طور قطع با یک دیگر تفاوت دارند، اما مانند دو طرف یک سکه هستند. عملکرد یک وبسایت به عنوان یک بخش واحد، وابسته به ارتباط و کارکرد هر یک از طرفین است. ﺁیا یکی از دیگری مهم‌تر است؟ خیر. هر دوی آن‌ها نقش مهمی در توسعه‌ وب دارند. خب از کجا شروع کنیم؟ آماده باشید تا سوالاتتان رو جواب بدهیم.

۱. توسعه‌ی Frontend چیست؟

بخش frontend یک وبسایت همان قسمتی است که شما در مرورگر خود می‌بینید و با ﺁن ارتباط برقرار می‌کنید. همچنین با نام "سمت مشتری" معرفی شده و شامل همه‌ي چیزهایی است که کاربر به طور مستقیم تجربه‌اش می‌کند: از متن و رنگ و دکمه‌ها گرفته تا تصاویر و منوهای دسترسی.

فرض کنیم که تصمیم به شروع یک تجارت گرفته‌اید. به‌عنوان مثال شما یک شرکت تولیدی ایجاد می‌کنید و به یک وبسایت حرفه‌ای نیاز دارید تا شرکت خود را به مشتریان معرفی کنید. شاید شما چند عکس و کمی اطلاعات در مورد محصولات خود ارائه دهید. تنها چیزی که برای ایجاد وبسایت خود نیاز دارید فناو‌ری‌های frontend است.

۲. زبان‌های اصلی توسعه‌ Frontend کدامند؟

ترفندهایی که این سه زبان به کار خواهند برد:

HTML

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

CSS

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

JavaScript

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

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

علاوه بر زبان‌های اصلی، با فریمورک‌های اصلی مانند Bootstrap، Angular و همچنین با کتابخانه‌های جاوااسکریپت مانند jQuery و افزونه‌های CSS نظیر Sass و LESS مواجه خواهید شد. لیست بلندی از منابع مشابه موارد ذکر شده وجود دارد که از HTML ،CSS و JavaScript پشتیبانی می‌کنند. هدف ﺁن‌ها به سادگی ایجاد کد (و روند نگارش ﺁن) است که از طریق ارائه‌ی ابزار و الگوهای سازگار با زبان‌های کدنویسی مشترک قابل کنترل‌‌تر و سازمان یافته‌تر است.

۳. تفاوت بین توسعه‌ Frontend و طراحی وب چیست؟

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

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

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

۴. توسعه‌ی Backend چیست؟

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

فناوری backend یا "سمت سرور" قسمتی از وبسایت است که قابل مشاهده نیست. این بخش مسئول ذخیره و سازماندهی داده‌ها است و اطمینان حاصل می‌کند که همه چیز در سمت مشتری واقعا کار می‌کند.

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

سایت جدید شما برای ایجاد یک برنامه‌ی وب پویا به اجزای backend اضافی احتیاج خواهد داشت. این با یک وبسایت استاتیک متفاوت است و نیازی به پایگاه داده ندارد، زیرا محتوای ﺁن عموما یکسان باقی می‌ماند.

تنظیم سمت سرور

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

برنامه‌ی شما همچنان دارای کد frontend خواهد بود، اما باید با استفاده از زبانی ساخته شود که یک پایگاه داده بتواند ﺁن را تشخیص دهد. برخی دیگر از زبان‌های رایج backend عبارتند از: Ruby، PHP، Java، .Net و Python.

این زبان‌های برنامه‌نویسی اغلب بر روی فریمورک‌هایی کار می‌کنند که فرایند توسعه‌ی وب را ساده می‌کنند. به‌عنوان مثال Rail، فریمورکی است که در Ruby نوشته شده است. Ruby on Rail یک فناوری محبوب برای ایجاد برنامه‌های وب پویا است که روند کار را بسیار سریع‌تر می‌کند. هنگامی که محصولی را در کادر جستجو (قسمت frontend) تایپ می‌کنند، برنامه‌ی کاربردی تمام داده‌های محصول ذخیره شده در پایگاه داده‌ها را بررسی می‌کند (قسمت backend)، و اطلاعات مناسب را به صورت کد frontend بدست می‌ﺁورد و مرورگر به‌عنوان لیست درخواست شده‌ی کاربر نمایش می‌دهد.

پس حالا شما یک برنامه‌ی وب پویا دارید که از فن ﺁوری‌های frontend و backend استفاده می‌کند. شما از زبان‌های frontend استفاده می‌کنید تا وبسایت شما به راحتی قابل دسترسی باشد. فناوری backend تمام اجزای بخش frontend را در کنار هم قرار داده تا امکان انجام کارهایی از قبیل ذخیره کردن تاریخچه‌ی خرید و جزییات محصول، ایجاد حساب‌های ایمن و قابل ویرایش کاربر و سایر موارد را ممکن سازد. همانطور که می‌بینید، هر دو طرف نقش‌های متفاوتی دارند. اما این دو با هم کار می‌کنند که در نهایت باعث ایجاد تجربه‌ی کاربری می‌شود و عملکرد وبسایت را امکان پذیر می‌سازند.

۵. آیا باید توسعه‌ی Frontend یا Backend را یاد بگیرم؟

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

اگر شما از کار کردن با داده، کشف الگوریتم‌ها و ارائه کردن راه‌های بهینه‌سازی سیستم‌های پیچیده لذت می‌برید، ممکن است ترجیح دهید تا به‌عنوان یک توسعه‌دهنده‌ی backend کار کنید.

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

منبع