Bizning reaktsiyamiz ilova dasturini qanday yaratdik

Hous.com/apps

O'tgan yili biz foydalanuvchilarimizning sekin va uzluksiz tarmoq ulanishlari tajribasini yaxshilash maqsadida PWA-ni ishga tushirdik. Bu biz intilayotgan mahsulotlar sifatidagi birinchi qadam edi. Biz hamjamiyatdan, ham mijozlarimizdan ijobiy javob oldik va xuddi shu muvaffaqiyatni mobil dasturimiz uchun ham ko'paytirishni xohladik.

Ideal mobil ilova o'rnini bosishning o'rniga mobil Internetning kengaytmasi bo'lishi kerak.

Muammolar

  • Biz 3 xil platformalarda tajriba orttirmoqdamiz, ya'ni: Android, iOS va Internet (ish stoli va mobil).
  • Bu 4 mantiqiy bazada biznes mantiqning takrorlanishini anglatadi, agar siz DRY-dan o'tib ketsangiz, bu eng yaxshi narsa emas.
  • Bundan tashqari, yangi funktsiyalarni kiritish yoki mavjud xususiyatlarni o'zgartirish 4 ta alohida kod bazasida kerakli o'zgarishlarni amalga oshirishni talab qiladi. Bu kengaytirib bo'lmaydi va platformalar tez orada sinxronlashmay qoladi.
  • Va nihoyat, biz har uchta platformaning har biri uchun ishlab chiquvchilarning 3 ta alohida guruhini qurishimiz va strategik ravishda kengaytirishimiz kerak edi.

Maqsadlar

Ushbu qiyinchiliklarni engish uchun biz JavaScript-da zamonaviy frontend stack bilan qurilgan yangi paydo bo'lgan platformali mahalliy ilovalar uchun tikishlarni joylashtirishga qaror qildik. Biz quyidagi asosiy maqsadlar bilan ilovalarni amalga oshirishni boshladik:

  • Ilovalar JavaScript-da yozilgan bo'lishiga qaramay, ular foydalanuvchilarning 'mahalliy' dasturlari bilan bog'lanadigan tajriba va sezgirlikka zarar etkazmasliklari kerak. Oddiy qilib aytganda, agar siz foydalanuvchi bo'lsangiz, ilova o'zini xuddi App Store yoki Play Store-ning boshqa biron bir mahalliy ilovasi kabi his qilishi kerak.
  • Ilova Android va iOS-da iloji boricha ko'proq kodlardan foydalanishi kerak. Bu DRY tamoyiliga mos keladi. Bundan tashqari, kodni saqlash osonroq bo'ladi va xususiyatlarni qo'shish / o'zgartirish / o'chirish mumkin bo'lgan fayllarning minimal soniga tegishni anglatadi.
  • Va nihoyat, eng muhimi, ishlatiladigan stakan bizning veb-muhandislar guruhimizga tanish bo'lishi kerak va platformaning o'ziga xos ishlab chiqaruvchilariga bog'liqlikni kamaytirish kerak. Bu uy-joy binosida avtobus omilining ko'payishi bilan ham bog'liq.

Stek

  • reaktsiya-navigatsiya - hali dastlabki kunlarida, lekin u ko'p munozarali navigatsiya masalasini Animated API yordamida deklarativ tarzda hal qiladi. Shuningdek, u bizning boshqaruv tizimimizga yaxshi mos keladi, chunki bu faqat JS asosidagi echim. Biroq, biz boshqa mahalliy va gibrid navigatsiya echimlarini ham o'rganmoqdamiz.
  • redux-kuzatilishi mumkin - JS ekotizimi async holatini boshqarishning eng yaxshi echimini topmoqda, ammo oxir-oqibat bu ko'proq "har kimga o'z muammosi". Biz redux-kuzatiladigan vositalardan foydalanishga qaror qildik, chunki bu bizga yon ta'sirlarni yaxshi ajratib olishga va RxJS ekspressiv kuchlari bilan ishlov berishga yordam beradi. Ushbu yondashuv, shuningdek, bizning yon ta'sirlar bilan ishlash kodimizni alohida usulda sinab ko'rishimizga imkon beradi.
  • o'zgarmas - oldingi platformalarda bizning reduktorlarimizda yuzaga kelgan mutatsiyalar natijasida paydo bo'lgan xatolarni topish qiyin edi. Ushbu muammoni birdaniga hal qilish uchun biz ilova bo'ylab o'zgarmas ma'lumotlar tuzilmalaridan foydalanishga qaror qildik. Bunga o'zgaruvchan va vanilinli JS ma'lumotlari tuzilmalarini almashtiradigan maxsus reduktor fabrikasi imkon berdi.
  • ramda - iloji boricha biz uni biznes mantiqimizning aksariyat qismini bajaradigan sof funktsiyalar orqali funktsional, deklarativ paradigmada kodlash uchun nuqta qildik. Bu borada Ramda biz uchun o'zgarmas bo'lib qoldi.
  • redux-persist - Veb-ilovalardan farqli o'laroq, mahalliy ilovalar oflayn rejim va doimiy holat tushunchasiga ega. Ushbu kutubxona redux-persist-migrate bilan birgalikda ushbu muammoni asyncStorage yordamida qo'llab-quvvatladi.

Uskunalar

Odatdagi gumon qilinuvchilar - ip, chiroyli, eslint va qobiqdan tashqari, biz quyidagi vositalarga ham bog'liqmiz:

Styleguide (Android va iOS uchun mos)
  • hikoya daftarchasi - bu ajralib chiqqan mahalliy komponentlarni ishlab chiqishda juda yaxshi yordam beradi. Natijada, biz UI tarkibiy qismlarini bizning dizayn qo'llanmasimizni birma-bir xaritalash sifatida kodlash imkoniyatiga ega bo'ldik. Dizaynerlar haqiqiy tarkibiy qismlarga kirish huquqiga ega bo'lishlari uchun biz uni ichki qismda joylashtirishni ko'rib chiqmoqdamiz.
  • codepush - bu mahalliy ilovalarning reaktsiyalari chindan ham porlab turadigan sohadir. Biz foydalanuvchilarimizga ob-havoning yangilanishlarini bexosdan tarqatish uchun kodepushdan foydalanamiz, shu bilan ulush foizlari va mo'ljallangan versiyalariga to'liq egamiz.
  • fastlane - turli xil muhitlarni boshqarish (sahna, ishlab chiqarish, ishlab chiqarish) va bizning inshootlarni avtomatlashtirish fastlane bilan shabada bo'lganligi isbotlandi. Biz ichki Jenkins CI-da parametrlashtirilgan boshqaruv panelini aniqladik, u hamma narsani sirlardan boshqaradi, kodni imzolash, sinov parvozi va Crashlytics Beta-ni yuklash, ichki sinov tuzish uchun moslamalarni ro'yxatdan o'tkazish, cepepush orqali OTA yangilanishlarini chiqarish va hk.
  • hazil va detoks - bu kombinatsiya bizning ilovamiz uchun ajoyib sinov platformasini yaratdi. Agar biz mahalliy modullar uchun mazaxlar yozishimiz kerakligini hisobga olsak, Jest ona reaktsiyasini o'rnatish uchun biroz qiyinchilik tug'dirdi, ammo bunga harakat qilish kerak edi. Wix Engineering kompaniyasining detokslari biz uchun sinov oxirini soddalashtirdi.
  • sentry - sentry.io-dagi odamlar bir muncha vaqt oldin reaktsiyaga asoslangan dasturlar uchun birinchi darajali yordamni taqdim etishdi. Yangi SDK xato haqidagi hisobotlarni ko'plab foydali qurilmalar ma'lumotlari bilan boyitadi va mahalliy va JS stack izlari bilan yaxlit hisobotlarni taqdim etadi.
Ilovaning 90% dan ortig'i manba kodi JavaScript-da ishlaydi, shu bilan birga ishlash va sifatga ta'sir qilmaydi.

O‘rganishlar

React Native nisbatan yosh platformadir. Atrofdagi hamjamiyat haligacha ilg'or tajribalar va muayyan ishlarni to'g'ri bajarish haqida fikr yuritmoqda. Ammo boshlang'ich nuqta sifatida rasmiy hujjatlar biz eng yaxshi manbadir. Yo'l davomida ba'zi narsalarni bilib oldik:

  • InteractionManager - Bu sizning mukammal do'stingiz. Jamiyat tomonidan qimmatbaho narsalarni mahalliy iplar ustida ishlash uchun ko'chirishga ko'p harakat qilindi, chunki JS bitta ipli. Ba'zan siz JS-da qimmatbaho narsalarni qilishingiz kerak bo'ladi, bu sizning animatsiyalaringiz / translyatsiyalaringiz / foydalanuvchi o'zaro ta'sirlaringizga ta'sir qilmaydi. InteractionManager ushbu qimmatbaho narsalarni kechiktirish uchun yaxshi rejalashtirish API-ni taqdim etadi, bu aytilgan animatsiya / o'tish / o'zaro ta'sir tugagunga qadar.
  • requestAnimationFrame - Bu Internetdan olingan va bir xil ishlaydi. Maxsus foydalanish holati - bu Android qurilmalarida ripple effekti. ATouchableNativeFeedback-ni apt onPress ishlov beruvchisidan foydalanishning odatiy usuli bu erda har doim ham ishlamaydi. Ba'zida siz to'lqin yorig'ini ko'rmasligingiz mumkin. Buning o'rniga, onPress ishlov beruvchingizni requestAnimationFrame blokiga o'rab qo'ysangiz, animatsiyalar juda yaxshi ko'rinishini ko'rasiz.
  • MessageQueue - NS mahalliy va JS mamlakatlari o'rtasida ko'prik orqali aloqa o'rnatish orqali ishlaydi. Natijada, ushbu ko'prikda doimiy ravishda chit-chat mavjud bo'lib, agar u to'g'ri boshqarilmasa yoki ishlashga salbiy ta'sir ko'rsatishi mumkin. MessageQueue-da josuslik usuli, ismdan ko'rinib turibdiki, ushbu chit-chatga josuslik qilish va nima orqali yuborilishini ko'rish imkoniyatini beradi. Bu sizga aslida nima yuz berayotganini tushunishga va ish faoliyatini yaxshilashga yordam beradi.
MessageQueue.spy (haqiqiy)
  • setNativeProps - Rasmiy hujjatlardan - "setNativeProps bu to'g'ridan-to'g'ri DOM tugunida xususiyatlarni belgilash uchun Reaktiv Native ekvivalenti". Ba'zida faqat sizga ma'lum bo'lgan sabablarga ko'ra reaktsiya ko'rsatish aylanishini qisqa tutashgan holda, sizning JS ko'rinishingizni qo'llab-quvvatlaydigan asosiy ko'rinishni boshqarishingiz mumkin. Biz buni faqat bir-ikki joyda ishlatdik, chunki qolgan narsalar etarli darajada ishlamadi. Agar kerak bo'lsa, uni ishlatishdan saqlaning yoki undan oqilona foydalaning.
  • Strukturalash - Boshlashdan boshlab biz repo uchun oddiy tashkiliy tuzilmani kuzatdik. Biz soqov bo'lmagan interfeys komponentlarini davlat nuqtai nazaridan ajratdik. Davlat boshqaruvi bizning epiklarimizda va reduktorlarimizda juda muhim bo'lgan. Biz tasodifiy tarqalib ketgan yon effektlarni keltirib chiqaruvchi kod bizning kod bazamizni ijro etuvchi va sinab ko'rish qobiliyatiga ega bo'lgan holda qiyinchilik tug'dirishini ko'rdik. Redux-kuzatilishi mumkin bo'lgan yondashuvimiz ushbu ba'zi og'riqlarni engillashtirishga yordam berdi. Quyidagi misolni ko'rib chiqing:

Biz tarkibiy qismlarning hayotiy tsikli usullariga piggy-tayanishga emas, balki ko'pgina yon ta'sir kodlarini bitta funktsiyada o'z ichiga oladigan bo'ldik. Shuningdek, biz yon ta'sirga bog'liq bo'lgan qaramlikni - bu holda ajaxni funktsiyaning o'ziga kiritdik. Buni sinov muhitida tarmoq so'rovlarini mazax qiladigan narsa bilan almashtirish mumkin.

  • Redux Middleware - Butun dastur holati navigatsiya, shu jumladan navigatsiya rejimida yashayotganligi sababli, redux o'rta dasturlari harakatlarga javoban kodni bajarishda ajralmas bo'lib qoladi. Bizning holatlarimizda biz tahlillarni (ekranni kuzatish), jurnalni ro'yxatdan o'tkazish, xatolar haqida xabar berish, qurilmaning holati satrini o'zgartirish va xotira boshqaruvini maxsus o'rta dasturlarga topshirdik. Bu ushbu kodni individual qarashlardan samarali olib tashlaydi va ularni to'g'ri saqlaydi. Joriy ekranga asoslangan holda iOS-da qorong'u yoki yorug'lik holat panelini o'zgartiradigan misol.

Quvur liniyasini qurish

Quvur liniyasini qurish

Rasmiy hujjatlar API va platformaning o'zi haqida ko'p ma'lumot beradi. Oxir-oqibat, siz yangi porloq ilovangizni o'rnatishingiz kerak. Bu, shuningdek, sinov o'tkazish va tayyorlash uchun bir nechta muhitlarni saqlash, turli xil hisobga olish ma'lumotlarini beparvo ravishda kiritish, nashr yozuvlarini yaratish va barcha manfaatdor tomonlarga (mahsulot menejerlari, sinovchilar va dizaynerlar) xabardor qilish kabi muammolarni o'z ichiga oladi. Tajriba va bir qancha yondashuvlar bilan kurashgandan so'ng, biz ushbu jarayonni avtomatlashtirish uchun Fastlane shahriga o'tdik. Quyida iOS-dagi beta-versiya qisqartirilgan versiyasi keltirilgan:

Kodning ushbu qismi kod imzolanishi, sinov uchun asboblarni ro'yxatga olish, sonlarni ko'paytirish, dasturni yaratish, Crashlytics Beta-ga yuklash, relizlar yozuvlarini yaratish, kodni bosish va manba-xaritalarni jo'natuvchiga yuklash, bu haqda xabar berish bilan shug'ullanadi. sust kanal va nihoyat GitHub-da reliz yorlig'ini qo'shish. Siz bu erda qurish bilan bog'liq bo'lgan har qanday narsani qilishingiz mumkin. Ushbu kod asosiy dastur kodi yonida joylashgan. Har bir qurishdan oldin CI bizning repo-ning yangi versiyasini tortib olganligi sababli, CI-ni buzmasdan qurilish quvurini o'zgartirish juda kulgili.

Pro-Maslahatlar

  1. Hujjatlarni, shuningdek, yozuvlarni o'qing.
  2. ipni ishga tushirish - -reset-kesh - agar siz biror narsa o'rnatgan bo'lsangiz va u ishlamasa / topilmasa.
  3. reaktsiya-mahalliy-tuzatuvchi - React Native rasmiy tuzatuvchisiga asoslangan mustaqil dastur va React Inspector / Redux DevTools-ni o'z ichiga oladi.
  4. Perf Monitorni eng yaxshi do'stingizga aylantiring.
  5. Har doim haqiqiy qurilmada sinab ko'ring.
  6. Reaktsiyani bilish zaruriy shartdir.

Izoh

Agar ushbu xabar sizni bu erda qanday ishlashimiz bilan qiziqtirsa, biz ishga yollanamiz. Bizni Twitter @HousingEngg orqali toping.

Sid, Bxavir, Ritesh, Vikas, Rahul, Amandip va Dron React Native Apps jamoasida ishlagan. Rohit va Xarish QAni boshqarishdi.

Ogohlantirish: Biz bu erda eslatib o'tilgan har qanday vositalar, kutubxonalar, kodlash amaliyoti yoki dasturiy ta'minotni ishlab chiqish falsafalarini himoya qilmaymiz. Siz qanaqa deb o'ylasangiz ham o'qish, o'rganish, qabul qilish, rad etish va tanqid qilishni xush ko'rasiz.