Zamonaviy Kutubxonalar va Toollar Ensiklopediyasi (NPM & Ecosystem)

"Dasturlash Kitobi" Hamroh Ma'lumotnomasi Dunyoda va O'zbekiston IT bozorida eng ko'p ishlatiladigan, sanoat standarti darajasidagi 150+ ta zamonaviy vositalar, kutubxonalar va npm paketlarining to'liq ensiklopedik ma'lumotnomasi. Har bir vosita uchun: vazifasi, o'rnatish, qachon tanlash kerakligi, minimal ishchi kod va professional tavsiyalar.

---

Mundarija

1. Frontend: UI Komponentlar va Headless Primitivlar
2. Frontend: Styling, CSS va Dizayn Tizimlari
3. Formalar va Sxemalar Validatsiyasi
4. Animatsiyalar, Mikro-interaktivlik va Gestures
5. Ma'lumotlar Vizualizatsiyasi va Diagrammalar
6. Katta Jadvallar va Ro'yxatlar Virtualizatsiyasi
7. Holat Boshqaruvi (State Management)
8. Data Fetching, Kesh va Tarmoq Aloqasi
9. Sana va Vaqt bilan Ishlash (Date & Time)
10. Toast, Modallar va Bildirishnomalar
11. Drag and Drop va Fayllarni Yuklash
12. Boy Matn Muharrirlari (Rich Text / Markdown)
13. Hujjatlar (PDF, Excel, CSV) va Rasm / Fayllar
14. Yordamchi Funksiyalar (Utility Libraries)
15. Backend Web Frameworklar va Marshrutlash
16. Database Drayverlar, ORM va Query Builderlar
17. Autentifikatsiya, Shifrlash va Xavfsizlik
18. Asinxron Navbatlar va Fon Vazifalari
19. Logging, Telemetriya va Monitoring
20. CLI va Terminal Asboblari
21. Testlash va Mocking
22. Tooling, Build va Paket Menejerlari

---

1. Frontend: UI Komponentlar va Headless Primitivlar

An'anaviy CSS kutubxonalaridan farqli ravishda, zamonaviy frontend rivoji Headless UI (mantiq va a11y bor, stil yo'q) hamda Nusxa-joylashtir (Copy-Paste) modeliga o'tdi.

1.1. shadcn/ui

• Vazifasi: Loyihaga to'liq manba kodi ko'chiriladigan, Radix UI va Tailwind asosidagi zamonaviy komponentlar to'plami.
• O'rnatish: npx shadcn@latest init va npx shadcn@latest add button dialog table
• Qachon tanlanadi: 2024-2026 yillarda yangi Next.js, Vite yoki Remix loyihalari uchun de-fakto standart. Kod to'liq sizning nazoratingizda bo'ladi, npm moduli sifatida qotib qolmaydi.
• Ishlatilishi:
  tsx

  import { Button } from "@/components/ui/button";
  export default function App() {
    return <Button variant="outline" size="lg">Batafsil</Button>;
  }

1.2. Radix UI Primitives

• Vazifasi: WAI-ARIA standartlariga 100% mos, klaviatura boshqaruvi va fokus trapiga ega xom (boshlang'ich stil berilmagan) primitivlar.
• O'rnatish: npm i @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover
• Qachon tanlanadi: O'z dizayn tizimingizni noldan yaratayotganda yoki murakkab modallar, menyular yaratishda.

1.3. Lucide React

• Vazifasi: Feather Icons ning zamonaviy va doimiy yangilanib turuvchi vorisi. 1000 dan ortiq toza, vektor SVG ikonkalari.
• O'rnatish: npm i lucide-react
• Qachon tanlanadi: Loyihada yagona, ko'rkam va tree-shakeable ikonka to'plami kerak bo'lganda.
• Ishlatilishi:
  tsx

  import { Search, ChevronRight, CheckCircle2 } from "lucide-react";
  <Search className="w-5 h-5 text-gray-500 hover:text-blue-500 transition-colors" />

1.4. Boshqa UI Kutubxonalar taqqoslovi

Kutubxona	Stil turi	Afzalligi	Kamchiligi
shadcn/ui	Tailwind	To'liq nazorat, eng zamonaviy dizayn, noldan moslashuvchan	Har bir loyihaga fayllarni ko'chirish talab etiladi
MUI (Material UI)	Emotion / Pigment CSS	Tayyor Material Design, minglab tayyor xususiyatlar	Og'ir bundle hajmi, Next.js RSC bilan integratsiya murakkab
Ant Design	CSS-in-JS	Katta korporativ ERP va ichki admin panellar uchun tayyor jadvallar	Xitoy dizayn maktabi, stilni Tailwind'ga moslash qiyin
Mantine	CSS Modules	Juda boy hooklar va komponentlar ekotizimi	Tailwind bilan ishlatish noqulay
HeroUI (NextUI)	Tailwind Variants	Chiroyli animatsiyalar, qora mavzu (dark mode) zo'r tayyorlangan	shadcn ga qaraganda kamroq moslashuvchan

---

2. Frontend: Styling, CSS va Dizayn Tizimlari

2.1. Tailwind CSS v4

• Vazifasi: Brauzer yukini nolga tushiruvchi eng mashhur utility-first CSS frameworki.
• O'rnatish: npm i tailwindcss @tailwindcss/vite
• Asosiy yutuqlari: CSS fayl ichida @theme orqali to'g'ridan-to'g'ri konfiguratsiya qilish, Rust asosidagi Oxide dvigateli bilan 10 barobar tezroq kompilyatsiya.

2.2. clsx va tailwind-merge (va CVA)

• Vazifasi: Shartli sinflarni birlashtirish va Tailwind sinflari o'rtasidagi ziddiyatlarni bartaraf etish (cn() helperi).
• O'rnatish: npm i clsx tailwind-merge class-variance-authority
• Ishlatilishi (lib/utils.ts):
  ts

  import { clsx, type ClassValue } from "clsx";
  import { twMerge } from "tailwind-merge";
  
  export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
  }

• CVA bilan variantlar yaratish:
  ts

  import { cva } from "class-variance-authority";
  
  export const buttonVariants = cva(
    "inline-flex items-center justify-center font-medium rounded-md transition-colors",
    {
      variants: {
        variant: {
          primary: "bg-blue-600 text-white hover:bg-blue-700",
          danger: "bg-red-600 text-white hover:bg-red-700",
          ghost: "hover:bg-gray-100 text-gray-700",
        },
        size: {
          sm: "h-8 px-3 text-xs",
          md: "h-10 px-4 text-sm",
          lg: "h-12 px-6 text-base",
        },
      },
      defaultVariants: {
        variant: "primary",
        size: "md",
      },
    }
  );

---

3. Formalar va Sxemalar Validatsiyasi

3.1. React Hook Form + Zod

• Vazifasi: Keraksiz qayta renderlashlarsiz formalar holatini boshqarish va TypeScript turlari bilan 100% integratsiyalashgan sxemalar validatsiyasi.
• O'rnatish: npm i react-hook-form @hookform/resolvers zod
• Ishlatilishi:
  tsx

  import { useForm } from "react-hook-form";
  import { zodResolver } from "@hookform/resolvers/zod";
  import { z } from "zod";
  
  const registerSchema = z.object({
    email: z.string().email("Yaroqsiz email manzili"),
    password: z.string().min(8, "Parol kamida 8 ta belgidan iborat bo'lsin"),
    age: z.coerce.number().min(18, "Yosh kamida 18 bo'lishi shart"),
  });
  
  type RegisterFormData = z.infer<typeof registerSchema>;
  
  export function RegisterForm() {
    const { register, handleSubmit, formState: { errors } } = useForm<RegisterFormData>({
      resolver: zodResolver(registerSchema),
    });
  
    const onSubmit = (data: RegisterFormData) => {
      console.log("Validatsiya qilindi:", data);
    };
  
    return (
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <div>
          <input {...register("email")} placeholder="Email" className="border p-2 rounded" />
          {errors.email && <p className="text-red-500 text-xs">{errors.email.message}</p>}
        </div>
        <button type="submit" className="bg-black text-white px-4 py-2 rounded">Yuborish</button>
      </form>
    );
  }

3.2. Valibot — Zod alternativi

• Vazifasi: Zod ga qaraganda 90% kichikroq bundle hajmi (tree-shaking qilinganda 1-2 KB).
• O'rnatish: npm i valibot
• Qachon tanlanadi: Mobil brauzerlar va bundle hajmi o'ta qattiq cheklangan frontend loyihalarda.

---

4. Animatsiyalar, Mikro-interaktivlik va Gestures

4.1. Framer Motion (motion/react)

• Vazifasi: React uchun eng mukammal deklarativ animatsiya va layout animatsiyalari kutubxonasi.
• O'rnatish: npm i motion (yoki npm i framer-motion)
• Ishlatilishi:
  tsx

  import { motion, AnimatePresence } from "motion/react";
  
  export function FadeCard({ isVisible }: { isVisible: boolean }) {
    return (
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="p-6 bg-white rounded-xl shadow-lg"
          >
            Ma'lumotlar yuklandi!
          </motion.div>
        )}
      </AnimatePresence>
    );
  }

4.2. AutoAnimate (@formkit/auto-animate)

• Vazifasi: Bitta qator kod bilan ro'yxatlar (list), qatorlar o'chirilishi yoki qo'shilishiga avtomatik silliq animatsiya beruvchi 2KB vosita.
• O'rnatish: npm i @formkit/auto-animate
• Ishlatilishi:
  tsx

  import { useAutoAnimate } from "@formkit/auto-animate/react";
  
  export function TodoList({ items }: { items: string[] }) {
    const [parentRef] = useAutoAnimate();
    return (
      <ul ref={parentRef}>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
    );
  }

4.3. Embla Carousel

• Vazifasi: Karusel, slaydlar va gallery yaratish uchun eng yengil (library-agnostic), touch va swipe ni qo'llab-quvvatlovchi zamonaviy dvigatel (shadcn Carousel aynan shu asosda qurilgan).
• O'rnatish: npm i embla-carousel-react

---

5. Ma'lumotlar Vizualizatsiyasi va Diagrammalar

Admin panellar, CRM tizimlar va monitoring ekranlarining markaziy qismi.

5.1. Recharts

• Vazifasi: SVG asosli deklarativ diagrammalar to'plami.
• O'rnatish: npm i recharts
• Ishlatilishi:
  tsx

  import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
  
  const data = [
    { oy: "Yan", daromad: 4000 },
    { oy: "Fev", daromad: 7000 },
    { oy: "Mar", daromad: 12000 },
  ];
  
  export function RevenueChart() {
    return (
      <div className="h-72 w-full">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={data}>
            <CartesianGrid strokeDasharray="3 3" vertical={false} />
            <XAxis dataKey="oy" />
            <YAxis />
            <Tooltip />
            <Area type="monotone" dataKey="daromad" stroke="#2563eb" fill="#93c5fd" />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    );
  }

5.2. Tanlov mezoni: Recharts vs Chart.js vs ECharts

Talab	Tavsiya qilinadigan vosita	Sababi
Oddiy va o'rta biznes grafiklari (SaaS, Dashboard)	Recharts	JSX bilan uyg'un, Tailwind bilan oson stillanadi
50,000+ nuqtali treyding yoki sensor ma'lumotlari	Chart.js (react-chartjs-2)	HTML5 Canvas orqali xotira va renderingni tejaydi
Murakkab 3D, geografik xarita va geovizualizatsiya	Apache ECharts (echarts-for-react)	Sanoat darajasidagi ulkan funksionallik va xaritalar to'plami

---

6. Katta Jadvallar va Ro'yxatlar Virtualizatsiyasi

6.1. TanStack Table v8 (@tanstack/react-table)

• Vazifasi: Headless jadval arxitekturasi. Saralash, global qidiruv, ustunlarni filtrlash, ko'p bosqichli sahifalash (pagination) mantiqini beradi, HTML jadvalni o'zingiz Tailwind bilan chizasiz.
• O'rnatish: npm i @tanstack/react-table
• Pro-tip: Minglab qatorlarni ko'rsatayotganda TanStack Table bilan birga TanStack Virtual ishlatiladi.

6.2. TanStack Virtual (@tanstack/react-virtual)

• Vazifasi: DOM ga faqat ekranda ko'rinib turgan 20-30 ta elementni chizish (virtual scrolling). 1,000,000 ta qator bo'lsa ham brauzer qotmaydi (60 FPS).
• O'rnatish: npm i @tanstack/react-virtual

---

7. Holat Boshqaruvi (State Management)

7.1. Zustand

• Vazifasi: Oddiy, yengil (1KB), boilerplate kodi deyarli bo'lmagan eng ommabop global state menejeri.
• O'rnatish: npm i zustand
• Ishlatilishi:
  ts

  import { create } from "zustand";
  import { persist } from "zustand/middleware";
  
  interface AuthState {
    token: string | null;
    user: { id: string; name: string } | null;
    login: (token: string, user: { id: string; name: string }) => void;
    logout: () => void;
  }
  
  export const useAuthStore = create<AuthState>()(
    persist(
      (set) => ({
        token: null,
        user: null,
        login: (token, user) => set({ token, user }),
        logout: () => set({ token: null, user: null }),
      }),
      { name: "auth-storage" }
    )
  );

7.2. State Menejerlari taqqoslash xaritasi:

• Zustand: Kichik, o'rta va ko'plab yirik loyihalar uchun 1-raqamli standart.
• Redux Toolkit (RTK): Eski meros (legacy) korporativ tizimlar va qat'iy standart talab qilinadigan bank loyihalari.
• Jotai: Atomik holat boshqaruvi (har bir o'zgaruvchi mustaqil atom — Figma yoki Canva kabi kanvas/grafik muharrirlar uchun ideal).

---

8. Data Fetching, Kesh va Tarmoq Aloqasi

8.1. TanStack Query v5 (@tanstack/react-query)

• Vazifasi: Server holatini (Server State) boshqarish: avtomatik kesh, fonda yangilanish (stale-while-revalidate), so'rovlarni birlashtirish (deduplication) va optimistic UI.
• O'rnatish: npm i @tanstack/react-query @tanstack/react-query-devtools
• Ishlatilishi:
  tsx

  import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
  import axios from "axios";
  
  export function UsersList() {
    const queryClient = useQueryClient();
  
    const { data: users, isLoading, error } = useQuery({
      queryKey: ["users"],
      queryFn: async () => (await axios.get("/api/users")).data,
      staleTime: 1000 * 60 * 5, // 5 daqiqa keshda saqlash
    });
  
    const deleteMutation = useMutation({
      mutationFn: (id: string) => axios.delete(`/api/users/${id}`),
      onSuccess: () => {
        // Ma'lumot yangilandi, keshni qayta yuklash
        queryClient.invalidateQueries({ queryKey: ["users"] });
      },
    });
  
    if (isLoading) return <div>Yuklanmoqda...</div>;
    return (
      <ul>
        {users.map((u: any) => (
          <li key={u.id}>
            {u.name}
            <button onClick={() => deleteMutation.mutate(u.id)}>O'chirish</button>
          </li>
        ))}
      </ul>
    );
  }

8.2. Ky — Zamonaviy HTTP mijoz

• Vazifasi: Axios o'rnini bosuvchi, brauzerning mahalliy fetch API ustiga qurilgan, o'ta yengil (Axios dan 4 barobar kichik) HTTP mijoz.
• O'rnatish: npm i ky
• Afzalligi: Avtomatik exponential retry, JSON parsing, timeout va HTTP xatolarini to'g'ri ushlash.

---

9. Sana va Vaqt bilan Ishlash (Date & Time)

9.1. date-fns

• Vazifasi: Funksional, modulli va tree-shakeable sana vositalari.
• O'rnatish: npm i date-fns
• Nega Moment.js emas? Moment.js loyihasi rasman muzlatilgan (deprecated), hajmi 70KB dan ortiq va ob'ektlari o'zgaruvchan (mutable). date-fns esa har bir funksiyani alohida import qilish imkonini beradi (har bir funksiya 200 bayt).
• Ishlatilishi:
  ts

  import { format, formatDistanceToNow, addDays, isAfter } from "date-fns";
  import { uz } from "date-fns/locale";
  
  const bugun = new Date();
  const formatlangan = format(bugun, "yyyy-MM-dd HH:mm"); // "2026-09-20 16:40"
  const nisbiy = formatDistanceToNow(new Date("2026-09-19"), { addSuffix: true, locale: uz }); // "1 kun oldin"

---

10. Toast, Modallar va Bildirishnomalar

10.1. Sonner

• Vazifasi: Dunyodagi eng chiroyli, silliq harakatlanuvchi, stackable (ustma-ust yig'iluvchi) toast bildirishnomalari.
• O'rnatish: npm i sonner
• Ishlatilishi:
  tsx

  import { Toaster, toast } from "sonner";
  
  // Ilova ildizida:
  <Toaster position="top-right" richColors />
  
  // Istalgan komponentda:
  toast.success("Muvaffaqiyatli saqlandi!");
  toast.promise(saveUserData(), {
    loading: "Saqlanmoqda...",
    success: (data) => `Foydalanuvchi ${data.name} yaratildi!`,
    error: "Xatolik yuz berdi!",
  });

---

11. Drag and Drop va Fayllarni Yuklash

11.1. @dnd-kit

• Vazifasi: Kanban doskalar (Trello kabi), ro'yxatlarni tartiblash va dashboard vidjetlarini sudrab joylashtirish uchun zamonaviy yechim.
• O'rnatish: npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

11.2. react-dropzone

• Vazifasi: Fayllarni sudrab tashlash (Drag & Drop) va format/hajm bo'yicha saralash.
• O'rnatish: npm i react-dropzone

---

12. Boy Matn Muharrirlari (Rich Text / Markdown)

12.1. Tiptap

• Vazifasi: ProseMirror ustiga qurilgan, Notion uslubidagi zamonaviy matn muharriri.
• O'rnatish: npm i @tiptap/react @tiptap/pm @tiptap/starter-kit

12.2. Monaco Editor (@monaco-editor/react)

• Vazifasi: Brauzer ichiga to'liq VS Code kod tahrirlash muhitini (syntax highlighting, intellisense, autocomplete) olib kirish.
• O'rnatish: npm i @monaco-editor/react

---

13. Hujjatlar (PDF, Excel, CSV) va Rasm / Fayllar

13.1. Excel va CSV eksporti: exceljs va papaparse

• Frontend / Backend Excel: npm i exceljs — to'liq formatlangan (ranglar, shriftlar, formulalar bilan) Excel (.xlsx) yaratish.
• CSV Parsing: npm i papaparse — millionlab qatorli CSV fayllarni brauzer xotirasini qotirmasdan oqimli (stream) o'qish.

13.2. PDF Yaratish: @react-pdf/renderer va pdfkit

• React yordamida PDF: npm i @react-pdf/renderer — JSX komponentlari yordamida cheklar, hisob-fakturalar (invoice) va shartnomalarni PDF formatida generatsiya qilish.

13.3. Rasm siqish: sharp (Backend) va browser-image-compression (Frontend)

• Node.js/NestJS da: npm i sharp — rasmlarni WebP/AVIF formatiga o'tkazish, EXIF xavfsizlik ma'lumotlarini tozalash va o'lchamini kichraytirish.
• Brauzerda (Client-side): npm i browser-image-compression — foydalanuvchi serverga yuklashidan oldin 10MB lik telefon rasmini brauzerning o'zida 500KB gacha sifat yo'qotmasdan siqib yuborish.

---

14. Yordamchi Funksiyalar (Utility Libraries)

14.1. es-toolkit — Zamonaviy Lodash

• Vazifasi: 2024-2026 yillarda yaratilgan, Lodash dan 2-3 barobar tezroq va 97% kichikroq bo'lgan TypeScript-first yordamchi kutubxona.
• O'rnatish: npm i es-toolkit
• Ishlatilishi:
  ts

  import { debounce, chunk, cloneDeep, uniq } from "es-toolkit";
  const uniqueItems = uniq([1, 2, 2, 3]); // [1, 2, 3]

14.2. nanoid

• Vazifasi: UUID v4 ning xavfsiz va ixcham alternativi (UUID — 36 belgi, nanoid — 21 belgi, URL-friendly).
• O'rnatish: npm i nanoid

---

15. Backend Web Frameworklar va Marshrutlash

15.1. NestJS vs Fastify vs Hono

Framework	Platforma	Qachon tanlanadi
NestJS	Node.js	Katta korxona, bank, jamoaviy yirik loyihalar (arxitektura, DI, qat'iylik)
Fastify	Node.js	Express o'rnida 3 barobar yuqori RPS (throughput) kerak bo'lganda
Hono	Cloudflare Workers / Bun / Node	Serverless, Edge computing va mikro-servislar (o'ta yengil, 0 dependency)

---

16. Database Drayverlar, ORM va Query Builderlar

16.1. Drizzle ORM

• Vazifasi: TypeScript ekotizimidagi eng tez o'sayotgan, SQL ga eng yaqin va nol-overhead beruvchi type-safe ORM.
• O'rnatish: npm i drizzle-orm pg va npm i -D drizzle-kit
• Prisma vs Drizzle: Prisma dasturchiga juda qulay va tayyor abstraksiya beradi; Drizzle esa to'g'ridan-to'g'ri SQL so'rovlarini tushunadigan senior dasturchilar uchun maksimal tezlik va past resurs sarfini ta'minlaydi.

---

17. Autentifikatsiya, Shifrlash va Xavfsizlik

17.1. jose — Web Crypto JWT

• Vazifasi: Eskirgan jsonwebtoken kutubxonasi o'rnini bosuvchi, V8 Web Crypto API ustida ishlovchi, Node.js, Deno, Bun va Cloudflare Edge platformalarida birdek ishlaydigan eng xavfsiz JWT standarti.
• O'rnatish: npm i jose

17.2. argon2 va bcrypt

• Vazifasi: Parollarni xeshlash.
• Senior maslahati: Zamonaviy loyihalarda parollar uchun OWASP tavsiyasi bo'yicha Argon2id (npm i argon2) birinchi tanlov hisoblanadi (GPU va ASIC hujumlariga qarshi xotira qiyinligi bilan himoyalangan).

---

18. Asinxron Navbatlar va Fon Vazifalari

18.1. BullMQ

• Vazifasi: Redis Streams asosidagi, sanoat standartidagi navbat tizimi.
• Imkoniyatlari: Job retry (exponential backoff), kechiktirilgan vazifalar (delayed jobs), takrorlanuvchi cron vazifalar, rate limiting va parallel ishlovchi workerlar klasteri.
• O'rnatish: npm i bullmq ioredis

---

19. Logging, Telemetriya va Monitoring

19.1. Pino

• Vazifasi: JSON formatida o'ta yuqori tezlikda log yozuvchi asinxron logger (Winston dan 5 barobar tez).
• O'rnatish: npm i pino va npm i -D pino-pretty

19.2. Sentry

• Vazifasi: Frontend va Backend'da real foydalanuvchilarda yuz bergan har qanday xatolikni, stack trace, brauzer versiyasi va foydalanuvchi qadamlari bilan ushlab olib bildirishnoma beruvchi platforma.
• O'rnatish: npm i @sentry/node yoki npm i @sentry/react

---

20. CLI va Terminal Asboblari

Node.js yordamida chiroyli terminal buyruqlari yaratish:

• commander (npm i commander) — buyruqlar, opsiyalar (--port 3000) va help menyusini boshqarish.
• chalk (npm i chalk) — terminal matnlarini rang-barang qilish (yashil, qizil, qalin).
• ora (npm i ora) — terminalda yuklanish aylanasi (spinner).
• @clack/prompts (npm i @clack/prompts) — zamonaviy, chiroyli interaktiv CLI so'rovnomalari (Vite yoki Astro kabi interaktiv savol-javob oynalari).

---

21. Testlash va Mocking

• Vitest (npm i -D vitest) — Vite asosidagi o'ta tezkor unit-test tizimi (Jest dan ancha tez).
• Playwright (npm i -D @playwright/test) — zamonaviy E2E brauzer testlari (Chromium, Firefox, WebKit da haqiqiy foydalanuvchi harakatlarini sinash).
• MSW (Mock Service Worker) (npm i -D msw) — API so'rovlarini tarmoq darajasida ushlab, soxta javoblar qaytarish (testlar va frontendni backend bitmasdan turib ishlab chiqish uchun eng zo'r vosita).
• Faker.js (npm i -D @faker-js/faker) — testlar va demo bazalar uchun realistik ismlar, manzillar, telefonlar va matnlarni generatsiya qilish.

---

22. Tooling, Build va Paket Menejerlari

• pnpm: Qattiq havolalar (hard links) va CAS (Content-Addressable Storage) orqali disk xotirasini tejovchi, phantom dependencies xatosini oldini oluvchi zamonaviy paket menejeri.
• Biome (@biomejs/biome): Rust tilida yozilgan, ESLint va Prettier o'rnini bosuvchi, ulardan 25-30 barobar tezroq ishlovchi yaxlit linter va formatter.
• Turborepo: Monorepolar uchun keshlovchi va vazifalarni parallel bajaruvchi build tizimi.
• tsup: TypeScript kutubxonalarini ESM va CJS formatlarida bir necha millisekundda paketlovchi (bundle qiluvchi) esbuild asosidagi vosita.

---

Xulosa va Amaliy Yo'l-yo'riq

Ushbu ensiklopediya — zamonaviy IT sanoatining asboblar sandig'idir (toolbox). Dasturchi sifatida har bir vositani yodlash shart emas, ammo har bir muammo uchun qaysi vosita eng optimal yechim ekanligini bilish — Senior muhandislik darajasining asosiy belgisidir!