Flutter vs. React Native – która technologia będzie najlepsza dla Twojej aplikacji mobilnej w najbliższym czasie?

W ostatnich latach na intensywny i dynamiczny rozwój e-commerce znaczący wpływ miało coraz większe wykorzystanie urządzeń mobilnych do zakupów online. W rezultacie dzisiaj mówimy o m-commerce. Według Pew Research Center około 81% Amerykanów posiada smartfon, a dostęp do niego ma aż 96%¹ . W pierwszym kwartale 2021 r. same smartfony generowały prawie 55% globalnego ruchu w witrynie².

źródło obrazu: https://datareportal.com/reports/digital-2021-global-overview-report

Kupujący chętniej korzystają z urządzeń mobilnych do przeglądania oferty sklepów internetowych i kupowania produktów. Według Statisty, w 2016 r. udział ruchu mobilnego w globalnym e-commerce wyniósł zaledwie 52%. Do 2020 r. udział ten wzrósł do ponad 70%³  , i nadal rośnie, odpowiadając za ponad trzy czwarte całego ruchu. W tym kontekście posiadanie przyjaznego dla urządzeń mobilnych sklepu internetowego, stało się koniecznością. Sprzedawcy, którzy wdrażają rozwiązania m-commerce, ułatwiają klientom komunikację z ich marką, dostępność produktów, a także zapewniają prostsze i szybsze zakupy.

W Polsce trend m-commerce jest podobny. Według badań przeprowadzonych przez Santander Consumer Bank⁴, 41% Polaków dokonuje zakupów w sieci za pomocą urządzeń mobilnych (w porównaniu do ogółem 80% kupujących online w Polsce).

Rozwój i popularność aplikacji mobilnych wymusza na markach spełnienie nie tylko coraz to wyższych oczekiwań użytkowników, ale także tworzenie natywnych wersji aplikacji mobilnych na główne platformy mobilne. 

Niestety opracowanie aplikacji natywnej zakłada korzystanie z oddzielnych rozwiązań na urządzenia z mobilnymi systemami Android i iOS, co czyni to kosztownym przedsięwzięciem. I właśnie w tym miejscu wkraczają technologie wieloplatformowe, które umożliwiają tworzenie aplikacji mobilnej jednocześnie na obie ze wspomnianych platform, lecz niższym kosztem.  

Na rynku dostępnych jest już wiele technologii wieloplatformowych umożliwiających tworzenie skomplilowanych aplikacji. W roku 2021, zapewne także w najbliższym czasie, głównymi graczami rynkowymi są technologie: React Native i Flutter. Oba rozwiązania mogą zapewnić markom wiele korzyści, które przedstawiamy poniżej:

• Krótszy proces tworzenia aplikacji – wykreowanie jednego kodu jest znacznie szybsze niż tworzenie dwóch odrębnych aplikacji natywnych dedykowanych tylko jednemu systemowi operacyjnemu. 
• Niższe koszty wdrożenia – zaprojektowanie i wdrożenie oddzielnych aplikacji mobilnych na Androida oraz iOS jest związane z wysokimi kosztami. Konieczne jest stworzenie dwóch zespołów deweloperskich w ramach obu środowisk. Technologie wieloplatformowe w znacznym stopniu redukują ten koszt, który, przy wykorzystaniu Fluttera czy React Native, jest zbliżony do stworzenia aplikacji typu PWA (Progressive Web App). 
• Wzrost liczby użytkowników – aplikacja wieloplatformowa jest dostępna równocześnie we wszystkich kanałach dystrybucji, co wspiera dotarcie do maksymalnie szerokiej grupy użytkowników.
• Proste utrzymanie – podczas aktualizacji aplikacji większość zmian i poprawek wprowadza się jednorazowo. 

Pomimo, że oba rozwiązania mają wiele wspólnych cech, występuje między nimi szereg istotnych z naszego punktu widzenia różnic. Przed podjęciem decyzji: Flutter czy React Native, warto poznać te rozbieżności i zastanowić się nad celami, jakie aplikacja mobilna ma realizować. 

Przyjrzyjmy się zatem bliżej obu technologiom, ich zaletom i różnicom.

Flutter

Flutter to najnowsza wieloplatformowa technologia Google⁵ przeznaczona do programowania aplikacji na systemy operacyjne Android oraz iOS a także strony internetowe oraz Windows, GNU/Linux i MacOS . Flutter pozwala za pomocą jednej bazy kodu źródłowego tworzyć aplikacje natywne na wspomniane platformy. Dzięki temu, że rdzeń aplikacji powstaje w jednym systemie, zawierającym własne widgety (czyt. komponenty graficzne), wygląd aplikacji jest taki sam zarówno na urządzeniach z systemem Android, jak i iOS.

Kod aplikacji pisany jest w języku Dart, również rozwijanym przez Google. Szybko rosnący ekosystem oraz społeczność aktywnych developerów powoduje to, że Flutter przejmuje część rynku aplikacji hybrydowych i natywnych. 

Jakie zalety posiada Flutter?

• Jeden kod – Flutter obsługuje platformy mobilne Android i iOS, a ponieważ renderuje wszystko samodzielnie, umożliwia uruchamianie aplikacji na podstawie jednego kodu bazowego. To duża oszczędność czasu.

• Przyjazne interfejsy – Flutter umożliwia tworzenie wyrazistych interfejsów użytkownika za pomocą widżetów, warstw i zasobów interaktywnych. Do dyspozycji programisty pozostają dwa osobne zestawy widżetów: Material Design, który jest zgodny z wytycznymi projektowymi Google, oraz Cupertino, zgodny z wytycznymi Apple dla interfejsu urządzeń iOS.

• Hot reloading – Flutter umożliwia dokonywanie natychmiastowych zmian w aplikacji, dzięki funkcji szybkiego przeładowania można podejrzeć wszystkie wprowadzane zmiany w trakcie ich opracowywania. Wpływa to na znaczne skrócenie czasu produkcji, gdyż nie wymaga ponownego uruchamiania aplikacji po wprowadzeniu zmian w kodzie w celu sprawdzenia rezultatów. 

• Ten sam wygląd na nowszych i starszych urządzeniach – Flutter zarządza każdym pikselem ekranu, dzięki czemu aplikacje wyglądają tak samo na każdym urządzeniu mobilnym (nawet starszym) zarówno z systemem Android jak i iOS.

• Wsparcie społeczności Flutter oraz integracja z Google Fuchsia – Google stawia na Flutter, gdyż system operacyjny Fuchsia, który jest jeszcze w fazie rozwoju, a docelowo ma zastąpić system Android, wykorzystuje silnik Fluttera, jako narzędzie renderujące (prezentujące) UI. Od daty premiery Fluttera w 2017 roku, wsparcie deweloperskie dla niego znacznie wzrosło – repozytorium projektu na GitHubie posiada obszerne pliki dokumentacji, wytyczne dla programistów oraz wskazówki dotyczące pisania kodu źródłowego.

Jakie wady posiada Flutter?

Flutter jest dosyć łatwy w nauce, ale osoba, która będzie się uczyła Fluttera, powinna posiadać minimalne doświadczenie w tworzeniu aplikacji natywnych. Bez tej wiedzy nie będzie możliwe zbudowanie funkcjonalnej aplikacji wieloplatformowej. Warto również zaznaczyć, że Dart, czyli język programowania, którego używa Flutter, nie jest jeszcze tak popularny, jak JavaScript, na którym opiera się technologia React Native. Jedną z wad Fluttera może być integracja z natywnymi API, która wymaga napisania natywnego kodu. W przypadku najczęstszych funkcji aplikacji ma to niewielki wpływ. Jednak w bardziej niestandardowych sytuacjach trzeba napisać natywny kod Swift/Objective-C dla systemu iOS i Kotlin/Java dla systemu Android oraz wykorzystać różne zintegrowane środowiska programistyczne (IDE) do interakcji z natywnymi API.

React Native 

React Native to framework open source opracowany przez Facebooka. Umożliwia on tworzenie aplikacji mobilnych przy użyciu języka JavaScript. Z punktu widzenia użytkownika końcowego – aplikacji napisanych w React Native, podobnie jak tych napisanych we Flutter- nie da się odróżnić od tradycyjnych aplikacji natywnych.

Jakie zalety posiada React Native?

• Popularny język umożliwiający szybką naukę – React Native używa, jako języka programowania, JavaScript, który wielu programistów doskonale zna. Developerzy, którzy korzystają z popularnych rozwiązań React, w bardzo prosty sposób mogą rozpocząć pracę z React Native. Nie wymaga nauczenia się API nowych bibliotek. Można używać również tych samych narzędzi i wzorców.

• Natywny interfejs – React Native implementuje zestaw natywnych komponentów UI (User Interface). Dzięki temu aplikacje wyglądają jak aplikacje w pełni natywne.

• Szybkie odświeżanie – Każdą zmianę w JavaScript można prawie natychmiast podejrzeć na telefonie, co pozytywnie wpływa na proces tworzenia aplikacji. 

• Gotowe rozwiązania i biblioteki – React Native posiada wiele bibliotek i narzędzi do automatyzacji oraz wspomagania większości standardowych procesów. To zdecydowanie ułatwia i przyspiesza pracę programistom nad rutynowymi procesami. 

• Wsparcie Facebooka – Pomimo, że React Native jest otwartoźródłowy, Facebook wciąż jest aktywnie zaangażowany w jego rozwój.

Jakie wady posiada React Native?

Pomimo cech natywności React Native, nadal końcowa aplikacja nie będzie w stu procentach odzwierciedlać aplikacji natywnej. Zarówno interfejs użytkownika jak i wydajność nie będą takie same, choć zbliżone. 

Jedną z głównych wad React Native jest jednak konieczność wyboru pakietu nawigacyjnego- jest to zarówno wada jak i zaleta. Gdy programista tworzy nowy projekt, musi zdecydować, którego pakietu nawigacyjnego,  a także którego globalnego zarządzania stanem, użyć.

Zrozumienie niuansów każdego rozwiązania i ostatecznie podjęcie decyzji o wyborze najlepszych do wykorzystania w projekcie może zająć dużo czasu.

Jakie są zasadnicze różnice pomiędzy technologią Flutter i React Native?

Wieloplatformowy charakter zarówno React Native, jak i Flutter skraca czas wprowadzenia produktu na rynek, w porównaniu z aplikacjami natywnymi. Dodatkowo dostarczone biblioteki i gotowe do użycia komponenty, sprawiają, że korzystanie z nich podczas tworzenia aplikacji jest bardziej wydajne.

Flutter i React Native zapewniają nie tylko szybki rozwój, ale mogą także przyczynić się do znacznej obniżki kosztów projektu. 

Warto podkreślić rosnącą popularność technologii Flutter – Od lutego 2020 r. liczba użytkowników szukających Fluttera w Google przekroczyła liczbę React Native. Ten trend jest oznaką potencjału przyszłego wzrostu i dystrybucji na rynku.

Która zatem technologia będzie najlepszym wyborem dla Twojej aplikacji?

Wybór odpowiedniej technologii kryje się w odpowiedziach na kilka zadanych sobie pytań:

Jaka jest specyfika Twojego projektu? Czy Twój zespół zna język programowania Dart, czy może biegle posługuje się JavaScriptem? Czy chcesz zbudować UI swojej aplikacji przy użyciu natywnych komponentów interfejsu użytkownika, czy też stworzyć UI dostosowany do marki? Gdy priorytetem Twojego projektu jest stworzenie aplikacji, która będzie kładła szczególny nacisk na UX, UI i wydajność, Flutter będzie najlepszym wyborem. Natomiast jeśli istotne jest szybkie zbudowanie aplikacji z niezbyt zaawansowanym flow z wykorzystaniem gotowych komponentów, wówczas najlepszym wyborem będzie React Native.

Poniżej zamieszczamy naszą ocenę Fluttera i ReactNative pod kątem kilku wybranych cech.

Nasze zestawienie pokazuje, że Flutter jest zdecydowanie lepszy pod względem wydajności, kompatybilności i funkcji aplikacji, a także kosztów deweloperskich i dalszych trendów rynkowych. Jednakże React Native jest wyraźnie lepszy, jeśli chodzi o znajdowanie programistów – z racji obecnie większej popularności języka JavaScript. Dostępność wykwalifikowanych developerów bezpośrednio wpływa na czas wprowadzenia na rynek. Dla wielu firm jest to niezbędne przy wyborze odpowiedniej technologii dla aplikacji.

W naszym portfolio mamy wiele realizacji aplikacji wykonanych w technologii Flutter. Aplikacje istnieją na rynku od dłuższego czasu i zbierają pozytywne oceny. Wśród nich znajdują się m.in: Stokrotka, Bricomarche, Bonito, mojeINFOPOLE, Sizeer, FiTKiddo. Z perspektywy czasu widzimy, że dokonany przez nas wybór Fluttera, jako wiodącej platformy mobilnej, był odpowiedni – biorąc pod uwagę dojrzałość technologii i stale poszerzającą się społeczność. 

Jeśli nadal masz problem z doborem technologii lub szukasz programistów – zgłoś się do nas, a z przyjemnością pomożemy doprowadzić Twój projekt do sukcesu!

1 https://www.pewresearch.org/internet/fact-sheet/mobile/

2 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/

3 https://www.statista.com/chart/13139/estimated-worldwide-mobile-e-commerce-sales/

4 https://www.blog.santanderconsumer.pl/blisko-ciebie/jak-polacy-kupuja-w-e-commerce-sprawdzamy-w-najnowszym-raporcie,1,146.html

5 https://trends.google.com/trends/explore?date=2019-01-01%202020-09-21&q=react%20native,%2Fg%2F11f03_rzbg