فرانت‌-اند (Front-End) چیست؟

اگر به تازگی با برنامه‌نویسی وب آشنا شده باشید، احتمالا نام "فرانت-اند" به گوشتان خورده است. اما به راستی فرانت-اند چیست؟ در این مطلب علاوه بر این موضوع، به اهمیت این بخش، زبان‌ها، ابزار و مهارت‌های لازم برای تبدیل شدن به یک برنامه‌نویس فرانت-اند نیز خواهیم پرداخت.اولین مرحله از ساخت یک وبسایت، طراحی آن است که به وسیله طراح و با استفاده از ابزار های طراحی مانند فتوشاپ، Adobe Xd، فیگما و... انجام می‌شود. وظیفه برنامه‌نویس فرانت-اند، دریافت این طرح از طراح و پیاده‌سازی آن به صورت کد های برنامه‌نویسی است. کد هایی که با زبان‌های متفاوتی نوشته شده و برای مرورگر قابل فهم است. هر آنچه در ظاهر یک وبسایت وجود دارد و شما قادر به دیدن آنها هستید، به بخش فرانت-اند وبسایت تعلق دارد. به عنوان مثال متن‌ها، تصاویر، دکمه‌ها، لینک‌ها، انیمیشن‌ها و... همگی توسط برنامه‌نویس فرانت-اند کدنویسی و ایجاد شده است.بیائید برای مثال نگاهی به صفحه اصلی سایت ویرگول بیاندازیم:تمام چیزی که در این تصویر دیده می‌شود، از جمله لوگو، دکمه جستجو، متن‌ها و تصاویر، ساختار و اندازه‌ها و... حاصل کدهایی است که توسط برنامه‌نویس فرانت-اند نوشته شده است. طراحی ریسپانسیو یعنی چه؟امروزه با وجود انواع مختلف دستگاه‌هایی که با آنها به اینترنت دسترسی داریم و با توجه به اندازه های متفاوت این دستگاه‌ها نسبت به یکدیگر، یکی دیگر از مهم‌ترین انتظاراتی که از برنامه‌نویس فرانت-اند می‌رود این است که وبسایت روی تمامی این دستگاه‌ها خوب جلوه دهد. به این نوع از پیاده‌سازی که امروزه مورد انتظار بسیاری از مشتریان ساخت وبسایت است، به اصطلاح "Responsive Web Design" گفته می‌شود که خود چالش های مختلفی را برای برنامه‌نویس ایجاد می‌کند. اهمیت فرانت-اندذهن ما انسان‌ها خواسته یا ناخواسته، کم یا زیاد، بسیاری از چیزها را از روی ظاهر قضاوت می‌کند. توجه به ظاهر در خرید یک کالا، برخورد با انسان‌های دیگر و بسیاری دیگر از قسمت‌های زندگی وجود داشته و تاثیر بسزایی در انتخاب‌های روزمره ما دارد. این موضوع اهمیت بالای فرانت-اند را ثابت می‌کند. به عنوان مثال، فرض کنید مادربزرگ من در خانه و آشپزخانه خود برای کسب درآمد، غذا پخته و به فروش آنها می‌پردازد. مزه غذاهای او حرف ندارد و برای تهیه آنها از مواد غذایی درجه یک، تازه و باکیفیتی استفاده می‌کند و غذای شما نیز سریعاً حاضر شده و به دستتان می‌رسد.و اما در همان محله رستورانی شیک و مجلل با نمای خیره‌کننده، دکوراسیون خلاقانه، نورپردازی حرفه‌ای و کاشی‌کاری زیبا وجود دارد. کیفیت غذاهای این رستوران در مقایسه با غذاهای مادربزرگ من کمتر بوده و کادر و سرویس متوسطی را به خدمت گرفته است.شما به عنوان کسی که برای اولین بار از این محله عبور می‌کنید، برای صرف یک وعده غذایی کدام یک را انتخاب می‌کنید؟ چه بسا با ظاهر فوق‌العاده آن رستوران، اعتماد شما به کیفیت غذاها و کادر آن نیز بیشتر شود و حتی از وعده خود لذت بسیاری ببرید. شما مشتری این رستوران خواهید شد و شاید دیگر سمت غذاهای مادربزرگم نرفته و متوجه وجود غذاهای لذیذ و خوشمزه او نشوید.مهارت‌های لازماما یک برنامه‌نویس فرانت-اند لازمه داشتن کدام توانایی ها و کسب چه مهارت‌هایی است؟ اصول پایهمهم‌ترین این دانش‌ها، مسلط بودن به سه زبان اصلی این حوزه، یعنی CSS ، HTML و JavaScript است. هر یک از این زبان‌ها کاربرد خاص خود را دارا هستند. بیائید برای ساده‌تر شدن مطلب، توضیحات را همراه با یک مثال پیش ببریم. کل بخش فرانت-اند را یک ساختمان در نظر بگیرید. اسکلت و ساختار اولیه این ساختمان را می‌توان همان HTML دانست. با این زبان، ساختار اصلی یک وبسایت ساخته می‌شود که می‌تواند شامل متن‌ها، تصاویر، دکمه‌ها و... باشد. پس از آن نوبت به رنگ‌آمیزی، کاشی‌کاری، نصب پنجره‌ها و شیشه‌ها و کار هایی از این قبیل برای زیباسازی ساختمان می‌رسد. معادل این کار را زبان CSS در یک وبسایت انجام می‌دهد. اینکه هر قسمت چه رنگ، اندازه، سبک و موقعیتی داشته باشد، همگی با این زبان صورت می‌گیرد. اما کار این ساختمان هنوز تمام نشده است. برای اینکه ساختمان ما تبدیل به جایی برای زندگی شود، باید ارتباطاتی نیز بین ما و ساختمان وجود داشته باشد. مثلاً با زدن دکمه‌ای در یک طبقه از ساختمان، آسانسور شروع به حرکت به سمت آن طبقه کند، با زدن کلیدهای خاصی، لامپ‌های مشخصی روشن یا خاموش شوند و همینطور بتوان سیستم گرمایی و سرمایی را تنظیم کرد. کار هایی مانند این را زبان JavaScript در یک وبسایت به عهده دارد. اینکه مثلاً با کلیک کردن یا قرار گرفتن موس بر روی هر بخش چه اتفاق و تغییراتی برای هر یک از بخش‌های دیگر وبسایت رخ بدهد، همگی با این زبان انجام می‌شود که دست برنامه‌نویسان را برای شخصی‌سازی هرچه بیشتر سایت باز می‌گذارد.کتابخانه‌ها (Libraries) و فریمورک‌ها (Frameworks)ساخت یک وبسایت صرفاً با استفاده از سه زبان قید شده قابل انجام است. اما هرچه پروژه بزرگ‌تر باشد، با چالش‌ها و مشکلات بیشتری در ساخت و توسعه همراه شده و ایجاد تغییرات روی آن سخت‌تر خواهد بود. اینجاست که فریمورک‌ها و کتابخانه‌ها به کمکمان می‌آیند. اگر بخواهیم با همان مثال ساختمان توضیح دهیم، در یک ساختمان دو طبقه می‌توانیم مصالح مورد نیاز را خودمان بالا ببریم. اما این کار در ساخت آپارتمانی پنج طبقه برای ما مشکل خواهد بود و برای راحتی کار از یک بالابر ساختمانی کمک می‌گیریم. از مهم‌ترین این کتابخانه‌ها و فریمورک‌ها می‌توان به Angular ، Bootstrap ، React و Vue.js اشاره کرد.کتابخانه‌ها و فریمورک‌ها کد های آماده و از قبل نوشته شده‌ای هستند که این اجازه را به ما می‌دهند که بدون نوشتن مجدد یک بخش کد برای انجام کاری، بارها و بارها از آن استفاده کنیم. با این کار از تکرارهای بیهوده جلوگیری کرده و علاوه بر راحتی کار، تاثیر مثبتی بر سرعت وبسایت خواهیم گذاشت.یادگیری تمامی این کتابخانه‌ها و فریمورک‌ها ضروری نیست. مسلط بودن به یک کتابخانه یا فریمورک از هر یک از زبان های CSS و JavaScript برای برنامه‌نویس فرانت-اند کافی است. زیرا در یک پروژه تنها از یکی از این کتابخانه‌ها استفاده می‌شود و هیچ شرکتی نیز برای استخدام از شما انتظار تسلط بر چند کتابخانه را نخواهد داشت. توانایی حل مسئلهبرنامه‌نویس فرانت-اند در مسیر پیاده‌سازی طرح، به انواع مختلفی از چالش‌ها و مسائل برمی‌خورد. در اینجا اهمیت توانایی حل مسئله آشکار می‌شود. وی باید بتواند مسئله را به اجزای کوچک‌تر تقسیم کرده و مشکلات و موانع حل شدن مسئله را یکی پس از دیگری از راه بردارد. درست است که می‌گویند نباید از روی ظاهر قضاوت کرد. اما این از اهمیت وقت گذاشتن و کار کردن روی ظاهر نمی‌کاهد. چرا که ظاهر و باطن، مکمل یکدیگر در راه دستیابی به بهترین‌ها بوده و هر دو از اهمیت بالایی برخوردارند.از وقتی که برای خواندن این مطلب گذاشتید تشکر می‌کنم و امیدوارم برایتان مفید واقع شده باشد.