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

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

اگر تازه شروع به یادگیری توسعه وب کرده اید، احتمالا در مورد frontend و backend  زیاد شنیده اید. اما دقیقاً منظورچیست؟ اگر شما یک مبتدی در این زمینه هستید، شناخت نسبت به آن ها و اینکه هر کدام چه مواردی را پوشش می دهند مشکل است.

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

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

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

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

زبان های frontend

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

HTML- این زبان، یک زبان برنامه نویسی اساسی و کاربردی است که محتوای وب را ایجاد و سازماندهی می کند و توسط یک مرورگر نمایش داده می شود. شما می توانید در مورد 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  تمام component های frontend را در بر می گیرد و امکان انجام دادن کارهایی مانند ذخیره کردن سوابق و تاریخچه خرید و جزئیات محصول، ایجاد حسابهای کاربری قابل ویرایش و موارد دیگر را فراهم می کند. همانطور که مشاهده می کنید، هر دو قسمت نقش های متفاوتی دارند. اما در نهایت این دو قسمت با هم تجربه کاربر را تعریف می کنند و باعث می شوند که وب سایت به کلی کار کند.

Frontend در مقابل Backend: کدام یک را باید یاد بگیرم؟

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

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

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

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