Frontend Arxitektura

Frontend arxitektura – bu frontend ilovasining tuzilishi va tashkiliy modeli.

Frontend Arxitekturasi (Architect Frontend)

Kirish

Frontend arxitekturasi — bu ilovangizni tashkillashtirish va uzluksiz rivojlantirish uchun asosiy printsiplar, papka strukturalari, kod modullari, va ish jarayonlari to‘plami. Yaxshi arxitektura:

• 📈 Masshtablanadi (Scalable)
• 🛠️ Texnik xizmat ko‘rsatish oson (Maintainable)
• ⚡️ Ishlash tez (Performant)
• 👥 Jamoa bilan hamkorlik qulay (Collaborative)

🏗️ Asosiy Arxitektura Prinsiplari

1. Separation of Concerns (SoC)
   – UI, biznes logika va ma’lumot qatlamini alohida saqlash
2. Single Responsibility Principle
   – Har bir modul yoki komponent bitta vazifani bajaradi
3. Don’t Repeat Yourself (DRY)
   – Kodni qayta ishlatish; util va hook’lar yaratish
4. Domain-Driven Design (DDD) printsiplari
   – Loyihaning asosiy domenlari bo‘yicha bo‘limlash
5. Convention over Configuration
   – Bir xil nom berish, standart yo‘llar, ESLint/Prettier

Papka Struktura

1.1. Atomic Design

src/
├── components/
│   ├── atoms/       # Butun ilovada qayta ishlatiladigan eng kichik UI bo‘laklari
│   ├── molecules/   # Atoms’ni birlashtirgan kichik bloklar
│   ├── organisms/   # Molecules + atoms dan tashkil topgan katta bloklar
├── pages/           # Next.js yoki routelar uchun sahifalar
├── layouts/         # Umumiy sahifa tartibi (header, footer)
├── hooks/           # Custom React hook’lar (useAuth, useFetch)
├── services/        # API chaqiruvlar, biznes logika
├── utils/           # Yordamchi funksiyalar, formatlash
└── assets/          # Rasm, font, stil fayllari

1.2. Feature-Based (Modulga Asoslangan)

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   ├── cart/
│   │   ├── components/
│   │   ├── redux/     # Redux Toolkit slice’lari
│   │   └── utils/
├── common/           # Shared komponentlar, util va hook’lar
└── config/           # Global sozlamalar (API URL, theme)

Separation of Concerns (SoC)

• UI-komponentlar: – Faqat props qabul qiladi va render qiladi.
• Container/Stateful komponentlar: – useState, useEffect, yoki Redux bilan holatni boshqaradi.
• Service/API qatlam: – Tashqi API chaqiruvlari (fetch/axios), error handling, retries.
• Utils/Helpers: – Formatlash, date manipulyatsiya, debounce/throttle funksiyalari.

Komponent Namunalari

Container vs Presentational

// Presentational – UserCard.tsx
export function UserCard({ user }) {
	return (
		<div className='card'>
			<h3>{user.name}</h3>
			<p>{user.email}</p>
		</div>
	)
}
 
// Container – UserProfile.tsx
import { useEffect, useState } from 'react'
import { UserCard } from './UserCard'
 
export function UserProfile({ userId }) {
	const [user, setUser] = useState(null)
	useEffect(() => {
		fetch(`/api/users/${userId}`)
			.then(r => r.json())
			.then(setUser)
	}, [userId])
 
	return user ? <UserCard user={user} /> : <p>Loading...</p>
}

State Arxitekturasi

1. Local State (useState, useReducer)
2. Shared State (Context API)
3. Global State (Redux Toolkit, Zustand)
4. Side Effects (Redux-Saga, React Query yoki SWR)

// Redux Toolkit slice misoli
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 
export const fetchItems = createAsyncThunk('items/fetch', async () =>
	(await fetch('/api/items')).json()
)
 
const itemsSlice = createSlice({
	name: 'items',
	initialState: { list: [], status: 'idle' },
	extraReducers: builder => {
		builder
			.addCase(fetchItems.pending, s => {
				s.status = 'loading'
			})
			.addCase(fetchItems.fulfilled, (s, a) => {
				s.list = a.payload
				s.status = 'succeeded'
			})
	},
})
 
export default itemsSlice.reducer

Data Fetch & Caching

• React Query / SWR: avtomatik caching, refetch on focus, background updates.
• Custom Hooks (useFetch): error, loading, retry, pagination.

Styling Arxitekturasi

1. CSS Modules
2. Styled Components / Emotion
3. Utility-First (Tailwind CSS)
4. Design Tokens (Theme, spacing, color variables)

/* Button.module.css */
.button {
	@apply px-4 py-2 rounded-lg bg-blue-600 text-white;
}

Performance & Code Splitting

• React.lazy + Suspense
• Webpack Dynamic Imports
• Route-Based Splitting
• Bundle Analyzer: webpack-bundle-analyzer

const AdminPanel = React.lazy(() => import('./AdminPanel'))
// …
;<Suspense fallback={<Spinner />}>
	<AdminPanel />
</Suspense>

Testing Arxitekturasi

• Unit Tests: fayl yonida (Component.test.tsx)
• Integration Tests: komponent va service birga
• Mocks & Fixtures: msw bilan API mocking
• E2E: Cypress + CI/CD integratsiya

Build & Deployment

• Monorepo (turborepo, nx) yoki Polyrepo
• CI/CD: GitHub Actions / GitLab CI
• Static Hosting: Vercel, Netlify
• Containerize: Docker + Kubernetes

Xulosa

Yaxshi frontend arxitektura quyidagilarni ta’minlaydi:

• 🔄 Qayta foydalanish
• 📦 Modullilik
• ⚡️ Yuqori performance
• 🛠️ Oson texnik xizmat
• 👥 Jamoaviy hamkorlik

Keyingi qadam: ushbu printsiplarni amaliy loyihangizga tatbiq qilib, ”Architect Frontend” bo‘lib ulguring!