ما در این مقاله به اینکه برنامه نویسی فرانت اند چیست ؟ ، زبان های برنامه نویسی فرانت اند، فریم ورک های فرانت اند ، تفاوت آن با بک اند و مسیر یادگیری فرانت اند می پردازیم . با کیهان وب در این مقاله همراه باشید تا به بررسی این موضوعات بپردازیم .
Front end چیست ؟
فرانت اند یا ( Front end ) به قسمت قابل مشاهده و تعامل یک وب سایت یا اپلیکیشن توسط کابران گفته می شود و به دو بخش طراحی و توسعه رابط کاربری دسته بندی می شود . در بخش طراحی که همان گرافیک سایت ، رنگ ها ، ظاهر دکمه ها ، فونت و … هستند که طر احان با ابزار هایی مانند فیگما ، ادوبی xd ، فتوشاپ و … این بخش ها را طراحی می کنند .
بخش مهم آن یعنی توسعه رابط کاربری ، پیاده سازی و کد نویسی ظاهر سایت با استفاده از 3 زبان اصلی HTML , CSS و جاوااسکرپیت است . البته برای توسعه سایت علاوه بر این 3 زبان اصلی باید از فریم ورک ها و ابزار های آن ها برای توسعه بهتر ، پرفورمنس بالاتر و کارایی و اجرای دقیق سایت استفاده کرد . از طرفی دیگر فرانت اند با بک اند (backend) مستقیم در ارتباط هستن و بر تجربه و تعامل کاربران در استفاده از سایت تاثیر به سزایی میگذارند .
انواع زبان های برنامه نویسی فرانت اند
برای طراحی سایت و کدنویسی در حوزه فرانت اند زبان های زیادی برای انجام این کار وجود دارد . اما سه زبان اصلی که لازمه هر برنامه نویس فرانت هستند ، HTML ، CSS و جاوااسکریپت می باشد . هر یک از این زبان ها در نسخه های جدیدی نیز ارائه شده اند . برای مثال تایپ اسکریپت ، زبان آپدیت شده و بهبود یافته از جاوااسکریپت است که در زمان کدنویسی با فریم ورک هایی مانند React یا Vue از آن استفاده می شود .
توسعه دهندگان و برنامه نویسان فرانت اند از HTML برای محتوای کلی سایت و چیدمان ساختاری ، از CSS برای استایل دهی و قالب بندی و از جاوااسکریپت برای کمک به پویانمایی صفحاتی که با HTML ، CSS ساخته شده است ، پیاده سازی ویژگی های خاص ، نمایش اطلاعات از سرور و جان بخشی صفحات و بخش ها استفاده می کنند .
زبان HTML
HTML مخفف Hyper Text Markup Language ، یک زبان نشانه گذاری است برای پیاده سازی محتوای سایت و چیدمان سختاری آن است . برای مثال با کنار هم قرار دادن عناوین ، پاراگراف ها ، لیست ، عکس ها ، دکمه ها و … چارچوب و بدنه اصلی سایت را ایجاد میکند .
دقت داشته باشید که HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری یا Markup Language به شمار می آید .
HTML (HyperText Markup Language) یک زبان برنامه‌نویسی است که برای ساخت صفحات وب به کار می‌رود. HTML یک زبان متنی است که توسط مرورگرها قابل خواندن است و شامل تگ‌های مختلف است که می‌تواند شکل و محتوای یک صفحه وب را تعریف کند.
هر صفحه وب حاوی دو بخش اصلی است: بخش محتوا و بخش تعریف ساختار صفحه. بخش محتوا شامل متن، تصاویر، ویدئو و عناصر دیگر است که کاربران در صفحه می‌بینند. بخش تعریف ساختار صفحه شامل تگ‌های HTML است که قوانین و قواعدی را جهت نمایش صفحه برای مرورگر تعیین میکند.
تگ‌ها در HTML بین علامت‌های <> قرار می‌گیرند و می‌توانند توسط ویژگی‌ها بهبود یابند.
برخی از تگ‌های رایج در HTML
– <html>: این تگ نشان می‌دهد که شروع یک صفحه HTML است.
– <head>: این تگ برای توسعه‌دهندگان وب است و شامل اطلاعات شخصی، عنوان صفحه، استایل‌ها و اسکریپت‌ها است.
– <body>: این تگ برای پیکربندی قسمت اصلی محتوای صفحه وب است. همه عناصر دیداری در داخل این تگ قرار می‌گیرند.
– <h1>: این تگ عنوان اصلی صفحه است. برچسب‌های h1 تا h6 برای عناوین به ترتیب اهمیت استفاده می‌شوند.
– <p>: این تگ برای نمایش پاراگراف‌های متنی استفاده می‌شود.
– <img>: این تگ برای نمایش تصاویر استفاده می‌شود. اطلاعات تصویر مانند مسیر فایل تصویر و ابعاد آن در این تگ قرار می‌گیرد.
HTML قدرتمندتر شده است و بهبود‌هایی را در طول سال‌ها تجربه کرده است. تاکنون، HTML5 آخرین نسخه از HTML است که برخی ویژگی‌هایی مانند تگ‌های ویدئو و صوت، تگ‌های هدر و فوتر، تنظیمات دیزاین، فرم‌های پیشرفته و بسیاری از امکانات دیگر را به ما ارائه می‌دهد.
HTML یک زبان بسیار مهم برای همه توسعه‌دهندگان وب می‌باشد و با آشنایی با آن می‌توان صفحات وب زیبا و قابل دسترس بسازیم.
زبانcss
CSS یا Cascading Style Sheets (برگه‌های سبک پی‌در‌پی) یک زبان برنامه‌نویسی وب است که برای توصیف شکل و نمای ظاهری یک سند HTML به کار می‌رود. CSS اجازه می‌دهد تا ویژگی‌های گرافیکی و ظاهری مانند رنگ، فونت، حاشیه، اندازه و موقعیت المان‌ها در سند HTML تعیین شوند.
کاربرد CSS در طراحی وب وبسایت‌ها و سندهای HTML بسیار مهم و اساسی است. با استفاده از CSS می‌توان طرح بندی صفحه، چیدمان المان‌ها، جداول استایل‌دار، افکت‌های ترنزیشن و تبدیلات، طرح‌های ریسپانسیو و بسیاری از امکانات ظاهری دیگر را در وبسایت ایجاد کرد.
از طرفی، CSS کارآمدی و قابلیت استفاده بالایی دارد. با استفاده از CSS نیازی نیست که از تگ‌های فرمت‌بندیگر HTML برای اعمال استایل به سند استفاده شود. این به برنامه‌نویسان اجازه می‌دهد که طرح بندی و ظاهری متمایز را از کدهای HTML جدا کنند و کدهای ساده‌تری برای ساخت و تغییر سندها داشته باشند. باعث می‌شود که طراحی و توسعه‌ی وبسایت‌ها به صورت کلی آسان‌تر، بهینه‌تر و قابل تغییر باشد.
از طرف دیگر، CSS دارای ویژگی‌های پیشرفته‌ای است که امکانات فراتر از ظاهری مانند قواعد ریاضی، انیمیشن، ترکیبات سلکتورها، قابلیت‌های رنگ‌بندی پیشرفته و … را فراهم میکند. این ویژگی‌ها به برنامه‌نویسان اجازه می‌دهد تا طرحی خلاقانه و منحصر به فرد برای وبسایت‌ها خلق کنند و تجربه کاربری بهتری ارائه دهند.
به طور خلاصه، CSS زبانی است که در کنار HTML مورد استفاده قرار می‌گیرد و امکان توصیف و تغییر ظاهری و طراحی وبسایت‌ها را فراهم میکند.
زبان جاوااسکریپت
JavaScript یک زبان برنامه نویسی برای توسعه وب است که بر روی هر مرورگر وب مدرن قابل اجرا است. اصلی‌ترین استفاده از JavaScript در کار کردن با وب است، از جمله تعامل با المان‌ها، اعتبارسنجی داده‌ها و ایجاد دینامیک در صفحات وب.
به عنوان یک زبان اسکریپت، JavaScript به صورت پیشفرض در سمت مشتری (Client-Side) اجرا می‌شود، به این معنا که کدهای آن بر روی مرورگر کاربر اجرا می‌شود و به صورت دینامیک صفحات وب را تغییر می‌دهد. اما با استفاده از JavaScript بر روی سمت سرور (Server-Side) می‌توانیم همین کد را به صورت مرکزی بر روی سرور اجرا کرده و نتایج را به کاربر ارسال کنیم.
ویژگی‌های کلیدی زبان برنامه نویسی جاوا اسکریپت
- سادگی: JavaScript یک زبان جامع است که برای یادگیری و استفاده آسان است. ساختار آن شبیه به زبان‌هایی مانند C و Java است که برای برنامه نویسانی که با این زبان‌ها آشنایی دارند، آسان است.
- دینامیک: یکی از ویژگی‌های کلیدی JavaScript، امکان تغییر صفحات وب در زمان اجرا (Run-Time) است. با استفاده از این زبان برنامه نویسی می‌توانید المان‌های صفحه را پویا کنید و به واکنش متغیرهای کاربر واکنش نشان دهید.
- اعتبارسنجی داده: از طریق JavaScript می‌توانید داده‌های ورودی کاربر را بررسی کنید و صحت و اعتبار آنها را تأیید کنید. این ویژگی بسیار کاربردی است و به عنوان یک جزء اساسی از تجارب کاربری استاندارد در وب استفاده می‌شود.
- پشتیبانی از کتابخانه‌ها: JavaScript دارای استفاده متعدد از کتابخانه‌ها و چارچوب‌ها است. این کتابخانه‌ها (مانند jQuery، React و Vue.js) به شما کمک می‌کنند تا کد خود را بازنویسی نکنید و کارایی و قابلیت‌های بیشتری را به پروژه‌های خود بدهید.
- پتانسیل بالا: برخلاف نسخه‌های قدیمی آن، JavaScript به روز شده است و در حال حاضر قدرت‌ها و پتانسیل بسیار زیادی دارد. امروزه JavaScript قادر است از تعامل با APIهای خارجی، ایجاد نرم‌افزارهای تحت وب و اپلیکیشن‌های تلفن همراه، و ساخت بازی‌های آنلاین استفاده کند.
به طور خلاصه، JavaScript یک زبان برنامه نویسی قدرتمند است که برای توسعه صفحات وب پویا و اعتبارسنجی داده به کار می‌رود. این زبان بر روی همه مرورگرها قابل اجرا است و به راحتی یادگیری و استفاده می‌شود.
فریم ورک های فرانت اند
فریم ورک های فرانت اند نرم‌افزارهایی هستند که توسعه دهندگان تحت وب برای توسعه و طراحی صفحات وب استفاده می‌کنند. این فریموُرک‌ها کدهای پایه و بخش‌های اصلی برنامه را ارائه می‌دهند که برنامه‌نویسان می‌توانند با استفاده از آنها، صفحات وب پویا و ارتباط دهنده را ایجاد کنند.
به عنوان مثال، فریمورک‌های فرانت‌اند مانند React، Angular و Vue.js به توسعه‌دهندگان امکان تعریف و مدیریت کامپوننت‌ها را می‌دهند. این کامپوننت‌ها می‌توانند در مکان‌های مختلف صفحه قرار بگیرند و با هم تعامل داشته باشند. همچنین این فریموُرک‌ها امکان اتصال به سرویس‌های دیگر مانند سرویس‌های وب یا پایگاه‌داده را فراهم می‌کنند تا بتوانند داده‌ها را دریافت و نمایش دهند.
هر فریمورک فرانت‌اند خاصی خصوصیات و قابلیت‌هایی دارد و برنامه‌نویسان بر اساس نیازها و تجربه‌ی خود، فریموُرک مناسب را انتخاب می‌کنند. این فریمورکها اکثراً با استفاده از زبان‌های برنامه‌نویسی مانند جاوااسکریپت توسعه می‌یابند و قابلیت پشتیبانی از تکنولوژی‌های مانند HTML و CSS را دارند.
با استفاده از فریمورک‌های فرانت‌اند، توسعه‌دهندگان می‌توانند توسعه سریع‌تری داشته باشند، کد قابل نگهداری‌تری داشته باشند و کیفیت کار را بهبود بخشند. همچنین با استفاده از این فریمورکها، طراحی صفحات وب قابل تغییر و انعطاف‌پذیر‌تر می‌شود و تجربه‌ی کاربری بهبود می‌یابد.
در ادامه شما را با فریم ورک های فرانت اند آشنا میکنیم .
Angular
Angular یک چارچوب توسعه وب است که توسط گوگل ایجاد شده است. این فریمورک برای توسعه برنامه‌های وب تک صفحه ای (SPA) و برنامه‌های وب پویا استفاده می‌شود. با استفاده از Angular، توسعه‌دهندگان می‌توانند واسط کاربری پویا را بر اساس مفهوم مدل-نما-کنترلر (MVC) ایجاد کنند و از قابلیت‌های راهنمایی، برخورداری و برنامه‌نویسی پیشرفته مانند رویدادها، فرم‌ها و تولید قطعه‌های کاربردی بهره ببرند. از تکنولوژی‌های مورد استفاده در Angular شامل TypeScript، HTML و CSS است.
React
React یک کتابخانه JavaScript برای ساخت واسط کاربری (UI) است. این کتابخانه توسط Facebook توسعه داده شده و به منظور ساخت و مدیریت رابط کاربری یکپارچه و قابل تغییر استفاده می‌شود. React از مفهومی به نام “کامپوننت” استفاده میکند که در واقع قسمت‌های کوچک و قابل استفاده مجدد از صفحه وب را مشخص میکند. این کتابخانه قابلیت تعامل بین کامپوننت‌ها را فراهم میکند و در بسیاری از برنامه‌ها به‌عنوان یک جزء اساسی استفاده می‌شود. React همچنین با ویژگی‌هایی نظیر مدیریت موجودیت‌ها و داده‌ها، رندرینگ اجزا صفحه وب و هماهنگی بین مرورگر و سرویس‌دهنده مورد استفاده قرار می‌گیرد.
Vue.js
یک فریمورک جاوااسکریپت متن باز برای ساخت رابط کاربری وب است. Vue.js سبک و پویایی مشابه با Angular دارد اما حجم خیلی کمتری دارد و با استفاده از روشهای مختلف می‌تواند به سادگی به صفحات HTML اضافه شود. به عنوان یک فریمورک مبتنی بر مدل-ویو ایجاد شده است، در نتیجه سازگاری بالایی با دیگر کتابخانه‌ها و فریمورکها دارد و قابلیت توسعه و افزایش قابلیت‌های آن را برای توسعه‌دهندگان فراهم میکند. تمرکز اصلی Vue.js بر روی مهارت‌های موجود در بسته نمی‌باشد، بلکه به شرح زیر است:
- متصل کننده UI: Vue.js به طور خودکار تغییرات داده‌ها را در رابط کاربری شلوغ اعمال میکند و شما نیازی ندارید دستی داده‌ها را به رابط کاربری متصل کنید.
- رابط کاربری تبادلی: با استفاده از Vue.js می‌توانید رابط کاربری خود را به سادگی توانمند سازید و نیازی به بازدهی ویژن‌های آن نیست.
- توسعه تک قطعه‌ای: شما می‌توانید Vue.js را با استفاده از دیگر فریمورکها و کتابخانه‌های جاوااسکریپت و حتی در صفحات HTML معمولی استفاده کنید.
- توسعه بسیار سریع: به لطف فشرده سازی فریمورک، بارگزاری صفحه خیلی سریع است و تجربه کاربری بالاتری را به کاربران ارائه می‌دهد.
- سازگاری بالا: Vue.js کد قابل استفاده‌ای دارد که می‌تواند با فریمورک‌های مختلفی مانند Angular و React تداخل داشته باشد.
تفاوت فرانت اند و بک اند
فرانت اند و بک اند دو مفهوم متفاوت در طراحی و توسعه وب هستند. در اینجا به تفاوت های اصلی بین این دو مفهوم می پردازیم:
فرانت اند (Front-end):
- مسئولیت: فرانت اند مسئولیت نمایش واسط کاربری یک وبسایت یا برنامه تحت وب را بر عهده دارد. این شامل طراحی صفحات وب، ترازبندی، انیمیشن ها، فرم ها و غیره است.
- زبان ها و فریمورک ها: بیشتر از زبان ها و فریمورک هایی مانند HTML (زبان مشخصها), CSS (شیوه بندی صفحه), JavaScript (برنامه نویسی جانب کاربر), و jQuery (کتابخانه JavaScript) برای توسعه فرانت اند استفاده می شود.
- کار با مرورگرها: فرانت اند بر روی مرورگر کاربر اجرا می شود و باید با تمام مرورگرها سازگاری داشته باشد.
- نمونه واقعی: وقتی یک وبسایت را مشاهده می کنید و با آن تعامل می کنید (مانند کلیک بر روی دکمه ها و ورود اطلاعات به فرم ها)، شما در واقع با فرانت اند آن وبسایت در ارتباط هستید.
بک اند (Back-end):
- مسئولیت: بک اند مسئولیت آماده سازی داده ها و منطق کار برنامه را در پشت صحنه بر عهده دارد. این شامل پردازش داده ها، مدیریت پایگاه داده، ارسال و دریافت داده ها از وبسرویس ها و غیره است.
- زبان ها و فریمورک ها: برای توسعه بک اند، می توان از زبان هایی مانند PHP, Ruby, Python, Java, C# و فریمورک هایی مانند Laravel, Ruby on Rails, Django, Spring و ASP.NET استفاده کرد.
- سرور و پایگاه داده: کدهای بک اند روی سرورهایی اجرا می شوند که برای نگهداری و اجرای برنامه ها طراحی شده اند. همچنین، اطلاعات مورد نیاز برای عملکرد برنامه در پایگاه داده ها ذخیره می شوند.
- نمونه واقعی: زمانی که برای ورود به یک حساب کاربری و یا ثبت سفارش در یک فروشگاه آنلاین، اطلاعات خود را وارد می کنید و سپس به آنجا ارسال می شود، شما در حقیقت با بک اند در ارتباط هستید.
در کل، فرانت اند با استفاده از زبان های مرورگر (HTML، CSS، JavaScript) و فریمورک ها و تکنولوژی های مربوطه، بخشی از واجهه کاربری را بر روی مرورگر نمایش می دهد، در حالی که بک اند اطلاعات را از کاربر دریافت می کند، آنها را پردازش می کند، در پایگاه داده ذخیره می کند و بهبود امکانات و عملکرد سایت یا برنامه را ایجاد می کند.
سخن آخر
در مقاله فرانت اند چیست ؟ به بر سی زبان های برنامه نویسی فرانت اند، فریم ورک های فرانت اند و تفاوت فرانت اند با بک اند پرداختیم .