IlmHamroh
Python kursi/Python va boshqa tillar15/16-dars19 daqiqa
Mundarija (22)

30.15-dars: Python va JavaScript

30-QISM — PYTHON VA BOSHQA TILLAR · 15-dars


1. Kirish va motivatsiya

Til integratsiyasining eng keng tarqalgan holati — Python va JavaScript. Sabab oddiy: veb ilovalarda frontend (brauzer) faqat JavaScript'da ishlaydi (brauzer boshqa tilni bilmaydi), backend esa ko'pincha Python (Django, FastAPI). Ya'ni deyarli har veb loyiha ikki tilli. Ular qanday gaplashadi? Odatda JSON orqali (HTTP/REST — 23-qism): Python backend JSON qaytaradi, JavaScript frontend uni oladi. Lekin boshqa integratsiyalar ham bor: Node.js (JavaScript'ni serverda ishlatish), Python'ni JavaScript'dan chaqirish (bola jarayon), va eng qizig'i — Pyodide/WebAssembly (Python'ni to'g'ridan brauzerda ishlatish!). Bu dars Python va JavaScript qanday birga ishlashini tushuntiradi — har veb dasturchi biladigan integratsiya.

Python va JavaScript integratsiyasi — veb dunyosidagi eng keng tarqalgan til birlashuvi: JSON aloqa (HTTP/REST — Python backend ↔ JS frontend, 23-qism), rol taqsimi (JS — frontend/brauzer, Python — backend/logika), Node.js (JS serverda — Python bola jarayon), Pyodide/WebAssembly (Python brauzerda — WASM). Foydalanish: veb ilova (frontend+backend), to'liq stek. Bu 30.1 (til birlashtirish), 23-qism (REST/JSON) bilan bog'liq. Bu 23-qism (REST), 30.16 (polyglot) bilan bog'liq. Python + JS — veb standarti. JSON aloqa. Frontend + backend.

Real vaziyat. Veb ilova: Python (FastAPI backend — ma'lumot, biznes logika) va JavaScript (React frontend — brauzer interfeys). Ular JSON orqali gaplashdi (23-qism): foydalanuvchi tugma bosganda, JS fetch('/api/malumot') — Python backendga so'rov, Python JSON qaytardi ({"natija": ...}), JS uni ekranda ko'rsatdi. Har til o'z joyida: JS (brauzer — Python u yerda ishlamaydi), Python (server — logika, baza). Bu deyarli har veb loyihada (ikki til majburiy — brauzer faqat JS). Python + JS — veb ilova asosi (JSON ko'prik).

Bu darsda Python va JavaScript integratsiyasini o'rganamiz.

Bu darsda:

  • Nega Python + JavaScript
  • JSON aloqa (REST)
  • Rol taqsimi (frontend/backend)
  • Node.js integratsiya
  • Pyodide/WebAssembly (Python brauzerda)
  • Integratsiya amaliyoti
  • JS integratsiya vs kengaytma
  • Amaliy: Python+JS modeli

ℹ To'liq veb stek alohida vositalar talab qiladi; misollar integratsiya mantiqini (deterministik) modellashtiradi.


2. Nazariya — chuqur tushuntirish

2.1. Nega Python + JavaScript

Brauzer faqat JS'ni biladi:

BRAUZER (frontend):
   faqat JavaScript ishlaydi (Python emas!)
   → interfeys, foydalanuvchi bilan ishlash

SERVER (backend):
   Python (Django, FastAPI), Node.js, boshqalar
   → logika, ma'lumotlar bazasi, hisob

→ deyarli har veb loyiha ikki tilli (JS + backend)

Nega Python + JavaScript — veb dunyosining majburiy ikki tilligi: brauzer (frontend) faqat JavaScript'ni ishlatadi (brauzer boshqa tilni bilmaydi — JS yagona brauzer tili), server (backend) esa ko'pincha Python (Django, FastAPI — logika, baza). Sabab: brauzer JS'ga bog'langan (tarixiy, standart); Python veb serverda kuchli (ekotizim, oson); ikkalasi birga kerak (frontend JS + backend Python). Bu tanlov emas — majburiyat (brauzer faqat JS). Deyarli har veb loyihada (frontend + backend). Nega Python + JS — brauzer faqat JS, backend Python. Majburiy ikki til. Veb.

2.2. JSON aloqa (REST)

Ikki til JSON orqali:

javascript
// JavaScript frontend (brauzer)
const javob = await fetch('/api/foydalanuvchi/5');
const data = await javob.json();   // JSON → JS obyekt
console.log(data.ism);
python
# Python backend (FastAPI)
@app.get("/api/foydalanuvchi/{id}")
def ol(id: int):
    return {"ism": "Ali", "yosh": 25}   # dict → JSON (avtomatik)

JSON aloqa (REST) — Python va JS'ning asosiy bog'lanish usuli: JSON (JavaScript Object Notation — 23-qism) universal format (ikkala til ham tushunadi); Python backend JSON qaytaradi (dict → JSON), JS frontend uni oladi (fetch → JSON → obyekt). Sabab: ikki til umumiy til kerak (aloqa uchun); JSON ideal (JS'dan kelib chiqqan — tabiiy JS'ga, Python ham qo'llab-quvvatlaydi — json modul 12-qism). Oqim: JS fetch('/api/...') → Python backend → JSON javob → JS obyekt. Bu 23-qism (REST API) ning til-integratsiya nuqtai nazari. JSON — ikki til ko'prigi. fetch + backend. Universal format.

2.3. Rol taqsimi (frontend/backend)

Har til o'z joyida:

JavaScript (frontend):        Python (backend):
   interfeys (UI)                biznes logika
   foydalanuvchi hodisalar       ma'lumotlar bazasi
   brauzer (DOM)                 hisob, ML
   real vaqt (reaktivlik)        autentifikatsiya
        │                             │
        └──── JSON / HTTP ────────────┘

Rol taqsimi (frontend/backend) — Python va JS o'z joylarida: JavaScript (frontend — interfeys/UI, foydalanuvchi hodisalari, brauzer DOM, real vaqt reaktivlik), Python (backend — biznes logika, ma'lumotlar bazasi, hisob/ML, autentifikatsiya). Sabab: har til o'z sohasida kuchli (JS — brauzer/interfeys, Python — server/logika); vazifalar ajratiladi (frontend ko'rsatadi, backend hisoblaydi). Bu ajratish (separation of concerns — 27-qism): frontend (foydalanuvchi tajribasi), backend (ma'lumot/logika). Ular JSON/HTTP orqali 2.2-bob. Farq bir tilda hammasi (kamdan-kam — full-stack JS ham bor, lekin Python backend keng). Rol taqsimi — JS frontend, Python backend. Ajratish. Har til o'z joyida.

2.4. Node.js integratsiya

JavaScript serverda:

javascript
// Node.js — JavaScript'ni serverda ishlatish
// Python'ni Node.js'dan chaqirish (bola jarayon):
const { spawn } = require('child_process');
const py = spawn('python', ['hisob.py', '5', '3']);
py.stdout.on('data', (data) => {
    console.log('Python natija:', data.toString());
});

Node.js integratsiya — JavaScript'ni serverda ishlatish (brauzer emas — 2.1): Node.js JS runtime (server tarafi); ba'zan Node.js backend Python'ni chaqiradi (bola jarayon — child_process, ML/hisob uchun — 30.13 alohida jarayon kabi). Sabab: ba'zi jamoa frontend va backend'ni bir tilda (JS — Node.js) xohlaydi (bir til bilim), lekin ba'zi ish Python'da yaxshiroq (ML, ilmiy — ekotizim); Node.js Python'ni chaqiradi (bola jarayon — 30.2 subprocess kabi). Bu bir integratsiya usuli (Node.js ↔ Python — jarayon). Kamdan-kam (odatda REST — 2.2), lekin mavjud. Node.js — JS serverda. Python bola jarayon. Bir usul.

2.5. Pyodide/WebAssembly (Python brauzerda)

Python to'g'ridan brauzerda:

html
<!-- Pyodide — Python'ni BRAUZERDA ishlatish (WebAssembly) -->
<script src="pyodide.js"></script>
<script>
    let pyodide = await loadPyodide();
    pyodide.runPython(`
        import numpy as np
        natija = np.array([1, 2, 3]).sum()
    `);
    // Python brauzerda ishladi! (WASM orqali)
</script>

Pyodide/WebAssembly — Python'ni to'g'ridan brauzerda ishlatish (2.1 "brauzer faqat JS"ga istisno): WebAssembly (WASM — brauzerda ishlaydigan past daraja binar format, JS emas), Pyodide (CPython WASM'ga kompilyatsiya qilingan — Python brauzerda). Sabab: ba'zan brauzerda Python kerak (ilmiy hisob, ta'lim — numpy brauzerda); WASM buni mumkin qildi (Python interpretatori WASM'da ishlaydi). Pyodide brauzerda numpy, pandas ham ishlatadi (WASM). Cheklov: sekinroq (WASM — mahalliy emas), katta yuklab olish (Python WASM — MB). Foydalanish: ta'lim (brauzerda Python o'rgatish), ilmiy demo. Pyodide — Python brauzerda (WASM). Istisno. Ta'lim/demo.

2.6. Integratsiya amaliyoti

Python + JS integratsiya amaliyotlari: JSON/REST (asosiy — Python backend, JS frontend, 23-qism); rol taqsimi (JS interfeys, Python logika/baza); API shartnomasi (OpenAPI — 28.14, JSON tuzilma kelishuv); tur mos (JSON turlar — JS/Python farq: None↔null, dict↔object); CORS (brauzer xavfsizlik — backend ruxsat); Node.js (JS server — Python bola jarayon, kam); Pyodide (brauzerda Python — ta'lim/demo). Tuzoqlar: tur farqi (JS undefined, Python yo'q), sana format (JSON string — 12-qism ISO), CORS unutish (brauzer bloklaydi). Amaliyot — JSON/REST, rol taqsimi, shartnoma. Python + JS — JSON ko'prik, ajratish.

2.7. JS integratsiya vs kengaytma

Jihat Kengaytma (C/Rust — 30.3-12) JS integratsiya
Maqsad CPU tezlashtirish Frontend + backend
Integratsiya Bir jarayon (import) Tarmoq (JSON/HTTP)
Sabab Python sekin Brauzer faqat JS
Aloqa Funksiya chaqiruv JSON so'rov
Joy Bir dastur Ikki qism (brauzer/server)

JS integratsiya vs kengaytma — butunlay boshqa maqsad: kengaytma (C/Rust/C++ — 30.3-12, Python'ni tezlashtirish, bir jarayon, import, CPU-og'ir), JS integratsiya (Python + JS — frontend + backend, tarmoq JSON/HTTP, ikki qism — brauzer/server). Sabab: kengaytma — Python sekin (tezlashtirish); JS — brauzer faqat JS (majburiyat — 2.1). Farq: kengaytma tezlik (Python ichida C), JS arxitektura (frontend/backend ajralishi). Bu Go (30.13 — alohida xizmat) ga o'xshaydi (tarmoq aloqa), lekin JS majburiy (brauzer — tanlov emas). JS integratsiya kengaytma emas (tezlik emas — arxitektura). JS vs kengaytma — arxitektura vs tezlik. Brauzer majburiy vs Python tezlashtirish. Boshqa maqsad.

2.8. Python + JavaScript — veb ilovaning ikki yarmi

Python + JavaScript asosiy g'oyasi — veb ilovaning ikki yarmi: veb ilova majburan ikki tilli (brauzer faqat JS — frontend, backend ko'pincha Python — logika/baza), ular JSON/HTTP orqali gaplashadi (23-qism). Bu 30.1 (to'g'ri til to'g'ri ishga — JS brauzerda, Python serverda) ning eng keng tarqalgan amaliy holati (har veb loyiha). Rol taqsimi aniq: JS (foydalanuvchi interfeysi — brauzer), Python (biznes logika, ma'lumot — server); ular ajratilgan (27-qism — separation of concerns), JSON ko'prik 2.2-bob. Istisnolar: Node.js (JS server — Python chaqiradi), Pyodide (Python brauzerda — WASM, ta'lim). Bu 30.16 (polyglot) ning eng keng tarqalgan ko'rinishi. Python + JS — veb ikki yarmi (frontend/backend). JSON ko'prik. Majburiy.


3. Tez ma'lumotnoma

javascript
// JAVASCRIPT frontend (brauzer — faqat JS)
const javob = await fetch('/api/foydalanuvchi/5');
const data = await javob.json();   // JSON → JS obyekt
console.log(data.ism);
python
# PYTHON backend (FastAPI)
@app.get("/api/foydalanuvchi/{id}")
def ol(id: int):
    return {"ism": "Ali", "yosh": 25}   # dict → JSON
NEGA IKKI TIL:
   brauzer (frontend) — faqat JavaScript (majburiy)
   server (backend) — Python (logika, baza)

ROL TAQSIMI:
   JS — interfeys, DOM, foydalanuvchi (frontend)
   Python — logika, baza, ML (backend)
   aloqa — JSON / HTTP (REST — 23-qism)

MAXSUS INTEGRATSIYALAR:
   Node.js — JS serverda (Python bola jarayon)
   Pyodide/WASM — Python brauzerda (ta'lim/demo)

QOIDA: JSON/REST (asosiy) · rol taqsimi (JS front, Python back)

Python + JS xulosasi

Python + JS — veb majburiy ikki tilli (brauzer faqat JS)
JSON aloqa — REST/HTTP (Python backend ↔ JS frontend)
Rol taqsimi — JS interfeys (front), Python logika (back)
Node.js — JS serverda · Pyodide/WASM — Python brauzerda
JS integratsiya — arxitektura (kengaytma — tezlik, boshqa)

4. Batafsil misollar

To'liq veb stek alohida vositalar talab qiladi; misollar integratsiya mantiqini (deterministik) modellashtiradi.

Misol 1 — JSON aloqa (backend ↔ frontend)

python
"""JSON aloqa: Python backend → JSON → JS frontend (model)."""

import json


def backend_javob(user_id: int) -> str:
    # Python backend: dict → JSON
    data = {"id": user_id, "ism": "Ali", "yosh": 25}
    return json.dumps(data)


def frontend_oqish(json_str: str) -> dict:
    # JS frontend: JSON → obyekt (model)
    return json.loads(json_str)


def main() -> None:
    print("=== 1. Python backend ===")
    javob = backend_javob(5)
    print(f"  JSON qaytaradi: {javob}")

    print("\n=== 2. Tarmoq (HTTP) ===")
    print("  GET /api/foydalanuvchi/5 → JSON")

    print("\n=== 3. JS frontend ===")
    data = frontend_oqish(javob)
    print(f"  obyekt: ism={data['ism']}, yosh={data['yosh']}")

    print("\n=== 4. Ko'prik ===")
    print("  JSON — ikki til umumiy tili")
    print("  ⭐ JSON aloqa — Python ↔ JS (REST)")


if __name__ == "__main__":
    main()

Natijaning muhim qismi:

text
=== 1. Python backend ===
  JSON qaytaradi: {"id": 5, "ism": "Ali", "yosh": 25}

=== 2. Tarmoq (HTTP) ===
  GET /api/foydalanuvchi/5 → JSON

=== 3. JS frontend ===
  obyekt: ism=Ali, yosh=25

=== 4. Ko'prik ===
  JSON — ikki til umumiy tili
  ⭐ JSON aloqa — Python ↔ JS (REST)

Nima ko'rsatdi: 2.1, 2.2-bo'limlar.

Misol 2 — Rol taqsimi (frontend/backend)

python
"""Rol taqsimi: JS frontend vs Python backend (model)."""


ROLLAR = {
    "JavaScript (frontend)": ["interfeys (UI)", "DOM", "foydalanuvchi hodisalar"],
    "Python (backend)": ["biznes logika", "ma'lumotlar bazasi", "ML/hisob"],
}


def main() -> None:
    print("=== 1. JavaScript (frontend) ===")
    for r in ROLLAR["JavaScript (frontend)"]:
        print(f"  {r}")

    print("\n=== 2. Python (backend) ===")
    for r in ROLLAR["Python (backend)"]:
        print(f"  {r}")

    print("\n=== 3. Aloqa ===")
    print("  JSON / HTTP (REST)")

    print("\n=== 4. Ajratish ===")
    print("  frontend ko'rsatadi, backend hisoblaydi")
    print("  ⭐ Rol taqsimi — JS front, Python back (ajratish)")


if __name__ == "__main__":
    main()

Natijaning muhim qismi:

text
=== 1. JavaScript (frontend) ===
  interfeys (UI)
  DOM
  foydalanuvchi hodisalar

=== 2. Python (backend) ===
  biznes logika
  ma'lumotlar bazasi
  ML/hisob

=== 3. Aloqa ===
  JSON / HTTP (REST)

=== 4. Ajratish ===
  frontend ko'rsatadi, backend hisoblaydi
  ⭐ Rol taqsimi — JS front, Python back (ajratish)

Nima ko'rsatdi: 2.3-bo'lim.

Misol 3 — Tur mosligi (JSON JS↔Python)

python
"""Tur mosligi: JSON turlar JS ↔ Python (model)."""


TUR_JADVAL = {
    "object": "dict",
    "array": "list",
    "string": "str",
    "number": "int/float",
    "true/false": "True/False",
    "null": "None",
}


def main() -> None:
    print("=== 1. JSON tur jadvali (JS ↔ Python) ===")
    for js, python in TUR_JADVAL.items():
        print(f"  JSON {js:12} → Python {python}")

    print("\n=== 2. Muhim farqlar ===")
    print("  null ↔ None (JS null, Python None)")
    print("  true/false ↔ True/False")

    print("\n=== 3. JS'ga xos ===")
    print("  undefined — Python'da yo'q (ehtiyot)")

    print("\n=== 4. Sana ===")
    print("  JSON string (ISO — 12-qism), avtomatik emas")
    print("  ⭐ Tur mosligi — JSON turlar (farqlarga ehtiyot)")


if __name__ == "__main__":
    main()

Natijaning muhim qismi:

text
=== 1. JSON tur jadvali (JS ↔ Python) ===
  JSON object       → Python dict
  JSON array        → Python list
  JSON string       → Python str
  JSON number       → Python int/float
  JSON true/false   → Python True/False
  JSON null         → Python None

=== 2. Muhim farqlar ===
  null ↔ None (JS null, Python None)
  true/false ↔ True/False

=== 3. JS'ga xos ===
  undefined — Python'da yo'q (ehtiyot)

=== 4. Sana ===
  JSON string (ISO — 12-qism), avtomatik emas
  ⭐ Tur mosligi — JSON turlar (farqlarga ehtiyot)

Nima ko'rsatdi: 2.6-bo'lim.

Misol 4 — Integratsiya turlari

python
"""Integratsiya turlari: REST/Node.js/Pyodide (model)."""


TURLAR = {
    "JSON/REST": {"joy": "Python server + JS brauzer", "keng": "asosiy"},
    "Node.js": {"joy": "JS server → Python bola jarayon", "keng": "kam"},
    "Pyodide/WASM": {"joy": "Python brauzerda", "keng": "ta'lim/demo"},
}


def main() -> None:
    print("=== 1. Integratsiya turlari ===")
    for nom, info in TURLAR.items():
        print(f"  {nom}: {info['joy']} ({info['keng']})")

    print("\n=== 2. Asosiy ===")
    print("  JSON/REST (deyarli har veb loyiha)")

    print("\n=== 3. Pyodide (istisno) ===")
    print("  Python brauzerda (WASM — 'brauzer faqat JS'ga istisno)")

    print("\n=== 4. Tanlov ===")
    print("  veb ilova → JSON/REST (standart)")
    print("  ⭐ Integratsiya — JSON/REST asosiy, boshqalar maxsus")


if __name__ == "__main__":
    main()

Natijaning muhim qismi:

text
=== 1. Integratsiya turlari ===
  JSON/REST: Python server + JS brauzer (asosiy)
  Node.js: JS server → Python bola jarayon (kam)
  Pyodide/WASM: Python brauzerda (ta'lim/demo)

=== 2. Asosiy ===
  JSON/REST (deyarli har veb loyiha)

=== 3. Pyodide (istisno) ===
  Python brauzerda (WASM — 'brauzer faqat JS'ga istisno)

=== 4. Tanlov ===
  veb ilova → JSON/REST (standart)
  ⭐ Integratsiya — JSON/REST asosiy, boshqalar maxsus

Nima ko'rsatdi: 2.4, 2.5-bo'limlar.


5. To'g'ri va noto'g'ri tushunishlar

Noto'g'ri fikr To'g'risi
"Brauzerda Python ishlaydi" Faqat JS (Pyodide/WASM — istisno)
"Bitta til yetadi (veb)" JS (front) + Python (back) majburiy
"JS = Python kengaytma" Arxitektura (front/back), tezlik emas
"null = None (bir xil)" Mos, lekin turli til (o'girish)
"undefined Python'da bor" Yo'q (JS'ga xos — ehtiyot)
"Node.js brauzer" Node.js server (JS serverda)
"REST'siz gaplashadi" JSON/HTTP (umumiy til)
"Sana avtomatik" JSON string (ISO — qo'lda o'girish)

6. Keng tarqalgan xatolar va yechimlari

1. CORS unutish

python
# frontend fetch bloklandi (CORS)                             # ⚠️
# backend CORS ruxsat (frontend domeni)                        # ✅

2. undefined kutish (Python)

python
# JS undefined Python'da (yo'q)                               # ⚠️
# null ↔ None (undefined emas)                                 # ✅

3. Sana avtomatik deb

python
# datetime → JSON avtomatik (xato)                            # ⚠️
# ISO string (12-qism) — qo'lda o'girish                       # ✅

4. Brauzerda Python (Pyodide'siz)

python
# brauzerda to'g'ridan Python (ishlamaydi)                    # ⚠️
# JS (front) yoki Pyodide/WASM (maxsus)                        # ✅

5. Shartnomasiz JSON (katta loyiha)

python
# frontend/backend turli JSON tuzilma (mos emas)              # ⚠️
# OpenAPI (28.14 — shartnoma, kelishilgan)                     # ✅

6. Tur o'girishni unutish

python
# JS number (float) Python int deb                            # ⚠️
# tur mosligi (int/float — ehtiyot)                            # ✅

7. Node.js'ni brauzer deb

python
# Node.js DOM ishlatish (brauzer emas)                        # ⚠️
# Node.js server (DOM yo'q — brauzer JS)                       # ✅

7. Integratsiya — bu bilim qayerda kerak bo'ladi

  • 23-qism (o'tilgan): REST/JSON — asosiy aloqa
  • 30.16-dars: Polyglot arxitektura — ko'p til
  • 30.1-dars (o'tilgan): To'g'ri til to'g'ri ishga
  • 28.14-dars (o'tilgan): OpenAPI — shartnoma
  • 12-qism (o'tilgan): JSON — sana, format

8. Eng yaxshi amaliyotlar

  1. JSON/REST (asosiy — Python back, JS front).

  2. Rol taqsimi (JS interfeys, Python logika).

  3. API shartnomasi (OpenAPI — 28.14).

  4. CORS (backend ruxsat — brauzer).

  5. Tur mosligi (null↔None, ehtiyot).

  6. Sana ISO string (12-qism — qo'lda).

  7. Pyodide/WASM (Python brauzerda — maxsus).

  8. JS integratsiya arxitektura (kengaytma — tezlik).


9. Amaliy topshiriq

Vazifa 1: Bashorat qiling

python
1.  # nega Python + JS?
2.  # brauzer qaysi til?
3.  # backend qaysi til?
4.  # aloqa qanday?
5.  # JSON nima?
6.  # rol taqsimi?
7.  # JS roli?
8.  # Python roli?
9.  # Node.js nima?
10. # Pyodide nima?
11. # null ↔ ?
12. # JS integratsiya vs kengaytma?
Javoblar
  1. Brauzer faqat JS, backend Python (majburiy)
  2. JavaScript (faqat)
  3. Python (Django, FastAPI) va boshqalar
  4. JSON / HTTP (REST)
  5. Universal format (ikki til tushunadi)
  6. JS frontend, Python backend
  7. Interfeys, DOM, foydalanuvchi (frontend)
  8. Logika, baza, ML (backend)
  9. JS serverda (Python bola jarayon)
  10. Python brauzerda (WebAssembly)
  11. None (JSON null → Python None)
  12. Arxitektura (front/back), kengaytma tezlik

Vazifa 2: Xatolarni tuzating

python
1.  # frontend fetch bloklandi

2.  # JS undefined Python'da

3.  # datetime → JSON avtomatik

4.  # brauzerda to'g'ridan Python

5.  # frontend/backend turli JSON
Javoblar
python
1.  CORS ruxsat (backend)

2.  null ↔ None (undefined emas)

3.  ISO string (qo'lda o'girish)

4.  JS yoki Pyodide/WASM

5.  OpenAPI (shartnoma)

Vazifa 3: JSON aloqa

Modellang:

  1. Backend dict
  2. JSON
  3. Frontend obyekt
  4. Ko'prik

Vazifa 4: Rol taqsimi

Modellang:

  1. JS frontend
  2. Python backend
  3. Aloqa
  4. Ajratish

Vazifa 5: Tur mosligi

Modellang:

  1. object/dict
  2. null/None
  3. undefined
  4. Sana

Vazifa 6: Integratsiya turlari

Modellang:

  1. JSON/REST
  2. Node.js
  3. Pyodide
  4. Asosiy

Vazifa 7: O'ylash

Veb ilova majburan ikki tilli — brauzer faqat JavaScript'ni biladi (frontend), backend esa Python bo'lishi mumkin. Nima uchun "platforma cheklovi" (brauzer faqat JS) arxitekturaviy qarorlarni majburlaydi (tanlov emas), va nega bunday "berilgan cheklovlarni" tan olish (ular bilan kurashish o'rniga) muhandislik donoligining belgisi?

Javob

Qisqa javob: "Platforma cheklovi" arxitekturaviy qarorni majburlaydi, chunki: ba'zi cheklovlar o'zgartirib bo'lmaydi (berilgan — brauzer JS'ga bog'langan, bu bitta muhandis qarori emas, butun veb ekotizim standarti); bunday cheklov "tanlov"ni yo'q qiladi (frontend majburan JS — Python'ni brauzerga qo'yib bo'lmaydi, Pyodide/WASM istisno lekin cheklangan); shuning uchun arxitektura bu cheklovga moslashadi (frontend JS, backend erkin). "Nega berilgan cheklovlarni tan olish donolik": (1) kurash behuda — o'zgartirib bo'lmas cheklov bilan kurashish (masalan brauzerni Python biladigan qilishga urinish) — vaqt/kuch behuda (imkonsiz); (2) energiyani to'g'ri yo'naltirish — cheklovni qabul qilib, uning ustida qurish (JS frontend qil — yaxshi qil) — samarali; (3) cheklov ijodni yo'naltiradi — "brauzer faqat JS" cheklovi aniq arxitektura beradi (frontend/backend ajralishi — yaxshi dizayn); cheksiz erkinlik chalkashlik; (4) realizm — muhandislik real dunyo cheklovlari ichida ishlaydi (fizika, platforma, byudjet) — ularni inkor etish loyihani buzadi. Cheklovlarni ajratish muhim: o'zgartirib bo'lmas (brauzer JS, fizika qonunlari, tashqi API) — qabul qil (moslash); o'zgartirib bo'ladigan (o'z kod, kutubxona tanlovi) — yaxshila. Donolik — farqni bilish (Serenity ibodati kabi: o'zgartirib bo'lmasni qabul qil, bo'ladiganni o'zgartir, farqni bil). "Berilgan cheklovlar" ko'pincha yashirin ne'mat: ular qaror maydonini kichraytiradi (kamroq variant — osonroq qaror), aniq tuzilma beradi (brauzer JS → frontend/backend arxitektura tabiiy). Muhandislik saboqlari: ba'zi cheklovlar berilgan (o'zgartirib bo'lmas — platforma, fizika); ular bilan kurashma (behuda), ustida qur (moslash); cheklov ijodni yo'naltiradi (aniq tuzilma); o'zgartirib bo'lmas vs bo'ladigan cheklovni ajrat (donolik); berilgan cheklov — ko'pincha yashirin ne'mat (qaror osonlashadi). Python+JS misolida: "brauzer faqat JS" (berilgan) qabul qilinadi → frontend JS, backend Python (aniq, yaxshi arxitektura) — kurash emas, moslash.

1. Nega platforma cheklovi majburlaydi

  • Ba'zi cheklov o'zgartirib bo'lmas (brauzer JS — ekotizim standarti)
  • Tanlovni yo'q qiladi (frontend majburan JS)
  • Arxitektura moslashadi (frontend JS, backend erkin)

2. Nega cheklovni tan olish donolik

  • Kurash behuda (o'zgartirib bo'lmas — imkonsiz)
  • Energiyani to'g'ri yo'naltirish (ustida qur)
  • Cheklov ijodni yo'naltiradi (aniq tuzilma)
  • Realizm (real cheklovlar ichida)

3. Cheklov turlari

Tur Misol Yondashuv
O'zgartirib bo'lmas Brauzer JS, fizika Qabul qil (moslash)
O'zgartirib bo'ladigan O'z kod, kutubxona Yaxshila

4. Cheklov — yashirin ne'mat

Qaror maydonini kichraytiradi (kamroq variant — oson qaror). Aniq tuzilma (brauzer JS → frontend/backend).

5. Muhandislik saboqlari

  1. Ba'zi cheklov berilgan (o'zgartirib bo'lmas)
  2. Kurashma (behuda), ustida qur (moslash)
  3. Cheklov ijodni yo'naltiradi (tuzilma)
  4. O'zgartirib bo'lmas vs bo'ladigan (ajrat)
  5. Berilgan cheklov — yashirin ne'mat

6. Xulosa

  1. Platforma cheklovi majburlaydi (brauzer JS)
  2. Berilganni qabul qil (kurash behuda)
  3. Cheklov aniq arxitektura beradi (front/back)
  4. O'zgartirib bo'lmas vs bo'ladigan (donolik)

Nimani mustahkamlaydi: 2.1, 2.8-bo'limlar.


Xulosa

Bu darsda Python va JavaScript integratsiyasini o'rgandik.

Eng muhim uch fikr:

  1. Nega ikki til va JSON aloqa. Nega Python + JavaScript — veb dunyosining majburiy ikki tilligi: brauzer (frontend) faqat JavaScript (brauzer boshqa tilni bilmaydi — standart), server (backend) ko'pincha Python (Django, FastAPI); ikkalasi birga kerak (tanlov emas — majburiyat). JSON aloqa (REST) — asosiy bog'lanish: JSON universal format (ikkala til tushunadi), Python backend JSON qaytaradi (dict→JSON), JS frontend oladi (fetch→JSON→obyekt); 23-qism (REST) ning til-integratsiya nuqtai nazari.

  2. Rol taqsimi va maxsus integratsiyalar. Rol taqsimi (frontend/backend): JavaScript (interfeys/UI, DOM, foydalanuvchi hodisalari, real vaqt), Python (biznes logika, ma'lumotlar bazasi, ML, autentifikatsiya); vazifalar ajratiladi (27-qism separation of concerns), JSON/HTTP ko'prik. Maxsus integratsiyalar: Node.js (JS serverda — Python bola jarayon, kam), Pyodide/WebAssembly (Python brauzerda — WASM, "brauzer faqat JS"ga istisno, ta'lim/demo, lekin sekinroq/katta). Tur mosligi: JSON turlar (null↔None, object↔dict, JS undefined Python'da yo'q — ehtiyot).

  3. Kengaytma farqi va veb ikki yarmi. JS integratsiya vs kengaytma: kengaytma (C/Rust 30.3-12 — Python tezlashtirish, bir jarayon), JS integratsiya (frontend + backend — arxitektura, tarmoq JSON/HTTP); kengaytma tezlik, JS majburiy (brauzer — tanlov emas). Python + JS — veb ilovaning ikki yarmi (frontend JS + backend Python, JSON ko'prik); 30.1 (to'g'ri til to'g'ri ishga) ning eng keng tarqalgan holati, 30.16 (polyglot) eng ko'p ko'rinishi. Platforma cheklovi (brauzer faqat JS) arxitekturani majburlaydi (tanlov emas); berilgan cheklovlarni tan olish (kurash emas — moslash) muhandislik donoligi (o'zgartirib bo'lmas vs bo'ladigan cheklovni ajrat).

Keyingi darsda Polyglot arxitektura ni o'rganamiz: ko'p tilli tizimlar dizayni — qachon va qanday bir necha tilni birga ishlatish, integratsiya usullari (kengaytma, xizmat, aloqa) va murakkablik narxini boshqarish (butun 30-qism yakuni).

Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
30.15-dars: Python va JavaScript — IlmHamroh