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

بهتر است پیش از پرداختن به تعریف front-end کمی درباره ی وب سایت ها صحبت کنیم . وب سایت صفحه یا مجموعه ای از صفحات مرتبط با هم است که معمولا حاوی مطالب ،لینک ها ، فایل های تصویری ، صوتی و غیره است که امروزه نقش بسیار مهمی در زندگی ما ایفا می کنند . تفاوت back-end و front-endیک وب سایت را از نظر ساختار و اجزا سازنده میتوان به دو بخش کلی تقسیم کرد : Front-end و Back-end این دو جزء هر دو برای تولید یک وب سایت مهم و حیاتی هستند اما تفاوت چشم گیری با یکدیگر دارند. یک وب سایت برای نمایش و عملکرد صحیح به تعامل درست هر دو جزء نیاز دارد .اگر وب سایت را به یک انسان تشبیه کنیم اجزا داخلی بدن انسان عملکردی مانند بخش Back-end و صورت و ظاهر انسان عملکردی مانند Front-end دارد.تفاوت back-end و front-endتوسعه ی بک اند (Backend Development)بک اند سایت که به آن server-side هم گفته میشود در حقیقت شامل داده ها و کد هایی است که برای ما قابل مشاهده نیست . در واقع کد هایی که سمت بک اند اجرا میشوند داده های سایت را پردازش ، ذخیره و مرتب میکنند. کاربران سایت به طور مستقیم با بک اند سایت تعاملی ندارند و وقتی در سایت عملیاتی انجام میدهند یا درخواستی ارسال میکنند این درخواست به سمت بک اند سایت منتقل میشوند و نتیجه حاصل درخواست به صورت front سایت برای کاربر نمایش داده میشود. توسعه ی فرانت اند (Front End Development)در این قسمت از مطلب به موضوع اصلی میپردازیم. front-end به بخشی از وب سایت گفته میشود که کاربر به طور مستقیم با آن تعامل دارد هم چنین به آن client-side هم گفته میشود. این بخش شامل همه چیز هایی است که کاربر با چشم میبیند و با آن ها تعامل برقرار میکند. مانند جداول ، فرم ها ،نمودار ها و غیره ...زبان ها و تکنولوژی های اصلی که سمت فرانت سایت با آن ها ساخته و توسعه داده میشود شامل HTML ، Css و Javascript هستند که هر کدام وظیفه خاص خود در ساخت ظاهر وب سایت را به عهده دارند .تفاوت Html ، css و javascriptزبان نشانه گذاری ابر متن (HTML)این تکنولوژی زبان برنامه نویسی محسوب نمی شود . HTML مخفف کلمات Hyper Text Markup Language است به معنی زبان نشانه گذاری ابر متن ، در واقع این زبان متن ها و اشکال موجود در یک صفحه وب را ساختار و معنا می بخشد. این زبان از ساختار هایی به نام تگ ساخته شده است که هر تگ معنا و مفهوم مشخصی دارد و مرورگر که وظیفه پردازش کد های فرانت اند و نمایش آن ها را دارد بر اساس این تگ ها تصمیم میگیرد که محتوا را چگونه نمایش دهد . اگر فرانت یک وب سایت را به یک اتومبیل تشبیه کنیم HTML بدنه ی خام ماشین است . تگ ها ی html برگه های استایل دهی آبشاری (css)این زبان هم مانند زبان HTML از نوع زبان های برنامه نویسی محسوب نمی شود . css مخفف Cascading Style Sheets است و یکی از تکنولوژی های اصلی برای ساخت و طراحی صفحات و اپلیکیشن های وب است . این زبان نحوه ی نمایش محتوای سایت را توصیف می کند . همان طور که گفته شد HTML ساختار یک صفحه وب را تشکیل میدهد و به کمک css با اعمال رنگ ها ، فونت ها ، تنظیم فاصله ی بین عناصر ساختار صفحه وب را زیبا میکنیم . در واقع صفحات وب بدون css خشک و ساده هستند . اگر وب سایت را یک اتومبیل در نظر بگیریم css ظاهر ماشین مانند رنگ و فرم ماشین را شامل می شود . تفاوت html و cssجاوا اسکریپت (Javascript)قبل از پیدایش زبان جاوا اسکریپت صفحات وب فقط شامل html و css بودند و کاملا خشک بودند و هیچ گونه تعاملی با کاربر نداشتند . جاوا اسکریپت این امکان را به ما میدهد که محتوای وب سایتمان را بر اساس رفتار و عملکرد کاربر تغییر دهیم و به رفتار های کاربر واکنش نشان دهیم . جاوا اسکریپت به ما کمک می کند موارد پیچیده ای را در وب سایت خود پیاده کنیم . برای مثال نقشه های تعاملی ، سنجش اطلاعات و اعتبار سنجی فرم ها ، انیمیشن های دو بعدی و سه بعدی و بسیاری موارد دیگر ....امیدوارم مطالب برای شما مفید بوده و درک درستی از واژه ی فرانت اند پیدا کرده باشید . با آرزوی موفقیت .