شوفاژ به مثابه وب سایت! (فرانت اند چیست؟)

متن زیر را بدون در نظر گرفتن محتوای داخل پرانتز بخوانید:

طراح ( UI/UX Designer )، ظاهر شوفاژ ( web site ) ما را طراحی می کند. اما مشخصا یک طراحی، کاربردی برای ما نخواهد داشت.

از سوی دیگر یک مهندس ( Back End Developer ) شوفاژخانه ( Back End ) را می سازد. اما باز هم شوفاژخانه به تنهایی خانه ما را گرم نخواهد کرد.

درست متوجه شدید؛ ما نیاز به یک شوفاژ ( Front End ) داریم که پیشتر توسط طراح ( UI/UX Designer ) طراحی شده و ماحصل فعالیت شوفاژخانه ( Back End ) را که همان گرما هست به ما منتقل می کند.

حالا متن بالا را با محتوای پرانتز بخوانید.

با اینکه معتقدم مثال ها لزوما تطابق صد در صدی با منظور ما را نخواهند داشت، اما مثال بالا برای شروع درک ما از پروسه ی ساخت وب سایت خوب است.

در این مقاله مشخصا به مفهوم فرانت اند خواهیم پرداخت.

اگر هنوز دقیقا متوجه معنی فرانت اند نشدید با مثالی واقعی توضیح خواهم داد:

وب سایت ها ابتدا توسط طراحان در نرم افزارهای گرافیکی ( مثل ادوبی ایکس دی، فیگما و … ) طراحی می شوند.

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

در نهایت توسط برنامه نویس بک اند، قالب ساخت شده پویا می شود ( منظور از پویا شدن اتصال به پایگاه داده، قابلیت ادیت یا اضافه کردن مطالب با پنل مدیریتی و … است ).

برای تبدیل طرح گرافیکی به قالب، از HTML و CSS و JavaScript استفاده می کنیم. در حقیقت با HTML ساختار اصلی و بدنه را ایجاد می کنیم؛ با CSS استایل ها ( مثل رنگ ها، اندازه ها و … ) را به ساختار اضافه می کنیم و در نهایت با JavaScript ساختار های پیچیده تر مثل اسلایدرها، اعتبار سنجی فرم ها و … را برنامه نویسی می کنیم.

اگر علاقمند به یادگیری فرانت اند هستید، می توانید از مسیر ( road map ) زیر استفاده کنید.