برای اینکه توسعه دهنده Front End (رابط کاربری) باشید چه مواردی را باید بدانید؟

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

 توسعه Front End چیست؟

با اینکه طراحی سایت نحوه نشان دادن سایت و ظاهر آن است، توسعه Front End نشان می دهد این طراحی چگونه بر روی وب اجرا می شود.

 توسعه دهنده Front End (رابط کاربری) چه کسی است؟

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

توسعه دهنده Front End از چه مهارت هایی استفاده می کند؟

توسعه دهنده Front End از سه زبان برنامه نویسی اصلی برای کدنویسی سایت و طراحی اپلیکیشن های موبایلی بهره می برد:

• HTML
• CSS
• جاوا اسکریپت

کدی که او می نویسد داخل مرورگر کاربر اجرا می شود. اجازه دهید این موضوع را به گونه دیگری بیان کنیم. توسعه دهنده بک اند همانند مهندسی است که سیستم هایی را طراحی و اجرا می کند که کار یک شهر را راه می اندازد( برق، آب و سایر موارد). این در حالیست که توسعه دهنده Front End فردی است که خیابان ها را طرح بندی می کند و مطمئن می شود همه چیز به درستی به هم وصل شده و افراد می توانند در شهر طراحی شده زندگی راحتی داشته باشند. توسعه دهنده Front End مسئول این است که مطمئن شود هیچ خطا یا باگی بر روی Front End وجود ندارد و اطمینان حاصل کند طراحی در پلتفرم ها و مرورگرهای مختلف همانگونه که باید، نمایش داده می شود. با بررسی موقعیت های  شغلی مختلف برای توسعه دهندگان Front End تلاش کردیم مهارت هایی که این فرد باید داشته باشد را شناسایی کنیم. این ها مواردی هستند که کارفرمایان واقعی برای شغل های این چنینی به دنبالش هستند. اگر بتوانید بر روی مهارت هایی که در ادامه بیان خواهیم کرد تسلط کافی پیدا کنید قطعا قادر خواهید بود از شغل توسعه دهنده Front End لذت ببرید.

 زبان برنامه نویسی HTML & CSS:

همانطور که می دانید HTML & CSS جزو  اصلی ترین بلوک های سازنده برنامه نویسی وب هستند. بدون این دو مورد شما نمی توانید سایتی را طراحی کنید و در نهایت با متن ساده فرمت بندی نشده بر روی صفحه نمایش روبرو خواهید شد. حتی نمی توانید بدون HTML، تصویری را به صفحه اضافه کنید.

قبل از اینکه بخواهید وارد مسیر شغلی توسعه وب شوید باید بر روی زبان های HTML & CSS تسلط کافی داشته باشید. خوشبختانه کسب مهارت در این زمینه بسیار ساده است و در عرض چند هفته می توان به چنین تسلطی دست پیدا کرد.  همین دو مهارت ساده به تنهایی به شما اجازه می دهد یک سایت ساده بسازید.

 جاوا اسکریپت:

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

 جی کوئری:

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

 فریم ورک های جاوا اسکریپت:

فریم ورک های جاوا اسکریپت( دربرگیرنده AngularJS, Backbone, Ember و ReactJS) ساختار آماده ای را به کدهای جاوا اسکریپت شما می دهد. انواع مختلفی از فریم ورک های جاوا اسکریپت برای نیازهای مختلف وجود دارد هرچند چهار موردی که در بالا بدان اشاره کردیم جزو محبوب ترین ها هستند. این فریم ورک ها واقعا توسعه وب را تسریع می کنند و می توان از آن ها به همراه کتابخانه هایی همچون جی کوئری استفاده کرد تا فرآیند برنامه نویسی را کوتاه تر کرد.

فریم ورک های Front End:

CSS و فریم ورک های Front End همان کاری را برای CSS  انجام می دهند که فریم ورک جاوا اسکریپت برای جاوا اسکریپت انجام می دهند. این ها به تسریع برنامه نویسی کمک می کنند. از آنجایی که در بیشتر موارد CSS در پروژه های مختلف با عناصر یکسانی آغاز می شود یک فریم ورک که همه این ها را برای شما تعریف می کند می تواند بسیار ارزشمند باشد.

در بیشتر موارد افرادی که شغل توسعه دهندگی Front End را قبول می کنند باید با نحوه کار با این فریم ورک ها اشنا باشند و بدانند چگونه باید از آن ها استفاده کنند.

 تجربه کار با پیش پردازهای CSS:

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

تجربه کار با سرویس ها و API های RESTful:

واژه RESTful برای توصیف معماری سبک وزنی به کار می رود که ارتباطات شبکه بر روی وب را ساده تر می سازد. سرویس ها و API های RESTful سرویس های وبی هستند که از معماری REST استفاده می کنند و به آن پایبندند. فرض کنید می خواهید اپلیکیشنی بنویسید که همه دوستان رسانه های اجتماعی را به ترتیب دوست شدن نشان تان دهد. برای اینکار می توانید از API های RESTful فیس بوک استفاده کنید تا فهرست دوستان تان را بخوانید و داده ها را بازگردانید.

همین موضوع برای توییتر هم صادق است. فرآیند موجود برای هر سرویسی که از API های RESTful استفاده می کند یکسان است فقط داده هایی که بازگردانده خواهد شد متفاوت است. اگرچه این موضوع به نظر پیچیده و فنی می رسد اما مجموعه ساده ای از قوانین و تمرینات است که به شما کمک می کند نحوه برقراری ارتباط با سرویس های وب را بدانید. این موضوع باعث می شود وب سرویس ها عملکرد بهتری داشته باشند، بهتر مقیاس بندی شوند، قابل اعتمادتر باشند و اصلاح و حرکت دادنشان آسان تر باشد.

 طراحی موبایل و ریسپانسیو:

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

طراحی موبایل می تواند در برگیرنده طراحی ریسپانسیو باشد اما می توان طراحی جداگانه ای برای آن هم در نظر گرفت.

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

 توسعه بین مرورگری:

مرورگرهای مدرن در نمایش ثابت سایت ها کارکرد خوبی دارند اما هنوز هم خیلی از این ها در نحوه تفسیر کدهایی که پشت صحنه اجرا می شود تفاوت هایی با هم دارند. یکپارچه سازی همه مرورگرها با هم و دانستن اینکه هر کدام از آن ها چگونه کار می کنند مهارت بسیار مهمی است. این موضوع همان چیزی است که به آن توسعه بین مرورگری می گوییم.

 سیستم های مدیریت محتوا و پلتفرم های فروش آنلاین:

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

تقریبا ۶۰ درصد از سایت هایی که از CMS استفاده می کنند از وردپرس بهره می برند.

سایر CMS های محبوب در برگیرنده جوملا، دروپال و مگنتو است.

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

 تست و عیب یابی:

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

شما می توانید تست هایی را برای مواردی همچون HTML خاص بنویسید. مثلا مطمئن شوید که اگر کاربر پر کردن یکی از فیلدهای فرم را فراموش کرد جعبه هشدار برایش ظاهر می شود. عیب یابی هم به معنای یافتن باگ هایی است که در فرآیند تست شناسایی شده یا کاربر بعد از اجرای سایت آن را می یابد. در این فرآیند باید بدانید چرا چنین باگ هایی رخ داده و چگونه می توان مشکل را حل کرد. شرکت های مختلف از فرآیندهای متفاوتی برای اینکار استفاده می کنند اما اگر شما به یک فرآیند عادت کرده اید می توانید از آن استفاده کنید.

 سیستم کنترل نسخه و Git:

سیستم کنترل نسخه به شما اجازه می دهد تغییراتی که در طول زمان بر روی برنامه نویسی رخ داده را پیگیری کنید. این ها بازگشت به نسخه های قدیمی را برایتان ساده تر می سازند. فرض کنید می خواهید افزونه سفارشی سازی شده جی کوئری را به سیستم تان اضافه کنید. ناگهان نیمی از کدها دچار مشکل می شود. به جای اینکه همه چیز را به صورت دستی برطرف کنید می توانید به نسخه قبلی بازگردید و راه حل دیگری را امتحان کنید. Git یکی از محبوب ترین و پرکاربردترین گزینه از سیستم های کنترل نسخه محسوب می شود. نحوه استفاده از Git برای افردی که قصد دارند وارد مسیر توسعه دهندگی وب شوند ضروری است.

مهارت حل مشکل:

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

 گام بعدی:

اگر شغل توسعه دهندگی Front End برای شما جذاب است می توانید به کمک دوره های آنلاین و آفلاین وارد این مسیر شوید و کارتان را آغاز کنید.