React Native nowość i alternatywa dla natywnych aplikacji mobilnych!

Wczoraj oficjalnie został wydany przez Facebooka  React Native, czyli framework mający za zadanie być dobrą alternatywą dla natywnych aplikacji moblinych, jak również Cordova, czy Titanium. Jaki jest, co go wyróżnia, czy można z niego już korzystać?

Facebook poinformował o tym, że React Native jest już dostępny w serwisie Github. Biblioteka pozwala na budowanie pseudo natywnych aplikacji mobilnych na platformę iOS jak również Android przy pomocy JavaScript i bibliotece Facebook React. Przy tym należy zaznaczyć, że wersja z udziałem Adroida ma zostać wydana w najbliższym czasie.

React Native nie jest kolejnym rozwiązaniem typu „napisz aplikację mobilną raz i uruchom ją na wszystkich urządzeniach, gdzie właśnie taka idea przyświecała takim rozwiązaniom jak Cordova. Facebook podkreśla, że jest to nieco inne rozwiązanie typu „naucz się pisać aplikacje mobilne raz i używaj tego wszędzie”. React native kompiluje applikacje napisane w Javascript na natywne widoki zapewniając przy tym wygląd i odczucia przystosowane do specyfiki danej platformy tj. iOS lub Android. Nie jest to wrapper widoku web, który jedynie odwzorowuje kontrolki, ale jest czymś nie co więcej, gdzie kod jest tak wydajny, jak w natywnej aplikacji.

React Native, czy jest już używany?

Najlepszym dowodem na wykazanie, że rozwiązanie jest skuteczne, to przykłady jego zastosowania. Facebook aktualnie używa React Native do tworzenia kilku swoich aplikacji. Dla przykładu jedną z takich aplikacji jest Facebook Groups oraz Facebook Ads Manager, gdzie React Native jest używany do renderowania wielu widoków z React, JavaScript na natywny kod. Zaś zwykły React.js jest już używany przez takie firmy jak Yahoo, Mozilla, Airbnb i Reddit (info)apps_example

Możliwości React Native

React Native kryje w sobie wiele udogodnień, które w teorii powinny przypaść do gustu każdemu. Sprawdźmy je!

Natywne komponenty iOS

Przede wszystkiemu przy pomocy React Native, można wykorzystać standardowych komponentów znanych z natywnych aplikacji iOS, taki jak UITabBar, UIPIckerView i innych. Gotowe kontrolki są bardzo łatwe w użyciu, a Facebook przygotował bardzo wiele przykładowych kodów. Oto jeden z nich:

Przechwytywanie dotyku

React Native implementuje własny responder, który jest podobny do tego standardowego, znanego z systemu iOS, który dostarcza komponenty wysokiego poziomu, takie jak TouchableHighlight, który dla przykładu potrafi zintegrować scroll view z innymi elementami bez potrzeby dodatkowej konfiguracji.

Asynchroniczne wykonywanie kodu

Operacje pomiędzy JavasScript, a natywną platformą wykonywane są asynchronicznie, gdzie dodatkowe natywne moduły mogą również tworzyć dodatkowe wątki. Znaczy to tyle, że zapis na dysk, czy inne funkcjonalności mogą być wykonywane w tle. W trakcie uruchomionej aplikacji, wykonywany kod JavaScript można debugować przy pomocy Chrome Developer Tools.

Rozszerzalność

Kod aplikacji napisany tylko przy pomocy React Native można w prosty sposób rozszerzać o dodatkowe, natywne widoki i moduły. W tym celu wystarczy utworzyć nową klasę implementującą RCTBridgeModule protocol i później wykorzystać RCT_EXPORT w celu eksportu i udostępnienia tej klasy do JavaScriptu.

Wygląd aplikacji

Dostosowywanie i projektowanie widoków jest bardzo proste, w React Native dostępny jest flexbox layout, który dostarcza elementy interfejsu użytkownika, które są już idealnie dostosowane do mobilnych aplikacji. Zmiana wyglądu tych elementów jest możliwa przy pomocy stylowania CSS, który jednak nieco inaczej się implementuje (przynajmniej w tych przykładach, które przeglądałem).

React Native pierwsze wrażenia

Właściwie od razu wziąłem się za instalację, gdzie skorzystałem z niesamowicie prostego „Getting Started”. Całość trwała zaledwie kilka minut w raz z utworzeniem nowego projektu, gdzie po odpaleniu wszystko już działało. Mało tego, po wy edytowaniu pliku index.ios.js wystarczyło nacisnąć „cmd + R”, aby zmiany był widoczne w symulatorze. Trzeba przyznać, że na pierwszy rzut oka wszystko wyglądało bardzo zachęcająco. W takim razie postanowiłem sprawdzić jak React sprawuje się w bardziej zaawansowanych zadaniach, gdzie w repozytorium React Native dostępne są dwa dość pokaźne przykłady działających aplikacji.

Uruchomienie przykładów na symulatorze i urządzeniu

W pierwszej kolejności należy sklonować repozytorium. w tym celu wystarczy uruchomić terminal, przejść do miejsca w którym chcemy mieć repo, a następnie wpisać komendę:

git clone https://github.com/facebook/react-native.git

Drugim krokiem jest odpalenie serwera na którym będą przechowywane pliki JavaScript. Przejdźmy w taki razie do katalogu repozytorium, a potem zainstalujmy i odpalmy serwer.

cd react-native
npm install
sudo npm start

Mając odpalony serwer wystarczy przejść do konkretnego przykładu:

cd Examples/Movies
open Movies.xcodeproj/

Teraz wystarczy wybrać symulator, kliknąć run i aplikacja powinna działać.
W przypadku chęci uruchomienia aplikacji na urządzeniu musimy być pewni, że jest podłączone do tej samej sieci, a następnie należy zmienić adres ścieżki do plików JavaScript. Przechowywana jest ona w pliku AppDelegate, a dokładnie

sCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle"];

Zmienić należy localhost na adres nasz adres IP. Gdyby były z tym trudności, to w terminalu wystarczy wpisać ifconfig i wyszukać aktualny adres IP w konfiguracji sieci.

Wrażenia z testowania przykładowych aplikacji

Na pierwszy rzut oka wszystko działa w porządku. Aplikacja „Movies” działa bez najmniejszych problemów na urządzeniu iPad Mini. Gorzej jest w przypadku aplikacji UIExplorer, która jest zdecydowanie bardziej wymagająca i testuje wszystkie kontrolki, do których mamy dostęp przy pomocy Reacta. Odczuwalne są spadki wydajności, jak również nastąpił w pewnym momencie aplikacja się całkowicie wyłączyła (CameraRollView). Kontrolka WebView całkowicie nie działała, wibracja również. Poza tym całość działa bez najmniejszych problemów. W trakcie testów zupełnie inaczej było w przypadku implementacji gry 2048 w React, gdzie w porównaniu do natywnej aplikacji całość działała mało dynamicznie i nie było tego odczucia płynności.

Podsumowanie

Moim zdaniem React Native stanie się w niedługim czasie popularnym rozwiązaniem, a to z tego względu, że w tej fazie projektu działa już zaskakująco dobrze, a może być jeszcze lepiej. Stanowi niezłą alternatywę dla Cordova, Ionic Framework, czy też natywnych aplikacji. Z drugiej strony wymaga nieco czasu, aby wdrożyć się w to rozwiązanie i poznać wszelkie zagwozdki, na które można trafić przy tworzeniu własnej aplikacji mobilnej. Powstaje również pytanie jak wygląda sprawa w przypadku tworzenia bardziej zaawansowanych widoków, z większą ilością grafiki. O tym będzie można się przekonać już niedługo.

Przydatne linki

Facebook React Native – artykuł, którym poniekąd się inspirowałem. Szybkie przykłady kodu do podglądu.
Raywenderlich – Introducing React Native: Building Apps with JavaScript – dobry wstęp ku temu, aby sprawdzić jak stworzyć od zera aplikację mobilną przy pomocy React Native.

You may also like...