Airbnb-da Mobil uchun keyingi nima

O'zingizning vataningizga eng yaxshi narsalarni olib keling

Bu bloglardagi xabarlarning beshinchisi bo'lib, unda biz React Native bilan tajribamiz va Airbnb-da mobil qurilmalar uchun keyingi narsalar haqida so'zlab beramiz.

Oldindagi hayajonli vaqtlar

React Native bilan tajriba o'tkazishda ham, biz o'z ona tilimizdagi harakatlarimizni jadallashtirishda davom etdik. Bugungi kunda bizda ishlab chiqarish yoki quvur liniyasida bir qator qiziqarli loyihalar mavjud. Ushbu loyihalarning ba'zilari eng yaxshi qismlar va bizning React Native bilan ishlash tajribamizdan ilhomlangan.

Server tomonidan boshqariladigan ko'rsatuv

Biz React Native-dan foydalanmasak ham, biz hali ham mahsulot kodini bir marta yozishda uning qiymatini ko'ramiz. Biz hali ham universal dizayn til tizimimizga (DLS) tayanamiz va ko'plab ekranlar Android va iOS-da deyarli bir xil ko'rinadi.

Bir necha jamoalar tajriba o'tkazdilar va kuchli server boshqaruvi asosida yaratilgan yaxlit ramkalar atrofida birlashdilar. Ushbu freymlar yordamida server ma'lumotlarni uzatish uchun tarkibiy qismlarni, ekran konfiguratsiyasini va yuzaga kelishi mumkin bo'lgan harakatlarning tavsifini yuboradi. Keyin har bir mobil platforma ushbu ma'lumotlarni sharhlaydi va DLS komponentlaridan foydalangan holda mahalliy ekranlarni yoki hatto butun oqimlarni namoyish etadi.

Server tomonidan boshqariladigan miqyosda ishlash o'ziga xos bir qator muammolar bilan birga keladi. Mana, biz bir nechta hal qilmoqdamiz:

  • Oldinga moslikni saqlagan holda, bizning tarkibiy ta'riflarimizni xavfsiz yangilang.
  • Bizning tarkibiy qismlarimiz uchun turdagi ta'riflarni platformalarda almashish.
  • Ish vaqtidagi voqealarga javob, tugmachalar yoki foydalanuvchi kiritish kabi.
  • Ichki holatni saqlash bilan bir qatorda JSON boshqaradigan ekranlar o'rtasida o'tish.
  • Qurilish vaqtida amalda mavjud bo'lmagan mutlaqo maxsus komponentlarni yuborish. Buning uchun biz Lona formatida tajriba o'tkazmoqdamiz.

Server boshqaruvi asosida ishlaydigan freymlar allaqachon eksperiment va yangilanish funksiyasini ob-havo orqali yangilashga imkon berib, katta qiymatga ega bo'ldi.

Epoksi komponentlari

2016 yilda biz Android uchun manbali Epoksi ochdik. Epoksi - bu oson heterojen RecyclerViews, UICollectionViews va UITableViews-larni yaratishga imkon beradigan ramka. Bugungi kunda ko'pgina yangi ekranlar Epoksi-dan foydalanadi. Bu bizga har bir ekranni ajratilgan tarkibiy qismlarga ajratish va dangasa ko'rsatishga erishish imkonini beradi. Bugungi kunda bizda Android va iOS-da Epoksi mavjud.

Bu iOS-da quyidagicha ko'rinadi:

Android-da, biz yozishni oson va yozishni osonlashtiradigan tarkibiy qismlarni yaratish uchun Kotlin-da DSL-larni yozish qobiliyatidan foydalandik:

Epoksi farqlanishi

React-da, siz render-dan tarkibiy qismlar ro'yxatini qaytarasiz. React ishlashining kaliti shundaki, bu komponentlar shunchaki siz ko'rsatmoqchi bo'lgan haqiqiy ko'rinishlar / HTML-ning ma'lumotlar namunasi. Keyin tarkibiy qism daraxti farqlanadi va faqat o'zgarishlar yuboriladi. Epoksi uchun shunga o'xshash kontseptsiyani yaratdik. Epoxy-da siz buildModels-da barcha ekranlaringiz uchun modellarni e'lon qilasiz. Bu nafis Kotlin DSL bilan bog'langan holda, uni Reactga juda o'xshash qiladi va quyidagicha:

Ma'lumotlaringiz o'zgarganda istalgan vaqtda siz so'rovModelBuild () ga qo'ng'iroq qilasiz va u sizning ekraningizni eng yaxshi RecyclerView qo'ng'iroqlari yordamida qayta namoyish etadi.

IOS-da bu quyidagicha ko'rinishga ega bo'ladi:

Android-ning yangi mahsuloti (MvRx)

So'nggi yillarda sodir bo'lgan eng qiziqarli voqealardan biri bu biz ishlab chiqayotgan yangi ramka bo'lib, uni ichki MvRx deb ataymiz. MvRx eng yangi Epoksi, Jetpack, RxJava va Kotlinni yangi ekranlarni qurishni har qachongidan ham oson va muammosiz qilish uchun React kompaniyasining ko'plab printsiplari bilan birlashtiradi. Bu biz kuzatgan umumiy rivojlanish naqshlarini va Reaktsiyaning eng yaxshi qismlarini hisobga olgan holda ishlab chiqilgan mulohazali, ammo moslashuvchan ramka. Bundan tashqari, u ipga xavfsizdir va deyarli hamma narsa asosiy ipdan chiqib ketadi, bu esa aylantirish va animatsiyalarni yumshoq va silliq qiladi.

Hozirgacha u turli xil ekranlarda ishladi va hayot aylanishlari bilan shug'ullanish zaruratini deyarli yo'q qildi. Ayni paytda biz uni Android-ning turli xil mahsulotlarida sinab ko'rmoqdamiz va agar muvaffaqiyatli ishlashda davom etsa, uni ochiq manbaini topishni rejalashtirmoqdamiz. Bu tarmoq so'rovini amalga oshiradigan funktsional ekranni yaratish uchun zarur bo'lgan to'liq kod:

MvRx Fragment argumentlarini boshqarish uchun oddiy konstruktsiyalarga ega, jarayonni qayta boshlash, TTI-ni kuzatish va boshqa bir qator funktsiyalarni saqlagan holda saqlangan InstanceState.

Biz shuningdek, erta sinovdan o'tgan iOS uchun ham xuddi shunday tizim ustida ishlamoqdamiz.

Tez orada bu haqda ko'proq eshitishni kutmoqdamiz, ammo hozirgacha erishgan yutuqlarimizdan juda mamnunmiz.

Iteratsiya tezligi

React Native-dan vatanga qaytishda darhol aniq bo'lgan narsa bu iteratsiya tezligi edi. 15 yoki 15 daqiqagacha kutish kerak bo'lgan joyda bir-ikki yoki ikki marta o'zgarishlarni ishonchli tarzda sinab ko'rishingiz mumkin bo'lgan dunyoga borish qabul qilinishi mumkin emas edi. Yaxshiyamki, biz u erda ham zarur yordamni oldik.

Android va iOS-da infratuzilmani sizga ishga tushirish moslamasini qo'shadigan va muayyan xususiyat modullariga bog'liq bo'lishi mumkin bo'lgan qismni yaratdik.

Android-da bu asta-sekin mahsulot lazzatlaridan foydalanadi. Bizning grad-modullarimiz quyidagicha ko'rinadi:

Bilvosita ushbu yangi daraja muhandislarga dasturning ingichka qismida qurish va ishlab chiqish imkoniyatini beradi. IntelliJ modulini tushirish bilan birlashtirilgan bu MacBook Pro-da qurilish va IDE samaradorligini sezilarli darajada yaxshilaydi.

Biz yangi sinov lazzatini yaratish uchun skriptlarni yaratdik va bir necha oy ichida biz 20 dan oshiq vaqtni yaratdik, bu yangi lazzatlarni ishlatadigan tuzilish o'rtacha 2,5 baravar tezroq va qurilish foizi beshdan ko'proq vaqtni tashkil etadi. daqiqalar 15x past.

Malumot uchun, bu ildizga bog'liqlik moduliga ega bo'lgan mahsulot lazzatlarini dinamik ravishda yaratish uchun ishlatiladigan zinapoyadir.

Xuddi shunday, iOS-da bizning modullarimiz quyidagicha ko'rinadi:

Xuddi shu tizim qurilishi 3-8 baravar tezroq bo'lishiga olib keladi

Xulosa

Yangi texnologiyalarni sinab ko'rishdan qo'rqmagan, ammo sifat, tezlik va ishlab chiqaruvchilar tajribasi uchun g'oyat yuqori darajadagi to'siqni saqlashga intilayotgan kompaniyada bo'lish juda hayajonli. Kunning oxirida React Native yuk tashish xususiyatlarida muhim vosita bo'lib, bizga mobil rivojlanish haqida yangi fikrlarni taqdim etdi. Agar bu sizning safarlaringizda bo'lishni xohlayotgan sayohatga o'xshasa, bizga xabar bering!

Bu React Native bilan bo'lgan tajribamizni va Airbnb-da mobil uchun keyingi imkoniyatlarni yoritadigan bloglardagi xabarlarning beshinchi qismi.

  • 1-qism: Airbnb-da tubjoy reaktsiyasi
  • 2-qism: Texnologiya
  • 3-qism: Kross-platformali mobil jamoani yaratish
  • 4-qism: tubjoy reaktsiya to'g'risida qaror qabul qilish
  • 5-qism: Mobil uchun keyingi narsalar