React Native EU— první den
Autoři: Pavel Kepka, Jan Maršíček, Antonín Simerský
První konference na světě, jejíž hlavním a jediným tématem je React Native, se koná 6. a 7. září ve Vratislavi v Polsku. A my jsme u toho nemohli chybět! Jaký byl první den konference? Jaké přednášky nás doslova posadily na zadek a co si z celého dne odnášíme? To vše najdeš v našem reportu z prvního dne konference!
Rapid React Native
Gant Laborde (@GantLaborde)
První ročník React Native EU konference si zasloužil skvělého úvodního řečníka. A podle nás nemohla volba dopadnout lépe. Gant Laborde, Tech Lead Infinite Red, zahájil konferenci excelentím talkem, ve kterém stručně představil zajímavý nástroj, který si v Infinite Red vyvinuli pro usnadnění vývoje. Jedná se o Ignite, CLI pro generování šablon RN aplikací. Ačkoliv osobně nepatříme mezi fanoušky generátorů, zaujal nás jejich přístup založený na sdílení nejlepších přístupů, pluginů a nástrojů umístění na jednom místě a zároveň možnost tvořit vlastní pluginy. Rozhodně se na Ignite podíváme detailněji v rámci některého z následujících Blueberry workshopů, které v rámci interního sebevzdělávání pořádáme každý týden. V závěru přednášky Gant letmo zmínil debugg tool Reactotron, který rozhodně vyzkoušíme co nejdříve, protože možnost ukládání snapshotů stavu aplikace nám přijde velmi “cool”.
React Native, the native bits
Emil Sjölander (@EmilSjolander)
Naprostá bomba! Náhled na fungování React Native z úhlu, který každý považuje za samozřejmý. Emil se ve Facebooku podílí na vývoji view engine Yoga a představil nám, jak funguje komunikace mezi JavaScriptovou, resp. React, vrstvou a nativní částí aplikace, která je zodpovědná za renderování view v zařízení. K této přednášce se rozhodně ještě vrátíme v jiném z našich blogpostů, protože vstřebat princip fungování ve 30 minutách nebylo snadné.
Co nás ovšem zaujalo nejvíc, byla možnost nahlédnout do toho, jak tyto nedokumentované části React Native vlastně fungují.
When “Good Enough” Just Isn’t Good Enough
Jani Eväkallio (@jevakallio)
Přednáška Janiho, Lead Mobile Inženýra v Formidable Labs, byla důrazným apelem na všechny React Native vývojáře, aby věnovali dostatek času i UI a UX části svých aplikací. Dle jeho slov by proklamovaná a prvně zmiňovaná výhoda React Native, tedy rychlost a efektivita vývoje a snadná následná údržba aplikace, neměla být obětovaná uživatelské přívětivosti a použitelnosti. Vývojářům dobře známé “learn once, use everywhere” by nemělo být bráno doslova a mělo by z jejich strany dojít k respektování UI best practices jednotlivých platforem.
Janiho shrnul svá doporučení pro vývojáře mobilních aplikací do tří bodů:
- Caring — mějte uživatele na prvním místě, technické detaily jsou podružné
- Understanding — studujte UX a vše, co souvisí s mobilními aplikacemi. Své poznatky šiřte dál!
- Culture — všichni členové týmu, ať už to jsou designeři, vývojáři či management, musí být obeznámeni se specifiky mobilního vývoje a přizpůsobit tomu svoji činnost.
I tato přednáška pro nás byla inspirací k internímu workshopu. Rozhodně stojí za to, aby se nejenom naši vývojáři seznámili s Human Interface Guidelines.
Building of Snack — The React Native Playground
Satyajit Sahoo (@satya164)
Satyajit, Front-end Javasrcipt Developer v Callstack.io, představil problémy, které musel překonat při tvorbě nástroje Snack. Snack je takový Codepen pro React Native vývoj. Bez zdlouhavého instalování umožňuje rychlé prototypování přímo v prohlížeči a snadné sdílení React Native kódu s chvatnou možností kód otestovat, naimportovat do Expa a dál s ním pracovat. Zajímavé byly ukázky řešení importů JavaScriptových modulů a evaluace kódu, aby nedošlo k pádu aplikace v emulátoru.
Going Over The Speed Limit — Synchronous Rendering in React Native
Tal Kol (@koltal)
Další špičkovou přednáškou, která směřovala přímo k jádru komunikace mezi JavaScriptovou a Nativní vrstvou, byla řeč Tala, Head of Mobile Engineering ve Wix. Ten v úvodu představil problém synchronicity komunikace přes RNBridge, který stojí za některými nepříjemnými problémy s React Native. Konkrétně se Tal věnoval probliknutí při změně scény nebo skrolování v ListView. V druhé části ukázal řešení pomocí synchronní root komponenty, RCTSyncRootView, která umožňuje přeskočit blokující komunikaci mezi JS a Nativní vrstvou pomocí jisté magie připravené při iniciaci aplikace. Více se dá dozvědět přímo v repozitáři s kódem: https://github.com/wix/rn-synchronous-render.
Jsme opravdu rádi, že jsem měli možnost Tala slyšet live. V Blueberry totiž zrovna začínáme experimentovat s knihovnou, za kterou Wix.com stojí. Přímo s Detoxem, který je jejich nástrojem pro testování React Native aplikací.
V přednášce byla zmíněna i knihovna react-native-gesture-handler od Krzysztofa Magiera, s doporučením, ať se na ni určitě podíváme. Což zde rádi slíbíme :).
Building native modules for React Native
Florian Rival (@Florianrival)
Florianova přednáška byla o rychlém představení způsobů, jak vyvíjet nativní moduly pro React Native aplikace. Shrnula postupy pro iOS i Android a uvedla nástroje pro ulehčení vývoje a jednodušší sdílení takto vytvořených nativních modulů.
Zajímavé postřehy z tvorby nativních modulů:
- Profilujte komunikaci přes RNBridge: buď s React Native Snoopy nebo přímo pomocí MessageQueue.spy(true)
- Dejte si pozor na intenzitu komunikace, ať nedojde k zahlcení mostu
- Neposílejte velká data skrze bridge!
- Dodržujte Semantic Versioning
LIGHTNING TALKS
React Native and Badoo: story of a massive experiment
Guillermo Orellana Ruiz
Jak provádět A/B testování snadno a rychle! Opravdu?! Guillermo ve svém talku popsal příběh toho, jak se v Badoo rozhodli dělat A/B testování s pomocí React Native. Na příkladu dvou různých prototypů předvedl, co je podle něj potřeba ukázat managerům a co vývojářům, aby obě dvě skupiny přesvědčil k zavedení nové technologie do dev stacku. Nyní jsou v prvotní fázi implementace. Držíme jim palce, ať to v Badoo klapne!
Scaffolding plugins for React Native
Johannes Stein (@frostney)
Tento lightning talk v podstatě navázal na přednášku Floriana Rivala a představil jeden z toolu pro generování šablony pro publikování nativních modulů pro React Native.
https://github.com/frostney/react-native-create-library
V Blueberry jsme již několik podobných nástrojů vytvořili, ale chybí nám tam zpravidla takové sexy věci, jakými jsou validace názvů komponent, prefixování nebo setup pro automatické publikování. S velkou pravděpodobností využijeme představeného konceptu pro vylepšení našich vlastních knihoven.
What is RNRF (react-native-router-flux)?
Pavel Aksonov (@PAksonov)
Pavel mluvil o jeho směrovací knihovně react-native-router-flux, která byla první navigační knihovnou pro React Native. Jeho lightning talk zesumarizoval současný stav knihovny a plány nedaleké budoucnosti. Jelikož jsme tuto knihovnu použili na náš první React Native projekt, jeho talk nás velmi zajímal.
Nyní se těšíme na vydání nové funkce(nástroje) pro vytváření UML stavových diagramů přímo z kódu aplikace.
Introducing the React Native Builder
Sanket Sahu (@sanketsahu)
Lightning talk Sanketa byl o designerském nástroji BuilderX.io, který generuje výstup v .js a .jsx (namísto .psd) tak, že vývojáři můžou okamžitě začít pracovat na projektu. Podle Sanketa by tento nástroj měl urychlit oba procesy, tedy designu a vývoje. Tato aplikace je momentálně v otevřené beta fázi. O přístup si můžete zažádat zde: http://builderx.io/.
Why does component-based styling for React Native make sense?
Kristijan Ristovski (@thekitze)
Kristijan nám ve svém talku ukázal, jaké výhody s sebou přináší stylování komponent za pomocí externích knihoven, jakými jsou Glamorous Native nebo Styled Components, oproti klasickému přístupu v React Native. Tyto přístupy jsou často úspornější a přináší s sebou řadu výhod, např. cachování proměnných, možnost využití témat přes ThemeProvider nebo podmíněné stylování na základě props komponenty. Dosud jsme žádnou externí knihovnu pro React Native nevyužívali, ale po této přednášce určitě některou z dostupných knihoven vyzkoušíme.
V závěru talku Kristian zmínil možnost sdílení základních komponent, tzv. primitives, bez ohledu na to, zda se používají na webu nebo v native vývoji.
Composable Native APIs
Andre Staltz (@andrestaltz)
Andre je známý díky svému frameworku Cycle.js a nyní se jej rozhodl upravit i pro React Native framework. Měli jsme možnost vidět jeho přednášku k Cycle.js na loňské Reactive Conferenci a obě mají hodně společného. Andre dokáže neuvěřitelně motivovat k objevování nových světů a jeho přednášky mají vždy přesah mimo “náš” svět React vývojářů. I v té dnešní se dokázal při vysvětlování, jak imperativní React Native API řešit deklarativně s Cycle.js, dostat k fraktálům a názorně nám ukázal, jak změnit naše uvažování o způsobu tvoření komponenty.
Samotné pochopení, jak jeho přístup usnadňuje vývoj React / React Native aplikací, vyžaduje hlubší ponoření do konceptů Cycle.js. Podle nás je to rozhodně téma, kterému by se každý vývojář měl alespoň chvíli věnovat. Ukázkovou aplikaci, ze které je možné se učit, naleznete na githubu: https://github.com/staltz/mmmmm-mobile.
Tímto končí náš “přímý” přenos z prvního dne React Native EU ve Wroclawi. Odnášíme si z něj hlavně základní pochopení, jak React Native funguje pod pokličkou a hromadu nápadů a tipů, co by bylo dobré vyzkoušet. Loučíme se s Vámi a míříme směrem k hotelu Wodnik na dnešní afterparty!
