Front End چیست؟

فرانت اند (Front End) به بخشی از طراحی وب سایت گفته میشود که کاربر هنگام وارد شدن به یک وب سایت میبیند و با آن نیز ارتباط برقرار میکند. همه مواردی که در فضای اینترنت و هر وب سایتی می بینید، از قلم ها و رنگ ها گرفته تا منوهای کشویی و اسلایدرها که میتوانید به وسیله آن ها به راحتی از بخش های مختلف سایت استفاده کنید، فرانت اند گفته میشود. تمام بخش هایی که در وبسایت قابل مشاهده است، ترکیبی از کدهای HTML ،  CSS و JavaScript بوده که توسط مرورگر رایانه شما کنترل می شود. کسانی که در قسمت Front End کار میکنند باید به این سه زبان HTML ،  CSS و JavaScript  مسلط باشند که بتوانند یک طراحی سایت دقیق ارائه دهند. کدی که آنها می نویسند در داخل مرورگر کاربر اجرا می شود.

فرانت اند رابطه مستقیمی با بخش Back end داشته و تاثیر زیادی روی تجربه کاربری (UX) خواهد داشت. برنامه نویسان فرانت اند با طراحان و تحلیل گران تجربه کاربری ارتباط نزدیک داشته و میتوانند باهم فعالیت داشته باشند تا مواردی مثل موکاپ (Mockup) یا وایرفریم (wireframes) را از توسعه تا تحویل ارائه دهند. همچنین آن ها می توانند به طور دقیق موارد خاص در تجربه کاربر را شناسایی کرده و برای تأثیرگذاری بر طراحی سایت، پیشنهادات و راه حل هایی را ارائه دهند. این تاثیرگذاری ها بسیار میتواند روی کاربری که وارد یک وب سایت میشود موثر باشد و در نتیجه روی سئو سایت و رتبه گوگل نیز موثر است.

یک توسعه دهنده front end باید در چه زمینه هایی مهارت داشته باشد؟

• زبان CSS و HTML

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

• زبان JavaScript

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

• JQuery

JQuery  یک کتابخانه جاوا اسکریپت است که مجموعه ای از پلاگین ها میباشد که توسعه با جاوا اسکریپت را سریعتر و آسان تر می کند. به جای اینکه همه چیز را از ابتدا کدگذاری کنید، jQuery به یک توسعه دهنده وب front end اجازه می دهد تا عناصر آماده را به پروژه ها اضافه کند، سپس در صورت لزوم آن ها را سفارشی سازی و اصلاح کند که برای اصلاج کردن آن به دانش جاوا اسکریپت نیاز است. شما می توانید از jQuery برای مواردی مانند تایمرهای شمارش معکوس، تکمیل خودکار فرم جستجو و حتی تنظیم مجدد خودکار و تغییر اندازه طرح های شبکه استفاده کنید.

• فریم ورک های (Frameworks) جاوا اسکریپت

فریم ورک های JS (شامل AngularJS ، Backbone ، Ember و ReactJS) یک ساختار آماده به کد JavaScript شما می دهند. فریم ورک های JS انواع متفاوتی دارند که هر کدامشان برای نیازهای خاصی در یک سایت مورد استفاده قرار میگیرند. این چهارچوب ها بسیار به کار Front end سرعت بخشیده و می توانند با کتابخانه هایی مانند jQuery مورد استفاده قرار گیرند تا میزان کدهایی که نوشته میشوند به حداقل برسد.

• فریم ورک های front end

فریم ورک های CSS و front end برای CSS همان کاری را انجام می دهند که JS Frameworks برای جاوا اسکریپت انجام می دهند. آن ها به کدگذاری سرعت میبخشند. از آنجا که CSS به طور بسیار دقیقی با همان عناصر از یک پروژه به پروژه دیگر شروع به کار میکند، چارچوبی که همه این موارد را از ابتدا برای شما تعریف می کند بسیار ارزشمند است. از محبوب ترین فریم ورک های front end، Bootstrap میباشد.

• داشتن تجربه با پیش پردازنده های CSS

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

• اصول واکنش گرا (Responsive) و طراحی موبایل

طراحی واکنش گرا به این معنی است که طرح سایت (و گاهی اوقات عملکرد و محتوای آن) براساس اندازه صفحه و دستگاهی که فرد از آن استفاده می کند، تغییر میکند. به عنوان مثال زمانی که یک وبسایت از صفحه دسکتاپ کامپیوتر تماشا میشود، تمام تنظیمات آن وب سایت بر اساس همان مانیتور کامپیوتر میباشد و رابط کاربری آن مخصوص برای استفاده از موس و کلیک ساخته شده است. اگر روی صفحه موبایل همان وب سایت را مشاهده کنید، تنظیمات آن بر اساس همان صفحه لمس گوشی طراحی شده است ولی فایل های اصلی همان ها هستند. مطمئنا دیدن سایت مورد نظر از یک مانیتور کامپیوتر یا صفحه موبایل برای کاربر متفاوت میباشند. طراحی واکنش گرا بسیار پر اهمیت میباشد و باید در تمام طراحی سایت‌ها مانند طراحی سایت فروشگاهی و حتی طراحی سایت ارزان مورد استفاده قرار گیرد.

• مهارت تست کردن و عیب یابی

این یک واقعیت واقعی برای یک توسعه دهنده وب فرانت اند است زیرا مشکلات همیشه ایجاد میشوند. آشنایی با مراحل تست کردن و رفع اشکال امری بسیار ارزشمند است. یکی از رایج ترین تست ها، انجام تست UI میباشد. در اینجا بررسی میکنید زمانیکه کاربر یکسری فعالیت روی سایت انجام میدهد، وب سایت شما همان طور که باید کار خود را انجام میدهد یا خیر. شما باید مداوم سایت را چک کرده و به دنبال دلیل برای مشکلاتی که ممکن است در سایت ایجاد شود باشید و سعی کنید آن را حل کنید. به تست UI برای تکمیل کار خود بسیار نیاز دارید.

• مهارت حل مسئله

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

در این مقاله راجع به front end  توضیحاتی داده شد. اگر شما به فکر این هستید که به عنوان یک برنامه نویس فرانت اند مشغول به کار شوید سعی کنید مهارت هایی که نام برده شد را در خود پرورش دهید تا بتوانید به خوبی کار خود را ارائه دهید.