همانطور که در مقاله‌ای جداگانه درباره‌ی طراحی وب توضیح دادیم، طراحی وب مربوط به طراحی هر آن چیزی است که کاربر آن را در مانیتور خود مشاهده میکند. و یک طراح وب وظیفه‌ی طراحی المان های گرافیکی و دیداری یک وبسایت یا صفحه وب را دارد.
اما در دنیای طراحی وب، واژه ای مثل Front End یا Back End ممکن است زیاد به گوش شما بخورد. در این مقاله میخواهیم درباره‌ی Front End صحبت کنیم و بگوییم که فرانت چیست، چه تفاوتی با بک اند (Back End) دارد و برای تبدیل شدن به یک طراح وب یا Front End Developer, به چه مهارت هایی نیاز داریم.
Front End چیست: در عبارت Front End، همانطور که میبینید واژه‌ی Front وجود دارد. و در انگلیسی یکی از معانی Front، به معنای «جلو» می‌باشد.
با توجه به تعریفی که از این واژه دیدیم، میتوانیم در پاسخ به سوال Front End چیست بگوییم:
فرانت اند یا Front End، به بخش قابل مشاهده‌ی یک وب سایت یا نرم افزار توسط کاربران می‌گویند. فرانت اند، کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آن‌ها نمایش می‌دهد تا بتوانند به راحتی از بخش‌های مختلف سایت استفاده کنند. در این بخش، فرم‌های ورودی اطلاعات، صداها، تصاویر، ویدئوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، قرار می‌گیرد.
فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم می‌شود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و… ظاهر سایت را طراحی می‌کنند. اما بخش توسعه‌ی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و جاوا اسکریپت است. بخش قابل مشاهده سایت برای کاربران در سمت فرانت را سمت کاربر یا Client Side می‌نامند. بنابراین کدهای نوشته شده در سمت فرانت اند، در مرورگر کاربر پردازش و اجرا می‌شوند. یعنی کاربر به راحتی به این کدها دسترسی مستقیم دارد و می‌تواند آن‌ها را مشاهده کند. فرانت اند با بخش بک اند (Backend) در ارتباط مستقیم است و بر روی تجربه کاربران هنگام استفاده از محصول تاثیر بسیاری می‌گذارد.
همانطور که گفته شد زبان کدنویسی فرانت اند دو بخش طراحی و توسعه رابط کاربری دارد. به طور معمول بخش طراحی تجربه کاربری، توسط یک فرد متخصص (طراح تجربه کاربری) به صورت جداگانه توسط نرم افزارهایی مانند فیگما، فتوشاپ، XD و … انجام می‌شود.
پس از طراحی اولیه، باید این طراحی‌ها با قالب کدهای HTML، جاوا اسکریپت و CSS پیاده سازی شوند. کدهایی که در فرانت اند طراحی می‌شوند، در مرورگرهایی که کاربران با آن وارد وبسایت می‌شوند، اجرا شده و آن‌ها می‌توانند کدهای اجرا شده را مشاهده کنند.
داشتن مهارت‌های زیر به اجرای مناسب زبان برنامه نویسی فرانت اند توسط برنامه نویسان کمک میکند:
بدون اغراق واجب‌ترین مهارتی که یک برنامه نویس فرانت اند باید داشته باشد، تسلط به HTML و CSS بوده و این اولیم مهارتی است بعد از پرسش front end چیست باید به سراغ آن برود، یادگیری این دو مورد است. در واقع زبان نشانه گذاری متن یا HTML، کلید ورود به دنیای برنامه نویسی بوده و با CSS می‌توان عناصر آن را زیباتر کرد.
با وجود تسلط بر HTML و CSS برای اضافه کردن هرگونه عملکرد به صفحات طراحی شده، باید از زبان‌های برنامه نویسی استفاده کرد. بهترین زبان برنامه نویسی برای زبان کدنویسی فرانت اند، جاوا اسکریپت بوده و حتی در بعضی از مواقع در بررسی ابعاد مختلف front end چیست، جاوا اسکریپت را به عنوان زبان اصلی فرانت اند معرفی می‌کنند.
در ابتدای کار و برای یادگرفتن زبان کد نویسی فرانت اند ، لازم است که صفر تا صد یک صفحه را خودتان طراحی کنید. اما پس از طی مسیر یادگیری و رسیدن به سطح مناسب، برای صرفه جویی در زمان و افزایش بازدهی بهتر است از فریم ورک‌ها استفاده شود.
در حقیقت فریم ورک‌ها ماژول‌‌هایی آماده از کدهای جاوا و CSS هستند. فریم ورک‌ها قابلیت‌هایی مختلفی دارند. با توجه به وبسایت مد نظرتان، با آن قابلیت‌ها آشنا شده و متناسب با نیازتان استفاده کنید. دو مورد از مشهورترین فریم ورک‌های جاوا اسکریپت AngularJS و ReactJS هستند.
بر اساس آمار موجود، حدود 60 درصد کاربران وب از طریق تلفن‌های هوشمند در دنیای آنلاین حضور دارند. در نظر داشته باشید که موبایل‌ها در ابعاد و برندهای مختلف هستند. به همین دلیل یکی از مهم‌ترین مهارت‌ها برای یک برنامه نویس فرانت اند، تسلط برای طراحی واکنش‌گرا یا همان ریسپانسیو است. دقت کنید که این موضوع نیز در سئو وبسایت تاثیر بسزایی دارد.
بعد از طی تمامی مراحل طراحی فرانت اند وبسایت، باید عملکرد آن قبل از ورود کاربران تست و یا اصطلاحا دیباگ شود.این مرحله مهم‌ترین و اصلی‌ترین مرحله طراحی سایت است؛ چرا که در صورت وجود هر گونه باگ در پروژه قبل از بهره برداری متوجه آن شده و آن را رفع کنید. برای این مرحله نیز فریم ورک‌های آماده‌ای نیز وجود دارد که می‌توانید از آن‌ها استفاده کنید.
Front End Developer یا برنامه نویس فرانت اند به کسی گفته می‌شود که تمامی مهارت‌های لازم را برای اجرای زبان کدنویسی فرانت اند داشته باشد. همچنین بتواند در طراحی‌های خود خلاقیت و ایده پردازی لازم را برای اجرای بهترین ایده‌ها متناسب با سلیقه مخاطب وبسایت پیاده سازی کند.
پرکاربردترین مثالی که برای فرانت اند زده می‌شود، مثال صحنه و بازیگران آن است. اعصای پشت صحنه (برنامه نویسان بک اند) باید به طور دقیق، سناریو، حرکت‌ها، دیالوگ‌ها و همه موارد لازم را مشخص کنند تا بازیگران صحنه (برنامه نویسان فرانت اند) آن را به خوبی اجرا کنند.
افراد پس از پیدا کردن پاسخ سوال front end چیست، به دنبال یادگیری و درآمدزایی از این تخصص هستند. همانند تمامی حوزه‌های برنامه نویسی، در فرانت اند بسته به میزان تخصص، سابقه، نمونه کار و موارد دیگر، حقوق و درآمد افراد متفاوت است. همچنین با توجه به آزاد کاری (فریلنسینگ) و استخدام، میزان دریافتی برنامه نویس فرانت اند می‌تواند متفاوت باشد.
افراد در این حوزه در تخصص‌های زیر می‌توانند کار کنند:
در حال حاضر در ایران درآمد برنامه نویسان فرانت اند از 8 میلیون تومان شروع شده و تا 60 میلیون تومان نیز می‌رود.
