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

تفاوت FrontEnd و ‌BackEnd

توضیح تفاوت backend و frontend ، به طور خلاصه frontend شامل طراحی های سمت کاربر یا دیزاین وب میشود و backned شامل پردازش های سمت سرور میشود.

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

معرفی توسعه دهنده frontend

فرانت اند(frontend) یک وب سایت به معنای هر آنچه در یک سایت مشاهده می کنید و با مرورگرتان در تعامل و ارتباط است، می باشد. همچنین تحت عنوان "سمت سرویس گیرنده" شناخته می شود و شامل همه مواردی است که کاربر مستقیماٌ تجربه می کند: از متن ها و رنگ ها گرفته تا دکمه ها، عکس ها و منوها.

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

زبان های frontend

این سه زبان با هم قادر هستند موارد ذکر شده در بالا را برای ما انجام دهند:

اچ تی ام ال(HTML) این زبان، یک زبان برنامه نویسی اساسی و کاربردی است که محتوای وب را ایجاد و سازماندهی می کند و توسط یک مرورگر نمایش داده می شود.

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

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

بودن همه این ملزومات در کنار هم، تمام موارد بصری هنگام بازدید سایت را ایجاد خواهد کرد برای مثال، خرید آنلاین، خواندن اخبار، بررسی ایمیل و یا جستجوی گوگل.

علاوه بر زبان های front-end اساسی و پایه ای، شما با framework هایی مانند Bootstrap و Angular و همچنین کتابخانه های جاوا اسکریپت مانند jQuery ، و افزونه های CSS مانند Sass و LESS آشنا خواهید شد. یک لیست طولانی از منابع مانند مواردی که ذکر شد وجود دارد که HTML، CSS و جاوا اسکریپت را پشتیبانی می کنند. هدف آنها، ساده ساختن کد (و فرآیند نوشتن آن) و کنترل بهتر کد و سازماندهی با ارائه ابزار و قالب های مختلف است که با زبان های برنامه نویسی رایج سازگار می باشند.

مقایسه توسعه frontend با طراحی وب سایت

از نکات مهم و حائز اهمیت این است که هرچند توسعه frontend با سمت بصری و تعاملی یک وب سایت سروکار دارد، اما نمی توان آن را طراحی وب محسوب کرد.

توسعه دهندگان Frontend در واقع این جنبه های front-facing یک وب سایت را طراحی نمی کنند؛ این کار، تخصص یک طراح وب یا به طور تخصصی تر، طراح UIاست. توسعه دهنده frontend این طرح را میگیرد و با استفاده از زبانهای frontend که در بالا صحبت کردیم، قابلیت های کاربردیی را ایجاد می کند.

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

پشت صحنه

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

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

معرفی توسعه دهنده Backend

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

قسمت backend (یا "سمت سرور")، آن قسمت از وب سایت شماست که دیده نمی شود. این قسمت، مسئولیت نگهداری و سازماندهی داده ها و اطمینان از اینکه همه موارد در سمت سرویس گیرنده واقعاً کار می کنند را برعهده دارد. backend با front-end ارتباط برقرار می کند، اطلاعات ارسال و دریافت می شود تا به عنوان یک صفحه وب نمایش داده شود. هر بار که یک فرم تماس را پرمی کنید، یک آدرس وب را تایپ می کنید یا خرید انجام می دهید (هر تعامل کاربر در سمت سرویس گیرنده)، مرورگر شما یک درخواست را به سمت سرور ارسال می کند، که اطلاعات را در فرم کد frontend که مرورگر قادر است تفسیر کند و نمایش دهد باز می گرداند.

سایت جدیدتان به component های اضافی backend نیاز دارد تا به یک برنامه وب سایت داینامیک تبدیل شود- وب سایتی که محتوای آن می تواند بر اساس آنچه در پایگاه داده آن است و توسط ورودی کاربر تغییر یابد. و از یک وب سایت استاتیک که پایگاه داده ای ندارد، متمایز است به دلیل این که محتوای آن تغییر نمی کند.

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

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

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

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

کدام را باید یاد بگیریم frontend یا backend ؟

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

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

با این حال، تمایز بین frontend و backend همیشه خیلی واضح نیست. برخی از توسعه دهندگان هم در frontend و هم در backend مهارت دارند؛ این افراد تحت عنوان full stack developers شناخته می شوند.

در حال حاضر خوشبختانه شما با تفاوت های frontend و backend و اینکه چگونه برای ایجاد وب سایت های کاربردی و کاربرپسند با هم کار می کنند، آشنا شدید.

برای آموزش های بیشتر با ما همراه باشید.