React Native pierwsza aplikacja -> StormSnapshot #3

React Native pierwsza aplikacja

Witam w kolejnej części serii StormSnapshot. W poprzednim wpisie mobilne aplikacje hybrydowe zebraliśmy podstawowe informacje o dostępnych technologiach oraz wybraliśmy dwa najlepiej rokujące frameworki: Ionic, oraz React native.

Dzisiaj przyjrzymy się bliżej technologii React Native i przygotujemy prostą aplikację testową.

React i React Native

React (nazywany również React.js lub ReactJS) to biblioteka JavaScript, rozwijana na licencji open source, do budowania interfejsu użytkownika. Projekt wspierany jest głównie przez ludzi z Facebooka i Instagrama.

Dzięki React Native można budować mobilne aplikacje, korzystając tylko z JavaScriptu. Powstała aplikacja nie jest typową aplikacją hybrydową wykorzystującą webview do prezentacji strony mobilnej, jak robi to np. PhoneGap. Zamiast tego na podstawie komponentów napisanych w składni React budowane są natywne komponenty w Javie na Androida, czy w Objective-C na iOS.

Motto React Native

Motto React Native

Większości frameworków hybrydowych przyświeca motto: „Write once, run anywhere” (napisz raz, uruchom wszędzie), jednak w przypadku Reacta zostało ono sparafrazowane na: „Learn once, write anywhere” (naucz się raz, pisz wszędzie).

„Write once, run anywhere”

Oddaje to dobrze ideę, która przyświeca temu projektowi. Zamiast pisać jeden kod, który będziemy mogli bez modyfikacji uruchomić na wszystkich dostępnych platformach, dostajemy jedno narzędzie, które możemy wykorzystać niezależnie czy piszemy stronę www, czy aplikację mobilną. Takie podejście teoretycznie wymaga trochę więcej wysiłku, ale pozwala uzyskać bardziej dopasowane aplikacje.

Learn once, write anywhere

W efekcie tego, migrując np. projekt z Androida na iOS, trzeba będzie pochylić się jedynie nad częścią komponentów, ale zdecydowana większość kodu może zostać wykorzystana jako część wspólna. Resztę kodu stanowią komponenty i funkcjonalności dostępne tylko na danym systemie operacyjnym.

Wprowadzenie do JSX

Komponenty dostępne w React pisane są zazwyczaj przy pomocy składni JSX. JSX to rozszerzenie składni JavaScript o możliwość prostego wykorzystywania tagów HTML. Użyte tagi są przetwarzane i zamieniane na odpowiednie wywołania biblioteki js.

Powyższy fragment kodu to prosta konstrukcja JSX. Składnia trochę przypomina sam widok HTML, przy jego pomocy można jednak w pełni korzystać z możliwości JavaScript.

Osadzenie wyrażeń w JSX

W JSX można wykorzystać dowolne wyrażenia JavaScript, osadzając je w nawiasach klamrowych:

IDE

Początkowo projekt chciałem realizować z wykorzystaniem Netbeans IDE. Niestety w obecnej wersji (8.2) Netbeans ma jeszcze bardzo słabe wsparcie dla składni JSX, nie znalazłem też żadnego pluginu spełniającego moje oczekiwania. Nie wyobrażam sobie pisania większego projektu w dowolnej technologii bez przynajmniej podstawowego wsparcia w podpowiadaniu składni.

Między innymi dlatego zdecydowałem się skorzystać z IntelliJ IDEA. Niestety IntelliJ ma wsparcie dla JavaScript i składni JSX tylko w pełnej płatnej wersji. Można jednak pobrać 30-dniową wersję próbną.

Pierwszy projekt

Przed rozpoczęciem pracy musimy przygotować środowisko programistyczne oraz wszystkie niezbędne narzędzia. Pierwsza wersja aplikacji będzie dostępna na Androida, natomiast system operacyjny, z którego korzystam to Linux Ubuntu.

Niezbędne narzędzia

Ponieważ aplikacja będzie dostępna na Androidzie, musimy zacząć od instalacji Android Studio.

React Native wykorzystuje Node.js jako silnik do budowania kodu JavaScript, dlatego potrzebujemy również jego.

Kolejnym narzędziem, którego potrzebujemy, jest: React Native Command Line Interface (CLI):

Więcej na temat niezbędnych narzędzi można przeczytać na React Native Getting Started.

Struktura projektu

Po instalacji wszystkich niezbędnych narzędzi możemy przejść do wygenerowania struktury przykładowego projektu. Przechodzimy do docelowego katalogu i poniższym poleceniem generujemy strukturę naszej aplikacji:

Wygenerowane pliki zawierają wszystko, co potrzeba do uruchomienia pierwszej aplikacji w React Native.

Projekt React Native

Projekt React Native

W katalogu głównym projektu znajduje się plik: index.android.js, który jest punktem wejścia dla aplikacji. W tym samym katalogu znajdziemy jeszcze katalog: node_modules zawierający pliki biblioteki React Native oraz katalog android z kodem specyficznym dla tej platformy.

Uruchomienie aplikacji na symulatorze i urządzeniu

Zaczynamy od uruchomienia serwera React Native, który będzie przechowywał pliki JavaScript. Przechodzimy do katalogu z wygenerowanym wcześniej projektem i odpalamy poniższą komendę:

W osobnej konsoli możemy już zbudować i uruchomić przygotowany projekt:

Jeżeli wszystko poszło dobrze, program powinien zainstalować na dostępnym symulatorze oraz fizycznym urządzeniu nową aplikację.

React Native emulator

React Native emulator

Aplikacja

Nasza aplikacja ma jedno proste zadanie, mianowicie przetestowanie podstawowych możliwości React Native. W tym celu przygotujemy kilka widoków:

  • ekran powitalny
    Na tym widoku wyświetlimy logo oraz damy możliwość przejścia do pozostałych widoków.
  • lista
    Wyświetlenie przewijanej listy 100 elementów.
  • rss
    Pobranie z Internetu oraz wyświetlenie listy najnowszych postów z bloga. Poszczególne wpisy będą miały tytuł i obrazek.

Navigator – przejścia w aplikacji

Całą aplikację podzielimy na poszczególne widoki reprezentujące osobne funkcjonalności. Natomiast główny plik index.android.js będzie zawierał komponent Navigator odpowiedzialny za przejścia w aplikacji.

Początek kodu to import wszystkich potrzebnych komponentów z frameworka oraz zdefiniowanych przez nas widoków. Poszczególne widoki zebrałem dla porządku w katalogu screens.

W metodzie renderScene na podstawie przekazanej nazwy generujemy odpowiedni widok. Do wszystkich widoków przekazujemy obiekt navigatora, żeby również z nich można było robić przejścia.

Wszystkie widoki dziedziczą z tej samej klasy Screen, dzięki czemu można było wydzielić w jedno miejsce zarządzenie przejściami.

Menu aplikacji [TouchableHighlight]

ReactNativeSampleProject-startScreen

ReactNativeSampleProject-startScreen

Jako menu wykorzystałem obrazki oraz abstrakcyjny komponent TouchableHighlight przechwytujący kliknięcia. Po wybraniu konkretnego obrazka wywoływana jest metoda onPress, która zwraca przygotowaną metodę z przekierowaniem do nowego widoku.

Stylowanie aplikacji [StyleSheet]

Stylowanie aplikacji w React Native przebiega podobnie jak w zwykłych kaskadowych stylach CSS. W wypadku wielu właściwości wystarczy zamienić argumenty z myślnikiem, jak background-color, na konwencję camelCase backgroundColor.

Style można definiować inline jednak zazwyczaj lepszym pomysłem jest wydzielenie ich z kodu do stałych.

To rozwiązanie może nie jest tak wygodne jak wykorzystanie samych styli CSS. Jednak nawet podstawowa znajomość CSS powinna wystarczyć do w miarę bezbolesnego wykorzystania tego podejścia.

Lista danych [ListView]

Ten widok ma na celu przetestowanie długiej listy rekordów dostępnej z komponentu ListView.

Komponent ListView umożliwia proste operowanie na przewijanej liście rekordów. Wystarczy podać źródło danych oraz zdefiniować metodę renderRow, odpowiedzialną za wygenerowanie jednego wiersza listy.

RSS – pobranie danych z Internetu

ReactNativeSampleProject-rssScreen

ReactNativeSampleProject-rssScreen

Kolejny widok aplikacji to przykład pobrania danych z Internetu oraz parsowania XML-a. Na podstawie danych pobranych z sieci (kanał RSS) budowana jest lista z wykorzystaniem ListView.

Parsowanie XML

Do sparsowania pobranego pliku XML wykorzystałem zewnętrzny komponent DOMParser, który należy doinstalować do projektu poniższą komendą.

W podobny sposób można zainstalować inne komponenty. Pokaźna lista komponentów dostępna jest w katalogu.

Podsumowanie

W moim odczuciu framework przeszedł bardzo dobrze ten test. Mimo iż jest to moja pierwsza styczność z tą technologią, nie miałem większych problemów z realizacją podstawowych funkcjonalności. Na stronie projektu można znaleźć bardzo pomocną dokumentację, która praktycznie krok po kroku wprowadza programistę w tajniki frameworka.

Powstała aplikacja działa płynnie i nie przycina się. Ciężko mieć tu jakieś zastrzeżenia, nawet przy dużej ilości danych.

Dopracowanie wyglądu samej aplikacji wymaga trochę wysiłku, ale bez większego trudu w sieci można znaleźć gotowe przykłady ostylowanych komponentów.

Podsumowując, z React Native korzysta się naprawdę dobrze, technologia stoi na wysokim poziomie, a powstała z jej pomocą aplikacja nie odbiega jakością od natywnych odpowiedników.

Jestem bardzo ciekaw, jak w tym porównaniu wyjdzie Ionic, ale już teraz widzę, że nie będzie miał łatwego zadania.

Linki

 

Programista – Pytania rekrutacyjne

Lista pytań rekrutacyjnych, które pozwolą przygotować Ci się na rozmowę kwalifikacyjną.

Brak komentarzy
Share:

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *