Tekkisessio React Nativesta

March 06, 2017 by Antti Takalahti

Perjantain tekkisessiot on yksi parhaista jutuista Wunderdogilla. Tekkisessio on tunnin pituinen esitys mistä tahansa aiheesta, jonka kokee jakamisen arvoiseksi. Kynnys on matala ja innostus korkealla. Vedin viime viikolla session React Nativesta, Facebookin projektista, jossa tehdään Javascriptillä natiivisovelluksia iOSille ja Androidille.


Reactissa käyttöliittymiä rakennetaan kirjoittamalla Javascriptillä erilaisia komponentteja, joita käyttäen voidaan tehdä React Nativella mobiilisovelluksia. Facebookin blogipostaus avaa taustoja laajemmin, mutta pitkään ongelmana oli se, että Androidin sovellukset tehdään Javalla ja iOSin sovellukset joko Objective-C:llä tai Swiftillä. React Nativella saadaan molemmat versiot samalla koodilla.


React Native on edelleen melko tuore, mutta npm:stä löytyy jo 3878 pakettia hakusanoilla React Native ja Stack Overflowssa on vilkas yhteisö. Wunderdogit ovat olleet mukana kahdeksassa React Native -projektissa, joten tukea löytyy myös omasta laumasta.


Parasta React Nativessa on, että samalla koodilla saa tehtyä sekä iOS- että Android-sovellukset. Eri komponenteista on myös helppo luoda omat versiot Androidille ja iOSille. Jos valmista React Native -komponenttia ei löydy, voidaan käyttää eri kirjastoja iOS- ja Android-toteutuksiin, mutta usein se ei ole tarpeen. Käytössä ovat myös eri alustojen natiivikirjastot, joiden tuominen React Nativen käyttöön on melko vaivatonta. Käytännössä alustakohtaista koodia tarvitaan kuitenkin lähinnä komponenttien tyylittelemiseen.


Tilan hallinta on React-maailmasta tuttu ongelma, jota usein ratkaistaan Reduxilla. Sitä käytetään myös React Nativessa, mutta myös paikallinen tilanhallinta on käytössä. Mobiilisovelluksissa on usein yksinkertaisia näkymiä, jotka tekevät vain yhden asian, jolloin eri komponenttien ei tarvitse olla niin tietoisia toisistaan ja niiden tilanmuutoksista.


Dogeilla oli kaksi suositusta debuggaukseen. Toiset käyttävät Android Debug Bridgeä ja Xcoden konsolia ja toiset Remote JS Debuggingia selaimessa. Molemmat ovat kivoja vaihtoehtoja ja ne saa valmiina React Nativesta.

ES6-tekkisessio_muokattu.jpg

Tekkisession keskusteluissa selvisi, että React Nativea on testattu monella eri tavalla. Osa rekuista suosii Jestiä ja osa tekee Mochalla ja Enzymellä. Käytännössä helpointa lienee yksittäisten komponenttien testaaminen erikseen, sillä React-komponentteja voi renderöidä Enzymellä ja varmistaa niiden toiminta testeillä. Jestin tapauksessa UI:sta otetaan snapshotit talteen ja Jest huomauttaa, jos koodimuutokset muuttavat komponentteja. Kukaan ei ollut tehnyt testejä simulaattoreita käyttäen johtuen varmaankin siitä, että Xcoden simulaattoritestit kirjoitetaan Swiftillä tai Objective-C:llä ja koko React Nativen pointti on, ettei näitä kieliä tarvitse hallita täydellisesti.


Keskustelun jälkeen pääsin kokeilemaan koodaamista livenä ensimmäistä kertaa. On mielettömän siistiä, kun joku koodaa yleisön edessä vaikkapa Helsinki JS:ssä, mutta en ole aiemmin itse kokeillut sitä. Tekkisession paras puoli onkin, että tutun yleisön edessä on turvallista kokeilla uusia asioita ja kasvaa esiintyjänä. Otettiin käyttöön react-native-sketch kirjasto tarkoituksena näyttää, miten nopeasti React Nativella saa laitteella ajettavaa softaa.


Yleisön edessä koodatessa hommat eivät tietenkään onnistu samaan tapaan kuin kotona, mutta luulen silti että esityksestä oli hyötyä. Valittua komponenttia ei oltu vielä päivitetty toimimaan uusimmalla React Nativen versiolla ja issueista piti löytää sopiva branchi ajoon. Testiprojektin poistaminen Xcodesta ei poistanutkaan tiedostoja ja Code Signing ei tietenkään onnistunut, mutta Appi saatiin ajoon simulaattorilla.


Voin kyllä varauksetta suositella React Nativea. Apua on tarjolla runsaasti ja Javascriptillä saa paljon aikaan nopeasti. Tiimi pääsee iteroimaan heti, kun näkymiä voidaan tehdä vauhdikkaasti ja versioita voidaan kätevästi jakaa TestFlightin avulla.


- elsa

Comments anyone?