تفاوت بین فرانت اند و بک اند در طراحی وب چیست؟

تفاوت فرانت اند و بک اند

اگر به تازگی وارد دنیای شیرین توسعه و طراحی وب شده ­اید، احتمالا اصطلاحات و تفاوت بک اند و فرانت اند زیاد به گوش شما خورده و شما را کنجکاو کرده تا بدونید معنی و مفهوم این دو چی هست؟

البته در کنار این دو، اصطلاح full stack  نیز به چشم می­خورد.

برای درک بهتر تفاوت فرانت اند و بک اند با ما همراه باشید.

همانطور که می­دونید front end  و back end  از هم جدا نوشته می شوند؛

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

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

هر بخش برای نمایش سایت لازم است  و هر دو،  نقش بسیار زیادی در توسعه وب دارند.

در این مقاله ساختار های هر بخش را بررسی می­کنیم و به تفاوت این دو می­پردازیم.

 

 

فرانت اند چیست؟

فرانت اند به زبان ساده همان چیزی است که شما در مرورگر خود می­بینید و با آن ارتباط برقرار می­کنید.

فرانت اند به بخش مشتری نیز معروف است و شامل همه مواردی است که کاربر در سایت مشاهده می کند: از متن و رنگ گرفته تا دکمه ها ، تصاویر و منوهای ناوبری.

من برای درک بهتر فرانت اند یک مثال خیلی ساده می­زنم؛ فرض کنید شما تصمیم گرفته اید که کسب و کار خود را راه اندازی کنید.

برای معرفی شرکت خود، نیاز به یک وب سایت حرفه ای دارید تا عکس هایی از شرکت و کسب و کار خودتان را

به مشتری ها نشان داده و خدمات و محصولات خود را به کاربران معرفی کنید.

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

تفاوت فرانت اند و بک اند دقیقا در همین کار کردن یا نکردن با رنگ و گرافیک است.

حالا که تفاوت فرانت اند و بک اند رو فهمیدیم بریم با زبان های فرانت اند آشنا بشیم.

 

 زبان های مورد نیاز فرانت اند

برای نوشتن بخش فرانت اند سایت نیاز به آشنایی با چندین زبان مختلف را داریم.

بخش front-end  سایت ها معمولا با این زبان ها نوشته شده­ اند :

 

html

HTML

یک زبان نماد گذاری یا نشانه گذاری است که در طراحی سایت کاربرد بسیار فراوانی دارد .

از html برای ساختن صفحات استاتیک استفاده می‌شود و به وسیله آن میتوان صفحات وبی ساخت که

شامل عکس ، فیلم ،موزیک ، پاراگراف ، جدول و … است.

HTML  مخفف عبارت Hyper Text Markup Language به معنی زبان نشانه گذاری ابر متن است.

 

css

CSS

کلمه CSS مخفف عبارت انگلیسی Cascading style sheets و به معنی ‌صفحات استایل آبشاری هست.

سی اس اس همونیه که تفاوت فرانت اند و بک اند رو میسازه.

دستورات CSS به هر عنصر اعمال می­شوند و در هر عنصر، بر فرزندان اون عنصر هم تاثیر دارند.

البته اینم باید بدونید که برای یادگیری css  آشنایی ابتدایی با html  نیاز هست و شما باید درک ابتدایی از ساختار و تگ های html داشته باشید.

میشه گفت زبان html  زبان سختار یک صفحه سایت هست که برای ساخت دکمه، فرم و text box از این زبان استفاده می کنند.

اما با css  میتونید به متن و دکمه و سایر المان های سایت ظاهری جذاب هدیه بدید.

اینم یادتون باشه که html و css  از اصلی ترین ساختار های یک صفحه وب هستند و برای ایجاد یک صفحه وب نیاز است که درک متوسطی از این دو فناوری داشته باشیم.

نکته مهم: css  و html  زبان برنامه نویسی نیستند و اگر شما به این دو مسلط هستید، نمی توانید خودتان را یک توسعه دهنده بخش فرانت اند سایت بدانید.

 

جاوا اسکریپت

javascript

جاوا اسکریپت یک زبان برنامه نویسی پویا است که از نحو ساختاری زبان c پشتیبانی میکند.

از جاوا اسکریپت برای پویا تر ساختن صفحات وب استفاده میکنیم.

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

جاوا اسکریپت خیلی کارتو راحت میکنه رفیق !

 

محبوبت ترین فریم ورک های فرانت اند

 

React JS

React JS

فریمورک ReactJS اساساً یک کتابخانه ی جاوا اسکریپت منبع باز است که برای ایجاد رابط کاربری مخصوص برای برنامه های یک صفحه ای استفاده می شود.

فریمورک React به توسعه دهندگان اجازه می دهد برنامه های وب بزرگ را که می توانند داده ها را بدون بارگذاری مجدد صفحه تغییر دهند، ایجاد کنند.

ری اکت می تواند با ترکیبی از دیگر کتابخانه ها یا چارچوب های جاوا اسکریپت مانند Angular JS در MVC استفاده شود.

یادگیری react JS   آسان است و شما می­تونید html  و Javascript  رو باهم ترکیب کنید و صفحه ای که مد نظرتان هست رو با استفاده از این دو نوع فریم ورک پیاده سازی کنید.

vue js

Vue JS

برنامه‌­نویسان جاوا اسکریپت به منظور کدنویسی کم­‌تر و رسیدن به نتیجه مورد نظر در کوتاه‌­ترین زمان، از فریم‌­ورک‌­های این زبان مانند Vue ، React،  Angular و… استفاده می­کنند.

از Vue.js برای ساختن صفحات وب تک صفحه­­ای یا اپلیکشن استفاده می­کنند.

 

angular-js

Angular

AngularJS یک فریمورک ساختاری برای وب اپلیکیشن های پویا است.

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

Data binding و dependency injection  انگولار، بیشتر کدهایی را که شما مجبور به نوشتن آن هستید را آسان میکند.

اکنون که با زبان ها و فریم ورک های فرانت اند آشنا شدیم، می خواهیم کمی جلوتر برویم،

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

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

ممکن است از خود بپرسید این اطلاعات چطور و در کجا ذخیره خواهند شد؟ اینجاست که با بخش back-end  کار داریم.

 

بک اندچیست؟

 

back-end چیست؟

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

این سایت های static  یا ثابت برای نمایش مواردی مانند کسب و کار ها، رستوران یا نمونه کار ها مناسب هستند.

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

در واقع بک اند (back-end)  بخشی از وب سایت است که قابل مشاهده نیست. و این تفاوت فرانت اند و بک انده.

این قسمت وظیفه ذخیره و سازماندهی داده ها و اطمینان از علمکرد واقعی همه چیز در سمت مشتری را دارد.

قسمت بک اند سایت با قسمت فرانت اند ارتباط برقرار می­کند، و اطلاعات را ارسال و دریافت می کند.

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

خب با تفاوت فرانت اند و بک اند آشنا شدیم حالا وقتشه با زبان ها آشنا بشیم:

زبان های موردنیاز برنامه نویسی بک اند (back-end)

 

جاوا (Java)

جاوا (Java)

جاوا یکی از محبوب‌ترین زبان‌های برنامه نویسی در جهان است.

از این زبان در تلفن‌های همراه، برنامه‌های دسکتاپ، طراحی وب، دستگاههای کارتخوان و خودپردازها و … استفاده می‌شود.

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

درک برخی مباحث جاوا برای مبتدیان، کمی مشکل است.

 

پی‌اچ‌پی (PHP)

پی‌اچ‌پی (PHP)

نزدیک به 79 درصد از کل وب سایتهای سطح جهان، با زبان PHP برنامه نویسی شده است.

این زبان اولین بار در سال 1995 منتشر شد که گزینه‌های کمی برای ایجاد وب سایت‌های پویا وجود داشت.

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

 

روبی (Ruby)

روبی (Ruby)

روبی یک زبان شی گرا است که در سال 1995 توسط Yukihiro Matsumoto که به Matz معروف است، طراحی و ساخته شد.

او این زبان را به گونه ای طراحی کرده است که برنامه نویسان مبتدی به سادگی بتوانند از آن استفاده کنند.

در عین حال به اندازه کافی قدرتمند است که برنامه نویسان حرفه ای می‌توانند، تمام ابزار مورد نیاز خود را داشته باشند.

 

پرل (Perl)

پرل (Perl)

Perl یک زبان برنامه نویسی همه منظوره و سطح بالا است.

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

پرل از نظر نحوی شبیه به زبان C است و یادگیری آن برای کسانی که به زبان‌های C و C++ آشنایی دارند، آسان است.

فریمورک  های محبوب بک اند

 

لاراول (Laravel)

لاراول (Laravel)

لاراول یک فریمورک توسعه وب و با زبان PHP نوشته شده است.

این فریمورک ساختار زبانی عالی که از معماری MVC استفاده می‌کند.

Laravel تلاش می‌کند با کاهش کارهایی مانند تایید اعتبار، مسیریابی، نشست‌ها و ذخیره سازی که در اکثر پروژه‌های وب انجام می‌شود، توسعه وب را ساده‌تر کند.

اگه بعد فهمیدن تفاوت فرانت و بک اند تصمیم گرفتی بک اند کار کنی لاراول رو پیشنهاد میکنم.

 

 (ASP.Net)

 (ASP.Net)

ASP.NET یک فریمورک برنامه وب، ساخت مایکروسافت است که امکان طراحی وب سایت با استفاده از زبان‌های C#  ، Visual Basic (VB) و غیره را به برنامه نویسان می‌دهد.

 

جنگو (Django)

جنگو (Django)

جنگو یک فریمورک تحت زبان پایتون است که با از فلسفه batteries included پیروی می‌کند. این بدان معنی است که جنگو می‌تواند پاسخگوی همه نیازهای برنامه نویسان باشد.

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

 

دیتابیس چیست؟

دیتابیس چیست؟

اکنون که با تفاوت فرانت اند و بک اند آشنا شدید وقتش رسیده که با یک مفهوم دیگر نیز آشنا شوید.

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

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

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

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

شروع کسب و کار

اکنون شما تفاوت فرانت اند و بک اند را میدانید و دارای یک وب سایتی هستید که  از فناوری های frontend و backend استفاده می کند.

شما از زبانهای frontend استفاده می کنید تا وب سایت خود را بسیار زیبا نشان داده وکاربران از آن راضی باشند.

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

همانطور که می بینید ، هر دو طرف سایت نقشهای بسیار متفاوتی دارند. اما این دو بخش  با هم کار می کنند

و عملکرد وب سایت را برای همه امکان پذیر می کنند.

سخن پایانی

ما در این مقاله تفاوت بک اند و فرانت اند رو گفتیم.

اگر رابط های کاربری را می پسندید ، به طراحی گرافیک  علاقه دارید،

شاید بخشی که می خواهید وقت خود را به عنوان یک توسعه دهنده نرم افزار بگذرانید، فرانت اند است.

این بخش نه تنها از نظر گرافیکی بلکه از نظر برنامه نویسی نیز هیجان انگیز  و جذاب است.

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

اگر دوست دارید وقت خود را صرف حل  مسئله، نوشتن الگوریتم ها و کد نویسی کنید،

بخش back end  برای شما مناسب است.

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

یک دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *