Tworzenie aplikacji mobilnych od jakiegoś już czasu jest coraz szybsze i mniej kosztowne. Na rynku pojawiły się różne frameworki, które pozwalają pisać aplikacje na różne platformy przy wykorzystaniu jednego kodu. Istnieją frameworki hybrydowe, które pozwalają przy pomocy znajomości HTML, CSS oraz JavaScript tworzyć aplikacje mobilne, ale ich największym minusem jest wyświetlanie się w komponencie WebView platform natywnych, co ma swoje odzwierciedlenie na gorszej wydajności takiej aplikacji. Przykładami takich frameworków są Ionic, PhoneGap czy Framework7. Ze względu na to, że wydajność takich aplikacji nie jest najwyższa, zaleca się ich stosowanie do bardzo prostych projektów.
Jeśli natomiast chcielibyśmy osiągnąć natywną wydajność aplikacji, wówczas musimy zainteresować się innymi narzędziami, które również pozwolą nam na pisanie jednego kodu na kilka platform, ale są one kompilowane do kodu natywnego lub korzystają z natywnych komponentów danej platformy. Do tej grupy należą Xamarin, NativeScript oraz React Native. Jest również Flutter, a o moich odczuciach związanych z pojawieniem się wersji 1.0 piszę tutaj.
Ze względu na moje niekoniecznie pozytywne nastawienie do C#, który jest wykorzystywany w Xamarin’ie, ta technologia nie miała u mnie szans. Z kolei NativeScript nie ma wystarczająco dużej społeczności skupionej wokół siebie, więc tym kierunkiem również się nie zainteresowałem, ale za to React Native okazał się łakomym kąskiem i mam już pewien czas z nim do czynienia co pozwala mi na wyrażenie o nim zdania.
Czym jest React Native?
Jak już można wywnioskować z moich pierwszych zdań, React Native jest frameworkiem do tworzenia aplikacji mobilnych, które korzystając z jednego kodu źródłowego, mogą działać na kilku platformach mobilnych. React Native jest rozwijany i wspierany przez Facebooka, a dodatkowo posiada bardzo dużą społeczność, dzięki czemu otrzymujemy finalnie dojrzały produkt z bardzo dobrym wsparciem.
Kod aplikacji piszemy w języku JavaScript w standardzie ES2015 (lub TypeScript) co jest bardzo dobre dla osób, które chcą stworzyć aplikację dla systemu Android oraz iOS bez znajomości Javy, Kotlina, ObjectiveC czy Swift. Rolę managera pakietów pełni tutaj npm, a całą gamę dostępnych bibliotek możemy znaleźć tutaj. Aplikacje powstałe przy użyciu tego frameworka nie są co prawda w pełni natywne, ponieważ kodem wynikowym jest jednak JavaScript, który jest uruchamiany w oddzielnym wątku na urządzeniu, ale pozwala on na osiągnięcie natywnej wydajności, jak również wykorzystanie natywnych komponentów danej platformy i dostęp do jej natywnych API. Poza tym dzisiejsze silniki JavaScript są bardzo szybkie, więc finalna aplikacja powinna być bardzo zbliżona wydajnością do jej natywnego odpowiednika.
Plusy React Native
Wiemy już, że wydajność aplikacji napisanej w React Native powinna być zbliżona do natywnej, więc jest to zdecydowanie plus tego frameworka. Sprawdźmy dokładniej, jak to jest ze zwiększeniem możliwości o dodatkowe biblioteki.
Wiemy, że możemy znaleźć je w repozytorium npm. Jest bardzo dużo bibliotek, które są napisane tylko w JavaScript więc ich instalacja i użycie jest bardzo szybkie i jednakowe na obydwu platformach. Istnieją również biblioteki, które posiadają natywny kod dla platform Android czy iOS i poza standardową instalacją takiej biblioteki z npm należy wykonać jej linkowanie z natywnym projektem, wywołując polecenie react-native link (proces ten można również przeprowadzić manualnie, korzystając z opisu w dokumentacji React Native lub stosownej biblioteki). Przy pisaniu aplikacji, która powinna działać na kilku platformach, należy jednak zwrócić uwagę na to, czy jakaś dodana do projektu biblioteka będzie te platformy obsługiwała. Jeśli natomiast nie znajdziemy interesującej nas biblioteki, zawsze jest możliwość jej napisania i również możemy dopisać kod natywny czy to w Javie, czy w ObjectiveC, który później będziemy mogli wykorzystać w JavaScript. Pomoże nam w tym również bardzo duża społeczność, która jest skupiona wokół React Native.
Lwią część naszej aplikacji piszemy tutaj w języku JavaScript (jest też możliwe pisanie przy użyciu TypeScript, który, pokrótce mówiąc, jest obiektowym odpowiednikiem JavaScript) więc dzięki temu mamy możliwość napisania aplikacji mobilnych przy pomocy osób, które znają ten język, a trzeba spojrzeć na to, że JavaScript jest obecnie jednym z najpopularniejszych języków programowania. Jeśli już mieliśmy dodatkowo do czynienia z React JS, to praktycznie bez problemu możemy już pisać aplikacje w React Native (zwłaszcza jeśli chodzi o JSX zamiast zwykłego HTML-a).
W związku z tym, że piszemy jeden kod, to samo stylowanie aplikacji również jest bardzo łatwe i mamy tutaj bardzo szerokie pole do popisu, co pozwoli na dostosowanie aplikacji do nawet bardzo konkretnych wymagań odnoszących się do jej strony wizualnej. Kwestia wyglądu może być również dostosowana indywidualnie dla każdej z obsługiwanych platform mobilnych.
Bardzo może tutaj jeszcze spodobać się składanie aplikacji z klocków, czyli z pojedynczych komponentów. Dbając o porządek w projekcie, powinniśmy pisać właśnie takie pojedyncze komponenty, takie jak przyciski, nagłówki czy listy oraz elementy list, które będziemy mogli później wielokrotnie wykorzystywać w całej aplikacji. Jako plus należy też zaliczyć swobodną organizację struktury projektu.
Minusy React Native
Framework React Native posiada bardzo wiele plusów, które przyspieszają pisanie aplikacji oraz redukują ich koszt nawet prawie dwukrotnie poprzez pisanie aplikacji na systemy Android oraz iOS (można również pisać aplikacje na platformę UWP [Universal Windows Platform] Microsoftu), ale posiada on również swoje minusy.
Pomimo tego, że framework ten jest już dosyć dojrzały i szeroko wykorzystywany to praca z nim na platformie Windows jest bardzo męcząca, dlatego od razu najlepiej jest pracować na jakimś Linuksie czy Macu (ta ostatnia opcja jest najrozsądniejsza, ponieważ możemy od razu uruchomić projekt na platformach Android, jak i iOS). Dodatkowo im nowsza wersja React Native, tym więcej problemów na platformie Windows, a z niektórych nowszych wersji nawet czyste, niezmodyfikowane projekty nie chcą działać.
Wydajność aplikacji napisanej w React Native jest bardzo wysoka, ale niestety trzeba o to zadbać, bo nie jest tak, że każda aplikacja będzie działała wydajnie. Należy pamiętać o tym, że mamy do czynienia z platformami mobilnymi więc mamy również pewne ograniczenia sprzętowe nawet pomimo tego, że obecne urządzenia mobilne są coraz potężniejsze. Nawet jeśli znamy React JS i mamy w nim doświadczenie to trzeba umieć się przestawić na React Native, ponieważ przeniesienie wszystkich swoich nawyków nie będzie dobrym pomysłem. Trzeba też wiedzieć, kiedy napisać komponent klasy Component, kiedy PureComponent, a kiedy wystarczy komponent funkcyjny.
Problemy wydajnościowe pojawią się również, na przykład, w przypadku wykonywania dużej ilości transformacji na natywnych komponentach (wszystkie komponenty React Native odnoszą się do natywnych komponentów), ponieważ wykonywanie obliczeń po stronie JavaScriptu spowoduje zbyt częstą komunikację pomiędzy React Native a kodem natywnym. Ta komunikacja jest najbardziej zasobożerną i czasochłonną czynnością, którą należy ograniczyć do minimum, więc może okazać się, że część naszego kodu trzeba będzie jednak napisać natywnie.
Wygląd aplikacji możemy bardzo łatwo stworzyć jeden na dwóch platformach, ale jednak użytkownicy każdej z platform są do niej już w pewien sposób przyzwyczajeni i jednak nie zawsze spójny wygląd aplikacji będzie pożądany. Należy w tym przypadku albo napisać osobne komponenty po jednym dla Androida oraz iOS lub przygotować oddzielnie stylowanie.
Znajomość platform mobilnych będzie również potrzebna w przypadku projektowania nawigacji pomiędzy ekranami aplikacji. Co prawda mamy tutaj pełną dowolność, ale jednak ciągle jest to aplikacja mobilna, więc dobrze będzie na początku zapoznać się z wytycznymi docelowych platform co do nawigacji.
React Native daje nam praktycznie dowolną możliwość określenia struktury naszego projektu, ale nie zawsze da się przewidzieć jaka struktura projektu będzie akurat w naszym przypadku najlepsza. Często jest tak, że w jakimś momencie może się okazać, że musimy jednak zmienić strukturę projektu, ponieważ nasza aplikacja zaczyna się rozrastać w nieokiełznany sposób.
Pomimo tego, że istnieje wiele dostępnych bibliotek oraz na ogół wystarczy jeden kod, aby stworzyć aplikację wieloplatformową, to jednak w specyficznych sytuacjach może się okazać, że jednak nie obejdziemy się bez osoby, która zna platformy natywne lub jedną z nich, aby wykonać konkretne wymagania względem aplikacji.
Podsumowanie
React Native jest bardzo dobrym frameworkiem ułatwiającym tworzenie aplikacji mobilnych i w wielu przypadkach wystarczy nam do tego znajomość JavaScriptu oraz React JS (możemy obejść się bez tego i poznać zasady rządzące tym frameworkiem już w React Native). Trzeba jednak wziąć pod uwagę, że posiada on również swoje minusy, które trzeba zaakceptować lub wziąć pod uwagę, żeby nasza aplikacja była faktycznie dobra. Należy wiedzieć, że pracujemy na platformie mobilnej z licznymi ograniczeniami oraz specyficznymi zachowaniami i w bardzo wielu przypadkach, pomimo znajomości technologii webowych razem z React JS, musimy się odpowiednio dostosować, ponieważ ucierpi na tym wydajność aplikacji. Wiedzmy też, że czasami przyda się również znajomość natywnych technologii mobilnych.