Mundarija (22)
- 1. Kirish va motivatsiya
- 2. Nazariya — chuqur tushuntirish
- 2.1. Nega Python + JavaScript
- 2.2. JSON aloqa (REST)
- 2.3. Rol taqsimi (frontend/backend)
- 2.4. Node.js integratsiya
- 2.5. Pyodide/WebAssembly (Python brauzerda)
- 2.6. Integratsiya amaliyoti
- 2.7. JS integratsiya vs kengaytma
- 2.8. Python + JavaScript — veb ilovaning ikki yarmi
- 3. Tez ma'lumotnoma
- 4. Batafsil misollar
- Misol 1 — JSON aloqa (backend ↔ frontend)
- Misol 2 — Rol taqsimi (frontend/backend)
- Misol 3 — Tur mosligi (JSON JS↔Python)
- Misol 4 — Integratsiya turlari
- 5. To'g'ri va noto'g'ri tushunishlar
- 6. Keng tarqalgan xatolar va yechimlari
- 7. Integratsiya — bu bilim qayerda kerak bo'ladi
- 8. Eng yaxshi amaliyotlar
- 9. Amaliy topshiriq
- Xulosa
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 frontend (brauzer)
const javob = await fetch('/api/foydalanuvchi/5');
const data = await javob.json(); // JSON → JS obyekt
console.log(data.ism);# 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:
// 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:
<!-- 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 frontend (brauzer — faqat JS)
const javob = await fetch('/api/foydalanuvchi/5');
const data = await javob.json(); // JSON → JS obyekt
console.log(data.ism);# PYTHON backend (FastAPI)
@app.get("/api/foydalanuvchi/{id}")
def ol(id: int):
return {"ism": "Ali", "yosh": 25} # dict → JSONNEGA 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)
"""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:
=== 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)
"""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:
=== 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)
"""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:
=== 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
"""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:
=== 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 maxsusNima 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
# frontend fetch bloklandi (CORS) # ⚠️
# backend CORS ruxsat (frontend domeni) # ✅2. undefined kutish (Python)
# JS undefined Python'da (yo'q) # ⚠️
# null ↔ None (undefined emas) # ✅3. Sana avtomatik deb
# datetime → JSON avtomatik (xato) # ⚠️
# ISO string (12-qism) — qo'lda o'girish # ✅4. Brauzerda Python (Pyodide'siz)
# brauzerda to'g'ridan Python (ishlamaydi) # ⚠️
# JS (front) yoki Pyodide/WASM (maxsus) # ✅5. Shartnomasiz JSON (katta loyiha)
# frontend/backend turli JSON tuzilma (mos emas) # ⚠️
# OpenAPI (28.14 — shartnoma, kelishilgan) # ✅6. Tur o'girishni unutish
# JS number (float) Python int deb # ⚠️
# tur mosligi (int/float — ehtiyot) # ✅7. Node.js'ni brauzer deb
# 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
JSON/REST (asosiy — Python back, JS front).
Rol taqsimi (JS interfeys, Python logika).
API shartnomasi (OpenAPI — 28.14).
CORS (backend ruxsat — brauzer).
Tur mosligi (null↔None, ehtiyot).
Sana ISO string (12-qism — qo'lda).
Pyodide/WASM (Python brauzerda — maxsus).
JS integratsiya arxitektura (kengaytma — tezlik).
9. Amaliy topshiriq
Vazifa 1: Bashorat qiling
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
- Brauzer faqat JS, backend Python (majburiy)
- JavaScript (faqat)
- Python (Django, FastAPI) va boshqalar
- JSON / HTTP (REST)
- Universal format (ikki til tushunadi)
- JS frontend, Python backend
- Interfeys, DOM, foydalanuvchi (frontend)
- Logika, baza, ML (backend)
- JS serverda (Python bola jarayon)
- Python brauzerda (WebAssembly)
- None (JSON null → Python None)
- Arxitektura (front/back), kengaytma tezlik
Vazifa 2: Xatolarni tuzating
1. # frontend fetch bloklandi
2. # JS undefined Python'da
3. # datetime → JSON avtomatik
4. # brauzerda to'g'ridan Python
5. # frontend/backend turli JSONJavoblar
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:
- Backend dict
- JSON
- Frontend obyekt
- Ko'prik
Vazifa 4: Rol taqsimi
Modellang:
- JS frontend
- Python backend
- Aloqa
- Ajratish
Vazifa 5: Tur mosligi
Modellang:
- object/dict
- null/None
- undefined
- Sana
Vazifa 6: Integratsiya turlari
Modellang:
- JSON/REST
- Node.js
- Pyodide
- 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
- Ba'zi cheklov berilgan (o'zgartirib bo'lmas)
- Kurashma (behuda), ustida qur (moslash)
- Cheklov ijodni yo'naltiradi (tuzilma)
- O'zgartirib bo'lmas vs bo'ladigan (ajrat)
- Berilgan cheklov — yashirin ne'mat
6. Xulosa
- Platforma cheklovi majburlaydi (brauzer JS)
- Berilganni qabul qil (kurash behuda)
- Cheklov aniq arxitektura beradi (front/back)
- 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:
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.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, JSundefinedPython'da yo'q — ehtiyot).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).
Izohlar (0)
Izoh yozish uchun kiring.
- Hozircha izoh yo'q. Birinchi bo'ling!