در دنیای توسعه نرم افزار، آنچه ساخته می شود به دو دسته تقسیم می شود. اول تمام آنچه که توسط کاربر مشاهده می شود یعنی Front end (فرانت اند) و دوم فرآیندهایی که در پس زمینه Back End (بک اند) اتفاق می افتد.

 

فرانت اند
فرانت اند

آنچه که ما به عنوان بازدیدکنندگان یک وب سایت یا به عنوان کاربر نهایی یک برنامه تلفن همراه می بینیم و با آن تعامل داریم، فناوری فرانت اند (front-end) محسوب می شود. تمام فعالیت‌های پشت صحنه که داده‌ها و سرعت تحویل داده‌ها را ارائه می‌کنند، در فناوری بک اند (Back End)و DevOps قرار می‌گیرند.

 

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

 

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

 

مرور کلی بر کاری که یک توسعه دهنده Front End انجام می دهد

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

 

هر زمان که از یک وب سایت بازدید می کنید، هر چیزی را که می بینید، روی آن کلیک می کنید یا از آن استفاده می کنید، کار یک توسعه دهنده فرانت اند است.

 

وظایف متداول یک توسعه دهنده Front End

اگرچه در شرکت‌ها تفاوت‌هایی وجود دارد، به طور کلی می‌توانید انتظار داشته باشید که نقش توسعه‌دهنده فرانت اند شامل برخی یا همه موارد زیر باشد:

 

  • بهینه سازی تجربه کاربری
  • استفاده از HTML، جاوا اسکریپت و CSS برای زنده کردن مفاهیم
  • توسعه و حفظ رابط کاربری
  • پیاده سازی طراحی در وب سایت های موبایل
  • ایجاد ابزارهایی که تعامل سایت را بدون توجه به مرورگر بهبود می بخشد
  • مدیریت گردش کار نرم افزار
  • پیروی از بهترین شیوه های سئو
  • رفع اشکالات و تست قابلیت استفاده

 

در ادامه مطلب، به سه فناوری اصلی که باید به عنوان یک توسعه‌دهنده بدانید یا هنگام استخدام توسعه‌دهندگان فرانت‌اند درک کنید، خواهیم پرداخت.

 

فن‌آوری‌های فرانت اند در توسعه‌دهنده «Stack»

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

 

HTML، CSS و JavaScript با هم داربست زیرینی را ایجاد می کنند که توسط مرورگرهای وب برای نمایش صفحات وب که ما هر روز با آنها در تعامل هستیم، استفاده می شود. تمام کتابخانه‌های دیگر و مهندسی فرانت‌اند بر اساس این سه زبان اصلی ساخته شده‌اند، که باعث می‌شود آن‌ها مهارت‌های لازم برای هر توسعه‌دهنده فرانت‌ اند را داشته باشند.

 

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

 

HTML

HTML اولین لایه هر وب سایتی است و نسخه کد یک Wireframe را در یک صفحه وب ایجاد می کند. این وایرفریم ها برای استایل ها در CSS و همه زنگ ها و سوت ها در جاوا اسکریپت وجود دارند.

 

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

 

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

 

HTML
HTML

 

CSS

برگه های سبک آبشاری یا CSS چیزی است که به HTML ما جذابیت بصری می بخشد و کاربر را جذب می کند. به بیان ساده، شیوه نامه ها ارائه عناصر HTML را در یک صفحه دیکته می کنند.

 

CSS چیزی است که باعث می شود همه چیز مانند یک پس زمینه سفید با یک دسته از متون Times New Roman و لینک های آبی رنگ به نظر نرسد. آیا تا به حال سعی کرده اید وبسایتی را در یک روز بد بارگذاری کنید و چیزی جز یک صفحه سفید با لیست عظیمی از متون سیاه، چند لینک آبی و هیچ چیز دیگری مشاهده نکنید؟ در چنین شرایطی وبسایت بدون سبک بارگیری می شود. سبک ها چیزی هستند که طرح های زیبا را به یک سایت منتقل می کنند.

 

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

 

پیش پردازشگرهای CSS، استایل را از طریق «قابلیت استفاده» ادغام می کنند و به راحتی برای استفاده در وب سایت های بزرگ مقیاس می شوند. اکثر مهندسین فرانت‌اند در همه سطوح به دلیل قدرت و انعطاف‌پذیری آنها برای تطابق با همه سناریوها، از ساخت وب‌سایت‌های کوچک تک صفحه‌ای گرفته تا برنامه‌های کاربردی سازمانی مانند Groupon یا NBCUniversal، تجربه کار با پیش پردازنده‌ها را دارند.

 

 

جاوا اسکریپت (Java Script)

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

 

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

 

یکی از نمونه‌های جاوا اسکریپت در عمل کادرهایی است که روی صفحه نمایش شما ظاهر می‌شوند. به آخرین باری که اطلاعات خود را در یک فرم آنلاین وارد کردید فکر کنید و یک کادر تأیید ظاهر شد که از شما می‌خواهد «OK» یا «Cancel» را برای ادامه فشار دهید. این به دلیل جاوا اسکریپت امکان پذیر شد.

 

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

 

یک مثال عالی از جاوا اسکریپت در عمل OpenTable است. وقتی «ساعت 7 عصر یک میز دو نفره در  رستوران ایکس مشهد در تاریخ 25 شهریور می خواهی رزرو کنی لیستی از رستوران ها با میزهایی برای رزرو نشان داده می شود. می‌توانیم نقشه‌ای را با فهرستی در کنار آن ببینیم.

 

چگونه توسعه دهندگان از هر زبان برنامه نویسی استفاده می کنند

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

چگونه یک وبسایت شیک را جایگزین اینستاگرام برای کسب و کار کنیم و فروش بالایی داشته باشیم

 خواندن مقاله

 

زبان برنامه نویسی
زبان برنامه نویسی

 

کتابخانه ها و چارچوب ها

توسعه دهندگان فرانت اند نیز معمولاً از کتابخانه های ساخته شده بر روی این زبان های برنامه نویسی مانند AngularJS، jQuery و React استفاده می کنند. و چارچوب های طراحی از جمله Foundation و Bootstrap. پسوندهای CSS، مانند SASS، ماژولار و قدرت را بهبود می بخشند.

 

زبان های توسعه Front End اضافی

در حالی که این کمتر رایج است اما توسعه دهندگان فرانت اند ممکن است از Python، Ruby یا PHP نیز استفاده کنند تا به راحتی داده ها را با انتهای وب سایت خود متصل کنند.

 

ابزارهای رایج مورد استفاده در توسعه Front End

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

 

ابزار طراحی گرافیک

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

 

ابزار طراحی گرافیک
ابزار طراحی گرافیک

 

بسته به اندازه تیم و محدوده پروژه، فرآیند ممکن است به سادگی استفاده از یک مداد و کاغذ باشد، یا ممکن است به برنامه‌های ویرایش گرافیکی مانند Sketch یا Photoshop، ابزارهای نمونه‌سازی مانند Balsmiq Mockups یا ابزارهای ویرایش گرافیکی پیشرفته‌تر مانند Figma نیاز داشته باشد.

 

ابزارهای ویرایش کد

ابزار ویرایش کد به سادگی برنامه ای است که یک توسعه دهنده فرانت اند برای نوشتن کد برای وب سایت خود انتخاب می کند. برخی از توسعه دهندگان ترجیح می دهند از یک ویرایشگر سبک مانند Notepad استفاده کنند، در حالی که برخی دیگر از ویژگی های غنی تر مانند Visual Studio یا Eclipse استفاده می کنند.

 

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

 

در ادامه، برخی از مهارت‌های اضافی رایج‌تری را که این متخصصان در کار خود به آن‌ها تکیه می‌کنند برایتان شرح می دهیم همچنان همراهمان باشید.

 

استفاده از پیش پردازنده های CSS

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

 

استفاده از API ها و خدمات RESTful

 

 

یک توسعه‌دهنده فرانت‌اند نیز با APIها و سرویس‌های RESTful تعامل می‌کند و از آنها استفاده می‌کند. REST (Representational State Transfer) یک معماری سبک وزن است که ارتباطات شبکه را ساده تر می کند، در حالی که API ها و سرویس های RESTful از این معماری پیروی می کنند.

 

طراحی و ایجاد وبسایت های پاسخگوی موبایل

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

 

در حال توسعه در بین مرورگرها

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

 

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