home

Routingni qura boshlaymiz. Boshidan har bir routni qo'ymasdan, ish jarayoni sari qo'shib boramiz. Birinchi main page ya’ni / dan boshlaymiz va uni vyorstkasiga o'tamiz

Korishingiz bo'yicha bizning har bir ekranimizda bir xil header va footer ishlatilgan. Bundan kelib chiqib biz har bir ekran uchun bitta layout(ekranlarimizni o'rab turadigan qobiq) component yaratib olsak bo'ladi.

Bu yo'l bilan biz kodni ajratilishi va qayta takrorlanavermasligiga erishamiz. Kelajakda barcha ko’p takrorlanadigan elementlarga shu yo'lni qo'llashni maslahat beraman.

Ko'rishingiz bo'yicha bizda media kontent kam emas shuning uchun saytimiz performance ni boshidan o'ylab lazy loading uchun packagelar o'tkazamiz.

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

https://web.dev/articles/lazy-loading-images

react: https://www.npmjs.com/package/react-lazy-load-image-component

vue: https://github.com/hilongjw/vue-lazyload

angular: https://angular.io/guide/image-directive

Home pageni UI qismi tayyor bo'lgandan keyin, birinchi backend bilan muloqotni o'rnatishga harakat qilsak bo'ladi

Postman documentation

https://documenter.getpostman.com/view/25857666/2sA3JJ7hNo

Bu linkni bosib uni ichidagi documentatsiyani o'z postmaningizga local yuklab olsangiz bo'ladi. Faqat u to'liq ishlashi uchun siz postmanda https://api.markt.circle.uz/api ni BaseUrl degan variablega qo'yishingiz kerak. Buning uchun siz postman

Backend bilan muloqot qilish uchun birinchi tayyorgarlikni boshlaymiz.

Bizning web ilovamizdan backendga request yuborish uchun bizga uning baseUrl kerak boladi.

BaseUrlini va boshqa sizning saytingiz uchun kerak bo'lgan ma'lumotlarni envoirement variablelarda saqlash yaxshi hisoblanadi.

https://create-react-app.dev/docs/adding-custom-environment-variables/

https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

https://angular.io/guide/build#configuring-application-environments

Biz codimizda turib baseUrl ni ishlatishimiz uchun .env faylga

BASE_URL=https://api.markt.circle.uz/api

degan variableni yozamiz

Api degan papka ochib u yerga backend bilan muloqot qilish uchun kerakli funksiyalarni yozib qo'ya boshlasak boladi. Menda odatda api folder shunday tuzulishda boladi:

index.ts fileda men faqatgina request qila oladigan funksiya yoki object yaratib olaman va qolgan papkalarni vazifa bo'yicha bo'lib chiqaman. catalog bilan ishlaydigan requestlarni catalog papkaga, product bilan ishlaydigan requestlarni product papkaga. Uning vazifasi berilgan parametrlar, metodlar va siz bergan pathni .env fayldagi baseUrl bilan bog’lash orqali backendga request yuborish va statuslarni yoki kelgan data orqali error yoki to'g'ri response qaytarish. Bunday funksiya bizga qobiq bo'lib xizmat qiladi. Agar tushunmagan bo'lsangiz hozir osonroq tushuntirib beraman.

Tasavvur qiling siz bu yo’l bilan yozmay, har bir API requestni component yoki boshqa joy ichida fetch orqali yozib chiqdingiz, kelajakda sizga: avtorizatsiya uchun local storagedan token olib qo'yish kerak deyishdi. Bu holatda siz har bir yozgan funksiyangizni o'zgartirib chiqasiz. (mayli nima qilibdi deyishingiz mumkin :p)

Undan keyin teamlidingiz kelib: fetch eski bo'lib qoldi, fetchni yangiroq axiosga o'zgartiraylik desa yana o'zgartirasiz. Bu ketishda, muntazam kodni o'zgartirishingiz sababli yoki UI qism bilan kodinigiz aralashib ketishi: kod xunuk yoki tushunarsiz holatga olib keladi.

Bizning holatda tashqariga olib chiqilgan index fileda birgina funkisya ozgarishi butun codebase ni ishlashiga tasir qiladi, fetchni o'rniga axios qoysangiz ham, errorlarni tekshiruvini o'zgartirsangiz ham, sizni index filengiz bir ish qiladi u backendga request yuboradi undan ortiq emas, agar kodni to'g'ri yozsangiz qolgan joylarda ham to'g'ri ishlaydi.

Backend requestlarni sinash uchun promotovarlarni olib ko'rishga harakat qilsak bo'ladi. Categoriyalarni olganingizdan keyin yangi tovarlar seksiyasi uchun request qilsangiz bo'ladi.

Performance uchun yana bir maslahat, ko'rishingiz bo'yicha categoriyalar va yangi tovarlar seksiyasi bizning saytga kirishimiz bilan birinchi ko'zga tushadigan seksiyalarimiz emas.

Shuning uchun biz bu seksiyalarni lazy load qilsak boladi, ya’ni ularni faqatgina client shu seksiyalarga qarab scroll qilganda render qilamiz va backendga request yuboramiz

Intersections observer link: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Libs for framework:

https://www.npmjs.com/package/react-intersection-observer

https://vueuse.org/core/useIntersectionObserver/

https://giancarlobuomprisco.com/angular/intersection-observer-with-angular