Hischool-ийг бүтээж эхлэхдээ бид нэг тодорхой шийдвэр гаргасан:
Вебд суурилсан бол буулт биш — суурь.
Вебийг хоёрдогч платформ гэж үзэхийн оронд бид Hischool-ийг
бусад бүхнийг тэжээх үндсэн веб апп болгон зохион бүтээсэн — мобайл, десктоп, цаашлаад бусад бүх платформ.
Энд бид яагаад, хэрхэн Hischool-ийн веб аппыг ингэж бүтээснээ тайлбарлана.
Вебд суурилсан архитектур
Hischool нь Progressive Web App (PWA) хэлбэрээр бүтээгдсэн.
Энэ нь:
- Нэг кодын сан
- Нэг эх сурвалж
- Бүх төхөөрөмж дээр ижил туршлага
Ижил веб апп дараах орчинд ажиллана:
- Десктоп хөтөч
- Гар утасны хөтөч
- Андройд (TWA)
- iOS (native wrapper)
- Десктоп апп (wrapper)
Анхнаасаа бид зөвхөн харагдах байдлыг биш —
хариу үйлдэл, гүйцэтгэл, тогтвортой байдал-ыг голчилж дизайныг хийсэн.
Reactive систем дээр суурилсан
Hischool бол бодит цагийн боловсролын сүлжээ.
Тиймээс интерфэйс нь үргэлж хамгийн сүүлийн төлөвийг илэрхийлэх ёстой.
Бид веб аппыг бүхэлд нь reactive систем дээр, SolidJS ашиглан бүтээсэн.
Яагаад SolidJS вэ?
Учир нь:
- Нарийвчилсан reactive системтэй (virtual DOM байхгүй)
- Зөвхөн өөрчлөгдсөн хэсгийг шинэчилдэг
- Их хэмжээний өгөгдөл дээр ч хурдан
- Бодит цагийн апп-д байгалийн мэт өргөждөг
SolidJS нь бидэнд vanilla JS-ийн гүйцэтгэл + орчин үеийн фрэймвөркийн хөгжүүлэгчийн туршлагыг өгсөн.
Tooling: Vite + TypeScript
Бүх апп TypeScript дээр бичигдсэн:
- Илүү аюулгүй код
- Refactor хийхэд найдвартай
- Фронтэнд ба бакэнд хооронд тодорхой contract
Бид Vite ашигладаг:
- Маш хурдан dev server
- Шууд HMR
- Production build өндөр гүйцэтгэлтэй
Бүх дэлгэцэд дасан зохицно
Hischool веб апп бүрэн responsive:
- Гар утас
- Таблет
- Лаптоп
- Том дэлгэц
Бид “мобайл хувилбар” ба “десктоп хувилбар” гэж тусдаа хийсэнгүй.
Бид нэг adaptive UI систем бүтээсэн.
Ямар ч боломж алга болохгүй. Ямар ч туршлага багасахгүй.
Оффлайнд ажиллах чадвар
Интернэт төгс биш үед ч Hischool ажиллана.
Бид ашигладаг:
- Service worker
- Ухаалаг cache стратеги
- Background sync
Өгөгдөл локал хадгалагдаж, хэрэглэгчид
хурдан, тогтвортой туршлага авна.
Бодит цагийн синк
Hischool веб апп нь бакэндтэй нягт уялдаатай.
- Өгөгдөл бодит цагт шинэчлэгдэнэ
- Интерфэйс дээр шууд тусгагдана
- Хуудас дахин ачааллах шаардлагагүй
- Гараар хуудас шинэчлэх шаардлагагүй
Сургууль дээр ямар нэг зүйл болох үед —
та шууд харна.
Яагаад энэ чухал вэ?
Энэ архитектур бидэнд дараах боломжийг өгдөг:
- Илүү хурдан хөгжүүлэлт
- Нэг бүтээгдэхүүн удирдах
- Бүх платформ синктэй байх
- Шинэчлэлт шууд хүргэх
- Апп дахин бүтээх шаардлагагүй
Иймээс бид 3 хоногт мобайл апп гаргах боломжтой болсон.
Технологийн тойм
- Хэл: TypeScript / JavaScript
- Үндсэн сан: SolidJS
- Bundler: Vite
- Апп төрөл: Progressive Web App (PWA)
- Архитектур: Reactive, real-time, web-first
- Платформ: Веб, Андройд, iOS, Десктоп
Дараа нь юу байна?
Энэ бол зөвхөн эхлэл.
Дараагийн өөрчлөлтийн түүхүүдэд бид:
- Бакэнд архитектур
- Мобайл wrapper
- Десктоп апп
- Realtime messaging систем
- Offline sync стратеги
зэрэгийг дэлгэрэнгүй хуваалцана.
Хүлээгээрэй 👀
Hischool Web бол зүгээр вебсайт биш —
бүх платформыг хөдөлгөдөг хөдөлгүүр.