Jako programista Androida z ponad 7-letnim doświadczeniem zawsze ciągnęło mnie do świata Javy i Kotlina. Ale około rok temu poczułem, że chcę odkryć coś nowego — i wtedy zacząłem nurkować w React Native.

Początkowo zainteresowałem się React Native ze względu na moją miłość do JavaScript i ciekawość programowania międzyplatformowego. Poza tym wiedziałem, że nauka RN sprawi, że będę bardziej sprzedawany w branży technologicznej.

Teraz, po miesiącach pracy z RN, chcę podzielić się swoim doświadczeniem z innymi, którzy być może rozważają tę ścieżkę. Po drodze wiele się nauczyłem i wierzę, że moje spostrzeżenia mogą pomóc innym wybrać właściwy kierunek i uniknąć marnowania czasu na niewłaściwej trasie.

Niedawno przepisałem mój projekt Kotlin w React Native i możesz sprawdzić kod pod adresemhttps://github.com/thesiamak/sendit-react-native. Oryginalny projekt Kotlina jest również dostępny pod adresemhttps://github.com/thesiamak/sendit. Zachęcamy do sprawdzenia i porównania wydajności aplikacji, kodu i różnic.

Oczywiście moje zrozumienie React Native ogranicza się do mojego doświadczenia — ale zawsze chętnie się uczę i dyskutuję z innymi. Zachęcamy więc do komentowania i dzielenia się swoimi przemyśleniami, abyśmy mogli dalej razem się rozwijać.

Architektura

Jeśli chodzi o architekturę, React Native działa inaczej niż to, do czego przywykli programiści Androida. W przeciwieństwie do Androida, React Native nie ma ścisłego zestawu wytycznych dotyczących architektury. W rzeczywistości architektura React Native opiera się przede wszystkim na tym, w jaki sposób komponenty są od siebie zależne.

Jako programista masz swobodę projektowania kodu źródłowego zgodnie z dowolnym wzorcem architektury. Jednak bez oficjalnych wytycznych lub opinii łatwo jest poczuć się zagubionym i nie wiedzieć, od czego zacząć. Z drugiej strony ta prostota ułatwia nowym programistom poznanie podstaw React Native — jak to działa, czym są komponenty, czym jest Redux i jak używać tych wszystkich narzędzi do rozwiązywania problemów.

Jednak w miarę rozwoju projektu zarządzanie bazą kodu może szybko stać się przytłaczające. Bez zdefiniowanej architektury bardzo łatwo jest stworzyć bałagan i trudne do debugowania problemy. W rezultacie doświadczeni programiści zalecają wczesne wprowadzenie struktury i organizacji do projektu, aby uniknąć problemów w przyszłości.

React Native, w przeciwieństwie do tradycyjnego tworzenia aplikacji natywnych, nie ma określonej architektury ani struktury. Zamiast tego pozostawia to programiście określenie najlepszego sposobu ustrukturyzowania komponentów aplikacji i przepływu danych. Niektóre typowe wzorce używane przez programistów w React Native to Flux (podobny do MVVM z jednokierunkowym przepływem danych), Redux i model zorientowany na komponenty .

Środowisko programistyczne

Jeśli chodzi o środowisko programistyczne, React Native oferuje różnorodne IDE do wyboru, ale VS Code jest dla mnie najbardziej wydajny i bogaty w funkcje. Pochodząc ze świata Androida, byłem mile zaskoczony, gdy odkryłem, jak lekki, prosty i elastyczny VS Code jest w porównaniu do Android Studio (weźmy na przykład pragnienie zasobów w Android Studio ).

Dzięki funkcji przeładowywania na gorąco zapewnianej przez zoptymalizowany przez Hermes silnik JS na szczycie pakietu Metro , stale rozwijam kod React Native bez potrzeby przebudowywania aplikacji, chociaż czasami zdarzają się awarie. Po stronie natywnego Androida zespół ds. relacji z programistami od lat pracuje nad dostarczeniem podobnych funkcji, takich jak natychmiastowe uruchamianie (które jest już martwe!) Część interfejsu użytkownika, podczas gdy Metro działa doskonale dla wszystkiego oprócz natywnego kodu lub uprawnień.

Kolejną świetną cechą React Native jest tryb Expo , który zajmuje się wieloma żmudnymi zadaniami dla programistów, którzy mogą nie mieć niezbędnego doświadczenia, aby sobie z nimi poradzić. Jest to szczególnie przydatne dla nowych programistów, którzy dopiero zaczynają pracę z frameworkiem. Expo obsługuje takie rzeczy, jak uprawnienia , konfiguracja aplikacji i wiele innych przydatnych funkcji. Warto jednak zauważyć, że większość bibliotek natywnych NIE jest jeszcze kompatybilna z trybem Expo. Niemniej jednak może być świetnym narzędziem do rozpoczęcia pracy z React Native i wzbudzenia zainteresowania programowaniem od samego początku.

W React Native programiści mogą indywidualnie tworzyć projekty na Androida i iOS poza trybem Expo. Pozwala to na rozszerzenia specyficzne dla platformy , takie jak rozwijanie kodu natywnego i komunikowanie się z mostem JS lub wykorzystywanie wątków , emisji i intencji . Ta elastyczność umożliwia programistom optymalizację wydajności i precyzyjne dostosowanie działania aplikacji do każdej platformy. Wymaga to jednak głębszego zrozumienia natywnych platform i związanych z nimi narzędzi programistycznych.

Ponowne użycie kodu

Aplikacje React Native składają się z wielu gotowych lub niestandardowych komponentów, które służą jako kontenery kodu, które można wywoływać z dowolnego miejsca w kodzie źródłowym. Ta koncepcja kodu wielokrotnego użytku jest łatwiejsza w użyciu i utrzymaniu w porównaniu z komponentami opartymi na klasach używanymi w natywnym ekosystemie Androida.

React Native obsługuje TypeScript, co pozwala programistom wykorzystać pełne funkcje OOP, takie jak abstrakcja, polimorfizm, dziedziczenie i enkapsulacja. Ta funkcja umożliwia programistom tworzenie fragmentów kodu wielokrotnego użytku. Ponadto JavaScript obsługuje programowanie funkcjonalne, co umożliwia programistom korzystanie z obu stron OOP i programowania funkcjonalnego na jednej platformie. Funkcje wielokrotnego użytku mogą być również używane jako obiekty.

W kodzie źródłowym Androida innym niż Compose UI (system przeglądania) koncepcja działań jest używana na ekranach, co zwiększa złożoność pracy ze względu na cykle życia widoku, kontekst i inne. W przeciwieństwie do tego, wszystko w React Native jest tylko komponentem i może być używane w innym komponencie, dzięki czemu programowanie jest przyjemniejsze dla programistów zaznajomionych z tym paradygmatem.

W zależności od skali projektu zaleca się strukturę plików zasobów i kodu w taki sposób, aby można je było przesyłać metodą przeciągania i upuszczania, przy czym VS Code zajmuje się łączeniem.

Moduły natywne są zwykle dystrybuowane jako pakiety npm, a łączenie tych pakietów z npm jest łatwe. Jednak te pakiety niekoniecznie są lepsze niż system Gradle używany w Androidzie i mogą występować problemy ze zgodnością i ostrzeżenia o wycofaniu, które wymagają samodzielnego rozwiązania przez programistów.

warto wspomnieć, że ponowne użycie kodu nie polega tylko na jednorazowym napisaniu kodu i używaniu go na różnych platformach. Chodzi również o pisanie kodu, który jest łatwy w utrzymaniu, rozszerzaniu i refaktoryzacji, czyli bardziej o tym, jak programista może wykorzystać dostępne narzędzia dostarczane przez platformę.

Wydajność

React Native kompiluje komponenty interfejsu użytkownika do kodu natywnego (wykorzystuje interfejsy wątków renderowania do rysowania na ekranie) i używa mostka JS do komunikacji z kodem JS. Takie podejście zapewnia dobre działanie komponentów interfejsu użytkownika, ale oznacza również, że wydajność aplikacji zależy w dużym stopniu od tego, jak dobrze programista może oddzielić komponent od logiki JS .

Aplikacje React Native mają nieco dłuższy czas uruchamiania w kompilacjach wersji w porównaniu z aplikacjami natywnymi. Dzieje się tak, ponieważ silnik JS i framework React Native muszą zostać wcześniej zainicjowane, aby obsłużyć interfejs użytkownika. Jednak natywni programiści Androida mogą również napotkać problemy z czasem uruchamiania z powodu błędnej konfiguracji w konfiguracji Dagger/Hilt lub innych procesów wczesnej inicjalizacji .

Chociaż React Native ma swoje problemy z wydajnością, nadal może zapewnić dobre wrażenia użytkownika, jeśli programista rozumie, jak zoptymalizować wydajność. Korzystając z narzędzi i technik profilowania wydajności, takich jak dzielenie kodu , buforowanie i korzystanie z modułów natywnych , programiści mogą poprawić wydajność aplikacji i zapewnić bezproblemową obsługę.

Warto również zauważyć, że aplikacja React Native zużywa więcej pamięci niż aplikacja natywna, ponieważ musi załadować pakiet JS i framework. Jednak React Native wykorzystuje pewne techniki optymalizacji, aby zmniejszyć zużycie pamięci, takie jak leniwe ładowanie komponentów i wydajne wyrzucanie elementów bezużytecznych. Mimo to programiści powinni nadal pamiętać o wykorzystaniu pamięci w swoich aplikacjach React Native, aby zapewnić optymalną wydajność.

Interfejs użytkownika

W React Native sposób projektowania interfejsów użytkownika jest bardzo podobny do interfejsu Compose, w tym animacje. Zasadniczo komponent interfejsu użytkownika jest niczym innym jak funkcją, dzięki czemu koncepcja jest identyczna na obu platformach. Chociaż tego typu animacje w React Native nie są domyślnie włączone i trzeba je dodawać ręcznie. Ich interfejs API animacji jest zoptymalizowany, aby zapewnić płynne działanie bez renderowania klatek bezpośrednio w głównym wątku. Z drugiej strony, chociaż uruchamianie animacji w wątku renderowania jest możliwe w systemie widoku Androida , nie jest on jeszcze w pełni dojrzały, co sprawia, że ​​kod natywny jest lepszą opcją do konfigurowania i wykonywania animacji.

Jedną z kluczowych różnic między tymi dwiema platformami jest to, że Android ma wbudowaną koncepcję motywów i systemu projektowania , których nie ma w React Native. Dzieje się tak jednak dlatego, że React Native zapewnia programistom narzędzia do tworzenia dowolnego globalnego mechanizmu motywów w aplikacji. Oznacza to, że możesz albo utworzyć obiekt motywu i zaimportować go do dowolnego tworzonego komponentu, albo utworzyć obiekt stylizujący wewnątrz komponentu. Każde podejście ma swoje zalety i wady, w zależności od projektu i zespołu.

Jednym z aspektów, który uznałem za trudny podczas przechodzenia z Androida na React Native, było przyzwyczajenie się do Flexboksa do zarządzania układami. Flexbox jest bardziej koncepcją sieciową i chociaż jest łatwy w użyciu, może być trudny do zrozumienia dla programistów niebędących programistami internetowymi. W systemie widoku Android istnieją predefiniowane kontenery układu, takie jak Układ względny i Układ ograniczony , które mają już zdefiniowane właściwości.

Inną zauważalną różnicą jest to, że React Native używa deklaratywnego podejścia programistycznego do budowania interfejsu użytkownika, podczas gdy system widoku Android jest oparty na modelu imperatywnym (chociaż interfejs Compose jest deklaratywny). Oznacza to, że tworzenie interfejsu użytkownika w React Native jest bardziej wydajne, a wynikowy kod jest łatwiejszy do odczytania i zrozumienia.

Ogólnie rzecz biorąc, chociaż istnieją pewne różnice między React Native a systemem Android, jeśli chodzi o tworzenie interfejsów użytkownika, obie platformy oferują potężne narzędzia i możliwości tworzenia pięknych i wydajnych interfejsów użytkownika.

Rodzime możliwości

React Native (RN) to medium przeglądania, a nie całkowity zamiennik Androida/iOS. Dlatego programiści nie powinni oczekiwać 100% niezależności od kodu natywnego. Chociaż RN oferuje niektóre funkcje niezwiązane z interfejsem użytkownika, takie jak AsyncStorage, dla innych, takie jak Elementy, Nawigacja, Animacje, Mapy, Selektor obrazów, programiści muszą polegać na społeczności i metabibliotekach zaprojektowanych specjalnie dla RN.

Na szczęście RN ma tętniącą życiem społeczność i bogactwo dostępnych bibliotek stron trzecich. Dodanie tych bibliotek do projektów może często oszczędzić Ci pisania natywnego kodu w językach takich jak Java czy Swift. Jednak w większych projektach dotykanie kodu natywnego jest często nieuniknione. Deweloperzy muszą posiadać praktyczną wiedzę na temat kodu natywnego, aby spełnić określone wymagania projektowe.

RN jest dostarczany z AsyncStorage , co odpowiada Shared Preferences Androida . Jednak nie zaleca się go używać, ponieważ nie ma obsługi szyfrowania . Zamiast tego istnieją sprawdzone przez społeczność opcje, które służą różnym celom. Natywna strona ma podobne problemy z Shared Preferences, a DataStore Androida , obsługujący szyfrowanie i protobuf po wyjęciu z pudełka, oferuje rozwiązanie.

Po stronie natywnej opcja Room DB systemu Android zbudowana z SQLite jest opcją, podczas gdy programiści RN często używają RealmDb . Chociaż obie bazy danych oferują podobne funkcje, użycie RealmDb dodaje około 3 MB do ostatecznego rozmiaru aplikacji (pomimo dodatkowej struktury i rozmiaru pakietu JS). Migracje w RoomDB są łatwiejsze niż w Realm.

Dostęp do funkcji specyficznych dla urządzenia, takich jak czujniki , kamera i lokalizacja , jest łatwy w RN dzięki wspaniałym bibliotekom. Deweloperzy muszą tylko znaleźć taki, który odpowiada ich potrzebom.

Jeśli chodzi o uprawnienia, RN regularnie aktualizuje swoją dokumentację i udostępnia bibliotekę response-native-permissions , która oferuje prosty interfejs do udzielania dostępu. Po stronie natywnej polityka prywatności często się zmienia, a programiści mogą być zmuszeni czekać na aktualizacje bibliotek, aby w pełni obsługiwać najnowszych użytkowników Androida/iOS.

Wreszcie RN umożliwia programistom wywoływanie kodu natywnego za pomocą kodu JS i odwrotnie przy użyciu modułów natywnych . Jednak ta komunikacja nie zawsze jest tak płynna, jak się wydaje, biorąc pod uwagę różne cykle życia i stany gotowości kodu obu platform. Inicjalizacja może być szczególnym wyzwaniem.

Biblioteki i ekosystem innych firm

Jak wspomniano wcześniej, React Native (RN) korzysta z bogatej społeczności. Większość z nich pochodzi ze środowiska webowego i jest zaznajomiona ze światem open source.

Biblioteki innych firm w RN mogą wewnętrznie korzystać z innych bibliotek innych firm , co ułatwia zapewnienie kompatybilnego rozwiązania dla przestarzałej biblioteki i udostępnienie jej światu. Dzięki NPM jako menedżerowi pakietów bardzo łatwo jest udostępniać kod innym osobom. W porównaniu z Mavenem i innymi biurokratycznymi usługami udostępniania repozytoriów po natywnej stronie Androida, NPM odgrywa kluczową rolę w rozwoju społeczności.

Chociaż korzystanie z bibliotek innych firm ma wiele zalet, należy pamiętać, że mogą one zwiększać złożoność aplikacji i powodować problemy ze zgodnością lub luki w zabezpieczeniach . Z punktu widzenia kompatybilności biblioteki natywne są bezpieczniejsze w użyciu.

Wdrażanie i dystrybucja

Proces budowania i wydawania aplikacji w React Native (RN) jest podobny do kodu natywnego. Będziesz mieć ten sam artefakt i możesz go wdrożyć w dowolnym sklepie z aplikacjami. Jednak kompilacje debugowania są inne, ponieważ brakuje w nich Hermesa, a wszystko, co zapewnia JS, będzie niedostępne.

Podczas gdy po stronie natywnej jedynym sposobem wdrażania aktualizacji są sklepy z aplikacjami, RN obsługuje aktualizacje OTA (over-the-air ) za pośrednictwem funkcji o nazwie CodePush . Ta funkcja umożliwia aktualizowanie aplikacji bez konieczności pobierania przez użytkowników nowej wersji ze sklepu z aplikacjami. Jednak aktualizacje OTA mogą stwarzać zagrożenia bezpieczeństwa, dlatego należy zachować ostrożność podczas ich używania.

RN domyślnie używa interfejsu wiersza poleceń (CLI) do otrzymywania poleceń, umożliwiając programistom RN tworzenie artefaktów za pomocą narzędzi CI/CD, takich jak Fastlane i GitLab .

Elastyczność RN w ciągłym dostarczaniu nowych wersji bez zakłócania pracy użytkowników umożliwia zespołom stosowanie wielu strategii wdrożeniowych. Na dużą skalę ta elastyczność pomaga ratować firmy na wczesnych etapach katastrofy dzięki natychmiastowej łatce. Z drugiej strony, w przypadku kodu natywnego musimy czekać na proces przeglądu sklepu i w niektórych przypadkach przechodzić przez obciążenie w kółko.

RN korzysta również z integracji z usługami Firebase . Możesz korzystać ze wszystkich wspaniałych usług oferowanych przez Firebase, takich jak Crashlytics , Remote Config i Analytics , w RN bez robienia czegokolwiek w natywnym kodzie, z wyjątkiem prostego ręcznego łączenia.

Perspektywy na przyszłość

React Native (rn) stale wydaje nowe aktualizacje, aby rozwiązać problemy i poprawić rozwój i wydajność. Z każdą aktualizacją framework staje się bardziej stabilny i wydajny. Na przykład wprowadzili Fabric jako nowy system renderowania, który jest zbudowany z niskiego poziomu C++. Fabric usuwa opóźnienia renderowania spowodowane sprzężeniem kodu JS z głównym wątkiem aplikacji i wprowadza nową architekturę , która ma ogromny wpływ na cykl programowania i wydajność aplikacji.

React Native zyskał dużą popularność wśród programistów, głównie ze względu na swoje możliwości międzyplatformowe, i oczekuje się, że trend się utrzyma. Warto również zauważyć, że rn przyciąga wielu twórców stron internetowych ze względu na podobieństwa do narzędzi i przepływów pracy do tworzenia stron internetowych. W rezultacie wielu twórców stron internetowych zaczęło eksperymentować z React Native, a reakcja była pozytywna.

Przyszłość React Native rysuje się w jasnych barwach i oczekuje się, że w ciągu najbliższych pięciu lat będzie to jedna z najszybciej rozwijających się platform. Krzywa uczenia się React Native jest stosunkowo niska, co czyni ją bardziej dostępną dla programistów, którzy chcą przejść z innych platform. React Native jest również bardzo poszukiwany na rynku pracy, szczególnie na rynkach startupów na całym świecie, w tym w Azji Południowej.

Chociaż istnieją inne wieloplatformowe frameworki, takie jak Flutter i KMM , jest mało prawdopodobne, aby KMM stał się potencjalną alternatywą dla React Native. Pomimo wydania Compose UI Multiplatform, może upłynąć kilka lat działań marketingowych Google, zanim KMM zyska szerokie zastosowanie. Co więcej, zespół KMM skupia się w najbliższej przyszłości na wiązaniu JS z Kotlinem, co oznacza, że ​​możemy zobaczyć aplikacje napisane w React Native zawierające moduły KMM lub odwrotnie.

Ogólnie rzecz biorąc, React Native to framework, który ma ogromny potencjał na przyszłość. Dzięki ciągłym aktualizacjom, możliwościom międzyplatformowym i rosnącej popularności prawdopodobnie pozostanie znaczącą platformą do tworzenia aplikacji.

Wniosek

Podsumowując, React Native stał się popularnym frameworkiem do tworzenia aplikacji mobilnych, ponieważ oferuje programistom dużą elastyczność, od architektury po środowisko programistyczne. Ta elastyczność ułatwia nowym programistom poznanie podstaw React Native. Jednak bez zdefiniowanej architektury zarządzanie bazą kodu może stać się przytłaczające, a doświadczeni programiści zalecają wczesne wprowadzenie struktury i organizacji do projektu. Kod natywny, w przeciwieństwie do React Native, opiniuje większość aspektów kodu (architektura, projekt i struktura), aby zapobiec potencjalnym błędom programisty.

React Native obsługuje TypeScript, który pozwala programistom wykorzystać pełne funkcje OOP i tworzyć fragmenty kodu wielokrotnego użytku.

Ogólnie rzecz biorąc, polecam RN zamiast programowania natywnego dla małych i średnich projektów, zwłaszcza gdy biznesplan jest w fazie opracowywania, a produkt wymaga elastyczności. Gdy produkt wymaga wydajności i wymaga ogromnego przetwarzania po stronie klienta (przetwarzanie obrazu, gry lub niektóre aplikacje Web3 wymagające czujników), być może kod natywny działa lepiej na dłuższą metę.

Jeśli chcesz zobaczyć różnicę między tymi dwoma, sprawdź mój projekt Kotlin przepisany w React Native whttp://github.com/thesiamak/sendit-react-native