تابحال به این موضوع فکر کرده اید که هریک از هزاران صفحات اینترنتی که روزانه با آنها سروکار داریم از چه بخش هایی تشکیل شده است؟هریک ازین صفحات به دو بخش کلی تقسیم میشود:
در این مقاله قصد داریم به تعریف مفهوم فرانت اند و بررسی اجزا و زبان های تشکیل دهنده آن بپردازیم:
همانطور که از مفهوم کلمه front پیداست به معنی جلو , جبهه و نما میباشد این به این مفهوم که هرآنچه که در یک صفحه اینترنتی در برابر ماست و ما آنرا میبینیم شامل تمامی جداول عکس ها و حتی همین مقاله که شما در حال مطالعه هستید همگی تکه ای از مفهوم فرانت اند هستند .
در ادامه به پاسخ سوال فرانت اند چیست؟ بهتر است مقایسه ای بین فرانت اند و بک اند داشته باشیم .
در نقطه روبروی مفهوم فرانت اند،مفهوم بک اند back-end رو داریم که شامل هر آنچیزی از وبسایت که در مقابل چشم های کاربر نیست و مربوط به پشت صحنه وبسایت هست.
یک مثال ساده:یک اتومبیل رو در نظر بگیرید هرچیزی که راننده با آن تعامل دارد مثل صندلی ها،فرمان ،داشبرد،پدال های گاز و کلاچ همگی تعریفی ساده از مفهوم front-end میباشند و در مقابل هر آنچیزی که باعث عملکرد سیستم و حرکت اتومبیل هستند مثل سیستم موتور و یا گیربکس مثالی برای مفهوم back-end میباشند.
در ادامه میپردازیم به زبان های برنامه نویسی که همگی باهم ساختار فرانت اند یک صفحه وبسایت رو تشکیل میدهند:
دقت کنید که css و javascript باختصار js هرکدام شامل فریمورک و کتابخانه های متفاوتی هستتد.
در ادامه به چند مورد میپردازیم:
میتوانیم بگوییم که ساختار اصلی یک وبسایت با زبان html نوشته میشود اگر بخواهیم با بدن یک انسان مقایسه کنیم بمانند اسکلت و استخوان بندی بدن مثال زد .
شامل استایل ها ،طرح ها و رنگ های هریک از عناصری که ما در یک صفحه وب با آن مواجه هستیم.
جاوااسکریپت را میتوان مغز متفکر فرانت اند یک صفحه وب دانست که تمامی این محاسبات بر روی مرورگر انجام میشود،در مثال بدن انسان میتوان جاوااسکریپت را مغز آدمی تشبیه کرد.
شباهت java و javascript رو میتوان مثل شباهت car و carpet دانست!
سی اس اس و جاوااسکریپت نیز هرکدام از فریمورک ها و کتابخانه های مختلفی تشکیل شده اند که معروف ترین آن برای css میتوان bootstarp و tailwind را نام برد و برای جاوااسکریپت به react ، vue و angular اشاره کرد، وظیفه این کتابخانه ها این است که در زمان صرفه جویی شود و کار را راحتتر میکنند.
