از این میگم که front end چیه

سلام ، خیلی خوش اومدی . قبل از هر چیز بذا اینو بگم که :اگر تازه برنامه نویسی رو شروع کردی ، این مقاله رو دقیقا برای تو نوشتم تا خیلی سر راست جواب سوالات رو بدم ، اینکه بعد از خوندن این متن بفهمی فرانت اند چیه و چه پیش نیازایی داره ، هدف این مقاله است . اینکه بهم بازخورد بدی و بگی چطوری میتونم بهتر بنویسم و این مقاله رو با بقیه کسایی که فک میکنی بدردشون میخوره به اشتراکش بذاری خیلی قشنگه ^^اگر برنامه نویسی رو مدتی شروع کردی یا حرفه ای هستی ، این پست دانشی رو بهت اضافه نمیکنه اما ! کامل تر کردنش از طریق کامنتا و رسوندنش به دست کسایی که بدردشون میخوره کارای فوق العاده ارزشمندی هستن که میتونی باهاشون به کامیونیتیمون کمک کنی =))اصن فرانت کجاست ؟بیا قبلش بریم ببینیم که یه سایت یا یه اپ از چه قسمتایی درست شده . ببین خیلی کلی که بخوایم نگاه کنیم دوتا بخش وجود داره.یکی همون رابط کاربری رنگی پنگی و جذابیه که وقتی میری تو صفحه یه سایت مثل دیجیکالا می بینیش یا همون قسمتیه که وقتی رو ایکن اینستاگرام میزنی و میری تو اپ میبینی که بهش میگن فرانت . یه محیط پویاست و هدفش اینه که کاربرا بتونن به اسون ترین و لذت بخش ترین حالت ممکن از سایت یا اپ استفاده کنن . اما همه چیز انقدر رنگی و ساده نیست !اینکه وقتی یه پیامی رو توی تلگرام میفرستیم خیلی سریع میرسه دست دوستمون یا اینکه بعد از زدن دکمه جست جو ، گوگل تو کسری از ثانیه بهمون جواب میده نتیجه کلی پردازش و فرایندای پیچیده است که توی قسمت بک داره اتفاق میافته . قسمت بک درواقع یسری کد و برنامه بدون رابطه کاربری هستن که دارن رو یسری سرور دائما اجرا میشن و به قسمت فرانت سرویس میدن .اون چیزی که ما به عنوان کاربر هر روز توی سایتا و اپ ها باهاش مواجه میشیم قسمت فرانت و اون چیزی که داره محاسبات و انتقال و ذخیره سازی دیتا رو انجام میده قسمت بک هستحالا فرانت یه سایت دقیقا چیه ؟ببین فرانت هم مث بک یسری کدِ ، فقط تفاوتش توی زبون برنامه نویسی و جاییه که قرار اون کدا رو اجرا کنن . خب مرورگر ها مثل کروم و سافاری وظیفه شون اینه که کدایی که توسعه دهنده های فرانت میزنن رو اجرا کنن . عموما هم برخلاف بک که داره رو سرور اجرا میشه فرانت روی خود سیستم کاربر و تو مرورگرش داره اجرا میشه .مه یا دوده ؟از قشنگیای فرانت اگر بخوام برات بگمخوبیه فرانت اینه که تو کوچکترین کدی که بزنی میتونی در لحظه نتیجه بصریش رو ببینی . و این نتیجه بصری خیلی ادمو ذوق زده میکنه . برای خود من اینکه ببینم کم کم از صفر دارم یه پیکر بندی زیبا رو میسازم اونم از طریق کد زدن خیلی هیجان انگیزه . ینی هم تو میتونی از کد زدن لذت ببری و هم از خلق یه اثر هنری ^^ . یکی از جذابیت های دیگه اش اینه که انگاری کُدِت تو خط مقدمه ، ینی کاربر از یه سایت یا اپ فقط کد تو رو داره می بینه و هر روز داره با اون کار میکنه این هم جذابه هم هیجان انگیزاصن سختی داره ؟چیزی که کار توسعه دهنده های فرانت رو سخت میکنه اینه که مرورگرا عین هم نیستن :/ خیلی وقتا میشه که یه کدی رو ، کروم می تونه اجرا کنه ولی سافاری نه -_- . سختیه دیگه اش اینه که یه وب سایت رو هم ممکنه یه کاربر بخواد روی گوشیش ببینه هم روی لپ تاپ هم روی تلویزیون ، این ینی کلی صفحه با اندازه های جور وا جور ، توسعه دهنده باید جوری کد بزنه که فرانت سایت توی همه این صفحه ها تمیز و قشنگ نشون داده بشه .یه توسعه دهنده فرانت چیا باید بلد باشه ؟ایلان ماسک بنده خداببین یسری چیزا دونستنشون واجبه که اوناHtmlCssJsتو اینارو که بلد باشی میتونی رسما خیلی تمیز قسمت فرانت یه سایت رو بزنی اما خیلی اذیت میشی مخصوصا اگر بخوای سایت پیچیده ای رو درست کنی . اینجاست که میریم سراغ چیزایی که دونستنشون سطح کارت و قدرت پیاده سازیت رو خیلی بالا میبره اونا یسری فریمورک و کتابخونه هستنReact , vue , angular , …Bootstrap , foundation , vuetify , …و این لیست میتونه با دونستن اینکه مرورگر ها چطوری کار میکنن کامل تر بشه ولی تموم نمیشه !این مقاله شروع مجموعه مقالاتی که توشون میخوام بطور پیوسته برات از نقشه راه توسعه دهنده فرانت بگم . توشون میگم که مستقیم بری سراغ چه چیزایی ، سرفصلای مهم چیه و منابع خفن یادگیری توی وب و توی یوتیوب رو بهت معرفی میکنمفکر میکنم راه سخت و طولانی که خودم طی کردم اگر کسی بود که بهم راه رو نشون میداد اسون تر و کوتاه تر میشدحالا من اینجام که تو اسون تر و سریع تر تبدیل به توسعه دهنده خفنی بشی ^^اگر بنظرت چیزی رو جا انداختم یا پیشنهادی داری که باهاشو بتونم مقاله رو بهتر کنم با گفتنشون تو کامنتا لطف بزرگی بهم مکنی . اگر خوشت اومد و بنظرت مفید بود با لایک کردن بهم بگو که کلی ذوق میکنم =))رسوندن این مقاله به دست کسایی که فک میکنی بدردشون میخوره کار فوق العاده ارزشمندی که براشون انجام بدیفعلا ?