Frontend

Frontend nima?

Frontend - bu foydalanuvchi bevosita ko'radigan va muloqot qiladigan qism. Brauzerda ochilgan veb-sahifa, mobil ilovaning ekrani, hatto bankomatning interfeysi - bularning barchasi frontend hisoblanadi.

Frontend development quyidagi asosiy texnologiyalarni o'z ichiga oladi:

• HTML - sahifaning strukturasi (skelet)
• CSS - dizayn va stillar (tashqi ko'rinish)
• JavaScript - interaktivlik va dinamik xatti-harakatlar

Zamonaviy frontend esa bundan ham kengroq:

• React, Vue, Angular kabi frameworklar
• Build tools va bundlerlar (Vite, Webpack)
• State management (Redux, Pinia)
• Testing va optimization

Nega kerak?

Yaxshi frontend - bu biznesning yuzasi. Foydalanuvchilar birinchi bo'lib frontendni ko'rishadi va shu asosida qaror qilishadi:

Asosiy tushunchalar

SPA vs MPA vs SSR

Veb-ilovalar uchta asosiy arxitekturada qurilishi mumkin:

Component-Based Architecture

Zamonaviy frontend komponentlarga asoslangan. Har bir UI qismi (tugma, modal, card) alohida komponent sifatida yoziladi:

• Reusability - bir marta yozib, ko'p joyda ishlatish
• Maintainability - bir joyni o'zgartirish barchasiga ta'sir qiladi
• Testing - har bir komponentni alohida test qilish

Design System

Katta loyihalarda barcha UI elementlari bitta tizimga bo'ysunadi:

• Ranglar palitrasi (colors)
• Tipografiya (fonts, sizes)
• Spacing va grid
• Komponentlar kutubxonasi
• Ikonlar to'plami

Performance Optimization

Tez sahifa - yaxshi UX va SEO. Asosiy optimizatsiya usullari:

• Code splitting - faqat kerakli kodni yuklash
• Lazy loading - rasmlar va komponentlarni kerak bo'lganda yuklash
• Minification - CSS/JS fayllarni kichiklashtirish
• Caching - brauzer keshidan foydalanish
• CDN - statik fayllarni tez tarqatish

Amaliy jarayon (step-by-step)

Eng ko'p uchraydigan xatolar

Best practices

• Semantic HTML ishlatish: div o'rniga section, article, nav, header
• Har bir img tagida alt attribute bo'lsin
• CSS-in-JS yoki Tailwind bilan scoped styles yarating
• Komponentlarni kichik va reusable qiling (Single Responsibility)
• Environment variablelarni .env faylda saqlang
• Error boundaries bilan xatolarni tutib oling
• React.memo, useMemo, useCallback bilan keraksiz re-renderlarni oldini oling
• TypeScript ishlatish - runtime xatolarini compile vaqtida toping

Asboblar va texnologiyalar

Mini misol

React komponent misoli (TypeScript bilan):

import { ButtonHTMLAttributes } from 'react';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
}

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  isLoading,
  disabled,
  className,
  ...props
}: ButtonProps) {
  const baseStyles = 'rounded-lg font-medium transition-colors';
  
  const variants = {
    primary: 'bg-teal-500 text-white hover:bg-teal-600',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    danger: 'bg-red-500 text-white hover:bg-red-600',
  };
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading ? 'Loading...' : children}
    </button>
  );
}

Tailwind CSS bilan responsive grid:

<!-- Responsive grid: 1 col mobile, 2 cols tablet, 3 cols desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl shadow-lg p-6">
    <h3 class="text-xl font-bold text-gray-900">Card 1</h3>
    <p class="text-gray-600 mt-2">Description...</p>
  </div>
  <!-- More cards... -->
</div>

Ko'p so'raladigan savollar (FAQ)

Glossary (Atamalar lug'ati)