تفاوت بین Frontend و Backend در طراحی سایت

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

 

تفاوت بین Frontend و Backend در طراحی سایت

 

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

آن چیزی که در یک وب سایت می بینید و با آن تعامل می کنید، Frontend سایت نام دارد. گاهی به آن Cilent-Sideهم گفته می شود و دقیقا به تجربه کاربری سایت اشاره می کند: از رنگ و نوشته ها گرفته تا دکمه ها، تصاویر، منوهای پیمایش و …

 

۲  زبان های برنامه نویسی Frontend چه هستند.

HTML: زبان برنامه نویسی برای ایجاد ساختار و محتویات صفحات وب می باشد.

CSS: زبان برنامه نویسی که برای قالب بندی سایت (چیدمان، رنگ ها، قلم ها و …) استفاده می شود.

JavaScript: این زبان برنامه نویسی برای تعاملی تر شدن صفحات وب استفاده می شود.

توسط این سه تکنولوژی شما می توانید تمام آن چیزهایی که تابحال در وب سایت های مختلف دیده اید را ایجاد کنید. در نهایت می توانید از تکنولوژی های دیگری هم برای توسعه Frontend استفاده کنید مانند فریمورک های Bootstrap و Angular یا کتابخانه های آماده جاوااسکریپت که با نام JQuery شناخته می شوند. همچنین می توانید از توسعه دهنده Less & Sass که برای CSS استفاده می شود نیز استفاده کنید. هدف از تمام تکنولوژی های مکمل که نام بردم، راحت تر کردن کد نویسی می باشد.

۳  تفاوت بین طراحی وب (Web Design) و توسعه Frontend چیست؟

طراح وب و توسعه دهنده Frontend دو کار مختلف هستند. طراح وب که گاهی به آنطراح رابط کاربری (UI Designer) نیز گفته می شود، نمای ظاهری سایت را طراحی می کند اما توسعه دهنده Frontendتوسط تکنولوژی های برنامه نویسی اقدام به ساخت را بط کاربری می نماید. در وب سایت هایی که بصورت خیلی حرفه ای طراحی می شوند هر یک از این دو بخش توسط متخصص های جداگانه طراحی می شود. اما در وب سایت های عادی، این دو کار توسط یک شخص انجام می شود.

پشت صحنه

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

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

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

توسعه Backend که به آن سمت سرور (Server-Side) نیز گفته می شود آن بخشی است که کاربر آنرا نمی بیند. این بخش مسئول نگهداری و ساماندهی اطلاعات است و اطمینان حاصل می کند که همه چیز در بخش Client-Side به درستی انجام می شود.

Backend در تعامل با Frontend قرار دارد تا تبادل اطلاعات در یک وب سایت را مدیریت کند. هر زمان که شما یک فرم را پر می کنید، یک آدرس تایپ می کنید، یک خرید انجام می دهید (هر تعاملی که سمت کلاینت انجام می شود) درخواستی به سرور ارسال می شود.

اکنون وب سایت جدید شما باید بتواند اطلاعات دریافت شده را پردازش کند. به عنوان مثال باید بتواند به دیتابیس محصولات دسترسی پیدا کند و بر اساس سفارش مشتری تعداد کالاهای موجود در دیتابیس را تغییر دهد. حال شما تفاوت وب سایت ایستا (Static) و و ب سایت پویا (Dynamic) را متوجه شدید. زمانی که شما فقط در وب سایت محصولات خود را معرفی می کردید نیاز به تغییرات زیادی نداشتید و کاربر با سایت تعامل نداشت (وب سایت ایستا) اما وقتی که کاربر اقدام به خرید آنلاین از سایت شما می کند (تعامل کاربر و سایت) نیاز به داشتن یک وب سایت پویا (Dynamic) دارید.

تنظمیات Server-Side

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

وب سایتی که تاکنون برای کسب و کار خودتان ایجاد کرده اید، فقط کدهای Frontend را شامل می شود. اما اکنون که تصمیم گرفته اید برای فروشگاه آنلاین سایت یک دیتابیس هم ایجاد کنید، نیاز به زبان های برنامه نویسی دارید که بتوانند با دیتابیس ارتباط برقرار کنند. برخی از زبان های برنامه نویسی Backend عبارتند از Ruby، PHP، .Net، Java و Python.

وقتی که وب سایت خودتان را تکمیل کردید مشتریان می توانند در وب سایت شما محصولات مورد نظرشان را جستجو کنند و آنرا سفارش دهند. وقتی مشتری وارد وب سایت شما می شود و در کادر جستجوی سایت شما (Frontend) محصولی را جستجو می کند، درخواست وی در دیتابیس فروشگاه (Backend) مورد بررسی قرار می گیرد. سپس محصولات مرتبط با جستجوی کاربر از دیتابیس استخراج شده و روی سایت (Frontend) نمایش داده خواهد شد.

آماده برای کسب و کار

اکنون شما یک وب سایت تعاملی دارید که از تکنولوژی های Frontend و Backend استفاده می کند. شما از تکنولوژی های Frontend استفاده کردید تا یک وب سایت زیبا و کاربر پسند تولید کنید. در پس زمینه تکنولوژی های Backend برای ایجاد ارتباط با دیتابیس مورد استفاده قرار گرفت. همانگونه که مشاهده کردید، Frontend و Backend نقش های مختلفی را بر عهده دارند اما در عمل در ارتباط با هم تجربه کاربری (User Experience) فوق العاده را برای کاربران سایت شما فراهم می کنند.

۵  من باید Frontend یا Backend را یاد بگیرم؟

اکنون شما با کارکرد هر دو بخش Frontend و Backend سایت آشنا شدید. اگر شما می خواهید به عنوان طراح سایت وارد بازار کار شوید ما به شما پیشنهاد می کنیم که Frontend و Backend را بصورت کامل آموزش ببینید و بتوانید از عهده هر دو قسمت سایت برآیید. به افرادی که توانایی توسعه سایت هم در قسمت Frontend و هم در قسمت Backend را دارند، Full-Stacked Developer گفته می شود.

تفاوت بین Frontend و Backend در طراحی سایت

× هر سوالی دارید ازمون بپرسید