Jak jsem (ne)použil React Native

A jak jsem se (ne)stal Android vývojářem

Před měsícem a půl jsme v Bayo měli venku iOS appku, na webu šlo kontaktovat prodejce i přidávat nové zboží. Ale chyběla nám dost zásadní věc, Android aplikace.

Androiďák, kterého jsme měli, se mohl Bayo věnovat pouze po večerech/víkendech, takže jsme nemohli iterovat dostatečně rychle a vydání se stále oddalovalo a oddalovalo.

A hlavně, chyběla asi ta nejtěžší část celé aplikace, chat v aplikaci. (Na iOS zabral odhadem třetinu celého času vývoje.)

Bayo Android chat 😻

Jelikož jsme už chat měli hotový na webu v React.JS, napadlo mě, proč nepoužít React Native.

V ideálním případě třeba i znovupoužít kód z chatu na webu v Android aplikaci.

Bylo by krásné, kdyby se tu dalo napsat, že za 2 dny byl chat hotový a Android aplikaci jsme měli venku. Samozřejmě tomu tak nebylo. První boj začal s tím, že většina aplikace již byla napsaná v Javě — celý model aplikace, komunikace s API na serveru, bylo by nešťastné tohle duplikovat ještě celé v Javascriptu.

Možnosti byly:

  • nechat Javu Javou a prostě si předat do Javascriptu jen token pro autentizaci API requestů,
  • nebo nechat model a síťovou komunikaci s API v Javě a všechny Java objekty wrappovat a převádět mezi Javou a světem Javascriptu.

Každé možnosti jsme dal pár hodin a vyzkoušel. Jedna byla horší jak druhá.

Nakonec jsem skončil s verzí, kdy business logika zůstala v Javě a React Native se staral jen o vykreslení.

Měl jsem hotový seznam konverzací uživatele a byl na chvíli happy.

Začal jsem tedy dělat na screenu s konkrétní konverzací a posíláním zpráv. A skončil jsem rychleji, než jsem začal. React Native má totiž takovou nepříjemnou věc — než nastartuje background Javascript thread, trvá to dost dlouho. Jelikož aplikace byla již rozpadlá na více nativních Android aktivit, bylo potřeba vytvořit novou aktivitu i pro výpis zpráv.

Nastartovat ReactNative v další aktivitě avšak trvalo 100–200ms.

100–200ms než se cokoli mohlo začít zpracovávat a vykreslovat.

Mohl bych si býval vytrhat všechny vlasy, ale nic tomu nepomáhalo. Dokumentace k RN se nejvíce zabývá tím, jak vyvíjet celou aplikaci v RN — pokud máte pouze jednu Androidí aktivitu a všechen kód v Javascriptu, prodleva startu Javascript VM se ztratí v Androidí launcher animaci. Pokud je to ale v přechodech uvnitř aplikace, ta prodleva je tam sakra cítit.

React Native nebyla cesta, po které mělo smysl pokračovat.

V Gitu tedy přibyl commit, kdy jsem ze zdrojáků Android aplikace odstranil všechen Javascript a závislosti na React Native. Zpět do bodu nula.

Na React Native je ale pár věcí super — něco, co v Android SDK chybí:

  1. reactive components;
  2. flexbox.

Naštěstí pro obojí existuje Java alternativa:

  1. Anvil— chytré DSL inspirované Incremental DOM;
  2. Flexbox for Android— implementace od Googlu.
Místo Android XMLek a šílených kombinací layoutů, Java DSL + Flexbox.

Jak se tyhle 2 závislosti přidaly, začal být vývoj pro Android daleko menší pain — UI je daleko méně náchylné na chyby a konečně se v tom dá rozumně vyvíjet.

Po hromadě dalších změn, oprav, vypitých hrnků kafe a probdělých nocí 10. srpna konečně vyšlo Bayo pro Android 🎉

Když porovnám vývoj webových aplikací a vývoj pro Android, má Android hodně co dohánět.

  1. Některé věci, které jsou teď při dělání webu běžné, Android SDK “neumí”. Tedy pokud vám nestačí mít aplikaci pouze pro 10% populace, která si koupila telefon s nejnovějším Androidem.
  2. Co je horší, tak někdy umí, ale v každé verzi Androidu jinak. Např. na webu přestalo být nějaké větší custom stylování formulářových prvků tabu, na Androidu v podstatě pořád je, pokud si nechcete zadělat na problémy.
  3. Co je ještě horší, tak to někdy umí přes support library — neuvěřitelně over-engineered a neuvěřitelně zabugovaná knihovna, která se chová v každé své verzi jinak a jedna a ta samá její verze se na každé verzi Android SDK, místo toho, aby rozdíly stírala, chová jinak.
  4. Neexistují rozumné developer tools. Android verze 6 už naštěstí umí alespoň vykreslit ladící rámečky s paddingy a marginy kolem všech prvků na obrazovce. (Pro starší verze Androidu je na ladění UI nejlepší si přikládat k obrazovce telefonu čtverečkovaný papír 😅)
  5. Některé věci jsou zbytečně low-level. Např. je potřeba řešit načítání obrázků ze souboru/sítě na background threadech, sampling (aby po prvním načteném obrázku nedošla paměť) a kešování bitmap v paměti a na disku, všechno ručně.

Jsem moc rád, že jsme nakonec našli do Bayo skvělého Androiďáka, Lukáše, který se může aplikaci věnovat na full-time. Zatím mě nezabil za to, co jsem tam vyvedl, takže snad dobrý 🎩