Czy w 2023 roku wybrać React Native do mobilnego stacku?

Definicje React Native bywają zagadkowe. Żeby pomóc Ci ocenić, czy to właściwa technologia dla Ciebie, zaczniemy od rozszyfrowania jednej z nich.

A teraz: jak to rozumieć?

Nazwa frameworka to połączenie React + native.

Dlaczego „React”?

React to otwartoźródłowa biblioteka JavaScript do budowania interaktywnych interfejsów użytkownika (UI) w przeglądarce. Stworzył ją w 2011 roku Jordan Walke, a rok później została wdrożona na Facebooku. Szybko zyskała popularność dzięki elastyczności, łatwości użycia i wysokiej wydajności.

Jak wyjaśniliśmy w poprzedniej sekcji, React Native to framework JavaScript oparty na bibliotekach Reacta, który umożliwia tworzenie wieloplatformowych aplikacji mobilnych o natywnym wyglądzie i zachowaniu.

Skoro RN sprawia wrażenie „prawie” natywnego, to czym dokładnie różni się od narzędzi przeznaczonych dla konkretnej platformy?

Zacznijmy od zdefiniowania aplikacji natywnych.

Dlaczego warto inwestować w aplikacje mobilne?

W 2018 roku Android działał na ponad 85% urządzeń mobilnych na świecie i miał ponad 2 miliardy aktywnych użytkowników. Apple z kolei ogłosiło, że przekroczyło próg 1,3 miliarda aktywnych urządzeń na początku tego roku.

Najważniejsze powody, by wybrać React Native zamiast aplikacji natywnych

1. Krótszy czas realizacji
   
   W React Native programiści piszą kod tylko raz i używają go na różnych mobilnych systemach operacyjnych. Nie tracą też czasu na rekompilację kodu i restart aplikacji dzięki wyjątkowej funkcji hot reloading , która pozwala wprowadzać zmiany w locie.
   
   Dlatego jedną z najbardziej widocznych przewag React Native nad aplikacjami natywnymi jest niesamowite tempo pracy. Firmy podają, że dzięki wieloplatformowości RN pracują szybciej nawet o 300%!
   
   To ogromna korzyść: kto szybciej dostarcza kod, ten pierwszy wchodzi na rynek z innowacyjnym produktem.
   
   
2. Szybsze aktualizacje produktu i rozbudowa funkcji
   
   Także testy i aktualizacje zespół robi w React Native tylko raz, co daje kolejne oszczędności czasu.
   
   Co więcej, przy tworzeniu natywnym, gdy aplikacja już działa, trzeba przejść przez cały proces budowania i wgrać nową wersję do Apple App Store albo Android Play. Sklepy muszą zatwierdzić wszystkie zmiany i dopiero wtedy aktualizacje trafiają do użytkowników, którzy nadal muszą je ręcznie zainstalować na swoich urządzeniach.
   
   React Native mocno upraszcza ten proces i sprawia, że użytkownik w ogóle ich nie zauważa. Zwykle RN działa lokalnie, na plikach JavaScript osadzonych w aplikacji. Może też jednak przechowywać pliki JavaScript zdalnie na serwerze i pobierać najnowszą wersję.
   
   W efekcie, gdy masz gotowe wszystkie aktualizacje, po prostu publikujesz nowe funkcje i rozszerzenia, a zostaną one zastosowane na urządzeniu każdego użytkownika przy następnym uruchomieniu aplikacji.
   
   
3. Jeden zespół do wszystkich platform
   
   Nie da się ukryć, że mniejsze zespoły osiągają lepsze wyniki. W małym zespole każda osoba bierze odpowiedzialność za swoją pracę, co motywuje ją i zwiększa zaangażowanie. Bezpośrednia komunikacja wewnątrz zespołu przyspiesza pracę i rozwiązywanie problemów. Mniejszymi zespołami znacznie łatwiej też zarządzać.
   
   Z React Native wystarczy jeden zespół, który dostarczy aplikację na wszystkie platformy mobilne. Większość kodu opiera się na JavaScripcie i Reakcie, a popularność obu ułatwia znalezienie właściwych ludzi do projektu.
   
   Przy aplikacjach natywnych problemów kadrowych jest więcej. Po pierwsze, musisz szukać programistów z umiejętnościami pod konkretną platformę. Po drugie, do wypuszczenia aplikacji potrzeba co najmniej dwa razy więcej osób, co podwaja koszt realizacji. Wreszcie w projekcie natywnym oba zespoły muszą pracować ramię w ramię, budować spójny produkt i dotrzymywać tych samych terminów. To wymaga sprawnej komunikacji między nimi i większego nadzoru z Twojej strony. Wszystko to dodatkowo podnosi koszty wdrożenia i wydłuża czas dostarczenia produktu.
   
   
4. Niższe koszty
   
   Wszystkie powyższe czynniki składają się na kluczową biznesową przewagę React Native nad tworzeniem natywnym: znacznie niższy całkowity koszt zbudowania aplikacji.
   
   React Native pozwala osiągnąć te same rezultaty co natywnie, tylko szybciej, mniejszymi zespołami i niższym kosztem kadrowo-administracyjnym. Framework usprawnia nie tylko samo kodowanie, lecz także aktualizacje produktu i dostarczanie go użytkownikowi końcowemu. To przynosi kolejne oszczędności.
   
   Do tego RN jest w pełni otwartoźródłowy, łatwo dostępny dla każdego i nie wymaga IDE przypisanego do platformy, jak rozwiązania natywne. Oszczędza Ci to kłopotu z opłatami licencyjnymi i daje łatwiejszy (i darmowy!) dostęp do narzędzi oraz bibliotek.
   
   Te oszczędności dotyczą zarówno tworzenia aplikacji wewnętrznie, jak i outsourcingu. Nawet jeśli chcesz zlecić tworzenie w React Native zewnętrznemu software house'owi, koszt dostarczenia produktu będzie znacznie niższy niż w przypadku aplikacji natywnych.
   
   
5. Łatwiejsze debugowanie
   
   Także debugowanie bywa w podejściu wieloplatformowym sprawniejsze niż w aplikacjach natywnych. W React Native dostarczasz tę samą aplikację na wiele platform mobilnych, co drastycznie skraca czas i wysiłek potrzebny do wykrycia i usunięcia błędów. Jedna poprawka usuwa błędy naraz na wszystkich systemach, co zapewnia spójne zachowanie. Pozbywasz się błędu raz i masz pewność, że zniknął zarówno z Androida, jak i z iOS-a.
   
   Kolejna kluczowa różnica: tworząc natywną aplikację mobilną, Twój zespół musi korzystać z IDE danej platformy i poznać na wylot odpowiedni debugger. Żeby naprawiać błędy w React Native, wystarczą mu podstawowe, darmowe narzędzia, takie jak narzędzia deweloperskie przeglądarki, console.log czy wtyczka Facebooka, Nuclide.
   
   Wreszcie nie sposób pominąć w tym kontekście funkcji hot reloading w React Native . W przypadku aplikacji natywnych programiści muszą zatrzymać system, żeby wdrożyć poprawki, a następnie uruchomić go ponownie, co odbija się na użytkowniku. React Native pozwala wprowadzać zmiany, w tym obsługę błędów, w trakcie działania i od razu widzieć efekty pracy w uruchomionej aplikacji. Aktualizacje można wdrożyć później, nie przeszkadzając użytkownikowi.

Najważniejsze wnioski

• Aplikacje natywne to aplikacje tworzone na urządzenia mobilne (smartfony, tablety, sprzęt mobilny itd.) z użyciem konkretnego języka programowania i IDE właściwego dla danej platformy (np. iOS, Android, Windows mobile).
• Zalety aplikacji natywnych to:
• Pełne wykorzystanie oprogramowania, API i funkcji danej platformy.
• Optymalna szybkość i wydajność.
• Wyższy poziom bezpieczeństwa.
• React Native daje doświadczenie zbliżone do natywnego, ale jego kod tworzy i utrzymuje jeden zespół, a wdraża się go na wszystkie platformy mobilne naraz.
• Najbardziej oczywiste zalety tworzenia w React Native w porównaniu z technologiami natywnymi to:
• Niezrównane tempo dostarczania, nawet o 300% szybsze niż w aplikacjach natywnych.
• Natychmiastowe aktualizacje dzięki możliwościom hot reloadingu.
• Nowe wydania produktu, które nie psują doświadczenia użytkownika.
• Krótszy czas wejścia na rynek.
• Bardziej efektywne i tańsze zespoły.
• Łatwiejszy dostęp do specjalistów
• Znacznie niższe koszty wytwarzania.
• Łatwiejsze debugowanie.
• RN jest darmowy i w pełni otwartoźródłowy, ma wsparcie ogromnej społeczności programistów oraz zaplecze najbardziej innowacyjnych firm świata, a do tego opiera się na najpopularniejszym języku programowania na świecie.

Zobacz także:
1. Mobile App Development: React Native vs Native (iOS, Android)
2. How To Pick The Right Custom Software Development Company? [Step-By-Step Guide]

W poprzedniej sekcji wypunktowaliśmy główne różnice między React Native a aplikacjami natywnymi.

Ponieważ firmy coraz częściej dostrzegają niepodważalne zalety pisania aplikacji tylko raz na różne systemy mobilne, stale rośnie też liczba narzędzi do tworzenia wieloplatformowego. Żeby pomóc Ci zrozumieć różnice między nimi, przyjrzymy się React Native w zestawieniu z kilkoma innymi frameworkami do budowania aplikacji wieloplatformowych.

Najlepszy = optymalny dla Ciebie

Zanim zaczniemy, słowo ostrzeżenia. Tak jak nie ma odpowiedzi na pytanie „Co jest lepsze? React Native czy aplikacje natywne?”, tak nie da się skreślić jednego rozwiązania wieloplatformowego na rzecz innego. Każdemu według potrzeb. Każda firma działa w innym kontekście biznesowym i dysponuje innymi zasobami.

Naszym celem nie jest promowanie React Native, tylko pokazanie Ci wszystkich sensownych opcji i pomoc w wyborze tej, która najlepiej pasuje do Twojego produktu.

Zaczynamy!

Narzędzia i kryteria

Istnieją dziesiątki potencjalnych alternatyw dla React Native. Część z nich, jak NativeScript czy Sencha, jest dość popularna. Inne są bardziej niszowe. Skupimy się na tych pierwszych: dojrzalszych, szerzej stosowanych i z mocnym wsparciem społeczności.

Żeby porównanie było wiarygodne, zdefiniowaliśmy zestaw kryteriów oceny:

1. Przenośność - jakie urządzenia mobilne obsługuje dane narzędzie?
2. Koszt - czy dane rozwiązanie jest darmowe/otwartoźródłowe, czy licencjonowane?
3. Dokumentacja - czy dany framework ma kompletną dokumentację i wsparcie? To kluczowe zwłaszcza wtedy, gdy zaczynasz pierwszy projekt bez wcześniejszej znajomości narzędzia.
4. Rozpoznawalność w społeczności - porównamy popularność i dojrzałość każdej technologii na podstawie wsparcia ze strony społeczności programistów.
5. Popularność - które firmy używają danego rozwiązania w swoich aplikacjach?
6. Zalety i wady - jakie są główne zalety i wady każdego narzędzia?

Które narzędzie jest najlepsze dla Twoich potrzeb?

Jeszcze raz: nie ma jednego „najlepszego narzędzia do tworzenia wieloplatformowego”, które zdecydowanie wyprzedza resztę. Mnogość tych technologii mówi sama za siebie. Każda z nich, w tym React Native, ma swoje zalety, a obok nich szereg wad.

Przejrzyj nasze porównanie i pomyśl o swoich wymaganiach oraz zasobach. Zestaw wszystkie czynniki, oceń je pod kątem celów biznesowych i możliwości zespołu, a potem podejmij świadomą decyzję.

Wszystkie prezentowane narzędzia do wieloplatformowego tworzenia aplikacji mobilnych mogą pochwalić się dużą społecznością użytkowników, która nieustannie je rozwija.

Choć sama liczba użytkowników i kontrybutorów danej platformy nie powinna przesądzać o wyborze technologii do Twojego projektu, jest ważnym czynnikiem oceny.

A jak wygląda popularność wśród firm? Przejdźmy przez każde narzędzie i zobaczmy, kto z nich korzysta.

6. Zalety i wady

Cordova w tworzeniu wieloplatformowym

Zalety Cordovy

• Szeroki katalog wtyczek.
• Znane języki programowania (JavaScript, CSS i HTML5).
• Integracja z różnymi frameworkami UI, takimi jak Sencha Touch, Dojo Mobile czy jQuery Mobile.
• Brak opłat licencyjnych.

Wady Cordovy

• Część funkcji działa tylko na wybranych urządzeniach.
• Notoryczne problemy z wydajnością. Pojawiają się opinie, że Cordova jest zbyt wolna, co może wynikać z dużej liczby grafik i złożoności architektury.
• Nie nadaje się do dużych, złożonych projektów.

Ionic w tworzeniu wieloplatformowym

Zalety Ionica

• Można go używać z dowolnym IDE lub edytorem kodu obsługującym JavaScript albo TypeScript.
• Udostępnia dużą liczbę wtyczek do natywnych API.
• Prosty start: wymaga jedynie znajomości JavaScriptu, HTML-a i CSS-a (oraz opcjonalnie Angulara).
• Mnóstwo dostępnych komponentów UI.
• Bardzo dobrze udokumentowany.
• Przystępna opcja dla mniejszych zespołów, które mogą korzystać z darmowej wersji.

Wady Ionica

• Ponieważ Ionic korzysta z Cordovy, ma równie duże problemy z wydajnością, zwłaszcza na starszych urządzeniach.
• Częstotliwość aktualizacji nie zachwyca, co może wymuszać pisanie własnych modułów i prowadzić do błędów.
• Ograniczona funkcjonalność natywna, która wymaga własnego kodu.
• Nie nadaje się do zaawansowanej grafiki i błyskawicznych gier.

Flutter w tworzeniu wieloplatformowym

Zalety Fluttera

• Jedna baza kodu na iOS i Androida naraz.
• Pozwala łatwo prototypować i iterować.
• Ma wsparcie technologicznego giganta, Google'a.
• Hot reload: programiści widzą zmiany w kodzie w czasie rzeczywistym.
• Znakomita dokumentacja.
• Korzysta z bogatego zestawu widgetów Material Design i Cupertino (w stylu iOS) zbudowanych we własnym frameworku Fluttera.
• Dostęp do funkcji natywnych: Flutter pozwala ponownie wykorzystać istniejący kod w Javie, Swifcie i Objective-C, żeby sięgnąć po natywne funkcje i SDK na iOS i Androidzie.
• Pozwala realizować własne, spójne z marką projekty bez ograniczeń zestawów widgetów producenta.

Wady Fluttera

• Opiera się na mniej popularnym Darcie, który nigdy nie zdobył takiego uznania społeczności jak Kotlin czy Java.
• Brak społeczności wokół frameworka.
• Ograniczona liczba bibliotek.
• Ograniczona liczba bibliotek.
• Nie obsługuje 32-bitowych urządzeń z iOS.

NativeScript w tworzeniu wieloplatformowym

Zalety NativeScriptu

• Wysoki odsetek współdzielonego kodu (do 90%) między aplikacjami na iOS, na Androida i tymi opartymi na Angularze.
• Dostępna darmowa wersja z ograniczoną liczbą buildów w chmurze.
• Dzięki wbudowanemu wsparciu dla Angular.js i TypeScriptu warto go rozważyć przy przenoszeniu aplikacji webowych z Angulara i Vue.JS na mobile.
• Bezpośredni dostęp do natywnych API wraz z pełnym dostępem do licznych bibliotek deweloperskich.
• Kompilacja kodu w czasie wykonania.
• Wydajność zbliżona do natywnej, podobna do React Native.

Wady NativeScriptu

• Słabe możliwości debugowania.
• Duże różnice w jakości poszczególnych wtyczek, co może prowadzić do problemów z niezawodnością i wymagać dodatkowej pracy programistycznej.
• Duży rozmiar aplikacji w porównaniu np. z React Native czy Ionikiem, co może być problemem przy słabym połączeniu.

React Native w tworzeniu wieloplatformowym

Pogłębioną analizę zalet i wad RN znajdziesz w sekcji  ZALETY I WADY REACT NATIVE.

Zalety React Native

• Łatwe przejście dla programistów JavaScriptu.
• Wydajność zbliżona do natywnej dzięki bezpośredniemu dostępowi do natywnych API
• Znakomite doświadczenie użytkownika dzięki współpracy z natywnymi kontrolerami.
• Duża liczba gotowych funkcji, komponentów i modułów.
• Ponowne wykorzystanie kodu sięgające 80-90%.
• Hot reloading, dzięki któremu na bieżąco widać efekty wprowadzonych zmian.
• Jedna baza kodu.
• Ogromne wsparcie społeczności.
• Całkowicie darmowy i otwartoźródłowy, ze wsparciem Facebooka.
• Znacznie szybsze tempo pracy i dostarczania aplikacji niż w części innych narzędzi.

Wady React Native

• Brak wsparcia dla wszystkich API, co może wymagać własnego kodu.
• Słaba współpraca z niektórymi elementami natywnymi.
• Może powodować spadki wydajności w aplikacjach mocno obciążających procesor.
• Ponieważ powstał pierwotnie z myślą o iOS, funkcje androidowe mogą wymagać dodatkowej pracy.

Sencha w tworzeniu wieloplatformowym

Zalety Senchy

• Wbudowane motywy wyglądające natywnie na każdej głównej platformie.
• Wsparcie dla szerokiej gamy urządzeń mobilnych dzięki podejściu opartemu na HTML5.
• Możliwa integracja z PhoneGap/Cordova, dająca dostęp do natywnych API i pakowanie aplikacji.
• Nadaje się do budowania i utrzymywania dużych aplikacji biznesowych.

Wady Senchy

• Ostatnie stabilne wydanie ukazało się… w lipcu 2015 roku.
• Drogi, z dość mylącym modelem licencjonowania.
• Ograniczona liczba natywnych motywów, przez co trzeba pisać własne.
• Nastawiony na klientów korporacyjnych, co odbija się na mniejszych firmach.
• Stroma krzywa uczenia się: wymaga znajomości programowania obiektowego i kilku frameworków.

Xamarin w tworzeniu wieloplatformowym

Zalety Xamarina

• Do 80% kodu współdzielonego między różnymi platformami.
• Wydajność zbliżona do natywnych aplikacji w Javie, Objective-C czy Swifcie.
• Bogata biblioteka materiałów szkoleniowych i wsparcia, która pozwala szybko i łatwo wdrożyć się w technologię.
• Wsparcie dla testów funkcjonalnych i QA na wielu urządzeniach.
• Wykorzystanie popularnych technologii programistycznych.
• Kompletny ekosystem deweloperski, z własnym IDE oraz modułami dystrybucji i analityki.
• Wsparcie Microsoftu.

Wady Xamarina

• Problemy ze zgodnością z wieloma bibliotekami open source.
• Opóźnione wsparcie dla aktualizacji, które trzeba wdrażać wewnętrznie.
• Bardzo ograniczony dostęp do bibliotek open source na rzecz komponentów własnościowych.
• Wymaga przynajmniej podstawowego rozumienia języków natywnych.
• Darmowa wersja nie wystarcza do większości projektów komercyjnych.
• Należy do najmniej popularnych narzędzi do tworzenia aplikacji mobilnych.

Najważniejsze wnioski

• Nie ma tu zwycięzców. Wszystkie przedstawione frameworki i narzędzia idealnie pasują do pewnych projektów, a w innych byłyby ogromną przesadą.
• Większość powyższych narzędzi, poza Xamarinem, opiera się na JavaScripcie ze stylowaniem w HTML5 i CSS. React Native nie wymaga HTML-a, tylko własnych komponentów + JSX.
• Wszystkie wymienione frameworki pozwalają tworzyć równocześnie na iOS i Androida, a część z nich obsługuje też Windows Phone i inne urządzenia mobilne.
• React Native i Cordova (a do pewnego stopnia Ionic) to jedyne całkowicie darmowe narzędzia na naszej liście, niezależnie od liczby programistów i funkcji. Za komercyjne wykorzystanie pozostałych platform trzeba wyłożyć od 250 do nawet 9 tysięcy dolarów rocznie na użytkownika.
• Wszystkie narzędzia mają obszerną dokumentację opisującą poszczególne funkcje, z mnóstwem wskazówek, artykułów, wkładu społeczności i przewodników startowych. Xamarin dokłada do tego Xamarin University, czyli bibliotekę kursów online.
• Rozpoznawalność w społeczności i klienci bardzo się różnią. Od startupów, przez średniej wielkości sklepy internetowe i firmy z branży mediów społecznościowych, po międzynarodowych gigantów takich jak Walmart czy Facebook. Każde z omawianych narzędzi trafia do innej grupy klientów.

Zobacz także:
1. Ionic 2 vs. React Native vs. NativeScript
2. 4 Questions to Ask Before Choosing a JavaScript Framework
3. Why and When Cordova is better than React Native?
4. What are the advantages and disadvantages of using the Ionic framework, compared to native apps?

A React jest w pierwszej trójce najczęściej używanych bibliotek.

Popularność JavaScriptu i Reacta sprawia, że React Native należy do ulubionych frameworków programistów. Korzystają na tym jednak nie tylko oni.

Dzięki uproszczonemu procesowi wytwarzania i krótszemu czasowi dostarczania kodu React Native daje liczne korzyści właścicielom firm i kierownikom projektów.

W tej sekcji przyjrzymy się z bliska temu, dlaczego RN jest tak popularny, i sprawdzimy też jego słabe strony.

Zalety React Native

1. Szybsze wytwarzanie
   
   Z perspektywy biznesowej to główny powód, dla którego tyle firm sięga po React Native. Ponieważ framework pozwala na  ponowne wykorzystanie do 90% kodu między różnymi platformami mobilnymi, czas budowy aplikacji i wejścia na rynek drastycznie się skraca.
   
   Do tego RN udostępnia liczne gotowe komponenty, które dodatkowo przyspieszają pracę. Facebook wypuszcza kolejne aktualizacje, a społeczność projektu rośnie, co również podnosi efektywność kodowania.
   
   
2. Spójność marki
   
   W RN programiści budują tylko jedną aplikację i wdrażają kod na wiele mobilnych systemów operacyjnych. Oznacza to spójny produkt na wszystkich platformach, co z perspektywy biznesowej jest kluczowe: 63% konsumentów oczekuje od marek spójnego doświadczenia. 
   
   
3. Małe zespoły
   
   Dzięki możliwościom wieloplatformowym React Native pozwala firmom zmniejszyć zespoły. Tam, gdzie tworzenie natywne wymaga dwóch osobnych grup projektantów, programistów, specjalistów QA i tak dalej, RN potrzebuje tylko jednej.
   
   Mniejsze zespoły inżynierskie zwykle radzą sobie lepiej niż duże, co pozwala firmom obniżyć całkowity koszt wytwarzania i przyspieszyć dostarczenie produktu. Bywają też  bardziej zaangażowane w projekt i mają większy potencjał innowacyjny.
   
   
4. Duża pula programistów do wyboru
   
   JavaScript to jeden z najczęściej używanych języków programowania. Szeroki zakres zastosowań, popularność i dojrzałość sprawiają, że programiści szybko się go uczą.
   
   Ponieważ React Native korzysta z JS, pula specjalistów zdolnych budować aplikacje w React Native stale rośnie. Dlatego jeśli musisz wystartować z projektem w RN, nie będziesz się męczyć ze znalezieniem programistów o właściwych kompetencjach.
   
   
5. Naprawdę natywny wygląd i zachowanie
   
   Choć React Native jest narzędziem wieloplatformowym, jednym z jego największych atutów jest natywne doświadczenie, jakie oferuje. Jego komponenty odwzorowują 1:1 natywne elementy, co daje prawdziwie natywny wygląd i zachowanie, nie do odróżnienia od aplikacji natywnych. Użytkownik dostaje dzięki temu wyjątkowe doświadczenie i bogaty, interaktywny interfejs.
   
   RN jest też zgodny z oprogramowaniem natywnym i płynnie integruje się z istniejącym kodem. Dzięki temu nadaje się nie tylko do tworzenia nowych aplikacji, lecz także do szybkiego dodawania rozszerzeń do już istniejących aplikacji natywnych.
   
   
6. Integracja z aplikacjami zewnętrznymi
   
   Potencjał współpracy RN to kolejny czynnik zwiększający efektywność pracy z tym frameworkiem. Zamiast budować niektóre funkcje od zera, programiści mogą poszukać istniejącego API, które daje potrzebną funkcję, i wywołać je z kodu React Native przez endpointy Web API. To kolejna ogromna oszczędność czasu, która dobrze pokazuje potencjał frameworka.
   
   
7. Automatyczne aktualizacje
   
   React Native pozwala wprowadzać zmiany w kodzie w locie, bez rekompilacji i restartu aplikacji. Ta funkcja, znana jako „hot reloading”, jest prawdopodobnie jedną z najbardziej lubianych przez programistów.
   
   Dzięki  hot reloadingowi programista może pracować nad nową wersją aplikacji albo poprawiać interfejs bez przerw. Wszystkie zmiany działają natychmiast. Co więcej, ta funkcja chroni przed utratą stanu aplikacji przy wprowadzaniu zmian. Hot reloading nie tylko oszczędza czas programistów, lecz także zwiększa ich produktywność, eliminując czas oczekiwania i przestoje aplikacji.
   
   
8. Inteligentne debugowanie
   
   Jak powiedział Aijin Yuan z Graba podczas jednego ze spotkań React.js/React Native,  „Świetny programista musi być świetnym debugerem”. W React Native debugowanie staje się łatwiejsze, bo framework pozwala programistom korzystać z inteligentnych narzędzi i raportowania błędów.
   
   RN oferuje kilka metod debugowania, w tym banalnie proste debugowanie z Chrome DevTools. W przypadkach nieobsługiwanych przez Chrome można śledzić logi konsoli i na ich podstawie usuwać błędy. Ponieważ nie ma osobnych gałęzi kodu, tylko wspólna baza, programiści zyskują krótszy czas debugowania. Hot reloading dodatkowo usprawnia naprawianie błędów, bo poprawki wprowadza się w czasie działania aplikacji.

9. Czytelność kodu

React Native stosuje  deklaratywny paradygmat programowania, który skupia się na określaniu zamierzonych rezultatów zamiast podawania wskazówek, jak je osiągnąć. To przeciwieństwo programowania imperatywnego, które wydaje komputerowi polecenia do wykonania.

Zaletą tego podejścia jest bardziej zrozumiały i łatwiej skalowalny kod. React Native jest bardzo czytelny, przez co łatwiej się go nauczyć, zwłaszcza mniej doświadczonym programistom.


10. Rosnąca społeczność

Na koniec: ponieważ React Native daje pozytywne doświadczenie pracy z kodem, cieszy się ogromnym wsparciem społeczności programistów. Liczba osób sięgających po RN stale rośnie, a od premiery kilka lat temu framework stał się jednym z najczęściej używanych narzędzi do tworzenia aplikacji mobilnych.

RN jest otwartoźródłowy, co oznacza, że każdy może dołożyć swoje usprawnienia kodu, dokumentację i nowe komponenty. Co więcej, projekt ma stałe wsparcie Facebooka, dzięki czemu nieustannie się rozwija.

Wady React Native

Nie ma idealnych narzędzi i frameworków, a React Native nie jest wyjątkiem. Przeanalizujmy kilka jego słabości:

1. Brak wsparcia dla wszystkich funkcji iOS i Androida
   
   Choć React Native pozwala budować aplikacje mobilne działające na iOS i Androidzie, nie obsługuje WSZYSTKICH funkcji tworzonych dla tych platform. Brakuje pewnych modułów, które trzeba dopisać samodzielnie. Inne funkcje mogą być niedopracowane albo przestarzałe, więc programiści muszą budować je od zera.
   
   
2. Niższa wydajność niż w aplikacjach natywnych
   
   Choć React Native daje liczne zalety JavaScriptu, dziedziczy też część jego słabości. JavaScript to język interpretowany, znany z powolnego działania, co odbija się również na RN.
   
   Ponieważ jednak JS działa w przeglądarce, po stronie klienta, a nie serwera, jego szybkość mocno zależy od sprzętu i oprogramowania, na którym działa, a także od jakości kodu. Sporo optymalizacji można osiągnąć umiejętnym programowaniem. Wreszcie: choć wydajność aplikacji wieloplatformowych zawsze będzie ustępować szybkości aplikacji natywnych, w większości przypadków różnica będzie nieistotna i nie wpłynie na doświadczenie użytkownika.
   
   Kwestię wydajności React Native omówimy dokładniej w sekcji WYDAJNOŚĆ REACT NATIVE.
   
   
3. Własność Facebooka
   
   Część firm niepokoi kontrola Facebooka nad React Native. Choć gigant mediów społecznościowych inwestuje spore zasoby, żeby framework działał i się rozwijał, może go też w każdej chwili porzucić.
   
   Część programistów wciąż uważa to za minus RN, ale dziś ponad 60% kodu React Native pochodzi od niezależnych programistów. Wygląda więc na to, że ta wada traci na znaczeniu.
   
   
4. Pewna doza dostosowywania
   
   React jest tak blisko natywnego doświadczenia, jak to tylko możliwe, ale nie jest technologią natywną. Zawsze potrzebna będzie pewna doza dostosowania kodu, żeby zapewnić jednolite doświadczenie użytkownika na różnych platformach.
   
   Części natywnych funkcji i komponentów nie da się zbudować samym RN. Wymagają dokładnego zrozumienia każdej platformy. Dotyczy to zwłaszcza aplikacji na Androida i integracji komponentów zewnętrznych. Te ostatnie, jako zewnętrzne, mogą zawierać błędy albo nie robić dokładnie tego, czego potrzeba. Choć RN pozwala pracować mniejszym zespołom, muszą to być wysoko wykwalifikowani, wszechstronni eksperci, którzy nie boją się trudów dostosowywania.

Najważniejsze wnioski:

Dlaczego programiści kochają React Native?

• Bardzo czytelny
• Łatwy do nauki
• Brak rekompilacji kodu i restartu aplikacji
• Szerokie wsparcie społeczności
• Jeden kod, jedno repozytorium na wiele platform

Dlaczego firmy kochają React Native?

• Skraca czas wejścia na rynek
• Obniża koszty wytwarzania
• Mniejsze, bardziej efektywne zespoły
• Wyjątkowe doświadczenie użytkownika
• Spójna marka na wielu platformach

Co poprawić?

• Nadgonić część natywnych modułów i funkcji
• Dążyć do lepszej wydajności
• Podnieść jakość i niezawodność komponentów zewnętrznych

Zobacz także:
1. React Native Development Advantages
2. What are the downsides of using React Native for building iOS apps? Are there any performance costs?
3. React Native Debugging Tools
4. A Guide to Using a Third-Party API with React Native
5. How an Android developer dived into React Native and survived

Programiści mają do wyboru dziesiątki języków i paradygmatów programowania oraz mnóstwo frameworków i narzędzi. Wszystkie istnieją nie bez powodu.

W projektach informatycznych nie ma rozwiązania dobrego na wszystko. Z React Native jest tak samo. Mimo szybkiego tempa pracy, niezależności od platformy i innych unikalnych korzyści zdarzą się aplikacje, do których nie będzie najlepszym frameworkiem.

Co brać pod uwagę przy wyborze stacku technologicznego?

W połowie 2018 roku pojawiła się wiadomość, która wstrząsnęła całym światem tworzenia oprogramowania mobilnego. Airbnb, gigant branży turystycznej online, postanowił wycofać React Native ze swoich projektów. Za tą decyzją stało wiele czynników, ale ostatecznie Airbnb uznał, że React Native nie odpowiada jego wyjątkowym potrzebom. Mimo tej zaskakującej zapowiedzi zdecydowana większość programistów Airbnb była zadowolona z frameworka i rozważyłaby go przy nowym projekcie.

Przypadek Airbnb dowodzi, że nawet najefektywniejsze narzędzia programistyczne czasem nie spełniają konkretnej obietnicy biznesowej.

Zobaczmy, jakie czynniki warto rozważyć przy wyborze właściwych narzędzi do projektu:

• Jakie główne korzyści chcesz osiągnąć?
  
  Chodzi o najlepsze doświadczenie użytkownika, niższy koszt projektu, błyskawiczne wypuszczenie produktu? Wypisz wszystkie czynniki najważniejsze z perspektywy biznesowej i oceń, jak dana technologia wypada w każdym z nich.
  
  
• Jak dobrze Twój zespół zna dany paradygmat programowania?
  
  Zwróć uwagę, że to pytanie o paradygmat, a nie o język. Dopóki zostajesz w tym samym paradygmacie, nauka nowego języka czy frameworka nie jest aż tak trudna, choć oczywiście wymaga czasu.
  
  Masz już ludzi, którzy zrealizują projekt w wybranej technologii? Czy trzeba będzie zlecić go na zewnątrz albo kogoś zatrudnić?
  
  
• Jak duża jest społeczność programistów używających danego języka/frameworka?
  
  Czy to nowa technologia? Ma solidne wsparcie społeczności? To ważny aspekt wyboru, bo Twój zespół może mieć trudności z pisaniem kodu w niedojrzałej technologii. Bez dużego katalogu bibliotek, gotowych modułów i dokumentacji prace będą się ciągnąć, a produkt końcowy może okazać się pełen błędów i niestabilny.
  
  
• Ile firm dotąd używało tej technologii?
  
  Ile firm dostarcza swoje aplikacje w wybranych przez Ciebie narzędziach? Czy to innowacyjne przedsiębiorstwa? Powszechne użycie języka lub frameworka w branży jest wskaźnikiem trendu, ale też potwierdzeniem dojrzałości i niezawodności technologii. Przyjrzyj się konkurencji i liderom branży i sprawdź, z czego korzystają.

Kiedy używać React Native?

Przyjrzyjmy się kilku przypadkom, w których React Native jest mocnym kandydatem do wdrożenia. Ta lista nie jest wyczerpująca. To tylko przykłady zastosowań, do których RN pasuje najlepiej.

1. E-commerce
   
   Użytkownicy mobilni w USA spędzają na swoich urządzeniach ponad 3,5 godziny dziennie. Aplikacje zajmują 90% tego czasu, a najczęściej używane są aplikacje e-commerce. Dla handlu detalicznego mają one ogromne znaczenie. Wystarczy wspomnieć, że w 2017 roku aplikacje mobilne odpowiadały za 44% przychodów detalistów z kanału mobilnego.
   
   Skuteczność aplikacji mobilnych w sprzedaży internetowej wynika między innymi z dostępności 24/7, mocno spersonalizowanego doświadczenia, przyjaznego interfejsu i oszczędności czasu. React Native to idealny wybór, żeby te korzyści zapewnić.
   
   Dzięki React Native sklepy internetowe mogą szybko budować responsywne aplikacje z łatwą nawigacją, zapewniać sprawne aktualizacje i utrzymywać spójność marki na różnych urządzeniach.
   
   
2. Media społecznościowe
   
   To kolejny świetny przypadek użycia dla aplikacji w React Native. Skoro 95% użytkowników Facebooka przegląda swój feed na urządzeniach mobilnych, aplikacje mobilne to naturalny wybór dla serwisów społecznościowych.
   
   Facebook (oczywiście), Instagram, Pinterest czy Tencent QQ, wszystkie aplikacje społecznościowe muszą zapewniać nienaganne doświadczenie użytkownika oraz być szybkie, responsywne i łatwo skalowalne. RN oferuje to wszystko. Kluczowym czynnikiem sukcesu jest tu wieloplatformowość. Android i iOS ostro ze sobą rywalizują, więc aplikacja społecznościowa musi obsłużyć oba systemy, bez opóźnień jednej wersji względem drugiej.
   
   
3. Aplikacje oparte na JavaScripcie
   
   JavaScript to natywny język przeglądarek, który ma ogromne grono zwolenników w społeczności programistów. Jest dość łatwy do nauki, prosty we wdrożeniu i obsługuje przetwarzanie po stronie klienta. Do tego jest potężnym i dojrzałym językiem.
   
   Jest duża szansa, że masz już w zespole programistów, którzy piszą w JS. Jeśli chcesz wykorzystać ich kompetencje w aplikacji mobilnej, React Native jest do tego stworzony. Jeśli planujesz aplikację w JavaScripcie, rozważ RN.
   
   
4. Integracja z kodem natywnym
   
   Jednym z największych atutów React Native jest to, że można go w pełni osadzić w kodzie natywnym. Możesz więc nadal budować rdzeń aplikacji w Objective-C, Javie czy Kotlinie, a RN zintegrować, żeby zrobić stronę „O nas”, FAQ albo pojedynczy ekran.
   
   Zaleta? Znowu krótszy czas dostarczenia funkcji, bez potrzeby pisania kodu dwa razy i bez kompromisów w natywnym przepływie.
   
   
5. Szybkie wytwarzanie w krótkich iteracjach
   
   Wszędzie tam, gdzie liczy się czas i musisz szybko wypuścić produkt na wszystkie platformy, React Native wygrywa z tworzeniem natywnym. Dobrze nadaje się do realizacji zwartych projektów w małych, zwinnych zespołach, gdzie znacząco przyspiesza dostarczanie.
   
   Zmiany wprowadza się „na żywo”, bez rekompilacji kodu, więc React Native jest bardzo mocny tam, gdzie aplikacja wymaga częstych aktualizacji w krótkich iteracjach. Użytkownik ich nie odczuje.

Kiedy nie używać React Native?

A jakie są przykłady aplikacji, w których React Native może nie być najlepszym wyborem?

1. Złożone gry i wizualizacje
   
   Ponieważ RN wymaga jeszcze aktualizacji, żeby dogonić swoje natywne odpowiedniki, użycie go w złożonych, mocno rozbudowanych projektach może nie być najlepszym rozwiązaniem.
   
   Zaawansowane gry mobilne i aplikacje z rozbudowanymi wizualizacjami to właśnie taki przypadek. Mają mnóstwo funkcji, wymagają intensywnej interakcji użytkownika i wysokiego poziomu dostosowania. Do tego wymagają dużo mocy obliczeniowej. Przy takich aplikacjach najlepiej sprawdzają się języki i frameworki natywne.
   
   React Native jednak nadrabia zaległości. Wspomnijmy Discovery VR, czyli gogle VR zintegrowane z aplikacją, która przenosi użytkowników w najciekawsze miejsca na świecie. Ten produkt o złożonych funkcjach, w tym z technologią 3D i bogatą wizualizacją, powstał w RN.
   
   
2. Aplikacje na jedną platformę
   
   Oczywiście jeśli Twoja aplikacja ma trafić tylko (albo głównie) na jedną platformę, nie ma powodu rezygnować z tworzenia natywnego. Użyj frameworków stworzonych do tego celu i napisz wydajny, natywny kod. Sięganie w takim kontekście po React Native nie miałoby sensu.
   
   Facebook (oczywiście), Instagram, Pinterest czy Tencent QQ, wszystkie aplikacje społecznościowe muszą zapewniać nienaganne doświadczenie użytkownika oraz być szybkie, responsywne i łatwo skalowalne. RN oferuje to wszystko. Kluczowym czynnikiem sukcesu jest tu wieloplatformowość. Android i iOS ostro ze sobą rywalizują, więc aplikacja społecznościowa musi obsłużyć oba systemy, bez opóźnień jednej wersji względem drugiej.
   
   
3. Aplikacje działające bez przerwy
   
   Przy komunikatorach albo rozbudowanych aplikacjach multimedialnych z mnóstwem procesów w tle możesz wyjść lepiej na tworzeniu natywnym.
   
   React Native jest wciąż w powijakach, mimo szerokiego wsparcia społeczności i stałych inwestycji Facebooka w tę technologię. Może to skutkować niespójnościami w kodzie i brakiem gotowych modułów oraz wymuszać kosztowne obejścia i dostosowania. Małych, dynamicznych aplikacji zwykle to nie dotyczy, bo używają mniej komponentów. Jednak przy większych projektach z mnóstwem procesów w tle te niedoskonałości RN mogą stać się wąskim gardłem.
   
   I znów: nie zawsze tak jest. W tym roku Microsoft wypuścił nowego, ulepszonego Skype'a… zbudowanego na React Native. Motywacją tego kroku było „dostarczenie klientom najlepszego możliwego doświadczenia”.

Najważniejsze wnioski

• React Native to idealne narzędzie do budowania aplikacji e-commerce i społecznościowych, którym zależy na szybkim dostarczeniu, sprawnym interfejsie i mocnym designie.
• Jeśli planujesz aplikację mobilną w JavaScripcie, React Native jest właściwym wyborem.
• RN wygrywa z tworzeniem natywnym przy dostarczaniu mniej złożonych, zwinnych aplikacji w krótkich iteracjach. Jest szczególnie skuteczny, gdy nie chcesz, żeby użytkownik odczuwał częste aktualizacje wymuszające restart aplikacji.
• Aplikacje natywne mogą wykorzystywać komponenty React Native, żeby przyspieszyć prace, a jednocześnie zachować płynne doświadczenie użytkownika i solidną wydajność.
• Aplikacje, w których React Native może nie być optymalnym wyborem, to rozbudowane gry i aplikacje multimedialne z dużą liczbą procesów w tle, aplikacje projektowane pod jedną platformę oraz aplikacje działające bez przerwy.
• Nawet jeśli Twoja aplikacja jest dość złożona, ale chcesz wykorzystać kompetencje, które już masz w zespole, i przyspieszyć start projektu, React Native wciąż może być sensowną opcją. Doświadczeni i wysoko wykwalifikowani programiści poradzą sobie z niedostatkami frameworka i zbudują w RN mocne rozwiązania.

Zobacz także:
1. Why I should not use React Native?
2. To go or not to go React Native
3. Building An E-commerce Search App with React Native
4. Building a Mobile App in 10 Days with React Native
5. The Crucial Role of E-commerce Mobile Apps for Sales Enhancement

Wydajność aplikacji mobilnej potrafi przesądzić o losie każdego produktu, niezależnie od jego przeznaczenia. Wystarczy wspomnieć, że około połowy użytkowników aplikacji mobilnych zamyka aplikację, gdy pojedynczy obrazek nie wczyta się wystarczająco szybko!

Kiedy słaba wydajność dotknie Twoich użytkowników, nie tylko porzucą produkt, ale przejdą do konkurencji. Dlatego stabilność aplikacji i płynne działanie są niezbędne dla dobrego doświadczenia użytkownika i mają bezpośredni wpływ na przychody.

W tej sekcji przyjrzymy się wydajności React Native i zobaczymy, jak poprawić doświadczenie użytkownika końcowego przez optymalizację kodu.

Jak mierzyć wydajność aplikacji mobilnej?

Do śledzenia i poprawy wydajności aplikacji możesz wykorzystać różne metryki. Do najważniejszych należą:

• Time to First Byte. Time to First Byte (TTFB) określa, jak szybko aplikacja potrafi się uruchomić i uzyskać pierwszą odpowiedź z serwera. 0,1-0,5 sekundy to przyzwoity wynik, wszystko powyżej może już irytować użytkowników.
• Czas ładowania. To czas, który mija od uruchomienia aplikacji przez użytkownika do momentu, gdy zaczyna z niej korzystać. Wszystko powyżej 1-1,5 sekundy współcześni użytkownicy uznają za ospałe.
• Liczba jednoczesnych żądań. Określa, ile transakcji lub żądań aplikacja jest w stanie obsłużyć naraz bez spadku wydajności i pogorszenia doświadczenia użytkownika.
• Wskaźnik awarii. Ta metryka określa średnią liczbę awarii aplikacji w przeliczeniu na liczbę uruchomień. Idealnie byłoby celować w 1-2%.
• Zużycie zasobów. Ile mocy urządzenia potrzebuje Twoja aplikacja, żeby działać bez zacięć? Ta kategoria obejmuje takie elementy jak zużycie pamięci, obciążenie procesora czy zużycie baterii.

Co może pójść nie tak w React Native?

Jak omówiliśmy wcześniej, wydajność wieloplatformowa zawsze będzie ustępować aplikacjom natywnym. Ponieważ jednak większość dzisiejszych urządzeń mobilnych ma wielordzeniowe procesory i sporo RAM-u, ta różnica staje się dla użytkownika pomijalna, zwłaszcza w React Native, bo ten rozmawia bezpośrednio z natywnymi API.

Framework wciąż ma jednak sporo niedostatków w obszarze wydajności:

1. Nawigacja między ekranami aplikacji
   
   Bywa dość toporna i prowadzi do awarii aplikacji z powodu niespójności między elementami nawigacyjnymi RN i natywnymi. Problem dotyczy zwłaszcza ekranów mocno opartych na stanie, z aktualizacjami stanu w tle. Gdy użytkownik wywoła złożony ekran z wieloma komponentami, wywołaniami sieciowymi i animacjami, aplikacje RN mogą działać z zauważalnym opóźnieniem w porównaniu z natywnymi.
   
   Jak to naprawić?
   
   Obecnie programiści RN mogą korzystać z dziesiątek rozwiązań poprawiających nawigację: mogą zaprojektować optymalną logikę nawigacji i kolejność zagnieżdżonych ekranów i tak złagodzić część problemów.
   
   
2. Wycieki pamięci, zwłaszcza na Androidzie
   
   Wycieki wywołuje najczęściej duża liczba złożonych procesów w tle. Inną przyczyną bywa kolejka danych na moście między komponentami natywnymi a RN. Niestety nawet proste aplikacje narzędziowe w React Native potrafią przeciekać pamięcią.
   
   Jak to naprawić?
   
   Znaleźć źródło problemu i je usunąć. Możesz użyć narzędzi profilujących w Android Studio i Xcode, żeby prześledzić zużycie pamięci w czasie działania. Potem sprawdź, ile pamięci przydzielono na stercie, i zidentyfikuj przyczynę. Zajrzyj tutaj, żeby zobaczyć ten proces na prawdziwej aplikacji.
   
   
3. Rozmiar aplikacji
   
   Wreszcie React Native potrafi rozdąć rozmiar aplikacji, bo korzysta z licznych API, bibliotek zewnętrznych i komponentów natywnych. Przyspieszają one pracę, ale ich nadmiar sprawia, że aplikacja robi się ciężka i nieporęczna.
   
   Jak to naprawić?
   
   Jest kilka sposobów, żeby odchudzić aplikację w React Native. Kompresuj obrazy i grafikę, optymalizuj biblioteki natywne albo zamień dane JSON na statyczne identyfikatory obiektów. To już da wyraźny efekt.

9 kroków do optymalizacji wydajności aplikacji w React Native

1. Usuń zbędne funkcje
   
   Prostota wygrywa! Pokazuj tylko dane i komponenty niezbędne użytkownikowi do wykonania danej czynności. Bajery potrafią irytować, bo spowalniają React Native i wydłużają czas ładowania.
   
   
2. Zmniejsz obciążenie mostu
   
   Do komunikacji z komponentami natywnymi React Native używa mostu. Jeśli wysyłasz do niego dużo danych, interfejs może się zaciąć. Własne animacje, ciężkie pliki, mapy: to wszystko może obniżyć wydajność aplikacji.
   
   Monitoruj ruch na moście za pomocą MessageQueue. Jeśli to możliwe, przenieś ciężkie komponenty z wątku JS (gdzie RN domyślnie odkłada złożone funkcje) na wątek główny. Dzięki temu interfejs powinien działać nawet wtedy, gdy wątek JavaScriptu jest zajęty.
   
   
3. Uprość dane JSON
   
   Komunikacja przechodząca przez most w React Native jest odbierana w formacie JSON i za każdym razem wymaga serializacji oraz deserializacji. Może to mocno obciążać procesor przy synchronizacji skryptów natywnych i JS. To z kolei powoduje duże opóźnienia w działaniu aplikacji.
   
   Są sposoby, żeby ominąć problemy wydajnościowe związane z JSON-em. Postaw na optymalizację pobieranych danych i unikaj przechowywania surowego JSON-a lokalnie. Schematy danych JSON możesz zamienić na bardziej skalowalne i wydajne identyfikatory obiektów, korzystając z bibliotek zewnętrznych.
   
   
4. Optymalizuj renderowanie
   
   Uważaj na zbędne ponowne renderowania. React Native renderuje każdy komponent potomny za każdym razem, gdy zaktualizuje się rodzic. Chcesz unikać nadmiarowych renderów, bo tworzą wąskie gardła na moście i mogą ostatecznie zamrozić interfejs.
   
   Możesz zmierzyć, ile razy renderują się Twoje komponenty, dodając wywołanie console.count do metody renderującej. Metody React.PureComponent i shouldComponentUpdate pomogą Ci pozbyć się części niechcianych renderów.
   
   
5. Korzystaj z cache'owania obrazów
   
   Praca z obrazami w React Native wymaga odrobiny optymalizacji. Zmniejszaj rozmiar obrazów i kompresuj je. Włącz cache, żeby przyspieszyć ich pobieranie (pamiętaj, że cache'owanie obrazów jest na razie obsługiwane tylko na iOS). Do wdrożenia tej funkcji użyj react-native-cacheable-image albo react-native-cached-image.
   
   Żeby uniknąć wycieków pamięci i spadków wydajności, zamień formaty .jpg i .png na WebP. To może przyspieszyć ładowanie obrazów nawet o 28%.
   
   
6. Zmniejsz rozmiar aplikacji
   
   Wydajność poprawisz, po prostu zmniejszając rozmiar aplikacji. Jak? Używaj tylko stabilnych bibliotek i komponentów zewnętrznych, które są absolutnie niezbędne. Kompresuj wszystkie elementy graficzne. Pozbądź się danych JSON, zamieniając je na statyczne identyfikatory obiektów. Wreszcie zoptymalizuj biblioteki natywne pod kątem wydajności.
   
   
7. Unikaj instrukcji console.log
   
   Console.log przydaje się przy debugowaniu, ale trzymanie ich w dużej liczbie obciąży wydajność aplikacji. Zanim wypuścisz kod na produkcję, wyczyść je wszystkie. Łatwo zrobisz to za pomocą babel-plugin-transform-remove-console.
   
   
8. Używaj prostych selektorów
   
   Unikaj ciężkich obliczeń, które mogą spowolnić całą aplikację. Jednym z najprostszych sposobów jest używanie prostych selektorów, kiedy tylko się da.
   
   Wykonuj obliczenia na odpowiedzi z back-endu w serwisie i wywołuj ten serwis na odpowiedzi. Użyj biblioteki Reselect, żeby zapamiętać odpowiedź selektora, jeśli wynik się nie zmienił. Pomoże Ci to uniknąć ponownego uruchamiania złożonych obliczeń, które zostały już wykonane.
   
   
9. Rozwiąż problemy z wielowątkowością
   
   React Native ma poważne problemy z wielowątkowością. Potrafi przetwarzać tylko jeden komponent naraz, więc nie jest idealnym rozwiązaniem dla aplikacji z procesami działającymi równolegle (np. streaming wideo i czat na żywo). Żeby sobie z tym poradzić, możesz napisać własny kod rozszerzenia natywnego (w Javie, Objective-C albo Swifcie), ale ostrożnie, bo inaczej aplikacja może się wysypać.

Najważniejsze wnioski

• Wydajność aplikacji mobilnej bezpośrednio wpływa na doświadczenie użytkownika, więc decyduje o sukcesie Twojej aplikacji.
• Do mierzenia wydajności aplikacji służą różne metryki. Do najczęstszych należą Time to First Byte, czas ładowania czy zużycie zasobów.
• React Native oferuje wydajność zbliżoną do natywnej, ale wiąże się też z licznymi ograniczeniami. Programiści narzekają na wadliwą nawigację między ekranami, wycieki pamięci i duży rozmiar aplikacji.
• Framework jest stale ulepszany nowymi aktualizacjami, komponentami i bibliotekami. Doświadczeni programiści potrafią złagodzić lub wyeliminować praktycznie każdy problem.
• Kompresja i konwersja danych, cache'owanie obrazów, optymalizacja funkcji: to proste poprawki, które od razu poprawią wydajność RN. Część problemów (jak nawigacja czy wielowątkowość) może wymagać własnego kodu.

Zobacz także:
1. Oficjalna dokumentacja React Native:
2. Thousand Ways to Navigate in React Native
3. Tips for improving the performance of React Native apps
4. Stats That Prove The Importance Of App Performance Testing
5. 6 Simple ways to speed up your react native app
6. Our React-native experience at Drops (so far)
7. React Native Performance: Major issues and insights on improving your app’s performance

Masz pomysł, wizję nowej aplikacji mobilnej albo konkretną potrzebę biznesową. Jak teraz przejść do właściwych prac nad produktem końcowym?

Projekt w React Native można zapewne zrealizować na wiele sposobów. Uważamy, że powinien być prowadzony zgodnie z metodyką Agile.

Dlaczego Agile?

Twój czas jest cenny i chcesz zobaczyć efekty naszej pracy jak najszybciej. Czas wejścia na rynek jest tu kluczowy! Jednocześnie oczekujesz wysokiej jakości i utrzymania pewnej kontroli nad produktem. Z Agile dostajesz cały ten pakiet!

Żeby usprawnić wymianę informacji i dać Ci realny wpływ na projekt, zapraszamy Cię na wewnętrzne spotkania i do bieżącej komunikacji. Agile zakłada pełną przejrzystość projektu, więc nawet jeśli na jakimś etapie nie masz czasu się angażować, w każdej chwili możesz przejrzeć wyniki. Co więcej, nowe aktualizacje i usprawnienia trafiają do Twojej aplikacji na bieżąco, więc widzisz, za co płacisz!

Naszym zdaniem ma to sens. A Twoim?

Etapy tworzenia w React Native

W zależności od zakresu prac i Twoich wymagań typowy projekt w React Native może trwać od kilku dni do kilku miesięcy. Niezależnie od przypadku pewne etapy procesu pozostają niezmienne. Przyjrzymy się im w tej sekcji.

1. Wybór właściwej firmy do Twojego projektu w React Native

Jeśli nie masz zasobów, żeby zbudować aplikację własnymi siłami, zostaje Ci zatrudnić zespół albo zlecić pracę na zewnątrz. Oto jak najlepiej podejść do tego kroku:

1. Upewnij się, że rozumiesz proces wytwarzania oprogramowania.
   
   Nawet jeśli Twój biznes nie ma nic wspólnego z programowaniem. Musisz wiedzieć, jakich efektów oczekiwać, jakie role biorą udział w dostarczeniu aplikacji i kto za co odpowiada.
   
   
2. Określ budżet i harmonogram.
   
   Żeby szukać firmy, która wdroży Twoją aplikację, musisz wiedzieć, na ile Cię stać.
   
   
3. Zacznij szukać.
   
   Firm od React Native warto szukać na  Clutch.io, Wadline,  czy  Crunchbase. Sprawdź stack technologiczny każdej firmy i porównaj opinie klientów.
   
   
4. Zrób krótką listę.
   
   Wybierz 5-8 firm, które wydają się najbardziej godne zaufania.
   
   
5. Zweryfikuj każdą z nich.
   
   Wejdź na ich strony, sprawdź case studies i referencje, przejrzyj kanały w mediach społecznościowych. Zobacz, kto najlepiej pasuje do Twojego celu i zasobów.
   
   
6. Skontaktuj się z nimi.
   
   Gdy zawęzisz wybór do dwóch lub trzech, zadzwoń do każdej, omów projekt i poproś o wycenę.
   
   
7. Podejmij ostateczną decyzję.
   
   I przejdź do kolejnego kroku.

2. Zrozumienie kontekstu. Pierwsze spotkanie

Gdy wybierzesz już dostawcę, czas się poznać. Firma powinna zaproponować bezpłatne spotkanie lub rozmowę wstępną, żeby upewnić się, że dobrze się rozumiecie i do siebie pasujecie.

Podczas spotkania lub rozmowy spodziewaj się takich pytań (i wielu innych!):

• Opowiedz nam o swoim biznesie i branży.
• Do czego służy Twój produkt? Jakie potrzeby użytkowników zaspokaja?
• Jakie masz doświadczenie z oprogramowaniem?
• Jakie materiały produktowe (brief, szkice, makiety) masz na tym etapie?
• Jaki jest szacowany budżet i harmonogram projektu?

Włącz się w dyskusję i doprecyzuj jak najwięcej szczegółów. Im więcej wniesiesz, tym szybsze będzie wdrożenie.

Jakiego rezultatu możesz oczekiwać po takiej rozmowie?

Firma powinna przygotować ogólny plan działania z zarysem kolejnych kroków. Z perspektywy biznesowej to również moment, w którym umowa o poufności (NDA) powinna być już podpisana.

Czas na kolejny krok?

3. Do rzeczy. Wycena projektu

Przy pierwszym kontakcie partner poznał szczegóły projektu. Czas pogadać o liczbach.

W kolejnym etapie spotykacie się osobiście lub zdalnie, żeby omówić wycenę projektu. Żeby dobrze go wycenić, powinniście przejść przez 1-3 spotkania lub rozmowy, na których pracujecie nad następującymi aspektami produktu:

• Jaki jest główny cel Twojej aplikacji i możliwe przypadki użycia?
• Do czego służy Twój produkt? Jakie potrzeby użytkowników zaspokaja?
• Jakie problemy techniczne, prawne czy marketingowe możemy przewidzieć na tym etapie i jak je ograniczyć?
• Jaka architektura systemu i jaka technologia najlepiej pozwolą dostarczyć Twoje funkcje?

Te i inne pytania powinny zaowocować jasną specyfikacją produktu oraz oszacowaniem czasu i kosztów realizacji.

Kiedy obie strony są zadowolone z wyników, czas podpisać umowę i ruszyć z pracami!

4. Do dzieła. Wytwarzanie

Faza wytwarzania w projekcie zwinnym zwykle wiąże się z dużą liczbą interakcji między Tobą a dostawcą. W trakcie tej fazy odbywają się trzy główne rodzaje spotkań:

• Sesje zakresowe
• Te spotkania poświęcone są omówieniu konkretnej funkcji Twojej aplikacji.
• Odbywają się zwykle co 1-3 miesiące przez cały okres prac, ale bywa różnie.
• Podczas każdej sesji prezentowany jest aktualny stan prac.
• W każdej sesji uczestniczą między innymi  programista, projektant oraz  project manager ze strony zespołu deweloperskiego i  product owner z Twojej strony.
• Planowanie roadmapy
• To spotkanie również odbywa się raz na 1-3 miesiące.
• Celem jest przegląd i zaplanowanie wszystkich zadań potrzebnych do osiągnięcia ważnego kamienia milowego oraz opracowanie szczegółowego planu na kolejne tygodnie.
• Podczas planowania roadmapy kolejne kroki są priorytetyzowane i planowane w czasie.
• Twój udział jest kluczowy: dzięki niemu zachowujesz kontrolę nad realizacją projektu.
• Cotygodniowe spotkania sprintowe
• Prace deweloperskie realizowane są w tygodniowych iteracjach, zwanych sprintami. Na koniec każdego sprintu odbywa się spotkanie podsumowujące.
• Na spotkaniu zespół przedstawia aktualny stan prac i tworzy szczegółowy plan na kolejny sprint.
• Cotygodniowe spotkania sprintowe to okazja, żeby  przejrzeć techniczne aspekty projektu, a także ocenić przepływ pracy i komunikację między stronami.

5. Dostarczenie

Twój produkt jest gotowy do wypuszczenia! To jednak nie koniec historii. Użytkownicy wrócą z uwagami i mogą prosić o nowe funkcjonalności. W pewnym momencie może się też okazać, że przyszedł czas na optymalizację rozwiązania.

Dobrze zaprojektowana aplikacja ułatwia wdrażanie aktualizacji. Dzięki wyjątkowym cechom React Native możesz poprosić zespół o prace optymalizacyjne w dowolnym momencie, w sposób, który nie wpływa na doświadczenie użytkownika końcowego.

Najważniejsze wnioski

• Oceniając firmę, która ma zbudować Twój produkt, upewnij się, że pracuje w Agile.
• Kompresja i konwersja danych, cache'owanie obrazów, optymalizacja funkcji: to proste poprawki, które od razu poprawią wydajność RN. Część problemów (jak nawigacja czy wielowątkowość) może wymagać własnego kodu.
• Kiedy rozumiesz proces wytwarzania oprogramowania, łatwiej dogadujesz się z dostawcą i dostajesz lepszy efekt.
• Im więcej pytań zadaje firma, tym lepiej. To dowód jej doświadczenia i gotowości, by przenieść Twoją aplikację na wyższy poziom.

Zobacz także:
1. ‘Ideamotive’s Development Process Explained‘
2. ‘Building a Mobile App in 10 Days with React Native’
3. ‘How To Find Top React Native Development Company? The Ultimate Checklist’

Spójrzmy prawdzie w oczy. Aplikacje mobilne tworzą firmy, których głównym celem jest zysk.

Oszczędność czasu i kosztów to jedne z głównych powodów sięgania po React Native, więc w tej sekcji przyjrzymy się statystykom, które pokazują efektywność frameworka.

Korzystanie z aplikacji mobilnych

• Użytkownicy smartfonów spędzają 89% swojego czasu w aplikacjach mobilnych.
• Mężczyźni spędzają 29:32 godziny miesięcznie w samych aplikacjach mobilnych. U kobiet ta liczba jest jeszcze wyższa i wynosi 30:58.
• W 2020 roku 70% całego ruchu online na świecie pochodziło z telefonów komórkowych.
• W 2017 roku 95,1% użytkowników Facebooka logowało się na swoje konta z urządzeń mobilnych. W przypadku Twittera było to 85%, a w LinkedInie 60%.
• Według Google ponad 40% transakcji online realizowanych jest na urządzeniach mobilnych.
• Najpopularniejsze kategorie aplikacji mobilnych wśród użytkowników to    narzędzia, komunikacja oraz odtwarzacze i edytory wideo na Androidzie, a także gry, biznes i edukacja na iOS.
• 35% osób, które przeglądały produkty na telefonie, wydało w sklepie więcej, niż się spodziewało .

Przychody z aplikacji mobilnych

• W pierwszej połowie 2018 roku użytkownicy App Store i Google Play wydali łącznie 34,4 miliarda dolarów, co oznacza wzrost o 27,8% względem pierwszej połowy 2017 roku.
• Przychody App Store w pierwszej połowie 2018 roku sięgnęły 22,6 miliarda dolarów.
• Do 2021 roku rynek aplikacji mobilnych ma urosnąć o 385%.
• Przed 2021 rokiem sprzedaż w mobilnym e-commerce może sięgnąć 3,5 biliona dolarów.
• Urządzenia mobilne odpowiadają za 87% przychodów reklamowych Facebooka.
• W 2021 roku spodziewane jest 350 miliardów pobrań aplikacji mobilnych. To wzrost ze 197 miliardów w 2017 roku.
• Jak podaje Google, blisko 60% użytkowników smartfonów chętniej kupuje od firm, których aplikacje dopasowują informacje do ich lokalizacji.

Fakty o React Native

• Użytkownicy wieloplatformowi wydają 2,2 razy więcej niż użytkownicy jednej platformy.
• JavaScript to najczęściej używany język programowania, już szósty rok z rzędu.
• Prawie 30% programistów na świecie używa Reacta.  Częstsze są tylko Node.js i Angular.
• React to framework numer jeden, z którym programiści najbardziej chcą pracować.
• Szacuje się, że dotąd  ponad 828 000 stron na świecie zbudowano z użyciem React Native .
• Repozytorium React Native ma ponad 15 tys. commitów i ponad 71 tys. gwiazdek.
• React Native pomaga firmom obniżyć koszty wytwarzania o 30-40%.

Zobacz także:
1. 75+ Mobile Marketing Statistics
2. Mobile Marketing and the New B2B Buyer
3. App Download and Usage Statistics
4. The Future of Mobile Growth is Cross-Platform
5. How Much Does it Cost a Small Business to Build an App?

Podstawy Reacta

Jeśli znasz już Reacta, pomiń tę część. W przeciwnym razie zapoznaj się z najważniejszymi informacjami, które pomogą Ci najpierw wgryźć się w Reacta.

Czym jest React?

React to otwartoźródłowa biblioteka JavaScript do budowania interfejsów webowych, stworzona pierwotnie przez Facebooka. Opiera się na komponentach i stosuje zasady programowania deklaratywnego. Jedną z kluczowych cech Reacta jest to, że kod piszesz raz, a dostarczasz go na wiele platform.

React Native stosuje architekturę Reacta, żeby dostarczać wieloplatformowe interfejsy dla urządzeń mobilnych.

JSX

React nie opiera się na HTML-u, tylko używa JSX, rozszerzenia składni JavaScriptu przypominającego XML. Oto przykład:

const element = <h1>Hello, world!</h1>
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}
        

JSX odpowiada w Reakcie za interfejs: opisuje, jak ma wyglądać każdy komponent (patrz następny punkt), jaki ma rozmiar, gdzie się znajduje itd.

JSX jest językiem obiektowym i statycznie typowanym. Choć przy pisaniu kodu w Reakcie jest opcjonalny, daje szybkość i optymalizację.

Żeby zacząć z JSX, odwiedź tę stronę.

Komponenty

Komponent, podstawowy klocek Reacta, to pojedynczy element graficznego interfejsu użytkownika. Każdy element, który widzisz w GUI (przycisk, blok tekstu, obraz itd.), jest komponentem. Logikę komponentu pisze się w JavaScripcie, bez używania szablonów.

Więcej o komponentach Reacta przeczytasz tutaj.

Stan

Komponentami rządzą dwie właściwości: state oraz props. Podczas gdy props pozostają stałe przez cały cykl życia komponentu, state steruje komponentami ze stanem, które można aktualizować i usuwać.

Oto prosty przykład:

class App extends Component {
    state = {
        characters: [
            {
                'name': 'John',
                // the rest of the data
            }
        ]
     }
}
        

Naucz się korzystać ze stanu z oficjalnej dokumentacji Reacta.

Props

Props to parametry („właściwości”) służące do dostosowywania komponentów. Podstawowe zastosowanie propsów to przekazywanie do komponentu własnych danych (przy użyciu konwencji nazewnictwa dość podobnej do atrybutów tagów HTML) i wywoływanie zmian stanu. Props są tylko do odczytu.

Oto prosty przykład:

const Dumb = (props) =>  {
  return (
    <div>
      {props.oursProps}
    </div>
  )
}
        

Obszerniejsze informacje o props znajdziesz tutaj.

Zacznij z Reactem

• Jeśli dopiero zaczynasz z Reactem, sprawdź tę stronę, która pomoże Ci błyskawicznie wystartować z pierwszym projektem.
• Ten artykuł to kolejne przydatne źródło, które pomoże Ci budować komponenty w Reakcie.
• Więcej dowiesz się też z oficjalnej dokumentacji oraz tutoriala.
• Thinking in React to znane i wartościowe źródło.

Jak nauczyć się React Native?

Zakładając, że rozumiesz już podstawowe zasady Reacta, możemy omówić podejście krok po kroku do opanowania React Native.

Metod jest bez liku, a tempo nauki zależy od mnóstwa czynników: Twojej obecnej znajomości frameworków, języków i narzędzi, indywidualnego stylu uczenia się, czasu, jaki możesz na to poświęcić, itd. Traktuj nasze wskazówki jako sugestie i sprawdź, co działa u Ciebie najlepiej. Powodzenia!

Wymagania wstępne

Ilu programistów, tyle opinii, ale naszym zdaniem do startu z React Native potrzebne są:

• Podstawowe rozumienie Reacta.
• Podstawowa znajomość JavaScriptu i programowania.
• Znajomość Document Object Model.
• Ogólne rozumienie HTML i CSS.
• Rozumienie tworzenia aplikacji mobilnych i jego podstawowych zasad

Proces nauki

Ilu programistów, tyle opinii, ale naszym zdaniem najlepiej zacząć z React Native tak:

1. Zainstaluj React Native na swoim komputerze. Przez ten proces przeprowadzi Cię dokumentacja Getting Started RN.
   
   
2. Przestudiuj kilka aplikacji w React Native. Przeanalizuj dokładnie kod i szukaj wzorców. Ta strona to dobre źródło różnych aplikacji, które możesz w tym celu wykorzystać. Możesz też sięgnąć po zestaw komponentów UI dla React Native, na przykład React Native Elements.
   
   
3. Przeczytaj kilka tutoriali , żeby zrozumieć tworzenie aplikacji krok po kroku. Możesz zacząć od raywenderlich.com. Innym dobrym źródłem jest React Native Express.
   
   
4. Zbierz swoje narzędzia. Do startu potrzebujesz kilku podstawowych modułów i narzędzi:
   
   
   • Redux - Redux to biblioteka JS do zarządzania stanem aplikacji, która pomoże Ci tworzyć stabilne aplikacje i uruchamiać je we wszystkich środowiskach (klient, serwer, natywne).
   • Selektory - selektory przyjmują stan Reduxa jako argument i zwracają dane do przekazania do komponentu. Pobierz reselect, czyli bibliotekę selektorów i memoizacji dla Reduxa.
   • Narzędzia testowe - do testowania Facebook używa Jest, ale są też inne biblioteki testowe.
   • Narzędzia pomocnicze - pomyśl o komponentach, których możesz potrzebować w przykładowej aplikacji. W podstawowej aplikacji mogą to być ekrany powitalne, przyciski radio, widoki stron i listy. Przejrzyj Github i pobierz wszystkie potrzebne narzędzia.
   
   
   Więcej przydatnych narzędzi deweloperskich, które pomogą Ci przyspieszyć dostarczanie komponentów React Native i poradzić sobie z nawigacją, znajdziesz w tym artykule.
   
   
5. Zacznij swój pierwszy projekt. Choć brzmi to przerażająco, najwyższy czas napisać trochę kodu! Żeby ułatwić sobie zadanie, użyj jakiegoś projektu startowego, na przykład tego, i zacznij budować własny.
   
   
6. Ucz się, ucz i jeszcze raz ucz. Internet pęka w szwach od wartościowych filmów, wpisów i poradników rozwijających umiejętności w React Native. Korzystaj z nich, żeby ułatwić sobie pracę i być na bieżąco. Oto świetny zbiór materiałówna początek. 

Biblioteka materiałów

W tej sekcji zebraliśmy kolejne materiały, które pomogą Ci dalej rozwijać umiejętności w React Native.

Kursy online

• React Courses by Tyler McGinnis (darmowe i płatne)
  
  To kursy wideo, które wprowadzają w bibliotekę React. Darmowy kurs podstawowy obejmuje 48 lekcji (spokojnie, to łącznie 287 minut) poświęconych zasadom pracy z biblioteką, omówieniu przykładów szablonów i rozwiązywaniu typowych problemów.
  
  
• Hacking with React (darmowe)
  
  Darmowy e-book o Reakcie, który pomoże Ci wejść w świat web developmentu przy niewielkiej wiedzy lub bez niej. Zaczyna się od konfiguracji biblioteki, wprowadza w JSX, a potem, korzystając z Hacking with React, stworzysz swój pierwszy projekt. Nie oczekuj jednak, że znajdziesz tu wszystkie informacje o Reakcie, a tym bardziej o web developmencie. Ta książka służy wyłącznie za drogowskaz. A jeśli lubisz czytać książki poza domem i pracą, możesz pobrać samodzielną wersję podręcznika za skromne 10 dolarów.
  
  
• Oficjalny tutorial Reacta (darmowy)
  
  Jeśli potrzebujesz wyczerpujących informacji, jedynym sposobem jest sięgnięcie do źródła, czyli do oficjalnej strony biblioteki. Dlaczego ten tutorial nie jest pierwszy na liście? To proste. Naszym zdaniem jest nieco przytłaczający dla początkującego. Jeśli masz doświadczenie z jakimkolwiek innym frameworkiem JS, oficjalna prezentacja jest wygodna i zrozumiała. Jeśli podstawy programowania masz od wczoraj, lepiej wróć tu później.
  
  
• Kursy podstawowe od Egghead (darmowe)
  
  Platforma Egghead oferuje tutoriale wideo obejmujące ogólne wprowadzenie do JavaScriptu, a także lekcje o poszczególnych frameworkach, Angularze czy Reakcie. Ten ostatni kurs jest trzeci pod względem objętości i obejmuje 5 darmowych sekcji.
  
  Dwie z nich dotyczą ogólnych zagadnień budowania mobilnych aplikacji webowych, dwie poznawania Reduxa, a kolejna routingu w Reakcie. Ponieważ platforma publikuje darmowe materiały wyłącznie „na zachętę”, na pełną wiedzę możesz liczyć dopiero po wykupieniu subskrypcji Pro. Te krótkie tutoriale wystarczą jednak, żeby wyrobić sobie pogląd na Reacta i Reduxa.
  
  
• React and Redux with Cabin (darmowe)
  
  To minimalistyczny tutorial pokazujący, jak stworzyć aplikację od zera. Zaczynasz od instalacji Reacta, konfiguracji, podpięcia Reduxa, pracy z filtrami, i masz gotowy produkt. Nacisk położono tu bardziej na elastyczność i funkcjonalność. Popracujesz też ze zdjęciami z Instagrama.
  
  
• The React Convention (darmowe)
  
  To magazyn online o tworzeniu aplikacji w Reakcie. Ze względu na specyfikę początkujący lepiej niech tu nie zaglądają. Doświadczeni, a raczej „średnio zaawansowani” programiści znajdą tu jednak mnóstwo przydatnych informacji: zarówno o wzorcowych rozwiązaniach projektowych, jak i o ciekawych sposobach wykorzystania biblioteki.
  
  Ogólnie rzecz biorąc, wszyscy, którzy nie są już nowicjuszami w Reakcie i Reduksie, ale wciąż mają sporo wątpliwości, powinni tu regularnie zaglądać, czytać i pamiętać o sprawdzaniu aktualizacji.
• React Native Beginner Course, Lynda.com (płatny)
  
  Ten praktyczny kurs dla zupełnie początkujących trzyma się samego React Native i pomoże Ci poznać framework. Reacta tu nie ma.
  
  
• The Complete React Native and Redux Course, Udemy.com (płatny)
  
  Kurs przekazuje podstawowe informacje o React Native i Reduksie dla zupełnie początkujących. Zapisało się na niego ponad 80 tysięcy osób; oferuje dobry stosunek jakości do ceny i obiecuje pomóc Ci budować aplikacje mobilne absurdalnie szybko.
  
  
• React Native Katas, Github (darmowy)
  
  Ta pozycja jest nieco inna. To nie kurs, tylko interaktywne, praktyczne szkolenie z projektowania i stylowania w React Native. Może lepiej pasować programistom, którzy napisali już trochę kodu w React Native.
  
  
• React Native Crash Course, YouTube (darmowy)
  
  YouTube to kopalnia informacji i materiałów o React Native. Ten błyskawiczny kurs w 90 minut przechodzi przez podstawy frameworka, strukturę i najważniejsze komponenty.
  
  
• Multiplatform Mobile App Development with React Native, Coursera (płatny)
  
  Po ukończeniu tego kursu dostaniesz zaliczenie z Hong Kong University of Science and Technology. Kurs dla programistów na poziomie średnio zaawansowanym skupia się na React Native jako frameworku wieloplatformowym.
  
  
• From React to React Native, Udemy (płatny)
  
  To właściwy wybór dla wszystkich programistów, którzy opanowali już Reacta i chcieliby odświeżyć wiedzę o React Native.

Blogi

React Native ma dużą społeczność zwolenników na całym świecie. W efekcie jest mnóstwo blogów i stron z niezastąpioną wiedzą o frameworku.

Wymieńmy kilka popularnych przykładów. Więcej znajdziesz w tym wpisie. Możesz też sprawdzić najpopularniejsze podcasty i kanały na YouTubie o React Native.

• Facebook’s React Native Blog - jeśli tworzysz w React Native, nie możesz go pominąć. Najnowsze wydania, aktualizacje, mnóstwo przydatnych porad, trików i obejść. Ten blog to Twoje podstawowe źródło wiedzy o RN.
  
  
• Ray Wenderlich - wspominaliśmy już o tej stronie nazwanej od jej twórcy, Raya Wenderlicha, którego zna każdy w branży tworzenia oprogramowania. Ray udostępnia tu ponad 3000 tutoriali dla programistów, którzy chcą opanować różne języki i frameworki, w tym React Native.
  
  
• Gosha Arinich - Gosha to freelancer, który skupia się wyłącznie na Reakcie i React Native. Jego artykuły zawierają praktyczne wskazówki, przykłady z życia i inne wartościowe informacje, wszystko z perspektywy praktyka.
  
  
• Made with React- to nie blog w ścisłym sensie, tylko zbiór artykułów, materiałów i aplikacji korzystających z Reacta lub RN. Warto tu od czasu do czasu zaglądać. 

Najważniejsze wnioski

• Tworzenie w React Native wymaga podstawowej wiedzy o Reakcie, HTML-u i CSS oraz o zasadach budowania aplikacji mobilnych.
• Podstawowe pojęcia Reacta, które musisz zrozumieć przed przejściem do React Native, to komponenty, props i stan.
• W internecie są setki wartościowych materiałów dla początkujących w React Native: tutoriale, przewodniki startowe, zestawy startowe i blogi. Dostępne są też różne darmowe i płatne kursy online.
• Oficjalna dokumentacja Reacta to zawsze przydatne źródło wiedzy.

Zobacz także:
1. Everything You Should Know About React: The Basics You Need to Start Building
2. Getting Started with React – An Overview and Walkthrough
3. Thinking in React
4. React Native Styling Cheat Sheet
5. React Native Tutorial: Building Android Apps with JavaScript
6. Quick Start to React Native
7. What you need to know to start building mobile apps in React Native

Jak już wspominaliśmy, wybór właściwej technologii dla biznesu jest trudny. Istnieje szereg kluczowych kryteriów, które musisz wziąć pod uwagę, żeby ocenić, czy dany stack jest dla Ciebie odpowiedni. Jednym z czynników w tej ocenie jest popularność technologii i zakres jej zastosowań.

Poniżej przedstawiamy przykłady światowej sławy firm, które już wykorzystują React Native w swoich projektach. Przejrzyj je, a zobaczysz, jak framework pomógł im osiągnąć różne cele biznesowe.

Pamiętaj, że to nie znaczy, iż to, co zadziałało u nich, zadziała u Ciebie. Każda firma ma unikalne cele i wyzwania oraz konkretne kompetencje, zasoby i możliwości. Ale takie znane marki w portfolio to mocny argument za React Native.

Wróć do sekcji KIEDY UŻYWAĆ REACT NATIVE? i sprawdź, jakie projekty najlepiej pasują do RN.

1. Facebook – tam zaczął się React Native

Wszystko zaczęło się w Facebooku, gdzie jeden z zespołów deweloperskich stworzył React Native, żeby przyspieszyć prace nad mobilną aplikacją serwisu społecznościowego.

Chodziło o szybkie dostarczanie nowych funkcji i ograniczenie zasobów potrzebnych do ich wypuszczenia. Na początku programiści Fb stworzyli wersję na iOS, a wkrótce potem dołożyli wsparcie dla Androida.

Od tego czasu król mediów społecznościowych nieustannie inwestuje w optymalizację frameworka, wypuszczając kolejne aktualizacje. Poza korzyściami biznesowymi Facebook odnotował wymierną poprawę efektywności i harmonogramów, na przykład szybsze uruchamianie aplikacji.

2. Walmart – lider listy Fortune 500 nie może się mylić

Z przychodami ponad 500 mln dolarów w zeszłym roku Walmart otwiera listę Fortune 500 największych firm świata. Jeden z powodów tego sukcesu: firma zawsze stawia doświadczenie klienta na pierwszym miejscu.

Aplikacja Walmartu to doskonały przykład tego, jak sieć ułatwia życie swoim klientom. Pozwala przeglądać produkty, sprawdzać ceny w sklepie, zamawiać zakupy czy płacić za nie systemem Walmart Pay.

Ze względu na mnogość funkcji i ich złożoność Walmart normalnie musiałby utrzymywać dwa ogromne zespoły deweloperskie, żeby aplikacja działała na wszystkich urządzeniach. Zamiast tego postawił na tworzenie wieloplatformowe w React Native.

To wygląda na mądry ruch. Aż 95% bazy kodu Walmartu jest współdzielone między aplikacjami na iOS i Androida. Zespół tworzy równolegle na obie platformy, co o połowę obniża koszty pracy! Jak to mówią: idź w ślady gigantów.

5. Bloomberg – medialny gigant przechodzi na React Native

Bloomberg znany jest przede wszystkim jako firma medialna zajmująca się gospodarką i rynkami finansowymi, ale dostarcza też rozwiązania software'owe dla tych branż.

Bloomberg stworzył aplikację mobilną po to, żeby dawać firmom na całym świecie dostęp do danych rynkowych, notowań akcji i walut oraz wiadomości finansowych. Wymagający odbiorcy i zmienność sektora finansowego oznaczały, że aplikacja musi być szybka i mocno spersonalizowana. Żeby to osiągnąć, Bloomberg wybrał React Native.

Firma musiała przestawić cały zespół na React Native, żeby przebudować konsumencką aplikację mobilną na iOS i Androida. Liczył się też czas.

Wysiłek się jednak opłacił. Dzięki React Native aplikacja daje użytkownikom spersonalizowane, interaktywne doświadczenie, a do tego zaawansowane funkcje, takie jak dostęp do telewizji na żywo i ciągłe aktualizacje. Co ważniejsze, zespół Bloomberga zbudował całą aplikację od zera w 5 miesięcy. Bez frameworka to przedsięwzięcie zajęłoby co najmniej dwa razy dłużej.

To nie wszystko!

Tesla, Adidas GLITCH, Instagram, Skype, Baidu mobile, aplikacja tłumacząca Whym... jest znacznie więcej firm, które dostrzegły zalety React Native i wdrożyły go w swoich projektach, żeby oszczędzić czas, usprawnić prace i osiągnąć lepsze wyniki. Więcej przykładów udanych aplikacji w RN znajdziesz w tym wpisie na blogu.

Choć RN nie ma sensu w każdym kontekście, liczne przykłady jego użycia przez najbardziej innowacyjne firmy świata są mocnym argumentem za tym frameworkiem.

Najważniejsze wnioski

• Od premiery po React Native sięgnęło wielu liderów branży i pionierów innowacji.
• Niezrównane tempo pracy, maksymalne ponowne wykorzystanie kodu i znakomite doświadczenie użytkownika to jedne z głównych powodów wyboru React Native.
• Duże globalne firmy przechodzą na React Native, żeby jako pierwsze wypuszczać produkty na rynek i dostarczać wyjątkowe funkcje.
• React Native świetnie pasuje też do mniejszych firm, które muszą przyspieszyć prace bez powiększania zespołów deweloperskich.
• Mimo niesamowitych możliwości interfejsowych React Native, oszczędności czasu i pracy oraz ogromnego wsparcia programistów są projekty, do których się nie nadaje, jak w przypadku Airbnb.

Zobacz także:
1. React Native at Airbnb
2. Companies That Use React Native
3. How React Native Enabled Us to Develop a Mobile App in a Third of the Time
4. React Native for Android: How we built the first cross-platform React Native app
5. How Bloomberg Used React Native to Develop its new Consumer App
6. Tal Kol: Building a React Native App for 80 Million Users – ReactNext 2016

Statystyki React Native na GitHubie

Zainteresowanie React Native w czasie

„Z React Native całą pracę może wykonać jedna osoba. Bo cała wiedza, jakiej potrzebujesz, to praktycznie JavaScript”.
– Tal Kol, były Head of Engineering w Wixie

„React Native to świetny framework, który zasypuje przepaść między webem a mobilem. W Discordzie dał nam niesamowitą efektywność. Pozwala pisać kod wielokrotnego użytku, uczyć się od siebie nawzajem i działać szybko w dwuosobowym zespole”.
– Fanghao (Robin) Chen, Senior Software Engineer w Discordzie

„Udało nam się wypuścić pierwszą w pełni napisaną w React Native aplikację Facebooka na dwie platformy, z natywnym wyglądem i zachowaniem, zbudowaną przez ten sam zespół inżynierów JavaScript. Nie wszyscy znali Reacta, gdy dołączali do zespołu, a mimo to w pięć miesięcy zbudowali aplikację na iOS o natywnym wyglądzie i zachowaniu”.
– Philipp von Weitershausen i Daniel Witte, inżynierowie Facebooka

„Dzięki React Native pierwsze wdrożenie na iOS zajęło około 10 dni, wliczając w to podpięcie wszystkich integracji z naszą istniejącą infrastrukturą. Potem przenieśliśmy ten ekran na Androida w dwa dni, ze 100-procentowo współdzielonym kodem interfejsu między platformami, oszczędzając ponad tydzień pracy”.
– Vivian Qu | inżynier Pinteresta, Growth

„Uwielbiam React Native. Nie jest idealny, ale jest cholernie dobry. To jedno z najbardziej imponujących narzędzi, na jakie trafiłem przez ponad 9 lat pracy z mobilem i full stackiem. Wszystkie swoje projekty robię teraz w RN i wierzę, że daje mi to 2-3 razy szybsze iteracje niż konkurencji [...] oraz obecność na wszystkich platformach”.
– Arman Dezfuli-Arjomandi, samodzielny przedsiębiorca i twórca Slide, Falcross oraz Jake and Amir na iOS

Więcej informacji o stanie React Native na początku 2021 roku znajdziesz w tym artykule.

Zobacz także:
1. State of React Native 2018
2. The State of React Native 2018
3. David Vacca - The state of React Native
4. Here’s what I learned at the world’s biggest React conference

Omówiliśmy już wiele aspektów frameworka React Native. Mówiliśmy o podstawach, porównaliśmy RN z aplikacjami natywnymi i innymi wieloplatformowymi rozwiązaniami mobilnymi, a także przedstawiliśmy kluczowe zalety i wady frameworka. Znamy obecny stan React Native, ale co przyniesie mu przyszłość?

Patrząc na dotychczasowy rozwój React Native, wierzymy, że będzie rósł dalej. Mamy na to pięć argumentów

5 powodów, dla których React Native jest przyszłością tworzenia aplikacji mobilnych

1. Ogromna społeczność programistów
   
   Od pierwszego dnia RN zdobył solidną pozycję w środowisku programistów. Dziś jest czołowym mobilnym frameworkiem JS z prężną społecznością zwolenników. Programiści doceniają tempo i efektywność pracy w RN oraz korzystają ze współdzielonego repozytorium kodu, wyjątkowej funkcji hot reloading i szerokiego wyboru gotowych komponentów. 
   
   Potencjał dalszego wzrostu React Native jest wysoki, bo jeśli dobrze znasz JavaScript, szybko wdrożysz się w RN.
   
   
2. Szybki postęp
   
   Owszem, jako stosunkowo młoda technologia React Native nie jest jeszcze w pełni dojrzały. Rozwija się jednak w szybkim tempie. Z jednej strony jest otwartoźródłowy, więc każdy może dzielić się kodem i dokładać brakujące moduły oraz komponenty. Z drugiej stale rośnie pod egidą Facebooka. Commity do repozytorium react-native na GitHubie pojawiają się co kilka godzin.
   
   
3. Korzyści biznesowe
   
   Firmom React Native daje kluczową przewagę nad większością rozwiązań natywnych i wieloplatformowych: drastycznie skraca czas prac. Dzięki wsparciu wielu platform, aktualizacjom na żywo oraz mnóstwu wtyczek, bibliotek i gotowych modułów to narzędzie, które maksymalnie oszczędza czas i pozwala szybciej wypuścić aplikację. Jeśli zainwestujesz w React Native, możesz liczyć na co najmniej 20-30% niższe koszty wytwarzania niż w innych technologiach.
   
   
4. Wsparcie Facebooka
   
   React Native to nie zwykły projekt open source. Zaczął się w Facebooku i od tamtej pory jest bezpośrednio wspierany przez zespół inżynieryjny firmy. Społeczność programistów Facebooka nieustannie dokłada nowe funkcje i aktualizacje, optymalizuje framework i stawia sobie ambitne cele na przyszłość.
   
   

   Jednym z punktów roadmapy na 2019 rok jest gruntowna przebudowa architektury RN.

   Jeśli chodzi o aktualizacje z 2020 roku, możemy już korzystać z:

   • Nowych przewodników Getting Started.
   • Nowego przewodnika po testowaniu.
   • Nowego przewodnika po bezpieczeństwie.

   To tylko dowodzi, że firma poważnie traktuje swoje zobowiązanie do rozwoju frameworka.

5. Szeroki zakres zastosowań
   
   React Native, jak każda technologia, nie pasuje do wszystkich aplikacji, ale lista projektów, w których daje dużą przewagę nad konkurencją, robi wrażenie. Potrzeby i przypadki bywają różne, ale dla większości aplikacji RN może być najlepszym sposobem na ich zbudowanie.
   
   Przykłady zastosowań React Native to media społecznościowe, aplikacje zakupowe, czaty głosowe i wideo, aplikacje z wiadomościami, wyszukiwarki i wiele, wiele innych.

Co dalej z React Native?

Popularność wieloplatformowego tworzenia aplikacji mobilnych wciąż rośnie, a React Native jest czołowym frameworkiem w swojej lidze. Żywy ekosystem, ogromna społeczność i wsparcie komercyjne oraz szeroki zakres zastosowań przemawiają na jego korzyść i dowodzą, że jest na dobrej drodze, by stać się jedną z wiodących technologii na rynku aplikacji mobilnych.

Zobacz także:
1. React Native, the Future of Mobile App Development?
2. The Future of React Native with Brent Vatne and Adam Perry
3. React Native is dead, long live React Native
4. React Native status 2018: Looking bright with a re-architecture on the horizon

Czy React Native jest wart spróbowania? Wszystko zależy od Twojego projektu.

Sprawdź zalety i wady React Native, żeby ocenić jego korzyści w kontekście Twojej aplikacji.

Zobacz, jak wypada na tle innych rozwiązań wieloplatformowych.

Wróć do sekcji o tym, kiedy używać RN (a kiedy nie).

Jeśli programujesz, sprawdź to, czego potrzeba do nauki RN.

Jeśli wciąż nie wiesz, czy React Native jest dla Ciebie, zajrzyj do poniższego podsumowania. Powinno pomóc Ci podjąć decyzję

Startupy

Niezależnie od tego, czy chcesz przyspieszyć rozwój istniejącej aplikacji, czy zbudować kompletny produkt od początku do końca, React Native prawdopodobnie idealnie pasuje do Twojego startupu.

Pewnie nie stać Cię na duży zespół ze specjalistami i od Androida, i od iOS. Masz do dyspozycji dwie, trzy osoby, a Twój główny cel to stabilna aplikacja wysokiej jakości, jak najszybciej na rynku.

Jeśli tak jest, skorzystasz z następujących zalet RN:

Nawet 100% kodu wspólnego dla iOS i Androida. React Native pozwala programistom współdzielić ten sam kod w różnych środowiskach (iOS, Android, web). Realnie pewne dostosowania pod platformę będą potrzebne, ale firmy podają 80-90% wspólnego kodu w swoich aplikacjach. To oszczędza ogromnie dużo czasu.

Zespoły wieloplatformowe. Jeśli chcesz wypuścić aplikację na wszystkie urządzenia, ciężko będzie Ci znaleźć specjalistę od wielu platform. Grono programistów świetnych na wszystkich platformach mobilnych jest znikome. Z drugiej strony RN opiera się na podejściu „naucz się raz, pisz wszędzie”. W praktyce oznacza to, że z tym frameworkiem nie musisz utrzymywać osobnych zespołów, żeby wypuścić produkt na kilka systemów. Jak pokazuje przypadek Discorda , w RN wystarczą dwie osoby, żeby zbudować mocne aplikacje i wdrożyć je na wszystkich urządzeniach.

Łatwe utrzymanie kodu. Jeden kod, jeden zespół, dwa produkty. React Native umożliwia jedną bazę kodu JavaScript dla różnych platform. Dzięki temu łatwiej ten kod utrzymywać i wykorzystywać ponownie, a to znów pozwala osiągać imponujące wyniki małymi zespołami.

Szybkie dostarczanie funkcji. Dzięki mechanizmom RN, takim jak hot reloading oraz CodePush, Twój zespół może aktualizować i ulepszać oprogramowanie dynamicznie, bez przeładowywania całego kodu i zatrzymywania aplikacji. W ten sposób oszczędzasz mnóstwo czasu i zapewniasz natychmiastowe poprawki oraz ulepszenia funkcji. Wszystko bez wpływu na użytkownika końcowego.

Brak opłat. Wreszcie, w przeciwieństwie do większości konkurentów, RN jest w 100% darmowy, oficjalnie prowadzony przez Facebooka, ale korzystający z ogromnego wkładu społeczności. Możesz od razu wystartować z projektem, bez martwienia się o wygórowane opłaty abonamentowe i ograniczenia licencyjne.

Właściciele firm / kadra C-level / menedżerowie

Aplikacje mobilne odpowiadają za blisko połowę globalnego ruchu w internecie, a podobno na świecie jest więcej właścicieli smartfonów niż szczoteczek do zębów.

Przy ponad 200 miliardach pobrań aplikacji w 2018 roku (wzrost o 11% względem poprzedniego roku) rynek aplikacji mobilnych kwitnie i nic go nie zatrzyma.

React Native zawdzięcza swoją ogromną popularność wśród programistów wielu czynnikom, między innymi:

• Bogaty ekosystem bibliotek i wtyczek
• Natywny wygląd i zachowanie aplikacji
• Szczegółowa, regularnie aktualizowana dokumentacja
• Mocne narzędzia
• Łagodna krzywa uczenia się (przyznają to nawet programiści Androida: „React Native jest po prostu łatwiejszy [niż tworzenie natywne]”)
• Eleganckie wzorce

Jeśli choć jedno z poniższych stwierdzeń Cię dotyczy, rozważ przejście na React Native:

• Znasz już Reacta. Koncepcyjnie RN jest bardzo podobny do ReactJS. W obu korzystasz z tego samego cyklu życia komponentu, propsów i stanów, składni JSX oraz Reduxa. Jeśli znasz już to drugie, dość szybko ogarniesz to pierwsze. Sprawdź oficjalną dokumentację RN, przejdź przez kilka tutoriali i gotowe!
• JavaScript to Twój żywioł. React Native jest napisany w JavaScripcie i oparty na bibliotekach ReactJS. Choć powodów do sceptycyzmu wobec JS nie brakuje, wciąż jest to najpopularniejszy język programowania na świecie. Szacuje się, że korzysta z niego 95% wszystkich stron. Jeśli tworzysz aplikacje mobilne, bardzo prawdopodobne, że już go znasz. W takim razie nauka RN będzie dla Ciebie stosunkowo łatwa.
• Nie lubisz czekać. W RN możesz korzystać z ultrabogatej biblioteki materiałów i komponentów, żeby przyspieszyć pracę. Co więcej, w 2016 roku Facebook wprowadził jedną z najbardziej chwalonych funkcji RN, hot reloading, która pozwala wprowadzać i oglądać zmiany w czasie działania aplikacji oraz przeładowywać ją przy zapisie. Ta moc szybkiego wdrażania jest szczególnie kusząca dla programistów, którzy chcą od razu widzieć efekty swojej pracy.
• Nie możesz się zdecydować, czy uczyć się Javy, Objective-C czy Kotlina. Żeby zacząć z React Native, nie potrzebujesz żadnego z nich. RN pozwala korzystać z tych samych podstawowych klocków co aplikacje na Androida i iOS, żeby stworzyć aplikację nie do odróżnienia od oprogramowania zbudowanego w językach przypisanych do platformy. Do startu wystarczą Ci podstawy JS i Reacta.
• Kochasz open source. W przeciwieństwie do większości natywnych i wieloplatformowych rozwiązań RN jest w 100% otwartoźródłowy. Choć jego rozwój napędza Facebook, jest też jednym z najpopularniejszych i najlepiej ocenianych repozytoriów na GitHubie. Z RN możesz korzystać z dzielenia się wiedzą i dokładać własny kod do wspólnej puli.

Podsumowanie

Zobacz także:
1. Five reasons why web developers love React Native
2. Seven reasons why a Rails 5, Redux, React, and React Native stack is fantastic for new startups
3. React Native as seen by an Android developer