Frontend

Frontend — web sayt yoki ilovaning foydalanuvchiga ko‘rinadigan qismi. Frontend foydalanuvchi ko‘radigan interfeys, sahifa dizayni, tugmalar, formalar, menyular, animatsiyalar va client tomondagi ishlash jarayonlarini o‘z ichiga oladi.

Frontend brauzerda ishlaydi va odatda HTML, CSS hamda JavaScript texnologiyalari asosida yaratiladi. Zamonaviy frontend ilovalarda React, Vue, Angular, Next.js va Nuxt kabi frameworklardan ham foydalaniladi.

Vazifasi

Frontend foydalanuvchi bilan tizim o‘rtasidagi ko‘rinadigan aloqa qatlamidir.

Frontend quyidagi vazifalarni bajaradi:

• sahifa tuzilmasini ko‘rsatish;
• dizayn va ranglarni chiqarish;
• tugma, forma va menyularni ishlatish;
• foydalanuvchi harakatlarini qabul qilish;
• backend API’dan ma’lumot olish;
• ma’lumotlarni sahifada ko‘rsatish;
• sahifani turli ekran o‘lchamlariga moslashtirish;
• xatolik va natijalarni foydalanuvchiga bildirish;
• sahifa tezligi va qulayligini ta’minlash.

Masalan, foydalanuvchi internet do‘konda mahsulotni ko‘rsa, savatchaga qo‘shsa yoki qidiruvdan foydalansa, bu jarayonlarning ko‘rinadigan qismi frontend orqali amalga oshadi.

Frontend qanday ishlaydi?

Frontend fayllari serverdan brauzerga yuklanadi. Brauzer HTML, CSS va JavaScript kodlarini o‘qib, foydalanuvchiga tayyor sahifani ko‘rsatadi.

Oddiy jarayon:

• foydalanuvchi sayt manzilini ochadi;
• brauzer serverga so‘rov yuboradi;
• server HTML, CSS va JavaScript fayllarni qaytaradi;
• brauzer sahifani chizadi;
• JavaScript sahifaga interaktivlik qo‘shadi;
• kerak bo‘lsa, frontend API’dan ma’lumot oladi;
• foydalanuvchi sahifa bilan ishlaydi.

Frontend client tomonida ishlagani uchun uning ko‘p qismi foydalanuvchi brauzerida bajariladi.

HTML

HTML — web sahifaning tuzilmasini yaratish uchun ishlatiladi. U sahifadagi matn, sarlavha, rasm, havola, forma, jadval va boshqa elementlarni belgilaydi.

HTML orqali quyidagilar yaratiladi:

• sarlavhalar;
• paragraflar;
• rasmlar;
• havolalar;
• formalar;
• tugmalar;
• ro‘yxatlar;
• jadvallar;
• sahifa bo‘limlari.

Masalan, maqola sahifasidagi sarlavha, matn va rasm HTML elementlari orqali beriladi.

CSS

CSS — web sahifaning tashqi ko‘rinishini boshqaradigan texnologiya. CSS orqali ranglar, shriftlar, masofalar, joylashuv, animatsiya va responsive dizayn yaratiladi.

CSS quyidagi vazifalarda ishlatiladi:

• rang berish;
• shrift sozlash;
• element o‘lchamini belgilash;
• sahifa layoutini qurish;
• tugma va kartalar dizaynini yaratish;
• mobil ekranlarga moslashtirish;
• hover va animatsiyalar qo‘shish.

Masalan, tugmaning rangi, o‘lchami va bosilgandagi holati CSS orqali boshqariladi.

JavaScript

JavaScript — frontendga interaktivlik qo‘shadigan dasturlash tili. JavaScript orqali foydalanuvchi harakatlariga javob berish, API’dan ma’lumot olish va sahifani dinamik yangilash mumkin.

JavaScript quyidagi vazifalarda ishlatiladi:

• tugma bosilishini qayta ishlash;
• forma ma’lumotlarini tekshirish;
• API so‘rov yuborish;
• sahifani qayta yuklamasdan yangilash;
• modal oynalar ochish;
• animatsiyalar yaratish;
• real-time ma’lumot ko‘rsatish;
• client tomonda holat boshqarish.

Masalan, foydalanuvchi qidiruv maydoniga matn yozganda, JavaScript natijalarni API orqali olib sahifada ko‘rsatishi mumkin.

Frontend frameworklar

Frontend frameworklar katta va murakkab interfeyslarni tartibli yaratish uchun ishlatiladi.

Mashhur frontend framework va kutubxonalar:

• React — component asosida interfeys yaratish uchun keng ishlatiladi;
• Vue — yengil va tushunarli frontend framework;
• Angular — katta enterprise loyihalarda ishlatiladigan framework;
• Svelte — compile-time yondashuvga ega frontend framework;
• Next.js — React asosidagi full-stack web framework;
• Nuxt — Vue asosidagi full-stack web framework.

Frameworklar component, routing, state management, build va API bilan ishlash jarayonlarini soddalashtiradi.

Component

Component — frontend interfeysining qayta ishlatiladigan alohida qismi. Component tugma, karta, forma, navbar, modal yoki sahifa bo‘limi bo‘lishi mumkin.

Componentlarga misollar:

• button;
• header;
• sidebar;
• product card;
• article card;
• login form;
• modal window;
• pagination;
• profile block.

Component yondashuvi katta interfeyslarni kichik va boshqariladigan qismlarga ajratishga yordam beradi.

State

State — frontend ilovaning joriy holatini bildiradi. State foydalanuvchi harakati, API javobi yoki sahifa ichidagi o‘zgarishlar asosida yangilanadi.

State ichida quyidagilar bo‘lishi mumkin:

• foydalanuvchi ma’lumoti;
• savatchadagi mahsulotlar;
• forma qiymatlari;
• yuklanish holati;
• xatolik xabari;
• tanlangan kategoriya;
• ochiq modal holati;
• filter va sort qiymatlari.

Masalan, foydalanuvchi savatchaga mahsulot qo‘shganda, frontend state yangilanadi va savatchadagi son o‘zgaradi.

Routing

Routing — frontend ilovada sahifalar orasida o‘tishni boshqarish jarayoni. Routing URL manzilga qarab qaysi sahifa yoki component ko‘rsatilishini belgilaydi.

Frontend routing quyidagi sahifalarda ishlatiladi:

• bosh sahifa;
• login sahifasi;
• profil sahifasi;
• mahsulot tafsiloti;
• maqola sahifasi;
• admin panel bo‘limlari;
• qidiruv natijalari;
• xatolik sahifasi.

Single Page Application loyihalarda sahifalar orasida o‘tish brauzer to‘liq qayta yuklanmasdan amalga oshishi mumkin.

API bilan ishlash

Frontend ko‘pincha backend API bilan ma’lumot almashadi. API orqali frontend serverdan kerakli ma’lumotlarni oladi yoki foydalanuvchi yuborgan ma’lumotlarni serverga jo‘natadi.

Frontend API orqali quyidagilarni bajaradi:

• login qilish;
• ro‘yxatdan o‘tish;
• profil ma’lumotini olish;
• mahsulotlar ro‘yxatini chiqarish;
• forma yuborish;
• fayl yuklash;
• komment qo‘shish;
• buyurtma yaratish.

API javoblari odatda JSON formatida keladi.

Responsive dizayn

Responsive dizayn — sayt yoki ilovaning turli ekran o‘lchamlariga mos ko‘rinishini ta’minlaydi. Bitta frontend sahifa desktop, planshet va telefon ekranida moslashib ishlashi kerak.

Responsive dizaynda quyidagilar ishlatiladi:

• flexible layout;
• media query;
• grid;
• flexbox;
• adaptive spacing;
• scalable typography;
• mobile-first yondashuv;
• responsive images.

Masalan, desktopda uch ustunli kartalar, mobil ekranda bitta ustun bo‘lib ko‘rinishi mumkin.

UI

UI — foydalanuvchi interfeysi. UI sahifadagi vizual elementlar va ularning joylashuvini bildiradi.

UI elementlariga misollar:

• tugmalar;
• inputlar;
• menyular;
• kartalar;
• ikonlar;
• modal oynalar;
• jadval;
• navigatsiya;
• bildirishnomalar.

Frontend UI dizaynni kodga aylantiradi va foydalanuvchiga ishlaydigan interfeys sifatida ko‘rsatadi.

UX

UX — foydalanuvchi tajribasi. UX foydalanuvchi sayt yoki ilovadan qanchalik qulay, tez va tushunarli foydalanishini bildiradi.

UX bilan bog‘liq jihatlar:

• sahifa tezligi;
• menyu tushunarliligi;
• forma qulayligi;
• xatolik xabarlari;
• tugmalar joylashuvi;
• mobil moslashuv;
• foydalanuvchi oqimi;
• sahifa mantiqi.

Frontend UX’ni texnik jihatdan amalga oshirishda muhim rol o‘ynaydi.

Build

Frontend loyihalarda kod ishlab chiqish holatidan production holatiga tayyorlanadi. Bu jarayon build deb ataladi.

Build jarayonida quyidagilar bajarilishi mumkin:

• JavaScript fayllarni birlashtirish;
• CSS fayllarni optimallashtirish;
• rasm va assetlarni tayyorlash;
• TypeScript kodini JavaScript’ga aylantirish;
• kodni minify qilish;
• bundle yaratish;
• static fayllarni hosil qilish.

Build natijasida server yoki hostingga joylash uchun tayyor frontend fayllar hosil bo‘ladi.

Frontend va backend farqi

Frontend va backend bir ilovaning turli qismlaridir.

• Frontend foydalanuvchiga ko‘rinadigan qism;
• Backend serverda ishlaydigan mantiqiy qism;
• Frontend brauzer yoki mobil ilovada ishlaydi;
• Backend server, database va API bilan ishlaydi;
• Frontend interfeys va foydalanuvchi harakatlari bilan shug‘ullanadi;
• Backend ma’lumot, xavfsizlik, biznes logika va server jarayonlarini boshqaradi.

Masalan, login formasi frontendda ko‘rinadi, login ma’lumotini tekshirish esa backendda bajariladi.

Frontend xavfsizligi

Frontend foydalanuvchiga ochiq qism bo‘lgani uchun undagi kodni brauzer orqali ko‘rish mumkin. Shu sababli maxfiy ma’lumotlar frontend kodida saqlanmaydi.

Frontend xavfsizligida quyidagi tushunchalar uchraydi:

• XSS;
• CSRF;
• CORS;
• token saqlash;
• cookie xavfsizligi;
• input validation;
• HTTPS;
• dependency security;
• content security policy;
• authentication flow.

Frontenddagi tekshiruvlar foydalanuvchi qulayligi uchun ishlatiladi, muhim xavfsizlik tekshiruvlari esa server tomonda bajariladi.

Frontend dasturlashdagi o‘rni

Frontend dasturchilar foydalanuvchi interfeysini yaratadi va uni backend API bilan bog‘laydi.

Frontend dasturlashda quyidagilar ko‘p uchraydi:

• HTML;
• CSS;
• JavaScript;
• TypeScript;
• componentlar;
• state management;
• routing;
• API integration;
• responsive dizayn;
• browser compatibility;
• performance optimization;
• accessibility.

Frontend zamonaviy web ilovalarning foydalanuvchi bilan bevosita ishlaydigan asosiy qismidir.

Bog‘liq tushunchalar

HTML, CSS, JavaScript, TypeScript, React, Vue, API, Backend, Client, Browser, UI, UX, Responsive dizayn