فرانت اند چیست ؟ | چرا باید بلد باشیم ؟؟

با عرض سلام و شب بخیر خدمت همه ی شما دوستان و علاقه مندان به برنامه نویسی 
شاید با خودتون بگید چرا در اول صحبت هام گفتم شب بخیر , چون اینجا شبِ :) 

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

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

شاید ندونید برنامه نویسی فرانت اند چیست؟ قبل از اینکه بریم سراغ معرفی زبان های برنامه نویسی فرانت اند ، باید ببینیم Front End  چیست؟Front End  مربوط به ظاهر وب سایت میشه. یعنی هر چیزی که برای ما قابل مشاهده هست از قبیل رنگ و فونت و باکس ها و اسلایدر ها و غیره هست و اگه بخوام با یک مثال توضیح بدم:

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

شما فقط ظاهر سایت رو میبینین حتی میتونین با inspect گرفتن (کلیک راست کنین و گزینه ی inspect رو انتخاب کنین یا از شورت کات  ctrl+shift=c و یا کلید F12 استفاده کنین) کد های مربوط به فرانت اند وب سایت مدنظرتون رو مشاهده کنین و ببینین که از چه تکنولوژی هایی استفاده شده اما چنین قابلیتی برای بک اند سایت که مربوط به پشت صحنه هست وجود نداره که البته بدیهی هست چون مربوط به اطلاعات و امنیت سایت میشه. پس قطعا شما نباید قادر به دسترسی به کد های اون قسمت داشته باشین . 

خب همه چیز توی دنیای ما یه تضاد و چیز هم سان داره پس همونطور که فرانت اند برای ظاهر وب سایت میشه پس باید یه برادر داشته باشه که مربوط به بخش پشت صحنه سایت بشه که اسمش Back End عه . 

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

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

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

"پس تا اینجا در جواب سوال فرانت اند چیست ؟ , باید بگیم فرانت اند مثل نقاشی ساختمان برای وب سایت است . " 

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

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

تفاوت بک اند Back-End و فرانت اند Front-End چیست؟

برای درک مفهوم فرانت اند و بک اند، ابتدا باید بدانید که دو عبارت فرانت اند Front-End و بک اند Back-End از نظر مفهومی با یکدیگر تضاد دارند و به دو معنی کاملا مختلف به کار می‌روند. به این ترتیب، کدنویسی بک اند به تمام بخش‌هایی اشاره دارد که کاربر نمی‌بیند و این بخش‌ها باعث تسهیل کارایی و سرعت وبسایت می‌شوند. برنامه‌نویسی چنین بخش‌هایی توسط بک اند دولوپر یا Back-End Developer انجام می‌شود. اگر بخواهیم یک مثال در ارتباط با این موضوع داشته باشیم، مورد دیتابیس گزینه خوبی است. دیتابیس بخشی است که وبسایت اطلاعات مورد نیاز خود را از آن می‌گیرد که نیاز به کدنویسی دارد. کاربرها و مخاطبان وب‌سایت‌ها این کدها و نحوه تعامل وبسایت و دیتابیس را نمی‌بینند.

بوت استریپ (Bootstrap) در برنامه نویسی فرانت اند

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

فرم ورک ها و کتابخانه های جاوا اسکریپت

یادگیری فریم ورک های جاوا اسکریپت به شما این امکان را میدهد که یک قدم مهم در حرفه ای تر شدن یک برنامه نویس فرانت اند حرفه ای بردارید.

شما با استفاده از این کتاب خانه ها و فریم ورک ها میتوانید یک ساختار منظم برای کد های خود ایجاد کنید که توسعه وب را برای شما سریع تر میکند.

انگولار : این فریم ورک برای توسعه وب اپلیکیشن ها میباشد که توسط کمپانی گوگل ارائه شده است.

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

Vue.js : این فریم ورک یکی از محبوب ترین های جاوا اسکریپت است که توسط یکی از برنامه نویس های شرکت گوگل ساخته شده است.

سلیقه و خلاقیت

در برنامه نویسی فرانت اند شما با رنگ ها و فونت ها و عکس ها سر و کار دارید. اگر سلیقه و خلاقیت بالایی داشته باشید میتوانید طرح های خیره کننده ای برای وب سایت های مختلف طراحی کنید.

همین فاکتور میتواند به شما کمک کند که از رقبای صنعت خودتان فاصله بگیرید.

مهارت های لازم برای فرانت اند

همونطور که گفتیم برنامه نویسی front end برای چیدن ویترین سایت شما استفاده میشه. برنامه نویسای فرانت اند باید تمام تلاششون را بکنن تا سایتی جذاب و در عین حال کاربردی بسازند. اما ببینیم وظایف برنامه نویس فرانت اند چیست؟

• بهینه سازی گرافیک و سرعت صفحات
• سازگاری برند و برندینگ در سراسر وب سایت
• تست‌های عملکرد از المان‌های هسته‌ای سایت
• توسعه‌ی سایت واکنشگرا
• ایجاد ابزارهایی برای تعامل با کاربران که با مرورگرهای مختلف سازگار باشه
• بهینه‌سازی موتور جستجو یا همون سئو

خب دوستان اینم از مقاله ی امروز امیدوارم که لذت کافی و برده باشید , سعی کردیم که این مقاله خیل طولانی نشه و بتونیم توی چندین پارت این موضوع مقاله رو یعنی " فرانت اند چیست  ؟" ادامه بدیم که بیشتر و تخصصی تر بتونیم به مراتب از اون بگیم 

پس تا مقاله ی بعدی 
خدانگهدار ...