sobota, 4. februára 2017

Oplatí sa začať s React Native?

Naši obchodníci predali zákazníkovi mobilnú aplikáciu a ako to už býva, nespýtali sa ľudí z developmentu, dokedy ju môžeme dodať, lež si povedali, že bude hotová o necelý mesiac. Pre Android a iOS. Interne sme nikdy mobilné aplikácie nevyvýjali, ale padlo rozhodnutie, že to spravíme sami. Potešil som sa, že táto úloha pripadla ma mňa.

Ak nerátam preklikanie krátkeho tutoriálu k vývoju pre Android, nemal som predchádzajúce skúsenosti s programovaním pre mobilné zariadenia. Zato som ostatné mesiace dosť robil s Reactom pre web, takže ma prirodzene lákalo použiť React Native. V ňom viete spraviť mobilnú aplikáciu, ktorá používa natívne komponenty, pričom vy ju píšete v JavaScripte a Reacte. Trochu som si o tom prečítal a skúsil spraviť maličký proof-of-concept: išlo to naozaj jednoducho. Ešte som pohľadal články so skúsenosťami z reálneho nasadenia a porovnania s inými frameworkami a povedal som si, že do toho idem.

Learn Once, Write Anywhere

Keďže React Native nevznikal naraz pre obe hlavné mobilné platformy, veľa komponentov je spravených špeciálne pre jednu z nich. Prínosom je, že aplikáciu píšete veľmi podobne pre obe z nich - zväčša iba použijete iný komponent. Môžete dokonca v kóde "if-ovať" bloky v závislosti od platformy, na ktorej aplikácia práve beží, alebo jednoducho zmenou prípony zdrojového súboru poviete, pre ktorú platformu sa má použiť. Tým pádom môžete naozaj vyťažiť maximum z komponentov špecifických pre konkrétny operačný systém.

Čo som si ale všimol, tak veľa nových komponentov je robených tak, aby sa dali použiť pre obe platformy. To je samozrejme pohodlné a keďže naša aplikácia nevyžadovala nejaké extrémne veci, vždy som sa snažil vyberať práve takéto komponenty. Dokonca existujú aj také, ktoré zoberú dva iné komponenty a vytvoria pre ne jednotné API. Po pridaní nového komponentu odporúčam aplikáciu pretestovať na rôznych systémoch, pretože sa mi stalo, že hoci je API rovnaké, na jednom systéme sa predsa len môže správať trochu inak. Stalo sa aj to, že pre Android som musel zadať komponentu iné parametre ako pre iOS.

Aj keď píšete aplikáciu iba pre jednu platformu, oplatí sa vám React Native použiť - špeciálne ak už máte skúsenosti s JavaScriptom, resp. priamo s Reactom. Môžete tak využiť znalosť jazyka, hot reloading kódu počas vývoja či jednoduchú tvorbu layoutov podobne ako s flex-box v CSS, pričom na spodu vám bežia skutočné natívne komponenty danej platformy. Zaujímavé možnosti prináša nasadenie novej verzie pomocou CodePush - toto som ale zatiaľ neskúšal.

Trochu šarapaty, najmä pre autorov knižníc, robilo vydávanie nových verzií React Native každé dva týždne. Od Decembra 2016 sa frekvencia zmenila na mesačnú, navyše pribudol nástroj na jednoduchšiu migráciu na novšiu verziu.

Knižnice, ktoré sa osvedčili

Na uchovávanie stavu aplikácie som zvolil Redux. Táto knižnica nie je iba pre React, avšak práve spolu s ním sa častou používa. Veľa sa diskutuje, či sa ho v menších aplikáciách oplatí mať alebo nie. Ja ho používam, pretože ten stav aj tak niekde musím držať a ak niekto iný potrebuje robiť zmeny v mojom kóde, stačí, keď si naštuduje Redux a bude sa vedieť zorientovať. Navyše okolo neho existuje niekoľko užitočných nástrojov, ktorými môžete sledovať stav vašej aplikácie a jeho zmeny (napr. Logger for Redux, Remote Redux DevTools). Mimochodom, veľmi pekné vysvetlenie princípu priamo od autora Reduxu si môžete pozrieť na egghead.

Na HTTP requesty používam knižnicu axios, ktorá má promise-based API, takže podporuje async/await, čo sprehľadňuje zdrojové texty.
Čítanie QR kódu zvláda react-native-camera (pozor pri zadávaní typu, ak to ešte neopravili, pre iOS: 'org.iso.QRCode', pre Android: 'QR_CODE').
Navigáciu robím pomocou React Native Router. S tým som musel trochu zabojovať, keď som pridával bočné menu.
Pekné naštýlované komponenty nájdete v react-native-elements.

Na jednej obrazovke som potreboval kresliť vlastný graf (resp. niečo, čo by sa tak dalo nazvať). Našťastie existuje knižnica react-native-svg, pomocou ktorej si kreslíte v SVG. Opäť super pohodlné, keďže s SVG som už viackrát robil veci pre web. Dokonca nad objetkami fungujú udalosti, takže ľahko spravíte aj interaktívne obrázky.

Koľko toho treba vedieť o natívnych platformách

Zo začiatku potrebujete vedieť hlavne ako dostať aplikáciu do mobilu koncového používateľa. Väčšina tutoriálov o React Native túto časť nerozoberala, takže som si musel popozerať veci priamo z dokumentácie k tej-ktorej platforme (čo je pochopiteľné). Produkčný build pre Android viete spraviť z príkazového riadku, pre iOS otváram XCode. Stránky Google aj Apple mi pripadali trochu ťažkopádne, ale zvykol som si. Aj tu odporúčam si to vyskúšať hneď na začiatku vývoja aplikácie a nečakať, kým "to bude hotové". Ja mám všeobecne rád, keď mám pokryté všetko od písania kódu až po nasadenie a viem, že môžem dodať novú veriu do produkcie, keď treba. Na beta testovanie sa nevyžaduje review aplikácie (ok, u Apple je to obmedzené iba na interné testovanie). Nové knižnice už používajú react-native link na pridanie natívnych závislostí, bez potreby ručne upravovať konfiguračné súbory.

Ak ste typ, ktorý chce hneď začať vo veľkom, pozrite sa na Ignite, ktorý má pripravenú solídnu kostru pre vašu aplikáciu.

Zhodnotenie

Ako so všetkým novým, s čím prichádzam do styku, aj tu mi chvíľu trvalo, kým som sa poriadne zorientoval. Hoci jednotlivé knižnice majú v sebe bugy a "badžíky", na ktoré si treba zvyknúť, považujem React Native za vhodný do ostrého nasadenia. A pokiaľ nerobíte naozaj hardcore aplikáciu, ktorá potrebuje operačný systém vyžmýchať do poslednej kvapky, s React Native budete veľmi produktívny. Navyše sa okolo neho stále veľa deje a každú chvíľu pribúdajú nové užitočné veci.

Ups...

Jeden zo zákazníkov chcel aplikáciu používať s MobileIron na Androide. Keď ju skúsili zawrapovať, po spustení sa ihneď vypla. Podľa logov to vyzeralo, že k samotnému štartu našej aplikácie ani nestihlo prísť. Niekde v inicializačnom kóde wrapperu sa to zastavilo. Hlásili to tvorcom MobileIron, tí im po niekoľkých dňoch odpísali, že react-native aplikácie nepodporujú. Zákazník ani my sme to ďalej neriešili, lebo sa rozhodli nakoniec aplikáciu používať mimo MobileIron. Možno by to predsa len nejako išlo - ak s tým máte skúsenosti, dúfam, že sa podelíte.

Užitočné odkazy

https://facebook.github.io/react-native/ - prvý odkaz z Google pre React Native :)
https://medium.com/@dabit3 - blog Nadera Dabita, ktorý sa venuje React Native
https://devchat.tv/react-native-radio - podcast o React Native
https://www.gieson.com/Library/projects/utilities/icon_slayer/ - nástroj na tvorbu ikon so správnou veľkosťou pre iOS aj Android z vami nahratého obrázku

Žiadne komentáre:

Zverejnenie komentára