React Native EU — druhý den

Autoři: Pavel Kepka, Jan Maršíček, Antonín Simerský

Po více než vydařené afterparty nás čekal druhý den React Native EU ve Vratislavi, a i ten jsme měli napilno. Absolvovali jsme více než 10 skvělých přednášek, celý den byl pak zakončen závěrečnou Q/A panelovou diskuzí. Jak moc jsme nyní chytřejší a o co všechno se budeme snažit obohatit v Blueberry se dozvíte v následujícím shrnutí tohoto nabitého dne!

Practical hacks for delightful interactions

Eric Vicenti (@Eric Vicenti)

Druhý den byl zahájen přednáškou Erica Vicentiho, který pracuje ve Facebooku. Eric se s námi ve svém talku podělil o praktické hacky, které nám mohou pomoci čelit některým nedokonalostem v uživatelských interakcích React Native (tyto hacky také upozorňují na problémy v ekosystému a můžou pomoci je odstranit). Hovořil například o přenesení největšího počtu animací na nativní UI driver nebo využívání ScrollView komponenty pro odchytávání gest.

Eric zároveň zmínil dvě užitečné knihovny, které usnadňují práci s dotyky a gesty na displeji. Jako první představil Interactable, která poskytuje API pro plynulé a přirozené uživatelské interakce s frekvencí 60 FPS. Druhá knihovna uděluje snadný přístup k eventům dotyků a gest a umožňuje definování složitější logiky. Obě knihovny využívají nativní vlákno pro zpracovávání animací.

Ericovo doporučení je využívat hacky. I když se může zdát, že zbytečně zatěžují vývojáře a že je jejich výsledkem často ještě nepřehlednější kód, považuje za důležitější doručit bezproblémovou interakci uživateli a zpříjemnit jeho užívání aplikace.

Reasonable React Native

Ken Wheeler (@ken_wheeler)

Na tuto přednášku jsme se hodně těšili. A to nejenom proto, že je Ken charizmatický řečník, ale i díky jeho nepřehlédnutelnosti na včerejší afterparty.

Loňský rok jsme se na ReactiveConf seznámili s Reason ( cool jazykem na bázi OcaML). Během posledních pár měsíců ovšem došlo k významným změnám a pro Reason přibyly moduly umožňující psát React a React Native aplikace. Právě proto Ken ve své přednášce shrnul základní vlastnosti Reason a v závěru ukázal, jak vypadá setup pro React Native. Ten je k vidění v jeho ukázkové aplikaci zde. Btw. věděli jste, že prvotně byl React napsán v SML?

Cross Platform & Beyond

Nader Dabit (@dabit3)

Naderova přednáška shrnula knihovny, které umožňují možnost publikování vaši aplikace na více zařízeních a platforem mimo Android a iOS. Ať už se jedná o web (react-native-web a react-primitives) či třeba Windows (ReactXP — v této nástavbě na React Native je například napsaná nová verze Skypu).

Představil také nové konkurenty React Native — Weex (framework podobný React Native založený na Vue.js — open source projekt vývojářů z Alibaby) a Flutter (framework Googlu založený na Dartu).

Integrating React Native into an existing native codebase

Eloy Durán (@alloy)

Eloy, Lead Engineer v Artsy, se ve své přednášce podělil o zkušenosti s přidáváním React Native kódu do existující mobilní aplikace Artsy.

Jaké byly důvody pro přechod k React Native?

• V týmu se jim líbila práce s reactem a apollo-clientem pro graphQL.
• Do budoucna chtějí expandovat na další platformy (hlavně android) a to je s React Native velmi jednoduché.

Jaké problémy museli řešit?

• Přidávat do aplikace jednotlivá React Native View, každé View mělo svůj nativní view Controller. Používali vlastní navigační knihovnu (příklad je v prezentaci).
• Vzhledem k UI, které používali, potřebovali řešit scrolling vnořených scrollview. To si nakonec museli napsat v nativním kódu.

Celkově hodnotí přechod k React Nativu jako pozitivní. Používají ho i v produkci. Ačkoliv si museli napsat některé věci v nativním kódu, ve výsledku jim to umožnilo udělat si v aplikaci cokoliv, co potřebovali.

Building a Product with React Native

Martin Konicek (@martinkonicek)

Martin, který má v rámci své práce ve FB možnost jednou ročně změnit tým, si chtěl vyzkoušet, jaké to je používat React Native — nástroj, který jako native vývojář pomáhá vytvářet. Nabité zkušenosti chtěl potom použít ke zlepšení frameworku. Přednáška mimo jiné poskytla zajímavý insight do release procesu mobilní aplikace Facebooku. Všechny nové featury jsou uvolňovány ven v postupných krocích. V prvním kroku jsou změny publikované všem zaměstnancům FB. Pokud se nevyskytnou žádné problémy, pak následuje po 3–7 dnech release pro 1–5 % veřejnosti. V dalším kroku se nastavují A/B testy. A po získání dostatečného množství dat pro statistickou analýzu, jsou A/B testy vyhodnoceny a dojde k případnému releasu pro všechny uživatele.

Network layer in React Native

Alexey Kureev (@kureevalexey)

Poodhalení temného zákoutí síťové komunikace v React Native, doprovázené nádhernými, ručně malovanými slajdy, tak by se dala shrnout přednáška Alexeye. Odladění problémů se síťovou komunikací je v React Native problém, protože Chrome dev tools síťovou komunikaci RN aplikací nezobrazují. A i když existují hacky, které umožňují logování komunikace, nejsou úplně ideální. Alexey nás proto nasměroval na modul XHRInterceptor, který sice není nikde dokumentován, dává však vývojářům možnost přidat do kódu vlastní listenery sledující komunikaci aplikace s okolím. A kdo se nechce trápit s programováním, může použít Reactotron, kde je sledování sítě, tímto způsobem, již implementované.

Scaling Mobile Development with React Native

Aaron Greenwald (@aaronjgreenwald)

Jak sestavit velký team pro vývoj mobilní aplikace? Odpověď nám dal Aaron ve své přednášce. Ve třech okruzích shrnul zkušenosti z vývoje mobilní aplikace Wix.com.

Struktura firmy:

• Mějte malé, centralizované, vedení.
• Týmy musí být nezávislé.
• Ovšem UX je potřeba řešit centralizovaně.

Kultura:

• Guild days/weeks: dedikujte 20% času vývojářů na úkoly, které přímo nesouvisí s vývojem aplikace.
• Opposite Day: jednodenní switch, během něhož si programátoři prohodí své tradiční role a mohou si tak ošahat programovací jazyky, nástroje či postupy používané jejich kolegy.
• Core/Infra Team: ten udržuje jádro aplikace a vývojářské nástroje a jeho součástí jsou specialisté na jednotlivé technologie použité při vývoji.

Kód:

• FOSS from Day One. Zajímavý benefit publikování kódu jako Open Source. Ze samotného principu, takto připravený kód musí být modulární a nesmí mít skryté závislosti na dalších částech aplikace. Což následně vede k lepší architektuře aplikace.
• Jednotlivé týmy pracují na svých modulech, jež mohou ostatní použít přes ModuleRegistry => konzistentní API umožňující i velmi dramatické změny v architektuře modulů.
• Moduly nesdílejí state a jediná možnost, jak získat jejich data je skrze ModuleRegistry API.
• Každý modul má separátní demo aplikaci.
• UI komponenty jsou udržované v centralizované knihovně.

Co se týče kultury a struktury firmy jsme rádi, že Blueberry dospělo během svého růstu do obdobného stavu. Co si z přednášky odnášíme je okamžité publikování Open Source během vzniku kódu, což brzy v Blueberry vyzkoušíme a případně zavedeme.

Offline first applications in React Native done well

Adrien Thiery (@Adrien0)

Velmi praktická přednáška o tom, jak správně v aplikaci řešit situace, kdy je uživatel bez přístupu k internetu. Adrien prošel vzory, jak se s offline stavem aplikace vypořádat, čemu se v takovém případě vyhnout a ukázal i použití několika knihoven, jež zjednodušují práci s offline stavem — react-native-offline a jež slouží pro ukládání stavu aplikace — redux-persist.

Jako ideální případ chování aplikace byla zmíněna aplikace Trello. Uživatel při jejím používání při výpadku signálu ani nepozná, že je offline.

Adrienovy rady, jak toho dosáhnout jsou:

• Nevěřit připojení, ale věřit telefonu. Proto je potřeba udržovat stav aplikace a pravidelně ho ukládat tak, aby šel i po pádu aplikace obnovit.
• Přizpůsobit rozhraní aplikace tak, aby dokázalo fungovat i bez dat a řešit komunikaci přes knihovnu react-native-offline.
• Dělat optimistické updaty stavu aplikace, aby uživatel mohl co nejlépe pracovat s aplikací i bez připojení.

React Native Payments: Bringing the Payment Request API to React Native

Naoufal Kadhom (@naoufal)

Přednáška Naoufala představila knihovnu react-native-payments, která poskytuje jednotné API pro komunikaci s API Apple pay, Android pay a Payment Request API pro web. Díky této knihovně je snadné přidat do aplikací platební proces a dát uživatelům možnost v aplikaci zaplatit :). Všem, nejenom mobilním vývojářům, rozhodně doporučujeme Payment Request API vyzkoušet. A to nejenom proto, že v posledním vydání Google Chrome je již přítomna, brzy však bude i v ostatní prohlížečích. Tato API nejenom ulehčuje práci vývojáře při implementaci platby kartou, ale, a to je důležitější, výrazně usnadňuje uživatelům dokončení nákupního procesu.

Automate your React Native world with fastlane

Philippe Trépanier (@PhilTrepanier)

Philippe představil nástroj Fastlane, který zatím nemáme v Blueberry nastaven u všech projektů, což se i na základě jeho přednášky chystáme brzy změnit. S Fastlane je život vývojáře ihned veselejší. Nemusí trávit zbytečný čas nad sestavováním buildů a publikováním nových release do app storů. Zároveň neusnadňuje práci pouze vývojářům, ale také testerům, kteří dostávají do ruky mocný nástroj, jenž jim umožňuje vytvořit screenshoty z aplikace z plejády různých zařízení. To je užitečné zejména při kontrole UI na Android verze aplikace.

Závěrečná Q/A panelová diskuze pokryla široké spektrum témat a zahrnovala dotazy třeba ohledně toho, jak efektivně řešit performance problémy, názory panelistů na budoucnost webu a možnost sdílení kódu napříč platformami. Padla i otázka ohledně licencování React/React Native, kterou účastníci diskuze zahráli do kouta s tím, že to není věc pro developery, ale spíše pro business a zmínili nedávno vydaný článek, který toto téma řešil.

Poděkování

Naše poděkování patří callstack.io, za perfektní organizaci konference. Všem řečníkům za sdílení jejich zkušeností. Pavle Umlaufové, Evě Kalníkové a Mirkovi Mazlovi za obrovskou pomoc s přípravou našich blog postů z konference. A v neposlední řadě Blueberry, které nás na React Native EU vyslalo. Už teď se těšíme na další ročník.