فرانت اند (Frontend) و بک اند (Backend) چه هستند و چه تفاوت هایی دارند؟

اگر به تازگی یادگیری توسعه وب را شروع کرده اید، احتمالاً صحبت های زیادی درباره برنامه نویسی در بک اند و فرانت اند شنیده اید. اما دقیقا منظور ما از این اصطلاحات چیست؟

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

1. توسعه Frontend چیست؟
2. کدام زبان های اصلی توسعه Frontend هستند؟
3. چه تفاوت هایی بین توسعه Frontend و طراحی وب وجود دارد؟
4. توسعه پس زمینه چیست؟
5. آیا باید Frontend یا Backend Development یا هر دو را یاد بگیرم؟

1) توسعه Frontend چیست؟

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

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

2) زبان های اصلی توسعه Frontend چه هستند؟

این سه زبان این ترفند را انجام می دهند:

HTML

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

CSS

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

JavaScript

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

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

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

3) چه تفاوت هایی بین توسعه Frontend و طراحی وب وجود دارد؟

با توجه به اين نكته می توانيد از طريق توسعه فوروارد با جنبه بصری و تعاملی يک وب سايت کار كنيد، همچنین می توانيد آن را طراحی كنيد.

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

فرانت اند

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

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

بک اند

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

4) توسعه Backend چیست؟

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

بک اند (یا “سمت سرور”) بخشی از وب سایت است که کاربر نمی بیند و مسئول ذخیره و سازماندهی داده ها و اطمینان از همه چیز در سمت مشتری است.

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

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

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

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

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

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

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

5) آیا باید Frontend یا Backend Development یا هر دو را یاد بگیرم؟

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

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