Front-End چیست و چه تفاوتی با Back-End دارد؟


تاریخ انتشار: 29 آذر 1399 | 377 بازدید

با ورود اینترنت به زندگی بشر، محصولات دیجیتالی مختلفی هم همراه با این فناوری راه خود را به دنیای ما باز کردند. یکی از این محصولات دیجیتالی، وب‌سایت‌ها هستند. امروزه اغلب افراد با سایت‌ها به خوبی آشنا بوده و نسبت به کارایی آن‌ها اطلاعات کاملی دارند.این محصولات و ابزارها در وهله اول باعث راحت‌تر شدن زندگی ما انسان‌ها شده‌اند. بسیاری از کارها مانند اطلاع‌رسانی، خرید آنلاین، ارتباط بین افراد جامعه و جهان و غیره توسط همین محصولات انجام می‌شود؛ بنابراین آشنایی با فضای آن‌ها بسیار مهم است.

اگر شما هم جزء افرادی باشید که با دنیای دیجیتال سر و کار دارند، حتما می دانید که برنامه نویسی چیست و ابزارهای مورد نیاز امروزی چگونه از طریق کد نویسی و برنامه نویسی کار می کنند. به مرور و با پیشرفته‌تر شدن بخش‌های اینترنت، وب‌سایت‌ها هم با این تغییرات هم‌مسیر و هم‌سو شدند به طوری که مفاهیم جدیدی به فهرست اصطلاحات دنیای کامپیوتر اضافه شد؛ یکی از این اصطلاحات Front-End است.

شاید از خود بپرسید برنامه نویسی Front-End چیست؟ برای دریافت این سوال ابتدا باید تعریفی از فرانت اند و متضاد آن یعنی بک اند یا Back-End داشته باشید. اگر به دنیای تکنولوژی و طراحی وب‌سایت علاقه مند هستید، پیشنهاد می‌کنیم تا انتهای این مقاله با رشدانا همراه باشید؛ چون می‌خواهیم در ارتباط با موضوع Front-End صحبت کنیم.

Front-End چیست؟

برای تعریف این تخصص ابتدا باید به معنای واژه Front در لغت‌نامه مراجعه کنیم که چنین معنی شده است: پیش، جلو، جلودار، به طرف جلو، روبرو و مواردی از این دست. بنابراین، می‌توان نتیجه گرفت که تخصص Front-End به بخش‌های جلو و مقابل اشاره دارد. یعنی تمام آن بخش‌هایی که کاربر با آن‌ها تعامل دارد و ارتباط برقرار می‌کند؛ از این رو به آن، Client Side نیز گفته می شود. طراح یا کدنویس این بخش را Front-End Developer می‌نامند. تمام آن چه که کدنویس فرانت اند طراحی می‌کند، کاربر و مخاطبان آن را می‌بینند.

فرانت اند چیست| رشدانا

پیشنهاد ویژه: آموزش برنامه نویسی فرانت اند

تفاوت Back-End و Front-End چیست؟

برای درک مفهوم فرانت اند و بک اند، ابتدا باید بدانید که دو عبارت Front-End و Back-End از نظر مفهومی با یکدیگر تضاد دارند و به دو معنی کاملا مختلف به کار می‌روند. به این ترتیب، کدنویسی بک اند به تمام بخش‌هایی اشاره دارد که کاربر نمی‌بیند و این بخش‌ها باعث تسهیل کارایی و سرعت وبسایت می‌شوند. برنامه‌نویسی چنین بخش‌هایی توسط بک اند دولوپر یا Back-End Developer انجام می‌شود. اگر بخواهیم یک مثال در ارتباط با این موضوع داشته باشیم، مورد دیتابیس گزینه خوبی است. دیتابیس بخشی است که وبسایت اطلاعات مورد نیاز خود را از آن می‌گیرد که نیاز به کدنویسی دارد. کاربرها و مخاطبان وب‌سایت‌ها این کدها و نحوه تعامل وبسایت و دیتابیس را نمی‌بینند.

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

تفاوت UI Designer و Front-End چیست؟

UI Designer یا طراح رابط کاربری، مانند برنامه‌نویس فرانت اند خودش کدنویسی نمی‌کند بلکه طراحی عناصر مختلف صفحه را برعهده دارد. ابزار کار طراح رابط کاربری فوتوشاپ و اسکچ یا Xd است؛ پس کاری که طراح رابط کاربری انجام می‌دهد، شامل بخش‌های گرافیکی طراحی سایت است اما فرانت اند دولوپر این بخش‌ها را کدنویسی می‌کند.

حتما بخوانید: طراحی رابط کاربری UI چیست؟

مهارت های برنامه نویس Front-End چیست؟

برای رسیدن به تخصص در حوزه Front-End باید مهارت‌های مختلفی به دست آورید. مهم‌تر از کسب مهارت، اجرای این مهارت‌ها در پروژه‌ها و موارد مختلف است که می‌توانید تجربه کنید و آموخته‌های خود را به‌روز نگه دارید. از اشتباه کردن نترسید. این مساله هم جزوی از یادگیری است. گاهی اشتباه کردن بیشتر از انجام کار درست به شما نکته و تجربه می‌آموزد که این در بلند مدت می‌تواند تاثیر خیلی خوبی در کارایی و عملکرد شما داشته باشد. در فهرست زیر تعدادی از مهارت‌هایی که یک فرانت اند دولوپر باید به آن‌ها مسلط باشد، می‌بینید.

  • HTML
  • CSS
  • Javascript
  • کتابخانه‌ها و فریمورک‌های جاوا اسکریپت (مثل جی کوئری)
  • کتابخانه‌های CSS مثل بوت استرپ (Bootstrap)
  • پردازنده‌های CSS مثل Sass یا Less
  • طراحی وب واکنش‌گرا (Responsive Web Design)
  • نرم افزارهای گرافیکی (فتوشاپ و شاید کمیIllustrator)
  • تست و آزمون و خطا

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

مهارت های برنامه نویس فرانت اند چیست| رشدانا

جمع بندی پایانی

در این مقاله، به بررسی این موضوع که Front-End چیست پرداختیم. همان طور که در متن هم به این موضوع اشاره کردیم، دنیای Front-End با -Back End متفاوت است و هر کدام روی بخش‌های متفاوتی کار می‌کنند. یک نکته مهم دیگر این است که بدانید، کار این دو حوزه کاملا روی کیفیت دیگری تاثیر دارد؛ پس به نوعی می‌توان آن‌ها را مکمل در نظر گرفت.

همچنین، دنیای Front-End با UI Designer هم تفاوت دارد؛ شاید در ظاهر به هم شبیه باشند اما در عمل و تخصص، کاملا دو شاخه جدا هستند. امیدواریم این مقاله برای شما مفید بوده باشد. به نظر شما کدام یک از حوزه های برنامه نویسی از اهمیت بیشتری برخوردار است؟ برنامه نویسی سمت کاربر یا برنامه نویسی سمت سرور؟ نظرات خوبتان را با ما مطرح کنید.

profile avatar
گلناز شهشهانی

من آدم خلاق، امیدوار و مسئولیت‌پذیری هستم. دانشجوی گردشگری‌ام و به عنوان کارشناس تولید محتوا در رشدانا و تیم‌های دیگه فعالم. علاقه زیادی به UX دارم و ویژنم اینه که به زودی یه UX Writer خفن بشم :) در حال حاضر، ورودی ترم دوم رشدانا در حوزه دیجیتال مارکتینگ هستم.

مطالب مرتبط

دوره آموزشی پیشنهادی

متخصص فرانت اند

Front-End Developer Career Path

در مسیر رشد مهارتهای پیاده سازی و برنامه نویسی بخش دیداری وب

آموزش فرانت اند

  • آشنایی با کدنویسی و کدنویسی تحت وب
  • کدنویسی مقرون به صرفه
  • اجرای کامل یک قالب در HTML
  • تکنیک های افزایش سرعت در کدنویسی
  • معرفی چند روش برای واکنش‌گرا کردن صفحات وب
  • نمایش و عدم نمایش المان‌ها در نمایشگر‌های دلخواه
  • آشنایی و استفاده از Grid System
  • مفاهیم برنامه نویسی شی گرایی(OOP)
  • نکات و تکنیک های SEO در تبدیل قالب
  • استفاده از تصاویر اسپرایتsprite
  • استفاده از jQuery SlideShow و نحوه Customize کردن آن
  • ساختار دستوری جی کوئری
  • بررسی Event Objects در Jquery
  • بوت استرپ RTL یا LTR ؟
  • X-UA-Compatible و دلیل استفاده از آن
  • متا تگ viewport و دلیل استفاده از آن

  • زمان: از 11 شهریور 1400
  • مدت زمان دوره : 110 ساعت در 34 جلسه
توضیحات بیشتر و ثبت نام

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

درخواست کارآموزی

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

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




رشدانا
مشاوره سریع با ما


    
    دوره های پیشنهادی:
    سایر دوره ها
    ×

    سرویسهای سایت ما