Jonli veb-interfeys toʻgʻridan chipdan

Nega satrlardan yigʻilgan eski HTML sahifa — boshi berk koʻcha

Klassik sketch sahifani ulkan String ichiga HTML’ni yopishtirib yigʻadi va har soʻrovda qaytaradi. Bitta strelka uchun ishlaydi, keyin — parchalanadi: reaktivlik yoʻq (har oʻzgarish — toʻliq qayta yuklash), komponentlar yoʻq, va markup proshivkada oʻqib boʻlmaydigan «satr sho‘rvasi» boʻlib yashaydi. Ikkinchi grafik yoki teskari aloqali boshqaruv kerak boʻlishi bilanoq — bundan oshib ketasan.

Haqiqiy SPA yigʻ — keyin fleshga joyla

Zamonaviy yoʻl — front-end’ni oddiy veb-ilova kabi yigʻish (Vue, Svelte, React yoki oddiy zamonaviy vanilla) — bundler (Vite) kichik, minifikatsiya qilingan index.html plus JS/CSS beradi. Bu fayllarni ESP flesh-FS’iga (LittleFS yoki SPIFFS) qoʻyasan va statik sifatida berasan. Chip freymvork yurgizmaydi — u faqat tayyor fayllarni uzatadi, shu sabab Svelte-ilova ham, «yalangʻoch» ham ESP’ga bir xil turadi.

Jonli maʼlumot WebSocket orqali, polling emas

Reaktivlik — transportda. Brauzer taymer boʻyicha «yangilik bormi?» deb soʻragani oʻrniga WebSocket och (ESPAsyncWebServer orqali) va qurilma qiymat oʻzgargan zahoti push qilsin:

loop():   datchik oʻqiladi   →   ws push {temp: 24.1}     // yuboramiz, soʻralishni kutmaymiz
brauzer:  ws.onmessage       →   gauge.value = 24.1        // joyida yangilanadi, qayta yuklashsiz

Bitta soket barcha vidjetlar maʼlumotini kichik JSON kadrlarda olib yuradi; sahifa joyida oʻzgaradi. Aynan shu beriladigan dashboardni hujjat emas, ilovaga aylantiradi — va xuddi shunday jonli reaksiya bildiradi agent yuzi ham.

RAM’ga eʼtibor ber — fleshdan ber, gzip, strim

Tuzoq — kattani RAM’da ushlash. Yigʻilgan SPA — oʻnlab kilobayt, uni String’ga oʻqima. Assetlarni fleshda gzip bilan siqilgan holda saqla va Content-Encoding: gzip sarlavhasi bilan strim qil — shunda saqlash ham, uzatish ham kichik. Katta oʻzgarmas bloklarni PROGMEM’da tut, boʻlaklab yubor, buferlarni erta boʻshat — qarang: ESP32 xotirasi qanday ishlaydi. Toʻgʻri qilinsa — boy UI uyumga deyarli tegmaydi.

Yoki buni umuman qoʻlda yozma

Yuqoridagilarning hammasi — bundler, FS’ga yuklash, WebSocket protokoli, RAM intizomi — oʻtkazib yuborsa boʻladigan haqiqiy ish. RisalDash butun front-end’ni (HTML, CSS, JS va WebSocket ulanishini) bir necha qator C++ dan generatsiya qiladi: vidjetlarni tasvirlaysan, oʻzgaruvchilarni bogʻlaysan — reaktiv dashboard oʻzi beriladi. Uning Zero-Waste UI’si ishlatilmagan vidjetlarni ham kesib tashlaydi, shuning uchun faqat ekrandagi narsaga toʻlaysan.

30 soniyalik qaror

Qoida: bitta qiymat → satr sahifa yetadi; maxsus mahsulot UI → SPA yigʻ va egalik qil; ovoragarchiliksiz haqiqiy dashboard → oʻzi generatsiya boʻlsin.