برنامه نویسیطراحی سایتفرانت اند (Front-end)

فرانت اند (Front-end) چیست؟ | بررسی صفر تا صد فرانت اند

فرانت-اند
فرانت-اند چیست؟

سفری به اعماق فرانت اند

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

طراحی سایت از قسمت‌های مختلفی از جمله فرانت اند (Front-end)، بک اند (Back-end)، سرور، پایگاه داده و … تشکیل می‌شود. ما در این مقاله از پایه شروع می‌کنیم و ابتدا به این موضوع می‌پردازیم که فرانت اند چیست؟ و پس از شناخت آن به سراغ مفاهیم دیگر رفته و در نهایت به بررسی بازار کار متخصصین فرانت اند می‌پردازیم.

 

Front-end چیست؟

وقتی که شما وارد یک وبسایت یا برنامه می‌شوید، با ظاهر کلی و گرافیکی آن رو به رو می‌شوید که به این بخش قابل مشاهده Front-end یا Client-side نیز گفته می‌شود.  در این بخش دستورات برنامه نویسی و  کدهای پیچیده و طولانی که درک آن‌ها برای کاربران عادی دشوار است، به ظاهری جذاب و دلنشین تبدیل می‌شود و از این طریق به کاربران نمایش داده می‌شود. 

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

صداها، تصاویر، ویدیوها و فرم‌های ورودی اطلاعات و… که توسط کاربر با ظاهر گرافیکی خاصی دیده می‌شوند، جزئی از فرانت اند محسوب می‌شوند. نقطه‌ی مقابل فرانت اند، Back-end است. کارهای مربوط به کدنویسی که از دید کاربر خارج هستند و کاربر آن‌ها را مستقیما مشاهده نمی‌کند، مربوط به این بخش است. برای درک بهتر این مفاهیم به مثالی که در ادامه بیان می‌شود توجه کنید.

یک فیلم یا سریال تلوزیونی را در نظر بگیرید:

برای تهیه یک فیلم، نیاز به دو گروه داریم. گروه اول بازیگران و آن دسته از افرادی هستند که مستقیما روی صحنه اجرا می‌کنند؛ گروه دوم هم نویسنده، کارگردان و عوامل دیگری که در صحنه به صورت مستقیم حضور ندارند اما تاثیر کار آن ها در تهیه این فیلم تاثیرگذار است. با کمی دقت متوجه می‌شوید که بازیگران به عبارتی همان ظاهر سایت یا Front-end هستند و کارگردان و نویسنده و… که در پشت صحنه به کارها می‌پردازند همان Back-end می‌باشند.

مقایسه فرانت اند و بک اند
مقایسه فرانت اند و بک اند

حالا سراغ ادامه ماجرای فرانت اند می‌رویم. Front-end به دو بخش اصلی طراحی و توسعه رابط کاربری (UI) تقسیم می‌شود. بخش طراحی با استفاده از ابزار‌های گرافیکی همچون فوتوشاپ، فیگما و… و بخش توسعه رابط کاربری هم با پیاده سازی ظاهر سایت در قالب کدهای HTML و جاوا اسکریپت و سی اس اس انجام می‌شود.

 

اهمیت برنامه نویسی فرانت اند

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

برای اینکه تمامی این کاربران بدون مشکل بتوانند سایت شما را ببینند باید با مفهومی تحت عنوان واکنش‌گرا آشنا باشید. واکنش‌گرا (Responsive) به این معنی است که سایت شما به دستگاه‌های مختلف با ابعاد متفاوت واکنش مناسب نشان دهد. در گذشته برای طراحی سایت‌ها دو مدل کد نویسی انجام می‌شد یکی Desktop Mode و دیگری Mobile Mode. اما جدیدا توسط سیستم‌های پیشرفته مانند بوت استرپ می‌توان به راحتی سایت را واکنش گرا به ابعاد مختلف ساخت و دیگر مشکلی در نمایش سایت در ابعاد مختلف نخواهیم داشت.

 

به چه کسی توسعه دهنده فرانت اند (Front end developer) می‌گویند؟

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

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

فریمورک های فرانت اند و بک اند
فریمورک های فرانت اند و بک اند
یکی از چالش‌های توسعه Front-end، پیشرفت سریع و اضافه شدن تکنولوژی‌های به روز در این زمینه است. به طوری که توسعه‌دهندگان باید از به روزترین تکنولوژی‌ها آگاه باشد. در همین راستا مجله آموزشی ویتکس همیشه به روزترین تکنولوژی‌ها را بررسی می‌کند.

 

HTML چیست؟

واژه HTML مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کلیه کدهای صفحه اعم از طرف سرور و طرف کاربر در نهایت به کدهای HTML تبدیل میشود و توسط مرورگر نمایش داده می شوند.

 به صورت مختصر و مفید باید بگوییم که html حکم استخوان بندی یک وبسایت را دارد.  به عنوان مثال اگر به یک ساختمان و قسمت های مختلف آن توجه کنید، ملاحظه می‌کنید که ستون های ساختمان مهمترین بخش آن هستند. این ستون ها حکم همان HTML در یک وبسایت را دارند اما…! (ادامه دارد در بخش بعدی)

مرورگر ها هیچکدام از کدها و کنترل‌های سمت سرور همچون کدهای asp را نمی‌شناسند و کد قابل فهم برای آن‌ها اچ تی ام ال می باشد. در واقع در html می‌توان توسط تگ های مختلف، متن، عکس، فیلم و المان های مختلفی را در صفحه گذاشت. فایل html، یک پروندهٔ متنی است که معمولاً با پسوند htm یا html نام‌گذاری میشود و محتویات آن از تگ های html تشکیل می‌شود. مرورگرهای وب، که میتوانند تگ های html را درک کنند، تک‌تک آن‌ها را از داخل فایل اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

 

جادوگری به نام CSS

همان ساختمانی که در نظر دارید، بدون نما و بدون رنگ، اصلا به دل نمی‌نشیند و فقط مثل چند قطعه آهن ایستاده می‌باشد. در دنیای طراحی سایت، سی اس اس، حکم همان نما و ظاهر را دارد. پس در جواب CSS چیست؟ باید بگوییم که واژه CSS مخفف Cascading Style Sheets می‌باشد که در کنار HTML برای طراحی صفخات وب استفاده می‌شود. در واقع CSS زبانی است که توسط آن قادر خواهید بود تا ظاهر و استایل طراحی صفحات وب سایت‌تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید.

در واقع CSS به شما قدرت کنترل رنگ ها و استایل های موجود در سایت را می‌دهد. شما می‌توانید حتی انیمیشن‌های بسیار زیبایی به کمک آن بسازید؛ و در نهایت ظاهر جذاب و دلنشیتی برای وب سایت و اپلیکیشن مورد نظرتان فراهم کنید.

 

JavaScript چیست؟

حالا فرض کنید که سایت ما دارای استخوان بندی و ظاهری بسیار دلنشین باشد؛ اما هیچ تحرکی نداشته باشد و یا هیچ عملیاتی انجام ندهد. آیا این سایت کامل است؟ آیا ما نیاز نداریم که عملیاتی توسط سایت انجام داده شود؟ راهکار چیست؟

نگران نباشید در چنین موقعیتی JS یه کمک شما می‌آید.

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

 

مرورگر چیست؟

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

انواع مرورگرها
انواع مرورگرها

گوگل کروم (Google Chrome)، موزیلا فایرفاکس (Mozilla Firefox)، Microsoft Edge و Safari چند نمونه از معروف‌ترین و پرکاربردترین مرورگرهای وب هستند.

 

مرورگر وب بدون واسط گرافیکی کاربر(Headless Browsers)

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

 

چرا باید به یک توسعه دهنده فرانت اند تبدیل شویم؟

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

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

 

چگونه به دولوپر فرانت اند تبدیل شویم؟

تا اینجا دانستیم که فرانت اند چیست و به چه کسی توسعه دهنده‌ی Front-end می‌گویند. حالا می‌خواهیم  بدانیم برای تبدیل شدن به یک متخصص فرانت اند باید به یادگیری چه مهارت هایی بپردازیم تا در این حوزه حرفی برای گفتن داشته باشیم. در ادامه با برخی ویژگی‌ها و مهارت‌هایی که یک دولوپر Front-end باید دارا باشد آشنا خواهیم شد.

تبدیل شدن به فرانت اند دولوپر
تبدیل شدن به فرانت اند دولوپر
  • آشنایی با زبان‌های برنامه نویسی مانند:HTML ،CSS و جاوا اسکریپت
  • آشنایی با فریم ورک‌ها و کتابخانه‌های فرانت اند
  • آشنایی با اصول طراحی واکنش گرا (Responsive Web Design)
  • آشنایی با برخی نرم افزار‌های گرافیکی مانند فوتوشاپ یا Adobe XD و…
  • آشنایی با اصول UI و UX
  • آشنایی با اصول سئو
  • تست و ازمون خطا و …

 

کاربردی ترین و محبوب ترین تکنولوژی های فرانت اند

تا اینجا توانستیم قسمت‌های مختلف فرانت اند را بررسی کنیم. حالا نوبت معرفی برخی از مهم‌ترین و محبوب‌ترین تکنولوژی‌های فرانت اند رسیده است.

۴ تا از بهترین تکنولوژی های فرانت اند
۴ تا از بهترین تکنولوژی های فرانت اند
  • جی کوئری (jQuery)
  • انگولار (AngularJS)
  • ویو (VueJS)
  • ری اکت (ReactJS)

 

جی کوئری (jQuery) چیست؟

جی کوئری یکی از کتابخانه‌های قدرتمند جاوا اسکریپت است که مانند جاوا اسکریپت وظیفه‌ی عملیاتی کردن سایت را بر عهده دارد. اگر بخواهیم به صورت خلاصه jQuery را تعریف کنیم:

  • یک کتابحانه رایگان جاوا اسکریپت می‌باشد.
  • توسط آن میتوان اسکریپت‌های قدرتمندی را فقط در چند خط نوشت.
  • با آن می‌توان جهت ساخت افکت‌های زیبای ظاهری و اجرای دستورات AJAX اقدام کرد.

 

انگولار (AngularJS) چیست؟

یکی دیگر از کتابخانه‌های جاوا اسکریپت انگولار می‌باشد که از سیستم کنترل داده CRUD پیروی می‌کند. AngularJS یک کتابخانه‌ی ساختاری برای وب اپلیکیشن‌های پویا است.

این کتابخانه به شما اجازه می‌دهد تا HTML را به عنوان زبان قالب خود انتخاب کنید Data binding و dependency injection انگولار، بیشتر کدهایی را که شما مجبور به نوشتن آن هستید را از بین می برد. همه ی این کارها در مرورگر انجام می‌شود و این باعث شده است که با همه تکنولوژی‌های سروری سازگاری خوبی داشته باشد.

 

ویو (VueJS) چیست؟

Vue.JS  یکی از فریم ورک‌های محبوب جاوا اسکریپتی در حوزه توسعه رابطه کاربری یا UI است. از این فریم ورک برای ساخت اپلیکیشن‌های تک صفحه ای هم استفاده می‌شود. ویو در سال ۲۰۱۴ به عنوان یک فریم ورک متن باز متولد شد. الگوی طراحی به کار رفته شده در این فریم ورک به صورت MVVM یا Model-View-ViewModel است.

از ویژگی های VueJS می‌توان به موارد زیر اشاره کرد:

  • درواقع این فریمورک ترکیبی از بهترین ویژگی‌های React JS و AngularJS می‌باشد و این موضوع باعث محبوبیت این فریمورک شده است.
  • یادگیری این فرمورک بسیار آسان و سریع است و به راحتی می‌توان طی زمان کوتاهی به ساخت اپلیکیشن‌های وب پرداخت.
  • حجم بسیار پایین داده‌های خروجی توسط این فریمورک باعث سرعت بالای لود سایت‌های نوشته شده می‌باشد.

 

ری اکت (ReactJS) چیست؟

از نظر شخص بنده، React JS جذاب‌ترین و بهترین کتابخانه و فریمورک طراحی فرانت اند می‌باشد. این کتابخانه در ابتدا توسط فردی در کمپانی فیسبوک ساخته شد و در سال ۲۰۱۳ به صورت متن باز عرضه شد و تا کنون سایت‌ها و اپلیکیشن‌های بسیاری از جمله Instagram توسط این کتابخانه طراحی شده است.

سرعت یادگیری و بهره برداری ری اکت و سرعت اجرای سایت‌های طراحی شده توسط React JS بسیار بالا می‌باشد. یکی از مهم‌ترین نکاتی که باعث جذابیت این کتابخانه شده است امکان کدنویسی برای تمام دیوایس‌ها از جمله اندروید و آیفون می‌باشد.

 

بازار کار متخصصین فرانت اند

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

بازار کار متخصصین فرانت اند
بازار کار متخصصین فرانت اند

اکنون به معرفی برخی موقعیت‌های شغلی پرطرفدار در حوزه فرانت اند می‌پردازیم:

  • برنامه نویس فرانت اند
  • برنامه نویس HTML و CSS
  • طراح UI و UX
  • توسعه دهنده فرانت اند موبایل و تبلت
  • کارشناس سئو فرانت اند
  • برنامه نویس جاوا اسکریپت
  • کارشناس تست نرم افزار و…

 

جمع بندی و سخن نهایی

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

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

درباره نویسنده

امیرمحمد مروی فرد

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا